Web Design News & Link-Tipps – Nr. 26

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

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!

Geschrieben von kulturbanause Team

Benutzerbild

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →