Web Design News & Link-Tipps – Nr. 39
Von: Jonas, Raimund, Sophie, Felix, Konstantin Unsere Themen im Februar: Web 3.0 von Tim Berners-Lee, mehr Kreativität im Design, HTML als Karriere-Investment, CSS für Anfänger und Profis, WordPress Full Site Editing und Barrierefreiheit-Testing mit Screenreadern.
Allgemein
Berners-Lees Vision einer neuen Welt
Das World Wide Web hat in den Augen seines Erfinders Tim Berners-Lee einige Konstruktionsfehler, aufgrund derer es sich in eine unverhoffte Richtung entwicklet hat. Mit Solid hat er daher einen offenen Standard für die Strukturierung von Daten, digitalen Identitäten und Anwendungen im Web entwickelt, den er selbst »Web 3.0« nennt.
In seinem aktuellen Beitrag »The Vision of a new World« erklärt er die Vorteile davon, wenn Menschen mehr Kontrolle über ihre Daten haben. Er spricht u. a. von Befähigung der NutzerInnen, verbesserter Interoperabilität, gemeinschaftsorientierter Entwicklung sowie von wirtschaftlichen und sozialen Vorteilen.
Nie wieder Passwörter ändern
Der Chaos Computer Club (CCC) nahm den diesjährigen »Ändere dein Passwort«-Tag am 31.01. zum Anlass, sich mit diversen Mythen über sicheren Umgang mit Passwörtern zu beschäftigen. Er kritisiert die Praxis regelmäßiger Passwortänderungen, da sie oft zu schwächeren Passwörtern und Mehrfachnutzung führt. Stattdessen wird die Nutzung von einzigartigen, langen Passwörtern und die Nutzung von Passwort-Managern empfohlen. Zudem wird die Nutzung von Multi-Faktor-Authentifizierung (MFA) und die Umstellung auf Passkeys als sichere Alternativen vorgeschlagen.
Large Language Models: Rückblick auf 2024 und Erklärung
Zwei ausführliche Beiträge widmen sich dem, was in der Welt von Large Language Models im letzten Jahr geschah, und dem Versuch einer möglichst verständlichen Erklärung, wie sie funktionieren. Beides keine Nebenbei-Lektüre, aber lohnenswert, denn LLMs bzw. KI beeinflussen unseren (beruflichen) Alltag immer stärker.
KI-Entwicklung in Europa
OpenEuroLLM wird von über zwanzig europäischen Forschungsinstituten, Unternehmen und Universitäten entwickelt, um sich flexibel an die Anforderungen verschiedener Unternehmen anzupassen und unterscheidet sich bereits deutlich von Konkurrenten wie ChatGPT und Deepseek.
Die Entwicklung erfolgt im Einklang mit dem europäischen AI Act, wobei Transparenz, Offenheit und Zugänglichkeit im Vordergrund stehen. Das Ziel ist es, eine breite Nutzung in Europa zu ermöglichen und bestehende Risiken, wie im AI Safety Report bekanntgegeben, zu minimieren.
OpenAI vs. Deepseek
Deepseek ist ein chinesisches Open-Source KI-Modell, das momentan viel Aufmerksamkeit auf sich zieht. Nicht nur, da es trotz niedrigerer Entwicklungskosten OpenAI‘s ChatGPT Konkurrenz macht, sondern auch durch eine Datennutzungsdebatte mit OpenAI, die für Diskussionsstoff hinsichtlich Datenschutz und Ethik sorgt.
UX/UI Design
Figma und WordPress fordern mehr Kreativität
Es ist nicht neu, dass mit zunehmender Industrialisierung, der Arbeit in Design Systemen & Code-Bibliotheken kreative Designs leicht auf der Strecke bleiben können. Sowohl bei WordPress als auch bei Figma sind nun Blog-Posts erschienen, die dieses Problem adressieren und sich Veränderung wünschen.
Der Wert von Design Tokens
Im Blog von JUX sind vor einiger Zeit zwei lesenswerte Artikel zum Thema Design Tokens veröffentlicht worden. Etablierte Konzepte werden ebenso beschrieben wie die konkreten Vorteile im praktischen Einsatz. Sehr lesenswert.
Native Aspect Ratio in Figma
Man mag es kaum glauben, aber das proportionale Vergrößern von Elementen war lange Zeit eine mühsame Aufgabe. Figma (oder XD, oder Sketch) konnte das Seitenverhältnis nicht beibehalten – schon gar nicht in verschachtelten Komponenten oder Auto-Layout. Dies ist nun gelöst – danke!
Warum wir immer mit der Button-Component starten
Der Artikel »Your first component« untersucht, warum beim Aufbau von Design Systemen häufig mit dem Button begonnen wird, und behandelt Priorisierung, Komplexität, Scoping und die Rolle der Tokens. Das Design der Website zaubert zudem ein Schmunzeln ins Gesicht.
Tipps zur Organisation von Icons
In großen Icon-Sets stellt sich schnell die Frage nach der Organisation. Wie nennt man Icons, damit sie schnell gefunden werden, welche Varianten gibt es? Alice gibt hilfreiche Tipps und plädiert für mehr einzelne, klar benannte Komponenten und weniger Varianten. Einen Ansatz, den auch wir so verfolgen.
Gesammelte Ressourcen und Tools für User Research
Die Webseite Guide to UXR bietet eine umfangreiche Sammlung von über 250 Ressourcen und Tools, die sich dem Thema User Research (UXR) widmen. Sie ist besonders nützlich für UX-Designer, die keine Forschungserfahrung haben, aber auch erfahrene Praktiker können davon profitieren.
Versionierung von Designs in Figma
Der Artikel von Luis diskutiert die Herausforderungen und möglichen Ansätze für die Versionierung von Komponenten und Designs in Figma.
Frontend
Oh Shit, Git!?!
Es gibt zahlreiche Situationen in Git, in denen Fehler passieren, für die dann keine schnelle Lösung zur Hand ist. Falscher Branch, falsche Message, falsche Dateien … Auf Oh Shit, Git werden Lösungen für solche Probleme beschrieben.
HTML als solides Investment in die Karriere
Wir haben im vergangenen Newsletter über die zunehmende »React Fatigue« geschrieben und bewegen uns ohnehin gerne möglichst nah am Webstandard. Chris Heilmann hat in diesem Kontext einen passenden Post geschrieben, in dem er zusammenfasst, warum es sich lohnt, HTML umfassend zu beherrschen. Fun Fact: Im Fieldset-Beispiel lernt ihr wichtige »Labels« kennen =:D
Fortgeschrittene Möglichkeiten Scroll-Techniken mit CSS und JavaScript
Die Webseite »The Craft of UI« des Vercel-Design Engineers Jhey auf Substack bietet einen neuen Artikel mit dem Titel »You can scroll things«. Der Artikel zeigt verschiedene fortgeschrittene Möglichkeiten, Scroll-Techniken mit CSS und JavaScript umzusetzen.
Favicons im Jahr 2025: Ein moderner Ansatz
Der Artikel »How to Favicon in 2025: Three files that fit most needs« zeigt, wie sich Favicons effizienter generieren lassen. Irina Nazarova erklärt, warum die gängige Praxis mit zahlreichen statischen PNG-Dateien überholt ist und stellt eine minimalistische Lösung vor: Ein Set aus wenigen Icons und einer JSON-Datei reicht aus, um die meisten modernen Anforderungen zu erfüllen. Der Artikel wird seit 2021 jährlich aktualisiert und bietet praxisnahe Tipps zur Implementierung.
CSS Scroll State Queries: »is-sticky« endlich in CSS
Mit den neuen Scroll State Queries in CSS reagieren Layouts direkt auf den Scroll-Status einer Seite – ganz ohne JavaScript. Dieser Beitrag auf developer.chrome.com zeigt, wie sich Header, Navigationselemente oder Abschnitte abhängig von der Scroll-Position stylen lassen. Eine super spannende Erweiterung für noch flexiblere Designs.
CSS Nesting richtig einsetzen – und Fehler vermeiden
CSS Nesting macht Styles übersichtlicher, kann aber schnell zu unerwarteten Problemen führen. In diesem Beitrag auf Piccalilli erklärt Andy Bell, warum übermäßiges Verschachteln den CSS-Code aufbläht und die Wartbarkeit erschwert. Statt blind zu verschachteln, sollte der mittlerweile auch native &-Selector sehr bewusst eingesetzt werden.
Modern CSS Solutions: Einstieg für absolute Anfänger
Noch nie mit CSS gearbeitet? Kein Problem! Diese YouTube Playlist von Kevin Powell führt Schritt für Schritt durch die Grundlagen – von den ersten HTML- und CSS-Regeln bis hin zu modernen Layout-Techniken mit Flexbox und Grid. Perfekt für alle, die ohne Vorkenntnisse starten möchten.
SVGs direkt aus GeoJSON generieren
Mit JavaScript und etwas CSS lassen sich GeoJSON-Daten in statische SVGs umwandeln. CSS { In Real Life } erklärt in diesem Beitrag, wie sich Geodaten effizient in skalierbare Vektorgrafiken überführen lassen. Die Methode eignet sich besonders für interaktive Karten und datengetriebene Visualisierungen.
Automatische Inhaltsverzeichnis-Hervorhebung mit JavaScript
Ein dynamisches Inhaltsverzeichnis verbessert die Navigation in längeren Artikeln erheblich. Chris Kirk-Nielsen erklärt in diesem Beitrag, wie man mit Vanilla JavaScript eine einfache, performante Lösung erstellt, die die aktive Überschrift beim Scrollen hervorhebt – ganz ohne externe Bibliotheken.
6 CSS-Snippets, die du 2025 kennen solltest
CSS entwickelt sich stetig weiter – und einige Techniken sollten Frontend-Entwickler*innen unbedingt auf dem Schirm haben. In diesem Artikel auf nerdy.dev werden sechs praxisnahe CSS-Snippets vorgestellt, die moderne Layouts erleichtern und wiederkehrende Herausforderungen elegant lösen.
WordPress
Roadmap für WP 6.8 veröffentlicht
WordPress 6.8 soll am 15. April 2025 erscheinen. Im Make WordPress Core-Blog sind nun Details veröffentlicht worden. Die Version führt u. a. eine optimierte Zoom Out-Bearbeitungsfunktion, erweiterte Stil- und Typografieoptionen, neue Schreib- und Design-Modi sowie API-Verbesserungen und Performance-Optimierungen ein.
eBooks mit Gutenberg
Technische gesehen gibt es zwischen Websites und eBooks viele Parallelen. Wir selbst erzeugen aus unserem HTML-Content automatisiert ePubs. Nun gibt es auch bei WordPress Bestrebungen, den Gutenberg-Editor in Richtung ePub-Publishing zu öffnen.
Full Site Editing in komplexen Projekten
Wir setzen bei neuen Projekten mittlerweile voll auf Custom FSE-Themes und haben kürzlich in diesem Zusammenhang auch unseren Workflow aktualisiert. Fränk Klein spricht uns in einer Artikelserie aus der Seele und beschreibt die Vorteile von FSE in Projekten. Zentral ist dabei der Ansatz, mit WordPress eine Vision bzw. einen Prototypen zu entwickeln und im Browser zu finalisieren.
WooCommerce veröffentlicht neues Branding
Wir hatten es schon angekündigt, nun ist das neue Markenbild von WooCommerce auch im WooBlog vorgestellt worden. Der neue Look wirkt angenehm frisch und soll dabei helfen, WooCommerce als Plattform in einem stark umkämpften Markt noch stärker zu positionieren.
Performance
Wie Browser-Cache-Partitioning das Web verändert
Aus Datenschutz- und Sicherheitsgründen sind alle Browser in den vergangenen Jahren von Single-Keyed zu Double-Keyed Caching übergegangen, das sowohl die Ziel-URL als auch die Quell-Origin berücksichtigt. Addy Osmani beschreibt die Vor- und Nachteile dieser Änderung und erklärt die komplexen Auswirkungen, wie die Reduzierung von Cross-Site-Tracking, Auswirkungen auf Leistung und Bandbreite, die Nutzung von CDNs und mehr.
Barrierefreiheit
Testen von Barrierefreiheit mit Screenreadern
Die Nutzung eines Screenreaders ist essenziell, um Webprojekte auf Barrierefreiheit zu prüfen. In diesem Beitrag von Epic Web erklärt Ryan Florence anschaulich, warum visuelles Debugging oft in die Irre führt und wie man mit NVDA, VoiceOver & Co. wirklich verlässliche Tests durchführt.
Barrierefreiheit: Essentials für Frontend-Entwickler
Barrierefreiheit muss keine überwältigende Aufgabe sein – schon wenige bewusste Maßnahmen können einen großen Unterschied machen. Martijn Hols erklärt die wichtigsten Accessibility-Grundlagen für Frontend-Entwickler. Von semantischem HTML über Tastatur-Navigation bis zu ARIA-Regeln gibt er praxisnahe Tipps zur Erstellung barrierefreier Komponenten und Interfaces. Eine kompakte Einführung für alle, die digitale Produkte inklusiver gestalten möchten.
Das Barrierefreiheitsstärkungsgesetz kommt
Ab dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz (BFSG) erstmals Unternehmen mit bestimmten Produkten und digitalen Dienstleistungen, ihre Websites und Dienste barrierefrei zu gestalten. Wir haben bereits vor einiger Zeit darauf hingewiesen. Der Beitrag von drweb.de kommt teilweise zu anderen Bewertungen als wir, insbesondere was die Anwendbarkeit betrifft. Eindeutig ist aber: Rechtzeitige Anpassung sichert Rechtskonformität und verbessert die Nutzerfreundlichkeit für Alle!
Tools
- Markitdown ist ein Tool von Microsoft, das zahlreiche Dateiformate – u.a. Word, Excel, PDF, PowerPoint, HTML etc. in Markdown umwandelt.
- CS16.css ist eine CSS-Library, die das nostalgische Interface von Counter-Strike 1.6 ins Web bringt – Retro-Look im klassischen FPS-Stil.
- Data Viz Project ist eine Sammlung und Klassifizierung von Datenvisualisierungen, zur Orientierung und Inspiration.
- Blendy ist ein Javascript-Tool für nahtlose Transitions von einem Element in ein anderes.
- Open Props UI ist eine UI Library, die ausschließlich auf CSS Komponenten basiert.
- Figpea ist ein Online Viewer zum Darstellen und Bearbeiten verschiedener Dateitypen.
- Flexbox Labs ist ein Online Konfigurator für Layouts auf Basis von Flexbox und Grid.
Geschrieben von:
Raimund Büchner
Sophie Tausch
Felix Lehmann
Konstantin Hanke
