Web Design News & Link-Tipps – Nr. 10
Von kulturbanause Team Zum Ende des Sommers haben wir wieder einige interessante Nachrichten und Informationen für euch gesammelt. Die Reihenfolge entspricht wie üblich unserem internen Meeting. Die Top-News zu Figma/Adobe haben wir nach oben gesetzt.
Adobe kauft Figma
Die offiziellen Websites von Adobe und Figma bestätigen das Vorhaben in entsprechenden Blog-Posts. Fans beider Lager sind teils in Schockstarre verfallen – galt Figma doch lange als Bollwerk gegen den für viele aus der Zeit gefallenen Großkonzern Adobe. Zahlreiche Memes zum Thema wurden veröffentlicht.
Auch wenn Figma laut Aussage beider Unternehmen unabhängig weiterentwickelt werden soll, wird der Einfluss von Adobe wahrscheinlich spürbar sein. Da Adobe vermutlich kein Interesse daran hat, zwei sehr vergleichbare Tools zu behalten, steht die Zukunft von XD womöglich in den Sternen. Im direkten Vergleich hat XD zunehmend den Anschluss verloren. Den etwas Älteren unter uns klingeln noch die Ohren, wenn sie sich an vergleichbare Situationen im Zusammenhang mit GoLive, Fireworks oder Muse erinnern. Wir sind gespannt, was die Konferenz Adobe Max im Oktober an Neuigkeiten und vielleicht weiteren Überraschungen dazu offenbart.
Wir selbst fühlen uns in unserer Grundphilosophie bestärkt, finale Design-Entscheidungen im Browser zu treffen. Das beste Design-Tool ist der Browser mit CSS. Ob nun in Sketch, Figma oder XD vorgearbeitet wurde, ist für uns sekundär. Tools und Frameworks kommen und gehen, Webstandards bleiben (und können nicht verkauft werden).
Farbe & Kontrast interaktiv erfahren
Mit »Color & Contrast« hat Nate Baldwin, u. a. Designer des Spectrum Design System von Adobe, eine sehr anschauliche Anlaufstelle zum umfangreichen Themengebiet der Farbtheorie mit zahlreichen interaktiven Beispielen erstellt.
Unbekanntes (?) UI-Element
In immer mehr Designs taucht ein (neues) noch nicht definitiv benanntes UI-Pattern auf: Eine Art Notification oberhalb der Haupt-Überschrift auf der Startseite. Die Twitter-Gemeinde sucht nach einem Namen, bisherige Vorschläge reichen von »Eyebrow« über »Content Alert« bis zum nüchternen »Banner«.
Überzogener Datenhunger
In-App-Browser von Social Media-Apps wie bspw. Instagram oder TikTok tracken das Surfverhalten sehr viel umfassender, als es den meisten Nutzenden bewusst ist. Felix Krause zeigt, wie das geschieht und was man dagegen tun kann. Techcrunch ist sein Beitrag zu TikTok einen eigenen Artikel wert.
Aber auch Tools wie MS Visual Studio Code schöpfen viel mehr Daten ab, als es unter Gesichtspunkten des Datenschutzes notwendig erscheint. Rob O’Leary untersucht, was dahinter steckt.
WPSeo an Yoast verkauft
Nach einigen Zwischenstationen wird das ehemals von Sergej Müller verantwortete Plugin »WPSeo« vom Mitbewerber Yoast gekauft. Informierte Quellen gehen von einer schnöden Marktbereinigung aus.
WebP als Standard für WordPress gestoppt
Nach Diskussion diverser Performance- und Nachhaltigkeitsprobleme ist die Einbindung des Grafikformats WebP als Standardformat für vom WordPress-Performance-Team vorerst angehalten worden.
WooCommerce ohne Customizer
Mit der kommenden Version 6.9 entfernt WooCommerce den Customizer aus dem WordPress-Backend, wenn ein Block-Theme genutzt wird. Als Hauptgrund wird eine mögliche Verwirrung in der Nutzung durch nebeneinander stehende Menü-Punkte genannt.
Cursor-Effekte aus den 90ern
Auf der Seite »90’s Cursor Effects« sind ein paar kuschlige Zeiger-Animationen versammelt, die Tim Holman modernisiert zur Verfügung stellt.
ACF PRO 6.0 RC 1 mit neuem UI und neuen Features
Der Release Candidate für die neue ACF Pro-Version enthält neben neuen Features wie Repeater Pagination und einer optimierten Registrierung für ACF-Blocks auch ein neues UI-Design für den Admin-Bereich. Augenblicklich ist dieses neue Design (noch) nicht im »normalen« Editor umgesetzt, insgesamt betrachten wir das verstärkte Branding auf Kosten eines konsistenten WordPress-UI jedoch skeptisch.
Durchbruch für Container Queries mit neuem Chrome
Version 105 des Google-Browsers bringt beachtliche neue Fähigkeiten mit sich: Neben der nativen CSS-Ansprache der Pseudoklasse »:modal« oder der Sanitizer API ist hier vor allen die Unterstützung von Container Queries und der CSS-Pseudoklasse »:has« zu nennen.
Damit hat dieses lange von CSS-Entwickelnden herbeigesehnte Feature eine relevante Verbreitung, die Auswirkungen werden als ähnlich folgenreich wie die Nutzung von Media Queries eingeschätzt. Die neuen Möglichkeiten zeigt bspw. diese Komponenten-Bibliothek auf »ishadeed.com«.
Redesign für weitere wordpress.org-Seiten
Nach der News-Seite sind auf wordpress.org Start- & Download-Seite im neuen Design ausgerollt worden. Das Design im Magazin-Look wirkt edel und wertig — weg vom »Billig«-Image?
Yoast SEO Premium mit Analyse für inklusive Sprache
Das SEO-Tool bekommt mit der Version 19.2 eine Sprach-Analyse-Funktion für inklusive Sprache. Diese ist aktuell mit rund 200 Begriffen in der Beta-Phase und nur für Englische Sprache verfügbar.
Design Systeme zeigen oft nicht die ganze Wahrheit
Trotz aller Absichtserklärungen, mit Design Systemen eine »Single Source of Truth« für Design- und Entwicklungsteams zu etablieren, vergrößern die Insellösungen mit unterschiedlichen Tools (UI Kit, Pattern Library etc.) die Lücken zwischen den Gewerken eher. Was vielleicht nicht anders sein kann, so schreibt Ethan Marcotte, Wortschöpfer des »Responsive Design«.
Moderne BEM-Alternativen
Seit rund einem Dutzend Jahren ist BEM eine bekannte CSS-Architektur, mit der vor allem eine möglichst niedrige CSS Spezifität und systematisch sinnvolle Benennungen ermöglicht werden sollen. Mit dem »Heraufdämmern einer neuen CSS-Ära« stellt Dave Rupert einige moderne Alternativen vor. Uns reicht eigentlich »GPC«.
Übersicht über UX-Gesetze
Die Nutzungserfahrung nicht nur auf Websites unterliegt einigen universellen Regeln. Eine überschaubare Zusammenstellung der wichtigsten UX-Gesetze mit sehr hilfreichen Beispielen ist auf »wp unboxed« erschienen. Wer mehr davon braucht, klickt sich auf die Website Laws of UX.
Wann »Infinite Scrolling« etwas taugt
Von NN/g, den UX-Stammvätern, gibt es diesmal einen wie immer sehr gut aufbereiteten Artikel zu den Vor- und Nachteilen des »Infinite Scrolling«. Vorweggenommenes Fazit: Sehr genau schauen, ob das Nutzungsprofil dafür geeignet ist.
E-Mail-Verifizierung für WooCommerce
Insbesondere beim Kaufvorgang möchte man sichergehen, dass keine fehlerhafte Mail-Adresse eingetragen wird, und deshalb ein Verifizierungsfeld in den Checkout einfügen. Wie das geht, zeigt der Beitrag »WooCommerce: Add “Confirm Email Address” Field @ Checkout«. Gegen Copy & Paste einer fehlerhaften Adresse schützt das allerdings nicht …
Best Practices für den Umgang mit Bildern
In diesem Repository von nucliweb werden pragmatische Lösungen für die Einbindung von Bildern in Webseiten gesammelt, welche Responsivität, Dateiformat und Performance beinhalten.
Mac VoiceOver auf einfache Weise testen
Inklusives Design für Webseiten erfährt einen immer höheren Stellenwert, wodurch das Testen mit assistiven Technologien wie Screenreadern immer bedeutender wird. Der Beitrag »Mac VoiceOver Testing the Simple Way« bietet einen Einstieg in das Testen mit einem bisher nicht oder zu selten genutzten Tool.
Barrierefreiheit mit Firefox testen
Mittlerweile ist Firefox eines der besten Tools zum Testen von Barrierefreiheit geworden. Der ausführliche Leitfaden des »A11y Project« zeigt, wie man ihn am besten nutzt.
Tools, Tools, Tools
- Mit Leonardo erstellt man barrierefreie Farbsysteme. Nicht ganz intuitiv, aber sehr hilfreich bspw. beim Facettieren von Farbkontrasten.
- Hello ist eine Suchmaschine für Entwickelnde in Beta, allemal ein Ausprobieren wert.
- Accessibility Insights for Web ist eine Browser-Erweiterung (Chrome, Edge) von Microsoft, die bspw. sehr anschaulich die Fokus-Reihenfolge (und damit verbundene Fehler) auf bestehenden Webseiten visualisiert.
Geschrieben von kulturbanause Team
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.