Web Design News & Link-Tipps – Nr. 30
Von: Jonas Unsere Frühlingsausgabe erscheint pünktlich zum Global Accessibility Awareness Day. Barrierefreiheit ist für uns immer ein Thema, darüber hinaus gibt es diesmal viel Neues zu UX, UI, Design-Tools, Frontend und WordPress.
Heute ist Global Accessibility Awareness Day (GAAD)!
Am 16. Mai wird zum 13. Mal der Global Accessibility Awareness Day begangen. Das Ereignis fordert uns alle noch einmal dazu auf, über digitalen Zugang und Eingliederung sowie die mehr als eine Milliarde Menschen mit Behinderungen bzw. Beeinträchtigungen zu sprechen, nachzudenken und zu lernen.
WordPress 6.6 Roadmap
Die Roadmap für 6.6 steht bereit und enthält neben den von uns sehnlich erwarteten Pattern Overrides u. a. Background-Images für den Body, einen Page-Zoom im Backend und Section Styles (ebenfalls sehr cool).
Updates an Variablen in Figma
Figma hat einige kleine, aber hilfreiche Änderungen an Variablen vorgenommen. U. a. kann nun die Font-Family als Variable gespeichert werden. Auch Verläufe können endlich aus Variablen zusammengesetzt werden.
Sketch 100 erschienen
Der einstige Platzhirsch unter den UI Design Tools hatte in den letzten Jahren schwer zu kämpfen. Jetzt ist Version 100 mit zahlreichen Updates erschienen. Wir konnten Sketch immer sehr viel abgewinnen… aber was hier an neuen Features angekündigt wird, ist in Figma und Co. längst Standard. Und der Mac-only-Ansatz scheint selbst uns Mac-Sympathisanten nicht zielführend zu sein.
Alt-Texte für CSS-generated Content?
Texte, die mit ::before oder ::after über CSS erzeugt werden, sind bekanntlich ohne semantischen Wert und somit für Suchmaschinen und Screenreader unsichtbar. Da HTML für den Inhalt und CSS für die Darstellung verantwortlich sind, macht das auch Sinn. Nun existiert allerdings ein neues Feature, dass alternative Texte für CSS Content erlaubt.
Apple widerruft Pläne zur Sabotage von PWAs
Apple hatte geplant, mit iOS 17.4 PWAs deutlich einzuschränken. Der Shitstorm ließ nicht lange auf sich warten, inkl. offenem Brief u. v. a. m. Nun hat Apple die Pläne verworfen.
Übersicht über typische Dark Pattern
Dark Pattern tricksen mit UX-Methoden die User aus. Der Post von raw.studio gibt einen schönen Überblick über gängige Herangehensweisen.
Schnelle WP-Installation im Browser
Manchmal möchten wir etwas Neues in WordPress ausprobieren, doch selbst die Einrichtung einer schnellen Testinstallation ist zu lästig. Auf try.new installiert sich beim Aufruf automatisch ein neues WordPress-Setup. Es können Plugins und Themes installiert werden – perfekt, um beispielsweise die neuesten Gutenberg-Features zu testen.
View-Transitions in Safari, Popover API in Baseline
Zwei News zum Browser-Support: Safari Tech Preview 192 hat View-Transitions implementiert und die Popover API ist in Baseline aufgenommen worden.
Chris Coyier zu JS und CSS
Chris Coyier zeigt in diesem Artikel die JavaScript-Funktionen, mit denen man als Webdesigner am ehesten in Kontakt kommt. Darüber hinaus gibt er einen Überblick über relativ neue CSS-Features, die seiner Meinung nach nicht sehr bekannt und verbreitet sind.
Missverständnisse über CSS-Spezifitäten
Die Spezifität ist ein ebenso einzigartiges wie umstrittenes Kernkonzept von CSS. Bramus Van Damme räumt mit häufigen Missverständnissen auf und bietet klare Erklärungen und Beispiele, um das Verständnis zu verbessern.
Interaktive Anleitung zu Container Queries
Ahmad Shadeed hat einen umfassenden Leitfaden zu CSS Container Queries erstellt, in dem er sehr anschaulich ihre Funktionsweise erklärt und anhand von interaktiven Beispielen zeigt, wie sie effektiv eingesetzt werden können.
Do I really need to track this?
Tracking- und Analyse-Tools werden in nahezu jeder auch noch so kleinen Website eingesetzt. In ihrem Artikel überprüfen Paul Jardine und Becky Thorn, inwieweit das mit nachhaltigem Webdesign vereinbar ist.
Lesbare Musiknotation im Web
Musik sollte im Internet genauso gut lesbar sein wie Text. Da es aber noch keine responsive Lösung für die Notation von Musik gibt, hat sich Stephen Band dieses Problems angenommen und zeigt, was mit modernem CSS möglich ist.
Hilfe bei der Namenswahl
Die sinnvolle Benennung von Funktionen, Klassen und Variablen in Markup- und Programmiersprachen kann mühsam sein. Das Projekt „classnames“ enthält eine nach Themen geordnete Liste nützlicher Wörter, die bei der Namenswahl helfen kann.
Passende Icons zu Schriftart finden
Der Artikel von Streamline bietet eine detaillierte Anleitung zur Auswahl von Icons, die visuell und stilistisch zu verschiedenen Schriftarten passen, um eine konsistente visuelle Sprache zu gewährleisten.
Texte im Design
Das UX Magazine bietet eine umfassende Anleitung zur Bedeutung und Gestaltung von Microcopy im Design, um das Benutzerverständnis zu verbessern und die Nutzererfahrung zu optimieren.
Die neue Rolle des Designers bei dem Einsatz von KI
Der Artikel von Joe Alterio betrachtet den Einfluss von KI auf das Design, betont die Notwendigkeit für Designer, sich anzupassen und zeigt auf, wie echte Kreativität menschliche Einblicke und Vorstellungskraft verlangt, auch wenn viele Designaufgaben automatisiert werden.
Core Web Vital-Metrik verschwindet mit AMP
Googles Core Web Vitals (CWV) sind bei Entwickelnden sehr beliebte Tools. Eine der Metriken, First Input Delay (FID), wurde nun durch Interaction to Next Paint (INP) abgelöst. Laut Jeremy Keith war FID nur wegen des zeitweilig sehr hochpriorisierten AMP-Projekts in den CWV. Nun kann es weg, da Google AMP nicht mehr verfolgt.
Best Practices für WordPress Pattern-Design
Das Auttomatic-Design-Team hat infolge eines viertägigen Design-Meetups einen ausführlichen Beitrag zum besten Vorgehen für das Erstellen von WordPress-Pattern veröffentlicht.
Tools
- Advanced Query Loop ist ein WordPress-Plugin, das viel kompliziertere Abfragen mit dem Query-Loop-Block ermöglicht.
- svgviewer.dev zeigt Code und zahlreiche Optionen. Beinhaltet Basis-Icons, kann Custom SVG-Code aufnehmen.
- Der SVG-Encoder ist einfaches Werkzeug, das eine SVG-Datei auf verschiedene Arten aufbereitet, sodass sie in CSS und HTML verwendet werden kann
Zum Schluss
Wer schon immer »was mit Farben« machen wollte, kann sie möglichst schnell über ein Farbspektrum nachmischen oder mit möglichst wenig Versuchen ihren RGB-Code raten.
