Web Design News & Link-Tipps – Nr. 25

Der Einfluss von AI verändert unsere Industrie immer grundlegender, u.a. dazu gibt es zum Jahresende weitere Umfragen. Meldungen zu Design, Frontend und WordPress runden unsere interessante Zusammenstellung ab.

Aktualisiert am 8. Dezember 2023

Automattic kauft Messaging-Dienst

Automattic hat das Firmenportfolio um einen Messaging-Dienst erweitert. Die Idee hinter dem Kauf von Texts ist laut Matt Mullenweg, damit ein dezentrales und quelloffenes Messaging-Netzwerk aufzubauen und die Menschen im Laufe der Zeit sanft zu offeneren Protokollen zu bewegen.

URLs einer Website können schön sein

Immer wieder werden wir gefragt, wie eine optimale URL aussehen sollte. Kurz gesagt: Es gilt ein Gleichgewicht zwischen Kürze und Klarheit zu finden.

Barrierefreiheit für Webdesigner

Barrierefreiheit sollte im Mittelpunkt des Designprozesses fürs Web stehen, denn dadurch wird das Nutzungserlebnis für alle besser. Die Website Understanding Accessibility möchte Designern vermitteln, wie Menschen mit (und ohne) Behinderungen mit Webinhalten interagieren, damit sie diese den Bedürfnissen entsprechend gestalten können.

CSS kann nativ verschachtelt werden

Lange haben wir uns für Verschachtelungen in CSS auf Präprozessoren wie Sass oder Less verlassen. Doch das kann CSS seit einiger Zeit auch nativ: CSS-Nesting wird seit diesem Jahr in allen wichtigen Browsern unterstützt. Der aktuelle Beitrag »CSS Nesting« erinnert daran und erklärt anhand verschiedener Anwendungsfälle, warum es damit einfacher wird, CSS zu schreiben.

Design System Database

Eine Sammlung von bekannten Design-Systemen mit Verlinkungen zu den entsprechenden Dokumentationen. Die Sammlung ist nach Komponenten und Themen gruppiert wie zum Beispiel Accessibility, Farb-Systeme, Figma, Typografie und vieles mehr.

Wie entwickelt sich der Flat-Design Trend?

Der Artikel beschäftigt sich mit der Entwicklung des Flat-Design-Trends und setzt sich mit der Frage auseinander, ob dieser Trend bald vorbei sein wird.

User Interface Typography – kostenloses, digitales Buch

Das digitale Buch behandelt ausführlich das Thema Typografie für User Interfaces, angefangen bei grundlegenden Dingen und Prinzipien bis hin zum Aufbau von Layouts und verschiedenen Designelementen.

Die Kluft zwischen Design und Technik

In seinem Artikel versucht Rune Madsen zu erklären, warum die strikte Trennung von Design und Development zunehmend zu Schwierigkeiten in digitalen Projekten führt, und liefert einen interessanten Lösungsansatz mit. Ein Artikel, in dem wir uns auch selbst wiederfinden.

Neue CSS-Funktionen rem() und mod() erklärt

Dan Wilson hat eine Serie von Artikeln gestartet, in der er die neuen mathematischen CSS-Funktionen erklärt und praktische Anwendungsbeispiele zeigt. Im zweiten Artikel beschreibt er die neuen Funktionen rem(), mit der ein Rest berechnet werden kann, und mod(), die einen Modulus zurückgibt.

CSS Media Query »prefers-reduced-transparency«

Ab Chrome 118 ist die neue Media Query Funktion prefers-reduced-transparency verfügbar, die es ermöglicht, das Design für User, die ein undurchsichtiges UI bevorzugen, anzupassen. In Firefox muss das Feature aktuell manuell im Browser aktiviert werden und Safari unterstützt es derzeit nicht.

Wie Browser mit Text-Zoom umgehen

Manuel Matuzovic hat einen persönlichen Deep Dive in die Text-Zoom-Funktion verschiedener Browser und Betriebssysteme gemacht, mit teils unerwarteten und dennoch bestätigenden Erkenntnissen.

Was ist neu in Gutenberg 17.2?

Gutenberg 17.2 ist seit dem 06.12.23 draußen. Folgende neue Features sind dabei: Die Unterstützung von Drag-and-Drop am Anfang und Ende des Dokuments, Sticky-Table-Header und Paginationen in Tabellen, sowie eine verbesserte Symbolleiste für den ablenkungsfreien Modus.

Google integriert generative AI in die Suche

Die Info ist zwar keine Überraschung, da Google bekanntlich durch Microsoft Bing und OpenAI unter Zugzwang steht. Nun hat Google allerdings im offiziellen Blog die Einführung von Generative Search bekanntgegeben und das Feature in den Labs für einige Konten aktiviert.

HTML First

Mit »HTML First« wird ein Development-Ansatz beschrieben, dem wir viel abgewinnen können. Im Kern geht es darum, zunächst auf Webstandards zu setzen und nicht direkt zum JS-Framework zu greifen. Für JavaScript-Developer möglicherweise blasphemisch. Für Web Designer wie uns wahrscheinlich Kernphilosophie.

HTML Web Components FTW

Web Components gibt es schon länger, doch in den letzten Monaten sind zahlreiche Artikel erschienen, die aufklären, warum Web Components nicht mit klassischen JS Frontend Frameworks vergleichbar sind, sondern eher wie ein »erweitertes HTML« funktionieren. Daher etabliert sich aktuell auch der Begriff »HTML Web Components«. Eine fantastische Übersicht bietet Scott Vandehey.

State of UX

Der Name deutet auf eine der zahlreichen Umfragen zum Jahresende hin – The State of UX ist aber eine von »UX Trends« jährlich veröffentlichte Beschreibung des aktuellen Zustands der Branche. Auch in der Design-Welt wird davon ausgegangen, dass AI massiven Einzug halten wird. Das wird möglicherweise die 2023 begonnene Kündigungswelle in großen Design- und Tech-Unternehmen weiter anfeuern. Die Stimmung in der Branche war schon mal besser.

State of AI

Mit State of AI stehen die Ergebnisse einer weiteren Umfrage zur Verfügung – dieses Mal zum Thema künstliche Intelligenz und die Auswirkungen auf den Development-Bereich. Knapp 50 % der Befragten nutzen AI bereits heute zum Schreiben von Code, deutlich über 90 % gehen davon aus, dass AI das Development stark oder sehr stark beeinflussen wird. 20 % erwarten sogar, dass AI die Development-Jobs vollständig ersetzen wird.

Tools, Tools, Tools

Auf der Website Perfect Freehand könnt ihr etwas schreiben oder zeichnen, es dynamisch optmieren und als SVG exportieren.
Doodle Ipsum ist eine Sammlung von zufällig generierten Illustrationen, bei denen man einen Style auswählen und Größe und Farbe manuell konfigurieren kann.
AimatiSS ist eine Sammlung von CSS Animationen, die man sich in einer Preview anschauen und direkt kopieren kann.
tldraw ist ein Online-Zeichentool, makereal erweitert es um AI-Funktionalität.
responsively.app ist ein RWD-Entwickler-Browser. Mit deutlich geringerem Umfang als Polypane, aber dafür kostenlos.
Auf CanIphp findet ihr eine interaktive Kompatibilitätstabelle für PHP-Funktionen, filterbar nach PHP-Versionen.
In der Pro-Version erlaubt ChatGPT das Trainieren und Bereitstellen eigener GPTs. Neu veröffentlicht ist nun der GPT für den Block Editor von WordPress, der mit dem Handbuch von WP trainiert wurde.

Zum Schluss

Zu einem Streifzug durch die Geschichte von Computer und Web lädt das Version Museum ein. In visueller Form finden sich dort historische Versionen beliebter Websites, Betriebssysteme, Anwendungen und Spiele dokumentiert.

Bevor wir die Werkzeuge zur Verfügung hatten, die wir heute haben, waren für das gute Aussehen diverser Websites oft skurrile Webdesign-Hacks notwendig. Responsive Design können wir aber beim besten Willen nicht als Hack ansehen.

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.