Web Design News & Link-Tipps – Nr. 33
Von: Jonas Unsere Themen im August: In & Out bei Google, CSS-Versionen, verbesserte WordPress-Lernplattform, aussagefähige Alt-Texte für Bilder, Baseline Support für CSS-Features und der Erhalt der Browser-Vielfalt.
Umfrage unter Devs – Stack Overflow Survey 2024
Die Ergebnisse der jährlichen Umfrage von Stack Overflow liegen vor – diesmal mit über 65.000 Teilnehmern. Interessant fanden wir u. a. die verwendeten Technologien, Frameworks und AI-Integrationen, sowie auffällige Entwicklungen hinsichtlich »Arbeit im Büro« (nimmt weiter zu) und Gehältern (nehmen fast überall spürbar ab).
Diskussion zu CSS4, CSS5, CSS6 …
Es ist keine Neuigkeit, dass es nach CSS3 aus dem Jahr 2009 kein CSS4 und CSS5 geben wird. Grund ist u. a. die Weiterentwicklung der Sprache in einzelnen Modulen mit Leveln. Dennoch ist die Diskussion dazu erneut aufgeflammt – einerseits, da sich CSS in den letzten Jahren rasant weiterentwickelt hat. Anderseits, da der seinerzeit kritisierte Marketing-Aspekt von CSS3 aus heutiger Sicht Vorteile für CSS4 und CSS5 bietet. Denkbar ist, dass CSS4 für alle neuen Features zwischen 2013 – 2018 und CSS5 für alle Features zwischen 2019 – 2024 verwendet wird. Wir können der Argumentation durchaus folgen.
Google beendet URL-Shortener
Es war lange angekündigt, nun hat Google den URL-Shortener-Dienst goo.gl geschlossen. Somit sind alle gekürzten URLs nicht mehr erreichbar – was wohl 4.6 Milliarden URLs betrifft. Es könnte Sinn machen, die eigene Seite dahingehend zu crawlen …
Google unterstützt weiter Cookies von Drittanbietern
Offenbar als Zugeständnis an die Werbeindustrie wurde das für 2024 geplante Aus von Drittanbieter-Cookies im Chrome-Browser von Google abgesagt. Bis auf Weiteres wird das datenschutzfreundliche Konzept »Privacy Sandbox« in Chrome mit Cookies von Drittanbietern koexistieren. Als Reaktion auf diese Kehrtwende veröffentlichte das W3C ein Statement: »Third-party cookies have got to go«
Web Performance Guide
Auf SpeedCurve.com wurde eine Artikelserie zum Thema Web Performance veröffentlicht. Angefangen bei der Planung mit Performance Budgets über Core Web Vitals & Co. bis hin zur Auswertung finden sich sehr interessante Artikel.
Formulare <form> ohne Accessible Name sind keine Landmarks
Die folgende Info von Stefan Judis hat uns überrascht. Sofern Formulare keinen Accessible Name zugewiesen bekommen, werden sie nicht als Formular-Landmark erkannt. Was kann getan werden? Es könnte mit aria-labelledby die sichtbare Überschrift referenziert werden.
Verschiedene Arten des Browser-Zooms
Web-Inhalte müssen vergrößert werden können und wir dürfen mit Design und Technologie nicht gegensteuern. Doch für die beste UX und a11y sollten wir verstehen, welche Formen des Zooms existieren. Sehr erfreulich, dass dazu ein Artikel veröffentlicht wurde, der Zoom per Tastatur, Skalierung und Veränderung der Schriftgröße gegenüberstellt und einordnet.
Grid und Flex mit PenPot
Wir hatten beim letzten großen Figma-Update auf eine Grid-Integration gehofft und wurden enttäuscht. Andere Player wie PenPot sind dort schon deutlich weiter. Daher ein Hinweis auf ein PenPot-Tutorial, in dem erklärt wird, wie visuell Flex- und Grid-Layouts erstellt werden können. Sehr sinnvoll auch für UX/UI Designer ohne Coding-Skills, da PenPot u. a. auch den vollständigen HTML/CSS-Code exportieren kann.
Mindestgrößen für barrierefreie, interaktive Elemente
Eric Bailey erklärt die Mindestanforderungen der WCAG für interaktive Elemente hinsichtlich ihrer Größe. Die Erfolgskriterien 2.5.8 (AA) und 2.5.5 (AAA) beschreiben grundlegende und fortgeschrittene Anforderungen. Wir haben noch weitere Anforderungen im Kontext von Touch First zusammengefasst.
Besser nachmachen
Der ausführliche Artikel von Matthew Ström untersucht, wie Kopieren im Design als wesentlicher Prozess zur Innovation und Kreativität beiträgt. Die Quintessenz: Kopieren ist nicht nur erlaubt, sondern notwendig, um neue Ideen zu entwickeln und den kreativen Fortschritt voranzutreiben.
Redesign der Lernplattform für WordPress
Beim fortlaufenden Redesign von WordPress.org folgte nun die Lernplattform, die als Hub mit Kursen deutlich ausgebaut wird. Mit interaktiven und praktischen Kursen können die Grundlagen von WordPress erlernt und die Lernkurve für Einsteiger deutlich gesenkt werden.
Bereits neu gestaltet ist der WordPress Showcase, der verschiedene Seiten zeigt, die mit WordPress umgesetzt wurden. Eine gute Quelle zur Inspirationsfindung und um zu sehen, dass WordPress-Seiten keineswegs »immer gleich« aussehen.
CSS print page styling
Eine gute Zusammenfassung, was beim Erstellen einer Print-CSS so machbar ist und wie es eingesetzt wird. Besonders interessant die Pseudoklasse :first zum Erstellen von Deckblättern und die Angabe zur Ausrichtung und zum Format der Seiten (size: A4 landscape). Wir selbst haben zusammenfasst, wir CSS Print Styles zum Erzeugen von PDFs genutzt werden können.
Roadmap für WooCommerce 2024 und darüber hinaus
WooCommerce hat seine Roadmap für 2024 und die kommenden Jahre vorgestellt. Die Roadmap bietet einen Einblick in die strategischen Prioritäten und geplanten Entwicklungen der Plattform. Der Fokus liegt u. a. auf:
- Skalierbarkeit und Leistung, um auch große Online-Shops effizient und zuverlässig betreiben zu können.
- Verbesserung der Entwicklererfahrung: Neue Tools und APIs sollen es Entwicklern erleichtern, Erweiterungen und Anpassungen vorzunehmen.
- Erweiterte Funktionen für Händler: Neue Funktionen und Integrationen werden speziell auf die Bedürfnisse von Händlern zugeschnitten, um ihre Geschäftsprozesse zu verbessern.
Universeller Browser-Support für @property
Die @property-Regel wird jetzt von allen modernen Browsern vollständig unterstützt. Die Funktion ermöglicht bessere Kontrolle und Flexibilität für benutzerdefinierte CSS-Eigenschaften (CSS-Variablen). Stephanie Eckles erklärt, wann und warum herkömmliche Fallback-Werte versagen können und wie @property-Funktionen es uns ermöglichen, robustere Definitionen für Custom Properties zu schreiben.
Vertikales Zentrieren in CSS ohne Umwege
align-content funktioniert jetzt in allen gängigen Browsern im Standardlayout für Elemente. Das bedeutet, dass vertikales Zentrieren nun ohne Umwege mit nur einer CSS-Eigenschaft möglich ist.
Invoker Commands in HTML
Das noch experimentelle Invoker-Commands-Feature will eine moderne Alternative zu in Verruf geratenem Inline-JavaScript anbieten. In seinem Beitrag erklärt Brecht De Ruyte den aktuellen Stand der Entwicklung und wie im HTML-Markup das Auslöser- und das Zielobjekt miteinander verknüpft werden sollen.
Alternativen Text für Bilder verfassen
Bilder werden in Dokumenten, Websites, Newslettern und sozialen Medien häufig ohne Alternativtext (Alt-Text) verwendet. Warum dies schlechte Praxis ist und wie man guten Alt-Text schreibt, erklärt dieser Beitrag im Blog der britischen Regierungsbehörde. Ein weiterer Beitrag von Kristin Briney zeigt, wie man Alt-Text für wissenschaftliche Grafiken schreibt.
Für die Browser-Vielfalt
Matthias Endler will sich nicht damit abfinden, dass sich ganze Gesellschaften aus Faulheit in monokulturelle Abhängigkeiten von Tech-Giganten begeben. Er ruft zu Browser-Vielfalt auf und wirbt für die Nutzung von Firefox: Offene Standards und Datenschutz sind wichtiger als ein paar Millisekunden Ladezeit!
Geoff Graham ist zurück bei CSS-Tricks
Das DigitalOcean Leadership Team wurde ausgetauscht und die abgesägten Community-Äste werden wieder angeklebt – Geoff Graham ist zurück bei CSS-Tricks und berichtet in seinem aktuellen Artikel zum aktuellen Stand bei CSS-Tricks und der neuen Kategorisierung.
Barrierefreiheit durch Design bei StackOverflow
Dan Cormier gibt einen Einblick hinter die Kulissen von Stack Overflow, wie das Unternehmen ein barrierefreies System etabliert hat und welche Arbeit weiterhin geleistet wird, um Stack Overflow und weitere Produkte so inklusiv und zugänglich wie möglich zu gestalten.
Animationen von display: none jetzt mit Baseline Support
@starting-style und transition-behavior: allow-discrete sind mit der Veröffentlichung von Firefox 129 als »Baseline Newly Available« verfügbar. Ab sofort können damit Eintrittsanimationseffekte auch für Elemente erstellt werden, die von display: none aus animieren. Una Kravets fasst das Vorgehen in ihrem Artikel zusammen.
Die Verwendung relativer Farben mit der CSS color-function
Mit Firefox 128 hat die relative Farb-Syntax Baseline 2024 Support erreicht. Chris Coyier erklärt in seinem Blogbeitrag auf Frontend Masters die Syntax und welche praktischen Möglichkeiten es in der Verwendung gibt.
Neue Performance Features in den Chrome DevTools
Umar Hansa liefert eine detaillierte Einführung in die neuen Funktionen und gibt hilfreiche Hinweise, wie mit den neuen Funktionen Probleme in den Core Web Vitals angegangen werden können. Die neuen Features sind aktuell noch als experimentell geflagt und müssen somit manuell in den Browsereinstellungen aktiviert werden.
CSS-Grid ist nicht langsamer als Flexbox
Ben Frain hat sich die Mühe gemacht, eine kleine CSS-Demo zu bauen und mit einem Script die Paint-Geschwindigkeit zu messen. Einmal für die Umsetzung mit CSS-Grid und im Vergleich dazu mit Flexbox. Wie er genau vorgegangen ist und und das Ergebnis in Zahlen findet ihr in seinem Artikel.
HTML-Erklärungen mit Pfiff
Heydon Pickering hat gewohnt meinungsstark und humorvoll eine Erklär-Serie zu HTML-Elementen begonnen. anchor, abbr, address, area und article sind schon online. Wie nicht anders zu erwarten, stehen semantisches HTML und die damit verbundene Barrierefreiheit im Mittelpunkt.
Die Gestalt von Sentient Design
Die Vordenker von BigMedium wollen »Sentient Design«, empfindungsfähiges Design, als Bezeichnung für die Gestaltung von KI-unterstützten, nutzungsadaptiven User Interfaces etablieren. In diesem Artikel zeigen sie, wie eine Art Karte der in Frage kommenden Einsatzgebiete aussehen kann.
Tools
- Chuck Icons ist ein kostenloses Icon Set für Figma mit rund 600 konsistenten Icons zu verschiedenen relevanten Themen, das regelmäßige Updates erhält.
- handyarrows.com ist ein Set aus handgezeichneten Pfeilen und Doodles, die als SVG exportiert oder direkt von der Website kopiert werden können.
- svg.wtf ist ein Tool zum Erstellen von SVGs, mit dem man simultan den Code dahinter sieht.
- Perfect Bug Report ist eine einfache Checkliste mit den wichtigsten Punkten, die ihr in eure Fehlerberichte aufnehmen solltet. Speichert euch die Seite als Lesezeichen, eure Entwickler werden euch lieben.
Zum Schluss
Urlbox haben mit ihrer API eine Million Screenshots von Website-Startseiten erstellt und diese in einer Website wie eine Karte navigierbar gemacht. Natürlich ein Marketing-Stunt, aber ein cooler, mit dem man schon etwas Zeit verbringen kann. P
