Web Design News & Link-Tipps – Nr. 16

Von kulturbanause Team

In dieser Ausgabe haben wir neben ein paar coolen Meinungsartikeln einige interessante Beiträge zu neuen CSS-Features und Barrierefreiheit zusammengetragen.

Aktualisiert am 13. März 2023 2 Kommentare

WordPress 6.2 für Ende März angekündigt

Mit Version 6.2 ist das erste große Update dieses Jahres für den 28.03.2023 angekündigt.

Kurze Tipps zur Barrierefreiheit

»Bite-sized Accessibility« ist eine Sammlung von kompakten, »mundgerecht« aufbereiteten Informationen zur Barrierefreiheit mit weiterführenden Ressourcen.

Eine Institution verblasst

Geoff Graham wurde von Digital Ocean entlassen. Er arbeitete an CSS-Tricks. Damit ist die Seite nach der Übernahme durch Digital Ocean nicht wie versprochen im gleichen Sinne weiterzuführen. Leider war das zu erwarten und auch schon zu merken.

Neue Tricks mit CSS Anchoring

Mit der experimentellen (Chrome Canary) CSS-Technik »anchor positioning« lassen sich ziemlich eindrucksvolle Effekte erzielen.

Neu für alle Browser

»Newly interoperable« ist eine web.dev-Übersicht, die alle CSS-Features aufführt, die neu von allen Browsern unterstützt werden. Dies Jahr ist schon ziemlich viel passiert.

Pattern Library mit Tailwind und Alpine.js 

»windstatic« ist eine recht umfangreiche Pattern-Sammlung für den beliebten Tech Stack.

Intrinsisches Design für WordPress

Design »aus sich selbst heraus« soll WordPress-Blöcke gestalten, egal wo sie in einer Seite sind. Mehr dazu in diesem Beitrag auf dem WordPress-Developer-Blog.

Style Queries ab Chrome 111

Mit Container Queries kann man neben Größenangaben auch Style-Eigenschaften von Eltern-Elementen abfragen. Mit Version 111 unterstützt das der Chrome-Browser. Was damit möglich sein wird, zeigt Una Kravets.

Container Queries und Responsive Images

Responsive Images reagieren von der Syntax her auf Media Queries. Der Beitrag von Jason Grigsby gibt einen Überblick, warum das problematisch ist und was das leider von Google aufgegebene Format JPEG-XL damit zu tun hat.

Bessere Umbrüche mit CSS

Die neue CSS-Eigenschaft »text-wrap« des CSS Text Moduls Level 4 verhindert Witwen, Waisenkinder und andere beklagenswerte typografische Existenzen. In Chrome Canary bereits unterstützt, ist ein besseres Schriftbild für den Produktiveinsatz auf dem Weg.

Barrieren testen

Mit automatisierten Tests beginnt eine Überprüfung von Webseiten auf Barrierefreiheit. Zwingend folgen händische Tests. Der Leitfaden von Whitney Lewis erleichtert den Einstieg.

Barrieren nacherleben

Barrierefreie Webseiten müssen einen nicht-visuellen Zugang ermöglichen, Screenreader sind dazu genutzte Werkzeuge. Dieser Beitrag zeigt eine Annäherung an das Thema für UXer.

Barrieren vermeiden

Nicht nur sensorische Beeinträchtigungen behindern den Zugang zu Webseiten, sondern auch psychische Störungen wie eine Aufmerksamkeitsdefizit-Hyperaktivitätsstörung (ADHS). Der Beitrag von Eva Katharina Wolf zeigt, wie UX-Design für Betroffene den Zugang erleichtern kann.

Zugänglichkeit mitdenken

Ein »Accessibility Mindset« kann von vornherein Barrieren verringern oder verhindern. Die WCAG-Prinzipien spielen dabei eine wesentliche Rolle.

Datenbank der Zukunft?

Dolt bezeichnet sich selbst eine überfällige Weiterentwicklung des Datenbankformats. Sie soll erprobte Konzepte von SQL und Git zusammenführen.

Gegen den Layout Shift beim Font-Loading

Der Artikel im Dev-Blog von Chrome zeigt, wie neue Browser-APIs den Layout Shift beim Austauschen eines lokalen Fallback-Fonts via font-display: swap; reduzieren oder sogar eliminieren.

Mehr Qualität bei Bewegung

»Ten tips for better CSS transitions and animations« bietet einen interessanten Einstieg in das Thema, insbesondere zum Nutzen von Timing und Ease.

Barrierefreie Formulare

Zu diesem zeitlosen Thema gibt es einen sehr ausführlichen Ratgeber auf Smashing Magazine.

Developer Experience – Zeit zum Überdenken

Der sehr lesenswerte Artikel von Cole Peters setzt sich mit dem Stand von JavaScript-Mega-Stacks und den Gründen für ihre Entstehung auseinander. Die sogenannte »Developer Experience« hat überfrachtete Tools, Frameworks und Abläufe geschaffen. Eine Rückbesinnung auf die Standards der Web-Plattform kann helfen.

Gesetzestreues Tracking bedeutet: kein Tracking ohne Erlaubnis

Das Telekommunikation-Telemedien-Datenschutz-Gesetz (TTDSG) gilt seit Dezember 2021, dennoch scheinen seine Auswirkungen auf erlaubtes Daten-Tracking noch nicht so recht »angekommen« zu sein. Das ändert hoffentlich die sehr ausführliche Artikelserie »Wissen ist Macht: Das große Wissensdossier zu §25 TTDSG«.

Agile Entwicklung ist ein 30 Jahre alter Fehler

Der meinungsstarke Beitrag »The age of Agile must end« führt aus, welche grundlegende Mängel agile Entwicklung hat, warum sie nicht zu Menschen passt und warum ein neuer operativer Standard notwendig ist.

Denkhilfen

»untools.co« ist eine Sammlung von »Denk«-Tools und Frameworks zur besseren Problemlösung in diversen Bereichen. Das gilt auch für die »UX/UI Product Design Roadmap«, eine interaktive und ausführliche Übersicht über Konzepte, Techniken und Buzzwords. Danke an Jenny für den Tipp!

Tools, Tools, Tools

• Shortcuts.design ist eine sehr hilfreiche Shortcut-Sammlung für viele Programme und Tools.
• typescale.com ist ein visuelles Typescaling-Tool mit Font-Auswahl.
• Enhance ist ein Adobe-Tool zur Verbesserung von Audio-Aufnahmen. Kontrolle ist besser!
• Das Online Tool scrollbar.app generiert CSS-Codes für Custom Scrollbars.
• Fonty.io analysiert die Fonts einer Webseite und zeigt deren Nutzung an.
• Favpie ist ein CLI-Tool zur Erstellung von Favicons und Webmanifests.
• AskGPT macht den direkten Zugriff auf OpenAI über das Terminal möglich.
• Die Desktop-App He3 ist ein Werkzeugkasten für Entwickler mit über 200 Tools.

Wer nun reif für eine Pause ist: Mal mit dem Auto durch andere Städte fahren und dabei Lokalradio hören, geht auf driveandlisten! #oldiebutgoldie

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.