Web Design News & Link-Tipps – Nr. 17
Von kulturbanause Team Diesmal haben wir neben dem gewohnten Mix aus Frontend, UX/UI Design, WordPress und Web-Entwicklung einige sehr ausführliche Beiträge zu einzelnen Themen gesammelt, sogenannte »Deep Dives«.
WordPress wird 20
Am 27. Mai feiert WordPress seinen 20. Geburtstag. Rund um diesen Anlass gibt es zahlreiche Events und mehr, unter anderem einen neuen Waipu.
Future CSS: Anchor Positioning
In der vorherigen Link-Tipp-Sammlung hatten wir zum Thema »CSS Anchoring« bereits einen Tweet verlinkt. Diesmal gibt es dazu von Roman Kovarow einen »Deep Dive« mit Videos, vielen Code-Beispielen und detaillierten Erklärungen.
Ressourcen zur Schriftgestaltung
»Type Design Resources« ist ein weiterer, sehr ausführlicher »Deep Dive« zum Thema, vom Lernen der Grundlagen bis hin zur Type-Foundry.
Neue Features in WordPress 6.2
Bereits Ende März ist WordPress in Version 6.2 erschienen, dieser Beitrag bei kinsta.com fasst gut alle wesentlichen Neuerungen zusammen.
Neue API für Popovers
Die Popover API hat in Blink für Chromium den Status »Intent to Ship« erreicht.
WordPress Plugin Pattern Manager
Mit dem »Pattern Manager« (Beta!) kann man Pattern direkt in WordPress bauen, designen, aktualisieren und testen. Man vereinfacht somit den bisher sehr lästigen Workflow zwischen Block Editor und Code-Editor.
AI gefährdet den Durchschnitt am meisten
Der Beitrag »ChatGPT and the Magnet of Mediocrity« argumentiert, dass AI vor allem ein mittleres Qualitätslevel abbildet und damit allen unterdurchschnittlichen Personen einen Vorteil bringt, allen durchschnittlichen bis etwas überdurchschnittlichen hingegen einen Nachteil. Experten sind am wenigsten in Gefahr …
Neue Syntax für :nth-child()
Mit der neuen Syntax »of S« kann man eine vorgefilterte Auswahlliste an den Selektor :nth-child() übergeben. Extrem praktisch!
Penpot Update
Mit Version 1.18 hat das Open Source Design Tool coole neue Features wie bspw. absolute Positionierung oder verbessertes Spacing bekommen. Penpot kann übrigens auch selbst gehostet werden.
Zahlreiche Mini-Updates für Figma
»Kleine Updates mit großer Wirkung« fasst Figma selbst die jüngsten Updates zusammen. Zu rund 30 dieser Mini-Updates gibt es auf Twitter einen anschaulichen Thread.
Alles über den Abstand zwischen Listenpunkt und Marker
Ein weiterer »Deep Dive« für angehende Typo-Nerds ist »Everything You Need to Know About the Gap After the List Marker«.
Pattern-Bibliotheken für JS-Frameworks
Nach Eigenaussage ist »Built At Lightspeed« die weltweit größte Datenbank zu Pattern-Bibliotheken für JS-Frameworks wie React, Angular, aber auch im CSS/UI-Umfeld genutzte Stacks wie Tailwind, Bootstrap etc. Die fast 5.000 Einträge sind mit einem ausgearbeiteten Filter gut durchsuchbar.
Lesereihenfolge vs. Source Order
Mit einem Vorschlag geht die CSS Working Group an die Problematik heran, dass sich die Reihenfolge von Inhalten im Code und im visuellen Layout unterscheiden kann. Eine Abweichung zwischen Code und Layout führt u. a. zu Problemen in der Usability und verhindert einen barrierefreien Zugang.
CSS: Board of Shame
Alt, aber neu entdeckt: Die offizielle »Incomplete List of Mistakes in the Design of CSS« der CSS Working Group führt auf, was in CSS so alles schief gelaufen ist. Veteranen nicken bei der Lektüre im Sekundentakt.
Alles zum Entwickeln von WordPress-Block Themes
Mit einem Inhaltsverzeichnis von rund 70 Einzelpunkten gehört »A Comprehensive Guide to Building WordPress Block Themes« wahrlich zu den »Deep Dives«. Dennoch nicht ausschweifend, sondern hilfreich knackig auf den Punkt.
Neues HTML-Element <search>
Seit Ende März ist <search> Teil der HTML-Spezifikation und soll im Verbund mit der dazugehörigen ARIA-Landmark einen Zugewinn für eine barrierefreie Nutzung bringen.
Checkbox, Radio oder Switch Toggle?
Mit welcher Methode man Nutzenden auf Webseiten eine Auswahlmöglichkeit bereitstellt, hängt von vielen Faktoren ab. Dazu gibt es einen Ratgeber der Nielsen Norman Group, interessante Diskussionen auf StackExchange, Überlegungen zum Design dieser UI-Komponenten und einen immer noch gültigen Artikel von Sara Soueidan.
Vorheriges Geschwisterelement mit CSS ansprechen
Lange galt es als eines der Grundgebrechen von CSS, doch inzwischen unterstützen über 80 % der Grade A-Browser das Ansprechen von vorherigen Geschwisterelementen mittels des CSS-Selektors :has(). Die unrühmliche Ausnahme unter den Browsern ist hier derzeit noch Firefox, die Nutzung sollte entsprechend bedacht werden.
Font-Stacks nach Schriftarten-Klassifizierung
Auf »Modern Font Stacks« findet man Font-Stacks, die nach Schriftart-Klassifikation wie bspw. »Humanist«, »Industrial«, »Neo-Grotesque« oder »Rounded Sans« zusammengestellt sind und auf jedem modernen OS die angestrebte Darstellung sicherstellen sollen.
Natives Feature für visuell verborgene Inhalte gefordert
Ein barrierefreier Zugang ist oft, aber beileibe nicht immer der Hauptgrund, Inhalte visuell zu verbergen. Dafür bedienen wir uns aktuell verschiedener Methoden, die teils als Hacks angesehen werden können. Mit den Möglichkeiten zur Verbesserung setzen sich »The Web Needs a Native .visually-hidden« und »Visually hidden content is a hack that needs to be resolved, not enshrined« auseinander.
Was kostet eine (WordPress-)Website?
Was kostet eine WordPress-Website? Der Artikel »WordPress Website Cost to Develop« bildet eine gute, übertragbare Grundlage, wenn man beachtet, dass er sich explizit auf WordPress und den amerikanischen Markt bezieht und für potenzielle Auftraggeber geschrieben ist. Wir haben bereits einen Artikel zum Thema aus Agentur-Sicht beigesteuert.
Design für Neurodiversität
Das »Neurodiversity Design System« (Beta!) ist ein zusammenhängendes System von Standards und Prinzipien, das Neurodiversität und User Experience Design verbindet. Es beinhaltet bereits ausführliche Informationen zu Gestaltungsprinzipien und Personas, die reale Herausforderungen von neurodiversen Nutzenden verkörpern. Sehr interessant!
Safari 16.4 enthält viele neue WebKit-Features
Der Beitrag auf webkit.org listet die zahlreichen neuen Features auf. Für Frontend-Entwickelnde ist hier u. a. die verbesserte CSS-Unterstützung besonders interessant.
Wie steht es um Design-Systeme?
Ian Frost gibt in »2023 State of Design Systems and Where We Take Them Next« eine fundierten Überblick über den bisher zurückgelegten Weg, den aktuellen Stand und die voraussichtliche Weiterentwicklung.
ACF 6.1 mit nativer CPT-Unterstützung
Ab der neuen Version 6.1 unterstützt das weit verbreitete Plugin ACF (Advanced Custom Fields) das Registrieren von Custom Post Types und den entsprechenden Taxonomien. Bisher benötigte, weitere Plugins oder das Hinzufügen von Post Types und Taxonomien über den Code entfallen, was die Arbeit erheblich erleichtert und beschleunigt.
Firefox Nightly mit @media (scripting: none)
Die Entwicklungsversion von Firefox unterstützt als erster Browser den Media-Query @media (scripting: none), um mit CSS auf Seiten mit deaktiviertem JavaScript zuzugreifen.
View Transitions am Beispiel vergrößerter Raster-Elemente
Chris Coyer zeigt uns ein Beispiel, wie man expandierende Grid-Karten mit der View Transitions API animieren kann. Funktioniert aktuell nur in Chrome.
Moderne HTML-E-Mails auch für Outlook
Outlook wechselt in der neuen Version die Rendering-Engine von Word auf Edge. Brauchen wir also kein Tabellen-Layout mehr zum Gestalten von E-Mails? Der Artikel »Modern HTML email (tables no longer required)« gibt Auskunft.
SSL-Zertifikate bald nur noch 90 Tage gültig?
Google will die Gültigkeit von SSL-Zertifikaten auf 90 Tage begrenzen. Da der Konzern das mit seiner Marktmacht durchdrücken kann, hat das voraussichtlich schon zu Ende 2024 erhebliche Auswirkungen auf die Branche.
Vollständiger Cookie-Schutz in Firefox
Firefox rollt »Total Cookie Protection« für immer mehr Nutzende standardmäßig aus. Cookies gelten nur noch isoliert pro Website und Cross-Site-Tracking wird damit verhindert.
Mozilla investiert in KI
Das Startup Mozilla.ai soll die Entwicklung einer vertrauenswürdigen und quelloffenen KI voranbringen.
Tools, Tools, Tools
- toggles.dev ist eine Sammlung von Dark/Light Mode-Toggles, alles als SVGs mit CSS-Animationen umgesetzt.
- shapes.framer.website ist eine Sammlung von SVG-Shapes zum Kopieren.
- Mit »Make Bookmarklets« erstellt man seine eigenen Bookmarklets.
- Auf carbonneutralwebsite.org kann man den CO2-Ausstoß einer Website ausrechnen und optimieren
- Auf flectofy.flecto.io kann man verbundene SVG-Formen erstellen.
- Vivid Gradient Generator ist ein Tool zum Erzeugen von CSS-Verläufen in denen automatisch passende Zwischenfarben ergänzt werden.
- Mit »patternpad« generiert man visuell ansprechende Design-Pattern in ggf. endlosen Variationen.
Noch mehr Abschweifung findet ihr auf »PlayPhrase.me«. Wir haben es bspw. mit »I don’t know« und »Give me a beer« versucht. Aber Achtung, man hat nur fünf kostenfreie Versuche …
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.