Web Design News & Link-Tipps – Nr. 24
Von der Veröffentlichung der neuen WordPress-Version über Diskussionen zum derzeitigen Verständnis von Webdesign bis hin zu neuen Funktionen in beliebten Webtools – unsere Zusammenstellung ist umfangreich ausgefallen.

WordPress 6.4 »Shirley« erschienen
Am 07.11.2023 wurde die neue WordPress Version 6.4 veröffentlicht. In diesem Artikel gibt es eine Übersicht über alle Neuerungen, unter anderem:
Theme »Twenty Twenty-Four«, Verbesserung in der Content-Erstellung im Editor, Verbesserung der Command Palette, Kategorisierung der Pattern, Background-Bilder für Gruppen-Blöcke, Native Lightbox, Benennung von Gruppen-Blöcken, Bildvorschau in Listen, Export von Pattern in JSON, Einführung von Block Hooks.
Die negativen Seiten von »Mobile First«
Mobile First kann mit Sicherheit als gängige Praxis im Webdesign bezeichnet werden. Allerdings legen wir großen Wert darauf, dass Mobile First nicht bedeutet, dass sich nur um die mobile Ansicht gekümmert wird. Der Erfolg von RWD besteht auch darin, alle Aspekte des Designs – von klein bis groß und von Startseite bis Impressum – im Blick zu haben. Warum es kontraproduktiv ist, wenn der Mobile First-Ansatz übertrieben wird, hat die Nielsen Norman Group in einem Artikel erforscht.
PHP 8.3 kommt; EOL 8.0
Für die Programmiersprache PHP steht Ende November mit Version 8.3 ein neues Release an, das u. a. neue Funktionen und Methoden beinhaltet. Zeitgleich erreicht PHP 8.0 den End-Of-Life-Status (EOL). Die Versionen 8.1 und 8.2 werden fortan nicht mehr aktiv unterstützt.
Warum ist Webdesign in 2023 so kaputt?
Heather Buchel identifiziert in Ihrem Artikel die Aufspaltung der Webdesign-Tätigkeit in die zwei Felder Front-End Development und UX/UI-Design als eines der Kernprobleme von schlechtem Webdesign. Zu oft gibt es große Lücken im Verständnis für die technischen Details der Webgestaltung.
In seinem Talk »Do we have to reinvent the wheel?« auf der border:none kommt Vasilis van Gemert zu einer ähnlichen, teils deprimierenden Ansicht.
0 der 100 weltweit führenden Websites verwenden valides HTML
Eine kurze, zum wiederholten Mal von Jens Oliver Meiert durchgeführte Analyse zeigt, dass keine der 100 meistbesuchten Websites weltweit valides HTML verwendet, also HTML in voller Übereinstimmung mit der Spezifikation.
Web Components überleben dein JavaScript Framework
In einem ausführlichen Meinungsartikel liefert Jake Lazaroff gute Gründe, warum Web Components, als Set von W3C-Standards für die Erstellung wiederverwendbarer HTML-Elemente, jedes JavaScript-Framework überdauern werden.
CSS content-visibility zur Verbesserung der Performance
Rob O’Leary erläutert die Vorteile und praktischen Anwendungsfälle der CSS-Eigenschaft »content-visibility« zur Optimierung der Rendering-Leistung und erklärt, wann diese Eigenschaft dennoch möglicherweise nicht die beste Wahl ist.
Alles an SEO ist »unausstehlich«
Laut Chris Coyier ist alles, was über SEO gesagt und geschrieben wird, sowie die Industrie, die sich darum gebildet hat, »obnoxious«, also widerlich. Dabei könnte es ganz einfach sein, wenn einfache Grundregeln Beachtung fänden. Wir teilen seine Ansicht, denn was er schreibt, funktioniert so auch bei kulturbanause. Übrigens ist Online-Marketing aus ähnlichen Gründen bewusst nicht Teil unseres zentralen Leistungsangebots.
Einführung in Nachhaltigkeit im Web
In »An Introduction to Web Sustainability« erklärt Michelle Barker, was Designer und Entwickler tun können, um ein nachhaltigeres Internet zu schaffen. Sie beschreibt Umweltauswirkungen von Webtechnologien und zeigt, wie man umweltfreundlichere Websites erstellen kann. Wir haben selbst bereits einen kleinen Übersichts-Artikel dazu veröffentlicht, in dem wir u. a. auf den Unterschied zwischen ökologisch und ökonomisch nachhaltigem Webdesign eingehen.
Wissensdatenbank zu Themen rund um UX & UI
»UX Hints« ist eine von Paul Capcan betreute Website, die eine Sammlung an Informationen für und rund um die Bereiche UX und UI enthält.
Performance-Optimierung bei der Verwendung von ACF
Auf WP Fieldwork gibt es einige nützliche Tipps, um beim Verwenden von ACF die Performance der Seite zu verbessern.
Neuer KI-Assistent für WordPress-Plugin »Jetpack«
Der neue Assistent »Jetpack AI« schreibt KI-generierten Content direkt im Editor. Die Inhalte können je nach Textanfrage (Prompt) in unterschiedlichen Formen wie bspw. Text, Listen oder Tabellen erstellt werden.
Neue Lighthouse-Version angekündigt
In der Lighthouse-Version v11.2 ist u. a. die Auswertung nun per Mouse Over in Segmente unterteilt, die Aufschluss darüber geben, welche Kriterien welchen Anteil am Ergebnis haben.
Google Material 3 als Web-Version veröffentlicht
Die aktuelle Version von Material Design lag bisher in Framework-spezifischen Technologien wie Angular und Flutter vor. Jetzt wurde mit Material Design Web eine Framework-agnostische Variante veröffentlicht.
Case sensitive CSS-Attribut-Selektoren mit s und i
Ein CSS-Attributselektor kann case-sensitiv bzw. nicht-sensitiv formuliert werden, indem am Ende des Selektors ein i für »insensitive« oder ein s für »sensitive« ergänzt wird. Sensitive Selektoren berücksichtigen Groß- und Kleinschreibung, wohin insensitive Selektoren dies ignorieren.
Umfrage zur Nutzung von UX Tools gestartet
Das Jahresende ist auch immer die Zeit der Rückblicke und Umfragen. Die UX Tooling-Umfrage fragt ab, wie Design-Teams arbeiten und welche Design-Tools für verschiedene Abschnitte im Workflow genutzt werden. Über die Ergebnisse werden wir berichten.
Gestaltungsgrundlagen der Heraldik auf das Web übertragen
Der Heraldik (Gestaltung von Wappen etc.) liegen seit dem Mittelalter feste gestalterische Regeln zum Einsatz von Farbe zugrunde. Der Artikel von Theresa O’Connor greift diese sehr interessanten Gestaltungsgrundlagen auf und übertragt den Einsatz auf die Gestaltung von Links im Webdesign. Evtl. ist das etwas konstruiert, aber interessant sind Einblicke in die Heraldik allemal.
Mögliche a11y-Probleme bei Font-Scaling mit clamp()
Es ist mittlerweile gängige Praxis, die Schriften einer Website stufenlos zu skalieren. Genau diese Technik kann unter bestimmten Bedingungen zu Problemen in der Barrierefreiheit führen, da Schriften nicht mehr auf 200 % vergrößert werden können. Beim Smashing Magazine wird das Problem beschrieben und Lösungsansätze aufgezeigt.
Weitere AI-Features für Figjam
Figjam, das digitale Whiteboard-Tool von Figma, hat nach JamBot weitere AI-Funktionen erhalten. Es können nun – ähnlich wie bei ChatGPT – Texteingaben genutzt werden, um z. B. Flowcharts zu erstellen, Inhalte zusammenzufassen oder Brainstorming zu betreiben.
WooCommerce.com zu Woo.com umbenannt, Plattform-Änderungen angekündigt
Die Domain von WooCommerce wurde auf woo.com geändert und leitet damit einen Strategiewechsel bei WooCommerce ein. Es wird erwartet, dass sich das System – vergleichbar mit Shopify – deutlich in Richtung Plattform-Lösung entwickelt – mit allen Vor- und Nachteilen. Ein erstes Anzeichen ist der bereits verfügbare Payment-Provider WooPay sowie das ebenfalls bereits verfügbare WooExpress.
Select jetzt mit Trennlinien
Das Select-Element erhält ab Chrome 119 eine praktische Funktion, die auch in Safari 17 eingeführt wurde. Jetzt können <hr>
-Elemente in die Liste der Optionen eingefügt werden. Sie werden als Trennzeichen angezeigt, für eine bessere visuelle Unterteilung.
Warum haben wir trotz vieler neuer Tools immer weniger Zeit für Design?
Matic Pelcl legt in seinem Artikel so anschaulich wie überzeugend dar, dass wir als Webdesigner unseren Schwerpunkt von der Verwaltung und der Festlegung von Regeln auf die Förderung von Kreativität und Innovation verlagern müssen. Ein Artikel zum Innehalten und Nachdenken über unsere Rolle als Designer.
CSS Pseudo-Selector :has() kommt endlich auch in Firefox an
Da :has()
bislang in keiner Produktivversion von Firefox verfügbar ist, haben wir den Selektor nur in Ausnahmefällen im Sinne von Progressive Enhancement verwendet. Firefox 121 ist für den 19.12.2023 angekündigt und wird einiges erleichtern.
Responsive Video kommt als HTML-Standard zurück
Das <video>
-Element konnte bis 2014 ähnlich wie das <picture>
-Element verwendet und die Videoquelle anhand eines Mediaqueries bestimmt werden. Aufgrund zu geringer Nutzung wurde das Element als HTML-Standard entfernt, doch jetzt kommt es wieder. Safari hat die Funktion niemals ausgebaut und Firefox bringt sie in Version 120 am 21.11.2023 zurück. Chrome hat am 04.10.2023 angefangen, an einem Patch zu arbeiten.
CSS text-wrap: pretty
seit Chrome 117 verfügbar
Typografische Witwen und Waisen sind einzelne Wörter, die allein am Ende eines Absatzes oder Textblocks stehen. Ab Chrome 117 können Waisen mit einer Zeile CSS vermieden werden.
Molly Holzschlag gestorben
Eine traurige Nachricht: Schon Anfang September ist die nahezu vergessene »gute Fee des Web« und Mitiniatorin des »Web Standards Project« gestorben. Weggefährten wie Eric Meyer und John Allsop zollen ihr mehr als angemessene Referenz.
»Overlays« für Barrierefreiheit
So meinungsstark wie unterhaltsam zeigt Heydon Pickering in einem Video, warum sogenannte »Accessibility Overlays« Probleme der Barrierefreiheit nicht lösen können, insbesondere wenn diese Tools Drittanbieter-Code auf nicht barrierefreie Webseiten anwenden. Eine Einschätzung, die seit längerem bspw. die Initiative »Overlay Fact Sheet«, der BIK BITV-Test und die Überwachungsstellen des Bundes und der Länder für die Barrierefreiheit von Informationstechnik teilen.
Tools, Tools, Tools …
- Das Figma-Plugin »SVG .class export« ermöglicht es, die SVG Klassen und IDs auf Grundlage der Ebenen-Benennung in Figma festzulegen.
- Excalidraw ist ein kollaboratives, virtuelles Whiteboard mit verschiedenen integrierten Bibliotheken zum Visualisieren von Grafiken und Diagrammen im Scribble Style.
- EpicEasing ist ein Tool zum Visualisieren von CSS Animationen, die mit voreingestellten Optionen oder manuell erstellt werden können.
- Vectorpea (Beta) ist ein kostenloses Vektor-Grafikprogramm im Browser. Es ist kompatibel mit den Formaten großer Anbieter – z.B. mit Illustrator.
- Buttons.cool ist eine kuratierte Liste zahlreicher Buttons. Es kann der CSS-Code verwendet werden oder sie dienen als Inspiration.
Noch mehr?
Zum Schluss bieten wir euch die Möglichkeit zum professionellen Prokrastinieren mit dem HTML Tags Memory Test: Wie viele HTML-Elemente habt ihr in petto? Eher zur Auffrischung der historischen Internet-Kenntnisse laden die »Internet Artefacts« ein: Wer verschickte 1982 die erste SPAM-E-Mail oder welcher Song war die erste MP3-Datei? Viel Spaß!