Web Design News & Link-Tipps – Nr. 34
Von: Raimund, Jonas Unsere Themen im September: die Kalkulation von Web-Projekten, das Schreiben von gutem CSS, bessere Performance von Webfonts, Section Styles in WordPress und der unterschätzte Einfluss von UX-Writing.
Allgemein
Aufwandsschätzung bei Web-Projekten
Neben der Darstellung bekannter Grundlagen erläutert Web-Veteran Paul Boag einen neueren Ansatz, Projekte zu kalkulieren: Der »Appetit« der Kunden liefert wichtige Informationen zur Priorität bestimmter Merkmale und zum zielorientierten Einsatz des verfügbaren Budgets.
Webdesignmuseum
Das Web Design Museum dokumentiert die Entwicklung des Webdesigns von den 1990er Jahren bis heute und präsentiert eine Sammlung historischer Websites, die die Gestaltungstrends verschiedener Epochen veranschaulichen.
Wie die digitale Revolution den Tastsinn marginalisiert
In »The Lost Sense« beschreibt Anu Atluru, wie die digitale Revolution den Tastsinn marginalisiert. Durch die zunehmende Nutzung von Smartphones und anderen digitalen Geräten wird unsere Berührungserfahrung auf das Tippen auf glatten Bildschirmen reduziert. Sie betont, dass der Tastsinn essenziell für unsere Wahrnehmung und unser Wohlbefinden ist, und fordert, mehr haptische Erlebnisse in den Alltag und auch in die Gestaltung von Geräten zu integrieren.
KI-generierte Suche und Datendiebstahl
Carolyn Shelby schreibt auf yoast.com über die Entwicklung von KI-generierter Suche, wie es um den befürchteten Ausverkauf von Inhalten aussieht und wie weiterhin optimierte Inhalte für Suchmaschinen erzeugt werden können. Durchaus interessant, aber es sollte klar sein, dass der Anbieter eines führenden SEO-Plugins eine vorgegebene Richtung verfolgt.
Frontend
Umfrage zu CSS gestartet
Die diesjährige Umfrage zum Einsatz von CSS – The State of CSS – ist gestartet. Da sich die Sprache in den vergangenen Jahren extrem schnell weiterentwickelt hat, interessiert uns beispielsweise, wie viele der neuen Techniken bereits aktiv genutzt werden. Wir sind auf die Ergebnisse gespannt.
Scroll Snap Events
Ab Chrome 129 können die JS-Events scrollSnapChange und scrollSnapChanging verwendet werden. Beides ist sehr hilfreich, um beispielsweise das aktive Element in einer Liste von scrollbaren Objekten hervorzuheben oder zu animieren.
Wie sieht gutes CSS aus?
Andrew Walpole hat klare Meinungen zum Schreiben von gutem CSS. Als wichtige Aspekte werden die Vermeidung von unnötigem CSS, die Verwendung von Kommentaren und CSS-Variablen sowie die systematische Strukturierung des Codes genannt. Konsistentes, gut dokumentiertes und durchdachtes CSS verbessert nicht nur die Wartbarkeit, sondern erleichtert auch das Verstehen und Weiterentwickeln des Codes.
Clip Path mit Animationen verwenden
Die CSS-Eigenschaft clip-path wird häufig zum Zuschneiden von Elementen in bestimmte Formen, wie Dreiecke, verwendet. Sie ist aber auch gut für Animationen geeignet. Was damit machbar ist, zeigt Emil Kowalski in seinem Beitrag »The Magic of clip-path«.
Warum JavaScript nicht verfügbar sein könnte
Wir testen jede Website ohne aktives JavaScript, um sicherzustellen, dass alle Funktionen und Inhalte zumindest grundlegend verfügbar sind. Andy Bell hat nun eine Liste zusammengeschrieben, warum JavaScript in der Praxis ausfallen könnte. Das stärkt uns für die nächste Diskussion den Rücken.
Performance
Tipps zur Optimierung des LCP
Auf vielen Webseiten ist das Largest Contentful Paint (LCP)-Element ein Bild. Daher wird die Optimierung von Bildern üblicherweise als erster Tipp genannt. Analysen zeigen jedoch, dass andere Faktoren wie »Time to First Byte« (TTFB) und Verzögerungen beim Laden von Ressourcen eine viel größere Rolle spielen. Um signifikante Verbesserungen beim LCP zu erzielen, muss also nicht nur das Bild, sondern der gesamte Ladeprozess optimiert werden.
Strategien für eine schnellere Webseite
Auf der Website des Full Stack Monitoring-Dienstes »Sentry« beschreibt ein Grundlagenartikel zu Ladegeschwindigkeit von Webseiten, was passiert, bevor Inhalte im Browser gerendert werden. Es werden diverse Methoden erklärt, mit denen die Ladegeschwindigkeit erheblich erhöht werden kann. Das verhindert unnötige Verzögerungen und sorgt für eine flüssigere Benutzererfahrung.
Performance von Webfonts verbessern
Mit einer sorgfältigen Optimierung der Schriftarten einer Website kann die Performance und Benutzererfahrung deutlich verbessert werden. Der Artikel erklärt, wie die Ladezeit von Schriftarten auf Websites optimiert werden kann, indem unnötige Schriftarten vermieden, das richtige Format gewählt, eine asynchrone Einbindung gewährleistet und Ladeverzögerungen minimiert werden.
WordPress
WordCamp US vom 17. – 20.09.2024
Vom 17.09.24 bis 20.09.2024 findet das WordCamp US in Portland, Oregon statt. Neben den Keynotes, Vorträgen, etc. gibt es erstmals einen Showcase Tag, an dem Websites aus verschiedenen Branchen beleuchtet werden, die mit WordPress umgesetzt sind. Das WordCamp US wird live auf dem YouTube-Channel von WordPress übertragen.
ACF-Blöcke nur in bestimmten Elternblöcken sichtbar machen
In diesem Artikel wird beschrieben, wie ACF-Blöcke im WordPress-Block-Editor nur für bestimmte Elternblöcke angezeigt werden. So wird der Editor schlank gehalten, trotz vollem Funktionsumfang.
Wie einzelne Blöcke generell aus dem Editor entfernt werden, erfahrt ihr in diesem Artikel, wie sie gesperrt werden, haben wir hier beschrieben.
Vor- und Nachteile von Section Styles
Seit WP 6.6 sind Section Styles als Feature mit an Bord. Im direkten Vergleich zu den sog. Block Variations und (Partially Synced) Patterns werden Vor- und Nachteile erkennbar. Section Styles können zwar über JSON sehr unkompliziert erweitert werden, erlauben allerdings aktuell keinen Zugriff auf verschachtelte Blöcke, was die Anwendungsfälle für uns stark mindert. Eine ausführliche Übersicht inkl. Anleitung findet ihr bei Fränk Klein.
UX/UI Design
Das Ende von UX-Design, wie wir es kennen?
Der durchaus kontroverse Artikel von Michal Malewicz beschäftigt sich mit den Auswirkungen von KI auf das UX-Design und stellt Selbstverständnis, Bedeutung und Rolle von Designern infrage, da sich automatisierte Tools immer mehr durchsetzen.
Wie Wörter wirken
Der Einfluss von UX-Writing, dem nutzungszentrierten Schreiben digitaler Texte für bspw. Web-Shops, wird offenbar ziemlich unterschätzt, wenn man einer neuen Studie folgt. Diese zeigt anhand von Beispielen, wie die Wortwahl bspw. die Conversion-Rate beeinflusst.
Optimierung von Designs durch die »Blurred Vision Rule«
Kai Wong erläutert eine Methode zur Verbesserung von Designs, indem man diese unscharf betrachtet, um zu erkennen, welche Elemente sofort ins Auge fallen. Diese Technik, bekannt als »Blurred Vision Rule«, ermöglicht es Designern, grundlegende Fehler zu identifizieren, bevor detaillierte Nutzertests durchgeführt werden.
Barrierefreiheit
Übersicht der Tastaturbefehle von Windows, OSX & Co.
Websites müssen mit der Tastatur bedienbar sein, das ist nichts Neues. Doch wie genau öffnet man eine Select-Liste oder aktiviert eine Checkbox in den verschiedenen Betriebssystemen? Eric Bailey hat eine kompakte Übersicht erstellt.
Barrierefreier E-Commerce
Ab Ende Juni nächsten Jahres müssen Online-Shops grundsätzlich barrierefrei sein. Barrierefreiheitsspezialist Marcus Hermann veröffentlicht im Blog von »E-Commerce-barrierefrei« interessante Artikel zum Themenbereich.
Tools
- Isocons ist eine Icon-Library mit verschiedenen isometrischen Icons, die frei heruntergeladen werden können.
- Patternico ist ein Tool, mit dem Muster und Hintergründe aus sich wiederholenden Bildern oder SVGs erstellt werden können.
Geschrieben von:
Raimund Büchner
