Web Design News & Link-Tipps – Nr. 26
Von: Jonas Auch zum Jahresbeginn bilden CSS und UX/UI Schwerpunkte unserer Zusammenstellung, Figma macht Schlagzeilen und Firefox Sorgen. Eine besonders ergiebige Quelle stellte diesmal der Adventskalender von HTMHELL dar, Kompliment für die Qualität der Beiträge!
Sizes = Auto, mit Höhe und Breite
In Chrome wird das experimentelle Feature »sizes auto« unter der Flag bereitgestellt. Es macht die Angabe einzelner Größen im sizes-Attribut überflüssig. Eine großartige Änderung, die – sobald in den Browsern verfügbar – das Thema Responsive Images deutlich vereinfachen wird. Eric Portis erklärt, wie das funktioniert und warum dafür die Angabe von Höhe und Breite des Bildes gebraucht wird.
Neue WCAG 2.2-Kriterien verstehen
Der Beitrag auf getstark.co veranschaulicht die neun neuen Kriterien, die im Versionssprung von 2.1 auf 2.2 den WCAG-Richtlinien hinzugefügt wurden.
Full Stack-Workflow im Wandel
Für die Website-Entwicklung fließt ein nicht zu vernachlässigender Aufwand in die Anpassung des eigenen Workflows und der beinhalteten Tools. Das Abwägen zwischen Alltagstauglichkeit und »Spielen mit den coolen Kids« bereitet »Freude und Schmerz«.
Figma-Übernahme durch Adobe gestoppt
Die geplante Übernahme von Figma durch Adobe wurde abgesagt. Nachdem verschiedene Regulierungsbehörden Bedenken hinsichtlich einer Monopolstellung geäußert hatten, schien es wohl zu unwahrscheinlich, dass der Deal zugelassen wird.
Figmas DevMode verlässt Beta und wird kostenpflichtig
Ab 31. Januar 2024 wird für den DevMode eine eigene Lizenz in Höhe von 12 Dollar pro Monat benötigt. Anders als seinerzeit angekündigt, führt Figma somit bedauerlicherweise keine neue Rolle zwischen der Starter- und der Professional-Lizenz ein. Wer nicht bezahlen möchte, kann in der »View-Only«-Ansicht nach wie vor grundlegende Informationen für die Programmierung ablesen.
Bessere UX durch HTML
»Semantics and shit« sind teils viel zu theoretische Konstrukte. Die vorhandenen UX-Fähigkeiten interaktiver HTML-Elemente erleichtern das Verständnis ungemein. Dies ist wiederum Voraussetzung für das Interesse an einer semantischen Umsetzung. Dieser Beitrag erschien auch im HTMHell-Adventskalender 2023, in dem diverse weitere Perlen zu finden sind, wie etwa ein Template für Accessiblity-Richtlinien.
Baseline in CanIUse integriert
Baseline – ein Hilfsmittel, um den Praxistauglichkeit von Code zu beurteilen – wurde nun in CanIUse implementiert. Die Badges entsprechen den in den MDN Web Docs und bieten einen schnellen Überblick über die Unterstützung und Verbreitung von Features. Details und Kritik an Baseline gibt es ebenfalls.
Für Vieles kein Javascript mehr nötig
Über die Jahre haben sowohl die Verfasser von Spezifikationen als auch die Browserhersteller viele Funktionen von JavaScript auf CSS und HTML übertragen. In You Don’t Need JavaScript for That erklärt Killian Valkhov „»The rule of least power« und zeigt ein paar typische Anwendungsfälle, für die früher JS benötigt wurde, heute aber nicht mehr (Türchen 2 des HTMHELL-Adventskalenders).
CSS Media Query für aktives Scripting
Seit Version 120 (Dezember 2023) unterstützt auch der Chrome-Browser Media Queries für Scripting. Damit kann jetzt in allen relevanten Browsern in CSS geprüft werden, ob JavaScript aktiviert ist. Umständliche Workarounds, wie bspw. das Setzen einer zusätzlichen Klasse auf das body-Element, gehören damit der Vergangenheit an.
Grundlagen in Sachen Web-Performance
Ein weiterer Beitrag aus dem HTMHELL-Adventskalender gibt einen soliden Überblick darüber, wie sich die Performance einer Website optimieren lässt. Strategien, Tools und Tipps werden ausführlich erklärt, zusätzliche Quellen bieten die Grundlage für weitere Recherchen.
Hängende Interpunktion mit CSS
Hängende Interpunktion ist eine Technik in der Typografie, in der Satzzeichen außerhalb des Spaltenrandes platziert werden, um eine ruhige Satzkante zu erzeugen. In Safari steht die CSS-Eigenschaft hanging-punctuation genau dafür zur Verfügung. Chris Coyier beschreibt in seinem Artikel die Verwendung und liefert einen eleganten Fallback für Browser, die das Feature nicht unterstützen.
CSS-Pseudoklassen für bessere User Experience
Die CSS-Pseudoklassen :user-valid und :user-invalid sind in ihrem Verhalten sehr ähnlich zu :valid und :invalid, die es schon lange gibt. Der Vorteil von :user-valid und :user-invalid besteht darin, dass sie erst dann greifen, wenn ein User mit dem Eingabefeld interagiert hat.
Aufruf zur Entwicklung eines globalen Design Systems
Die Idee ist nicht neu, nun ruft Brad Frost (»Atomic Design«-Erfinder) im Gefolge von neuen HTML-Elementen und HTML Web Components als auch in Abgrenzung zu [Insert your JS-Framework here] zur Entwicklung eines globalen Design Systems auf, bspw. unter der Verantwortung des W3C. Warum das Rad jedes Mal neu erfinden? Diese Frage stellen wir uns schon seit längerem.
InVision wird nicht weiterentwickelt
Vor einigen Jahren – als Sketch noch Platzhirsch war und von Figma und XD keine Rede – war InVision das Maß aller Dinge, um Prototypen aus statischen Designs zu erzeugen und im Browser zu präsentieren. Diese Funktionen sind längst Bestandteil heutiger Design-Tools und InVision hat angekündigt, die Dienste einzustellen. Das InVision-Tool Freehand wurde bereits im Herbst von Miro übernommen.
Ergebnisse der Umfrage zur Nutzung von Design Tools
Bereits Ende vergangenen Jahres wurden die Ergebnisse der UX Tools Survey veröffentlicht. In den für uns relevanten Bereichen ist Figma mit deutlichem Abstand Marktführer – wenig überraschend.
Browser–Diversität in Gefahr?
Firefox ist ein toller Browser mit gesellschaftlich wichtiger Bedeutung, doch leider sank die Marktabdeckung in den vergangenen Jahren stetig, mit wenig Aussicht, dass sich das ändert. Bei der Nutzung von amtlichen Webseiten in den U.S.A liegt Firefox bei katastrophalen 2,2 %. Das ist kritisch, da die Guidelines verschiedener Plattformen und Design Systeme – u. a. der U.S.-Regierung – bei unter 2 % Markabdeckung keinen Browser-Support mehr voraussetzen.
Tools
- Framehop ist ein kostenloses Figma-Plugin, mit dem man Komponenten und Frames bookmarken kann.
- URL-encoder for SVG ist ein immer wieder hilfreiches Tool, um aus SVG-Grafiken den Code für CSS background-images zu erzeugen.
Zum Schluss
Mit einem Testing unserer Hexwert-Kenntnisse vergewissern wir uns noch einmal unserer professionellen Form, bevor wir beim Gärtnern im Browser mit Klingklang vollends der Entspannung anheimfallen. Viel Spaß dabei!
