Web Design News & Link-Tipps – Nr. 20

Von: Jonas

In der Sommer-Ausgabe unseres Wissensaustauschs haben wir dieses Mal über 30 Links zusammengetragen. Schwerpunkte bilden Artikel zu CSS, neu verfügbare Browser-Features, News von Design-Konferenzen und WordPress-Updates.

Aktualisiert am 19. Juli 2023 Ein Kommentar

Figma Config 2023 mit zahlreichen Updates

Die Figma-Design-Konferenz »Config 2023« hat in San Francisco stattgefunden. Es wurden zahlreiche spannende Updates veröffentlicht. U.a. wurden Variablen (aka Design Tokens), neue Auto Layout-Features wie Flex-Wrap und »Advanced Prototyping« mit If/Else oder dem Austausch von Variablen vorgestellt. Ein neuer »Dev Mode« gibt Developern deutlich detailliertere Einblicke und sichere Möglichkeiten des Testings von Komponenten. Spezielle Plugins für den Dev Mode sind ebenfalls verfügbar, sowie eine Integration von Figma in Visual Studio Code.

Days of style and standards

CSS hat eine immense Bedeutung, die jedoch oft nicht angemessen wahrgenommen wird. Jeremy Keith hat auf adactio.com einen spannenden Artikel zur aktuellen Situation von CSS veröffentlicht.

Probleme mit »sticky menus«

Sticky Menus sind ein beliebtes UX-Pattern, aber sie haben auch Nachteile. Adam Silver hat einen informativen Beitrag dazu verfasst und zeigt Alternativen auf.

Refactoring mit modernem CSS

Ahmad Shadeed zeigt, wie er eine Featured-News-Sektion von Vox News mit modernem CSS neu gestaltet hat. Er behandelt sowohl UX/UI-Aspekte des Layouts, als auch die Verwendung von intrinsischen Komponenten.

Zählen in CSS mit Hilfe des :has-Selektors

Man kann mit dem :has-Selektor in CSS Elemente basierend auf der Anzahl ihrer Kindelemente zählen. Die Herangehensweise ist nicht völlig neu – gab es bisher bereits sog. Quantity Queries – aber der :has-Selektor kommt sinnvoll zum Einsatz. Die Technik ist besonders nützlich für Layoutentscheidungen, die auf Grundlage dynamischer Inhalte getroffen werden.

WordPress 6.3 Beta 4 und Release Date

Die Beta 4 von WordPress 6.3 ist verfügbar, und der offizielle Release ist für den 8. August geplant. Das Update bringt u.a. verschiedene Performance-Optimierungen, Verbesserungen im Full Site Editor, bessere Usability durch die Verschmelzung von Pattern und wiederverwendbaren Blöcke und weitere Optimierungen in Bezug auf Accessibility.

Open Design Systems für Figma

Designsystems.com bietet eine Sammlung von Design Systemen, die in der Figma Community veröffentlicht wurden.

Invisible Details of Interaction Design

Auf rauno.me gibt es einen sehr anschaulichen Artikel über die unsichtbaren Details des Interaction Design. Mit vielen Videos werden Interaktionsmuster mit Beispielen und Erklärungen für ihre Entwicklung ausführlich behandelt.

Label-Positionen für bessere Usability

Ein informativer Artikel auf tpgi.com erläutert, wie die Positionierung von Labels für Formular-Elemente wie Checkboxen Einfluss auf Usability und Barrierefreiheit haben kann.

Websites im Dock

Ab macOS Sonoma können Websites mit einem entsprechenden Manifest einfach zum Dock hinzugefügt und wie eine App geöffnet werden. Auch Desktop-Benachrichtigungen sind möglich.

Popover relativ zu ihrem öffnenden Objekt positionieren

Hidde de Vries gibt einen Überblick über die bestehenden und künftigen Möglichkeiten zur Positionierung von Popovers im Verhältnis zu ihrem öffnenden Objekt.

Tricks mit CSS Scroll Animationen

Ein interessantes Experiment zeigt, wie man mit reinem CSS und CSS scroll-Animationen das Konzept »Text-fit-to-width« umsetzen kann. Ein weiterer Artikel auf kizu.dev zeigt, wie man mit scroll-Animationen Elemente basierend auf ihrer Position stylen kann.

Konferenz-Talks über modernes CSS Layout

Michelle Barkers inspirierender Talk über modernes CSS Layout auf der Beyond Tellerand Konferenz in Düsseldorf ist absolut sehenswert. Weitere interessante Informationen zu modernen RWD-Techniken findest du auch in einem Talk auf der Config 2023 von Una Kravets und Adam Argyle.

Modernes CSS für dynamische, komponentenbasierte Entwicklung

Auf moderncss.dev findest du eine umfassende Zusammenstellung der neuesten CSS-Techniken, die Code-Struktur, Architektur, Theming, Responsive Layouts, Component Design und mehr verbessern können.

Alternative zu Cookie-Bannern

Die Bundesregierung hat mit einem Verordnungsentwurf eine Alternative zu Cookie-Bannern veröffentlicht. Nutzende sollen ihre Cookie-Einstellungen global im Browser festlegen können, anstatt dies für jede Website einzeln tun zu müssen. Klingt für uns sinnvoll und verhindert hoffentlich das Umgehen der Datenschutz-Vorgaben durch die viele Website-Betreiber.

Form and Search Landmarks

Inwieweit gängige Screenreader und Browser Such- und Formularmarkierungen unterstützen, ist Gegenstand einer umfassenden Untersuchung auf matuzo.at.

Mehr mit CSS-Variablen erreichen

CSS-Variablen (Custom Properties) sind ein mächtiges Tool, mit dem bspw. intelligente Grid-Systeme erstellt oder boolesche Werte in CSS verwendet werden können. Der Artikel auf techhub.iodigital.com zeigt aktuelle Einsatzmöglichkeiten und Beispiele.

Demos und Tools für Scroll-Driven-Animations

scroll-driven-animations ist eine interessante Sammlung von Demos und Tools für Scroll-Driven-Animationen.

Neuer Look für die W3C-Website

Die W3C-Website hat ein frisches Redesign erhalten, das durch ein modernes und aufgeräumtes Erscheinungsbild, verbesserte Benutzerfreundlichkeit und eine erhöhte Zugänglichkeit gekennzeichnet ist.

MDN Playground: Eine neue CodePen-Alternative

Mozilla stellt den MDN Playground vor, eine neue CodePen-Alternative zum Prototyping, zur Zusammenarbeit und zum Präsentieren von Demo-Inhalten. Obwohl noch sehr »basic« und in Entwicklung, birgt der Playground durchaus Potenzial.

Eine unabhängige Browser-Engine

Ladybird Browser, u.a. von Shopify finanziert, hat das Ziel, eine unabhängige Browser-Engine im Geiste von Open Source und frei von Code von Drittanbietern zu entwickeln. Das Projekt zielt darauf ab, die Vielfalt auf dem Browser-Markt zu bewahren.

Subgrid kommt zu Chrome Canary

Subgrid ist jetzt in Chrome Canary unter der Flag verfügbar. Una Kravets teilt den neuesten Stand dieser mächtigen CSS-Eigenschaft.

CSS-Selektorspezifität in Chrome

Ab Version 115 zeigt Chrome die Spezifität von CSS-Selektoren an. Safari und Polypane bieten diese Funktion bereits.

CSS, die fortgesetzte Tragödie

Der meinungsstarke Artikel von Paul Robert Lloyd erläutert die hohe Komplexität von CSS und den Einfluss der Tech-Giganten auf Webstandards, die damit verbundenen Herausforderungen und mögliche Lösungsansätze.

Helleres Weiß im HDR-Farbraum

Ein Twitter-Thread von dtinth zeigt, wie HDR-Farben in Videos und CSS-Filtern u.a. deutlich hellere Weißtöne erzeugen können als das Standard-Weiß.

Safari in Spatial Computing: Erkundung der Möglichkeiten

Apple teilt in einem Video Einblicke darüber, wie Safari im Bereich des Spatial Computing funktioniert und welche Möglichkeiten sich dadurch ergeben.

Webdesign ohne Figma: Eine nachdenkliche Perspektive

David Heinemeier Hansson stellt die weit verbreitete Abhängigkeit von Figma im Webdesign infrage. Er betont die Bedeutung von Coding-Fähigkeiten für Designer.

WordPress: Verbesserungen im UI, in der Mediathek und bei der Zusammenarbeit

Die WordPress-Roadmap umfasst in Phase 3 bedeutende Verbesserungen für die Medienbibliothek. Die Möglichkeiten im kollaborativen Workflow sollen ebenfalls deutlich verbessert werden. Zudem ist geplant das Admin UI deutlich zu überarbeiten.

Offset Parent und Stacking Context

Der Artikel auf polypane.app gibt eine schöne Übersicht zur CSS-Positionierung von Elementen mit Offset Parent und Stacking Context.

Die Unendlichkeit und 1 Pixel

CSS Infinity Value erlaubt die Verwendung unendlicher numerischer Werte, z.B. eine unendlich große Verschiebung entlang der x-Achse. Interessant und uns tatsächlich unbekannt.

Tools, Tools

• Fixel ist eine kostenlose Schriftart in 40 Sprachen, mit 600 Symbolen und vielen font weights.
• durves.com ist ein Tool zum Erstellen von Dot-Designpatterns.
• Monolith ist ein CLI-Tool, mit dem sich Webseiten in eine HTML-Datei speichern lassen; alle benötigten Dateien werden in das Dokument eingebettet.
• ParseUrlOnline zerlegt und visualisiert die Architektur von beliebigen URLs.
• Use Contrast ist ein Figma-Plugin, das konkrete Vorschläge macht, wenn Kontraste nicht reichen.
• Styles to Variables Converter ist ein Figma-Plugin, das Farbstile in Figma-Variablen umwandelt.
• svghub ist eine Sammlung von SVG Shapes.
• Das WordPress-Plugin WS-Form erzeugt Formulare mit AI-Unterstützung auf Basis von Prompts.

Zum Schluss geben wir euch noch die Gelegenheit, mit wenig Aufwand zu einem optimalen Passwort zu gelangen. Viel Erfolg ;)

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer von kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing