Web Design News & Link-Tipps – Nr. 11

Anwendungsfälle für CSS Comparison Functions

Die CSS Comparison Functions wie min(), max() und clamp() werden von den Browsern gut unterstützt und sind u.a. sehr praktisch für skalierende Typografie. Der Artikel von Ahmad Shadeed geht darüber hinaus und zeigt weitere praktische Anwendungsfälle.

Benannte Rasterlinien in CSS Grid

Viele moderne Weblayouts arbeiten mit einem zentrierten Fließtext-Bereich. Bilder und andere Elemente brechen daraus aus und werden breiter dargestellt. Mit CSS Grid und den eher unbekannten »benannten Rasterlinien« kann ein solches Layout mit wenig Code hergestellt werden. Der Artikel Layout Breakouts with CSS Grid erklärt die Vorgehensweise.

Wir selbst arbeiten bereits seit einiger Zeit daran, unsere Website auf diese Layout-Technik umzustellen.

1Password ermöglicht signierte Git Commits

Einzelne Commits können in Git mit geringem Aufwand unter falschem Namen veröffentlicht werden. Um dieses mögliche Sicherheitsrisiko zu reduzieren, kann der Commit signiert werden. 1Password bietet dafür jetzt eine Funktion an, die den Prozess spürbar vereinfachen soll.

Icon-Buttons und Barrierefreiheit

Buttons, die nur mit einem Icon beschriftet sind, erfüllen die Voraussetzungen für WCAG und BITV, sofern der HTML-Code so geschrieben wurde, dass ein zugänglicher Name vorhanden ist. Hier wird deutlich, dass die Vorgaben für Barrierefreiheit in vielen Bereichen zu ungenau bzw. zu schwach formuliert sind. Denn nicht beschriftete Buttons können zu Problemen bei Sprachsteuerung führen. Links dürfen übrigens nicht nur mit einem Icon beschriftet werden.

Assistive Technologien im Video-Vergleich

Wie wird eine Website eigtl. mit der Tastatur gesteuert? Und wie mit Bildschirmlupe? Oder VoiceOver? Oder VoiceControl? Tetralogical hat dazu zahlreiche kurzweilige Videos veröffentlicht, die unseren Horizont auf jeden Fall erweitert haben.

Zwischen Design und Development

Wir (kulturbanause) fühlen uns seit Jahren sehr wohl in der Rolle zwischen Design und Development. Doch durch unsere Tätigkeit in Schulungen und unsere Zusammenarbeit mit Development- und Design-Teams sind wir uns der Tatsache bewusst, dass die Kluft zwischen den Gewerken wohl eher größer wird. Lösungen können neue Zwischen-Rollen wie Design Engineer oder Frontend Design sein. Oder brauchen wir eher weniger als mehr? Matthias Ott schließt sich mit seinem Artikel der zuletzt wieder aktiveren Diskussion rund das Thema an.

Mehrfarbige Schriften bei Google Fonts

Der Material Design Blog hat verkündet, dass es ab sofort die ersten Color Fonts bei Google Fonts gibt. Die gestalterischen Möglichkeiten sind äußerst umfangreich und die ersten Beispiele überzeugen visuell.

Figma, Sketch, Penpot – Wie »Open Source« sollten Design Tools sein?

Die angekündigte Übernahme von Figma durch Adobe hat einige Menschen zum Nachdenken gebracht. Das Dateiformat von Figma ist geschlossen – anders als bei Sketch. Wenn Figma zukünftig unter dem Lizenzmodell der Creative Cloud vermarktet wird (?), die Dateien aber nur mit Figma geöffnet werden können, erzeugt das ggf. ungewünschte Effekte der Abhängigkeit. Sketch bringt sich marketingtechnisch in Stellung und Open Source Design Tools wie Penpot freuen sich über zahlreiche neuer User.

Open Source Design

So geschlossen das Dateiformat von Figma auch sein mag – das Tool hat maßgeblich dazu beigetragen, dass sich eine offene Design Kultur entwickelt hat. Ähnlich wie Developer bei Github zusammenarbeiten und die Werke anderer adaptieren und weiterführen, wird auch die Design-Community kollaborativer.

Unterstützung für große, kleine & dynamische Viewports ab Chrome 108

Safari und Firefox sind schon länger mit dabei, nun unterstützt ab Version 108 auch Google Chrome die CSS-Einheiten für die Ansprache dynamischer Viewports. Gemeint ist damit ein sich verändernder Viewport, wenn u.a. auf mobilen Geräten beim Scrollen der Browser ausgeblendet wird.

Caching für WP Query ab WordPress 6.1

Ab der nächsten WordPress-Version wird der WP Query gecached was zu deutlicher Beschleunigung führen soll.

Block Template Parts in WordPress

Die WordPress-Theme-Welt unterscheidet u.a. zwischen Classic Themes und Full Site Editing Themes (FSE). Mit Block Template Parts ist nun eine hybride Lösung möglich.

HTML und Barrierefreiheit lernen

Wir haben bereits über verschiedene Webdesign-Kurse auf web.dev berichtet. Nun sind neue Kurse für HTML und Barrierefreiheit (Accessibility) hinzugekommen.

State of CSS 2022

Die jährliche Umfrage zu CSS ist gestartet und lädt euch zur Beteiligung ein. In zahlreichen Kategorien wird abgefragt, wie die Web-Welt mit CSS arbeitet, welche Technologien genutzt werden, bekannt sind usw. Wir berichten mit Sicherheit bald über die Ergebnisse.

Vorschau-Text für E-Mails im Posteingang steuern

Der Posteingang eures E-Mail-Programms zeigt unter dem Betreff i.d.R. die ersten Sätze aus der Mail als Vorschau an. Mit einem Hack (der sich wirklich sehr hacky anfühlt) könnt ihr diesen Vorschau-Text exakt festlegen.

Fortschritt der Design-Features im WordPress Block Editor

Der WordPress Block Editor (Gutenberg) wird um immer mehr Design-Features erweitert – schwer hier die Übersicht zu behalten. Auf WordPress.org wurde nun eine solche Übersicht in visueller Form veröffentlicht.

Herausforderungen bei der Gestaltung von Multi-Brand Design Systemen

Wir haben Design Systeme sowohl im Code als auch in Form von UI Kits erstellt bzw. die Prozesse begleitet. Wenn es darum geht, ein gemeinsames Design System für verschiedene Marken eines Unternehmens zu erstellen, vervielfachen sich die Herausforderungen. Der Beitrag auf UXDesign.cc fasst die Herausforderungen zusammen. Wir haben alles davon erlebt!

In diesem Zusammenhang ist es auch wichtig, aus den Fehlern anderer zu lernen.

Fluide Typografie mit clamp() und Sass

Responsive Typografie mit clamp() ist eine schöne Sache. Leider lässt sich das Verhalten der Schriftgrößen nicht so granular steuern, wie es für hochwertige Layouts notwendig ist. Wir haben daher bereits seit einiger Zeit ein Sass Mixin im Einsatz, dass uns diese Steuermöglichkeit zur Verfügung stellt. Das Smashing Magazine hat nun einen Artikel veröffentlicht, in dem eine sehr ähnliche Vorgehensweise mit einer Sass-Funktion beschrieben wird.

Link oder Button?

Die Regel ist eigentlich simpel. Funktionen werden über Buttons ausgelöst und Links führen zu einer anderen Seite. Das sollte sowohl im UI Design als auch im Code beachtet werden. Kilian Valkhof beschreibt die Thematik anschaulich anhand eines nicht ganz trivialen Beispiels.

Tools, Tools, Tools …

Geschrieben von kulturbanause Team

Benutzerbild

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.

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →