Web Design News & Link-Tipps – Nr. 6

Von kulturbanause Team

Auch im Mai haben wir unseren regelmäßigen Austausch zu wissenswerten Informationen und Neuigkeiten aus unserer Branche durchgeführt. Die interessantesten stellen wir euch hier vor. Zur Sprache kamen die Themen in der folgenden Reihenfolge, nur die Tool-Sammlung haben wir an den Schluss gestellt.

Aktualisiert am 24. Mai 2022 Ein Kommentar

Fortschritt für alle

Nach Safari und Firefox speichert nun auch Chrome den Vor- und Zurück-Zustand im Cache (inklusive der Scroll-Position). Von der dadurch verbesserten Performance profitieren alle Websites gleichermaßen; was damit sonst noch ›verbessert‹ werden mag, steht weiter unten …

Neues HTML-Attribut für Ladezeitbeschleunigung

Mit »fetchpriority« kann man die Lade-Priorität von Elementen angeben. Für die Browser hat das allerdings nur den Rang einer Empfehlung, sie sind nicht zur Befolgung verpflichtet.

WooCommerce: Automatisierte Coupons

Das Tutorial »Create Coupons Programmatically« zeigt, wie man eine automatisierte Ausgabe von Coupons programmiert. Hilfreich bspw. als Incentive bei einer Newsletter-Anmeldung in einem Shop.

WooCommerce – Globale Lagerverwaltung

Mit dem kostenlosen Plugin »Stock Manager for WooCommerce« sind Einrichtung und Wartung einer globalen Lagerverwaltung deutlich komfortabler, da diese bei WooCommerce nicht standardmäßig vorhanden ist.

Buchstaben in freier Wildbahn

»fonts in the wild« zeigt in einer interessanten Kachel-Optik mit Webseiten-Screenshots die dort genutzten Fonts.

Obacht mit Farben

Im Unterschied zu Design-Tools können Browser bestimmte Farb-Effekte wie bspw. Gradients oder Transparenzen mit CSS immer noch nicht 1:1 umsetzen.

Atomic Design weitergedacht

Es gibt immer mehr Ansätze, das System von Brad Frost um eine subatomare Ebene zu ergänzen. Darren Yeo erweitert plausibel vor allem um Design Tokens, die unserer Ansicht nach aber nicht wie bei Hannah Heinson die Atome ersetzen. Noch tiefer steigt Alex Bueno ein, der sich insbesondere mit dem Aspekt der Beziehung von Elementen zueinander beschäftigt.

Besser vorgedacht

In der Serie »Design Pattern« vom Smashing Magazine sind zwei neue Artikel erschienen:
1. »Designing Better Breadcrumbs« beinhaltet sehr ausführliche und gute Erklärungen zu u. a. UX-Navigationskonzepten.
2. »Designing A Better Language Selector«, stellt gut den Unterschied zwischen Location, Language, Country und Currency heraus; mit einer Vielzahl an Beispielen und verschiedenen Design Patterns von großen Websites.

Mehr Schönschrift

Neue Font-Formate & CSS-Properties wie font-palette und @font-palette-values erweitern die Gestaltungsmöglichkeiten von Fonts bspw. um Farbverläufe in Buchstaben.

Sachter surfen

Safari & IOS Safari unterstützen mit Release 143 endlich die CSS-Eigenschaft scroll-behavior: smooth.

Millionen können irren

Für den Report »The WebAIM Million« 2022 hat WebAIM die Top-Million der weltweiten Websites auf Barrierefreiheit getestet. Ergebnis: Die größten Fehler wären vergleichsweise leicht zu beheben. Diese eigentlich traurige Entwicklung ist unserer Ansicht nach auf den verstärkt steigenden Einsatz von Frontend-Frameworks auf JS-Basis zurückzuführen.

Vertrauen ist gut

Der Artikel »Contextual Spacing For Intrinsic Web Design« erläutert anschaulich und ausführlich die Nutzung von adaptiven, kontextabhängigen CSS-Techniken für Abstände in Web-Layouts.

Höhenflug vorbei?

Der Marktanteil von WordPress ist erstmals gesunken. Zwei Artikel von Vladimir Simović (aka perun) und Joost De Valk gehen auf die Gründe ein, die neben einem Image-Problem u. a. in der forcierten Entwicklung zu Block und Full Site Editing liegen. Wir sehen uns bestätigt, verfolgen diese Entwicklung aufmerksam und in Hinsicht auf unsere künftige Ausrichtung auch kritisch. Tools wie primo zeigen vielleicht die künftige Entwicklung.

Freiwillig gläsern

Der Comic »Contra Chrome« illustriert in erschreckender Weise, zu welchem machtvollen und skrupellosen Instrument zur Ausforschung seiner Nutzenden sich der Browser Chrome entwickelt hat. Die meisten von uns wissen oder zumindest ahnen vieles davon, nun, Bilder sagen mehr als viele Worte, wenn auch mit Sprechblasen …

Orientierung gewünscht

»Building like it’s 1984: Scrollbars in web applications« zeigt mit vielen anschaulichen Beispielen, wie sich der Umgang mit der Anzeige von scrollbaren Bereichen entwickelt und verändert hat.

Browser united

Die relevanten Browser-Hersteller kündigen eine stärkere Zusammenarbeit an, um Browserkompatibilität und Entwicklungsgeschwindigkeit zu verbessern. Dazu gibt es eine Ankündigung und ein Dashboard.

Tue Gutes und rede darüber

Die Microsite »buildexcellentwebsit.es« versammelt in überzeugender Weise die Prinzipien, Grundlagen und Tools, um auf dem Stand der heutigen Erkenntnisse hervorragende Websites zu bauen.

Besser unterwegs

Der schon etwas ältere Beitrag »How to Create a Customer Journey Map« fasst gut zusammen, was eine »User Journey« ist, woraus sie besteht und wie man sie erstellt.

Wechseln leicht gemacht

Bram.us zeigt eine sehr interessante und reizvolle, aber noch erheblich in der Zukunft liegende Möglichkeit, mit CSS Toggle-Zustände zu ändern.

Perfekt(er) bebildern

Der ausführliche & interessante Grundlagenartikel von Addy Osmani zeigt den zeitgemäßen Umgang mit dem <img>-Element in Hinsicht auf Performance und andere Kriterien.

Tool, Tool, Tools

• Auf SSL for Free kann man selbsterklärend und benutzerfreundlich einen Account anlegen und sich ein kostenloses SSL-Zertifikat erstellen.
• Als ein weiteres von vielen zeigt das Site-Speed-Tool Treo die Ergebnisse in einer visuell ansprechenden Datenaufbereitung mit u. a. Zeitachsen.
• Der Git Command Explorer hilft beim Finden der benötigten Git-Befehle in der CLI.
• Auf terminal.sexy kann man seine karge Terminal-Ansicht optisch aufhübschen, Nerd-Branding gewissermaßen.
• Mit Free Text-To-Speech kann man schriftlichen Text von virtuellen Sprecher*innen (bspw. Marlene, Takumi oder Filiz) in mehreren Sprachen ausgeben lassen und die Ergebnisse als MP3s herunterladen.
• »SmolCSS« versammelt minimale Snippets für moderne CSS-Komponenten und -Layouts zum schnellen Gebrauch.
• Barrierefreie Farben (via Smash Mag):
  • »Reasonable Colors« ist ein Open-Source-Farb-System, mit dem man barrierefreie Farb-Paletten erstellen kann.
  • Mit dem »Contrast Grid« findet man schnell heraus, ob eine gewählte Farb-Kombination unter welchen Bedingungen barrierefrei ist.
• Mermaid ist ein Live-Editor der auf Grundlage eines erweiterten Markdown Code in Diagramme wie bspw. Flow Charts rendert.
• »Material Symbols« ist ein Icon-Satz bei Google Fonts, der neue Möglichkeiten der Anpassung mittels Schiebereglern bietet.
• »Content Map« ist ein sehr praktisches Figma-Widget zum Erstellen einer Content Map.

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.