Web Design News & Link-Tipps – Nr. 9

Auch im Hochsommer haben wir uns reihum zu interessanten Nachrichten und Neuigkeiten rund um unsere Industrie ausgetauscht. Wie immer stehen die Tool-Tipps gebündelt am Ende

Aktualisiert am 16. August 2022

Eine kurze Geschichte der digitalen User Interfaces

Sehr interessant zeigt history.user-interface.io mit vielen Screenshots die Entwicklung der Benutzerschnittstelle zwischen Mensch & Computer. Das reicht von Xerox Alto (1973) bis zu Mac OS X (2007), dazwischen tummeln sich Amiga, Windows und andere mehr. Wie haste dir verändert …

Style Queries am Horizont

Während CSS Container Queries endlich in den kommenden Versionen von Chrome und Safari verfügbar sein werden, dauert es mit Style Queries noch etwas. Auch wenn Style-Abfragen grundsätzlich Teil der Spezifikation sind, werden sich die Browser zunächst auf die Implementierung von Größen-Abfragen sowie die neuen Einheiten konzentrieren. Una Kravets gibt einen Ausblick, was mit der Style-Abfrage von Elternelementen zukünftig möglich sein wird.

Neuer Website-Builder für WordPress

Ungeachtet der Fortschritte des Block-Editors (Gutenberg) scheint der Markt noch interessant genug für neue Bewerber zu sein. Laut Breakdance haben wir ihn schon immer gewollt. Wir sind skeptisch.

Figma vs. Sketch

Der Konkurrenzkampf unter den visuellen Prototyping-Tools wird merklich härter. Entsprechende »App vs. Competitor«-Unterseiten haben sowohl Sketch als auch Figma geschaltet. Amüsiert haben wir zur Kenntnis genommen, dass Sketch dort ein aus dem Zusammenhang gerissenes Zitat von Figma verwendet. Die Fangemeinden bekommen sich mal wieder in die Haare und auch Figma scheint für einige nicht so ganz »sauber« zu sein.

Wir sind entspannt und empfehlen euch, sich nicht zu sehr auf ein Tool zu spezialisieren, sondern den Job zu beherrschen. Wir haben schon einige Tools kommen und gehen sehen.

Web Containers nun auch mit Firefox nutzbar

Die Entwicklungsumgebung »WebContainers«, die u. a. Node.js, npm, Terminal, VS Code und Co. im Browser zur Verfügung stellt, ist nun zusätzlich zu Chromium-basierten Browsern mit Firefox nutzbar.

Natives Nesting von CSS

Was bisher nur mit CSS-Präprozessoren möglich war, soll in den CSS-Core übernommen werden. Auf der Seite »Help pick a syntax for CSS nesting« werden die Möglichkeiten der Syntax-Umsetzung mit Beispielen dargestellt. Abschließend wird zu einer registrierungsfreien Umfrage (ohne ersichtliches Laufzeitende) aufgerufen, welche Syntax bevorzugt werden soll.

WordPress Accessibility Day 2022

Das 24-Stunden-Event findet am 2./3. November statt und bringt zwei Schwerpunkte unserer Arbeit zusammen. Es wird 26-28 Präsentationen geben, deren Livestreams kostenfrei registrierte Teilnehmer*innen verfolgen können. Das Programm steht noch nicht, aber hier seht ihr das Programm vom WP Accessibility Day 2020.

WordPress-Installation ist Angriffsziel

Die berühmten »5 Minuten« bei einer individuellen WordPress-Installation können für Hacker genügen, um die Website im Hintergrund zu übernehmen. Der Artikel »WordPress installer attack race« beschreibt die Ursachen, nennt aber auch Möglichkeiten zur Vermeidung.

Kurz zusammengefasst: Automatisch vom Provider bereitgestellte WordPress-Installationen registrieren häufig ein neues SSL-Zertifikat im ersten Schritt des Setups. Diese Zertifikate werden öffentlich geloggt. Unmittelbar nach der Veröffentlichung ruft man den Installationsprozess der im Zertifikat genannten Domain auf und trägt dort eigene Datenbank-Zugangsdaten ein. Damit kann die Website später manipuliert oder komplett übernommen werden.

Neues bei Gutenberg

Mit der jüngsten Version sind beim Gutenberg-Plugin diverse Neuerungen hinzugekommen, bspw. verschachteltes Block-Locking, Templates für Kategorien, Seiten, Custom Post Types etc. oder auch die Anzeige der Lesezeit eines Beitrags im Backend.

Theme-Vorschau zeigt Theme-Pattern

Das WordPress-Theme-Verzeichnis zeigt in der Theme-Vorschau die inbegriffenen Pattern (»Vorlagen«), wenn das Theme solche hat.

UX-Nachschlagewerk von NN/g

Die UX-Erfinder »Nielsen Norman Group« haben das sehr umfang- und hilfreiche Kompendium »Mobile UX: Study Guide« veröffentlicht. Es enthält Analysen und Best Practice-Empfehlungen zu einer Vielzahl von mobilen UX-Pattern. NN/g ist für uns eine wichtige Quelle und regelmäßig Bestandteil unserer Argumentation.

Grids mit ungerader Teaser-Anzahl besser gestalten

Mit der anstehenden Unterstützung von Container Queries wird eine CSS-Lösung möglich, die Dave Rupert in »Solving “The Dangler” Conundrum with Container Queries and :has()« zeigt.

Moderne Lösung für <marquee>-Einsatz … ?

Manche mögen sich noch an die »Browserkriege« erinnern, zu deren bekanntesten Auswüchsen das veraltete HTML-Element <marquee> zählt. Für begründbare Anwendungsfälle dieses UI-Patterns zeigt »The Infinite Marquee« eine CSS-basierte responsive Umsetzung.

Google-Suche in der eigenen Website nutzen

Schon seit 2006 kann man die »Programmable Search Engine« von Google in der eigenen Website einbauen. Inzwischen kann man das Design an die eigene Seite anpassen und zahlreiche Optionen einstellen. Allerdings nimmt man Werbung in Kauf oder zahlt einen »geringen Betrag«. Für Projekte ohne eigene Suchfunktion oder mit zu schlechten internen Suchergebnissen evtl. ein Ansatz.

Tools, Tools, Tools

Das Framework Maizzle ermöglicht das Erstellen von anpassbaren HTML-E-Mails auf der Grundlage von Tailwind.
Openpeeps ist eine Bibliothek von handgezeichneten Menschendarstellungen (Büste, stehend, sitzend) in der belgischen Comic-Schule. Der Download ist kostenfrei, eine Bearbeitung ist ebenfalls möglich.
Der Static Site Builder Astro fokussiert sich auf schnelle, inhaltsreiche Websites und hat Version 1 erreicht.
Mit PageSpeed Compare kann man die Performance-Werte mehrerer Websites miteinander vergleichen.
Der Core Web Vitals Check checkt bis zu 500 Seiten einer Website auf die Core Web Vital-Werte.
Health icons ist eine umfangreiche Icon-Sammlung zum Thema Gesundheit.
Contrast Suggest ist ein weiteres Tool zum Prüfen von barrierefreien Farbkontrasten. Er zeichnet sich dadurch aus, dass er zu nicht barrierefreien Kontrasten alternative Farbwerte zu unterschiedlichen Anforderungen aufzeigt.

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.