Web Design News & Link-Tipps – Nr. 0
Von: Raimund, Jonas In dieser Nullausgabe fassen wir alle noch erhaltenswerten Link-Tipps im Blog zusammen, die wir vor dem neuen Format bis November 2021 einzeln veröffentlicht haben.
Allgemein
Wie oft Google den Suchmaschinen-Algorithmus aktualisiert
Für das Jahr 2018 hat Google über 3000 Updates am Suchalgorithmus veröffentlicht. Das klingt nach sehr vielen Änderungen, die unmöglich alle berücksichtigt oder nachvollzogen werden können. Moz.com fasst zusammen, welche Typen von Updates Google ausspielt und was es für SEOs und Webdesigner zu beachten gibt.
Welche Berufe erstellen Websites?
So dynamisch die Web-Industrie sich entwickelt, so dynamisch entstehen und vergehen neue Berufsbezeichnungen. Entsprechend schwer fällt es, den geeigneten Ansprechpartner für das neue Projekt zu finden. Der Beitrag »The spectrum of design roles in 2018« stellt anschaulich das fachliche Spektrum und seine Abdeckung durch verschiedene Berufsbezeichnungen dar.
Google veröffentlicht »Search Quality Rating Guidelines«
Google hat die sog. »Search Quality Rating Guidelines« veröffentlicht. Hierbei handelt es sich um ein umfangreiches PDF-Dokument, in dem dokumentiert ist, nach welchen Kriterien menschliche Tester Websites zu bewerten haben. Anhand dieses Dokuments können Rückschlüsse gezogen werden, welche Optimierungen an einer Webseite voraussichtlich zu einem besseren Google-Ranking führen.
UX/UI Design
Icon für Accordions
Die Nielsen Norman Group hat untersucht, welches Zeichen das UI-Pattern »Accordion« visuell am besten unterstützt. Ein »Caret« unterstützt die UX von Akkordeons am wirkungsvollsten, da die Benutzenden am ehesten auch aufklappende Inhaltsbereiche erwarten. Nach rechts zeigende Pfeile, Pluszeichen, willkürliche oder gar keine visuellen Hinweise funktionieren schlechter.
Websites auf Foldables
In seinem Artikel »Current Web on Galaxy Fold« zeigt Diego González ausführlich die Rahmenbedingungen, denen die Anzeige von Websites auf Foldables unterliegt und gibt Tipps zum besseren Bestehen dieser Herausforderungen.
Warum die 3-Klick-Regel für Websites falsch ist
Eine der bekanntesten Regeln für eine gelungene Navigation auf Websites ist die sog. 3-Klick-Regel. Diese besagt, dass alle Unterseiten mit maximal drei Klicks erreicht werden müssen. Warum diese Regel nicht bzw. nicht mehr uneingeschränkt zutrifft, hat die Nielsen Norman Group detailliert beschrieben.
UX-Probleme mit Dropdowns
Besonders im mobilen Kontext verursachen die UI-Pattern »Dropdown« oder »Select«-Elemente häufig eine erschwerte Nutzung für den Benutzer. Der Artikel von Josh Wayne zeigt anschaulich, welche Grundüberlegungen der Wahl des Elements vorausgehen sollten und welche Lösungen wann am besten geeignet sind. Ebenso lohnend ist der dort verlinkte Artikel »Responsive Design: Why and how we ditched the good old select element«.
Ist die Bottom-Navigation auf mobilen Webseiten die bessere Alternative?
Die bedienerfreundliche Navigation einer Website stellt auf Smartphones eine besondere Herausforderung dar. Mobile Apps setzen daher oft die Tap-Bar-Navigation ein, die unten angebracht ist und die wichtigsten Elemente enthält. Arturas Leonovas vom Smashing Magazine untersucht diese Alternative zum mobilen Top-Navigationsmuster mit einem Hamburger-Menü.
Text-Buttons beeinträchtigen die Benutzerfreundlichkeit auf mobilen Geräten
Die Optimierung einer Webseite für mobile Geräte ist das A und O der Usability. Schaltflächen sollen leicht erkennbar, lesbar, und aktivierbar sein. Das ist bei reinen Text-Buttons oftmals nicht ausreichend der Fall. Anthony von »UX Movement« erläutert diese Problematik anschaulich und zeigt Alternativen für eine verbesserte Benutzerfreundlichkeit.
UI Design Basics – Inhalte separieren
Inhalte, die räumlich nah beisammen stehen oder durch Linien voneinander getrennt sind, werden als zusammengehörig empfunden. Bei diesen wichtigen Gestaltgesetzen können Designer viel falsch machen. Linzi Berry fasst in Ihrem Artikel Separating Content zusammen, was beachtet werden sollte.
Wann weniger Freiraum sinnvoll ist
Was bei Consumer-orientierten Produkten gut funktioniert, kann im geschäftlichen Umfeld schnell zum Problem werden. Der Artikel »How white space killed an enterprise app (and why data density matters)« beschreibt sehr anschaulich, wie Design-Entscheidungen zum Problem werden können.
Machen FAQ Sinn?
Sorgfältig geplant und umgesetzt, sorgen FAQ (»Frequently Asked Question«) für zufriedenere Seitenbesucher und Vertrauen in die Kompetenz des Website-Betreibers. Werden sie jedoch als Allheilmittel für eine fehlende Content-Strategie eingesetzt, tragen sie zu einer schlechten Nutzer-Erfahrung (»User Experience«) bei. Mit diesem Spannungsfeld setzt sich Caroline Roberts in ihrem sehr gelungenen Artikel »The FAQ as Advice Column« auseinander.
Gründe, warum man keine Modal Screens einsetzen sollte
Modal Screens sind ein beliebtes UI-Element im Webdesign, doch ihr Einsatz ist umstritten. Ähnlich wie bei der Verwendung von Slidern lösen Modals nur scheinbar ein Problem und erzeugen oft mehr Nachteile als Vorteile. Die Microsite ModalzModalzModalz versorgt euch mit Argumenten gegen die Nutzung der Overlays und mit Tipps zur gelungenen Umsetzung – sollte ein Modal Screen zwingend notwendig sein.
Listen- oder Raster-Ansicht?
Gruppen von Elementen, aus denen ausgewählt werden soll, tauchen auf fast jeder Website auf, sei es eine Liste von Beiträgen oder eine Gruppe von Produkten. Diese bedienen verschiedene Benutzerverhalten jeweils besser: das gezielte Suchen geht besser mit der Listenansicht, die Raster-Ansicht unterstützt das eher ungerichtete Erforschen besser. Der Artikel von Mei Zhang bietet dazu Argumente und Gestaltungsvorschläge.
Tipps zur Gestaltung von »Coming Soon«-Pages
Ist die endgültige Webseite noch nicht fertig gestellt, kommt häufig eine »Coming Soon«-Page zum Einsatz. Hierbei handelt es sich um eine einfache Webseite, welche vor allem Marketing-Zwecke erfüllen soll und den Besuchern vorab einen Ausblick auf die kommende Webseite gibt. Gestaltungstipps für »Coming Soon«-Pages gibt Design Shack.
Tipps zur Gestaltung des »Back-to-Top«-Buttons
Auf vielen Websites wird ein sog. Back-to-Top-Button eingesetzt, der es den Benutzern ermöglicht, schnell zum Anfang einer Unterseite zurückzukehren. Was es bei der Ausgestaltung dieses Links zu beachten gibt, fasst die Nielsen Norman Group kurz und präzise zusammen.
Tipps zur Gestaltung des »Homepage-Links«
Die Besucher einer Website erwarten, dass das Logo mit der Startseite verlinkt ist. Soviel sollte bekannt sein. Was es sonst noch bei der Positionierung und Ausgestaltung des »Homepage-Links« zu beachten gibt, fasst die Nielsen Norman Group kurz und präzise zusammen.
URLs sind UI
Die URL ist eine wichtige Schnittstelle zum Anwender. Gute URLs sind einprägsam, lassen die Struktur der Website erkennen und sind leicht zu teilen. Scott Hanselman fasst in einem kurzen Artikel zusammen, warum es sich lohnt, etwas Zeit in eine gute URL zu investieren.
Warum die <body>-Schrift größer sein sollte
Während Desktop-Monitore und Smartphone-Bildschirme immer größer werden, ist die Schriftgröße des <body> nicht mitgewachsen und scheint daher geschrumpft zu sein. Zu kleine Schriften sind nicht in der Lage, die Aufmerksamkeit der Nutzer sofort auf sich zu ziehen. Carrie Cousins nennt vier Gründe, weshalb es sinnvoll ist, die <body>-Schriftgröße ausreichend groß zu wählen.
Verhasste Werbetechniken
Werbeeinnahmen sind für manche Webseitenbetreiber mehr als nur eine willkommene zusätzliche Einnahmequelle. Der Einsatz von Werbung in einem Internetauftritt ist jedoch mit Bedacht zu wählen. Was sollte vermieden werden? Therese Fessenden zeigt die unbeliebtesten Werbetechniken auf.
Tipps für gute Styleguides
Bei umfangreichen Webprojekten ist ein Styleguide unverzichtbar. Doch was ist wichtig bei einem Styleguide, was sollte enthalten sein, was kann man gut und was schlecht machen? Andy Clarke hat seinen Konferenz-Vortrag zum Thema Styleguides in Form eines Artikels detailliert aufbereitet. Sehr umfangreich, inspirierend und lesenswert.
Die Lesbarkeit von Texten vor Foto-Hintergründen optimieren
Viele moderne Websites arbeiten mit einem großen Header-Foto, vor dem Texte oder Buttons platziert werden. Bedauerlicherweise leidet bei dieser Art der Gestaltung häufig die Lesbarkeit. Der Artikel der Nielsen Norman Group beschreibt anhand einiger Beispiele sehr schön, wie dieses Problem behoben werden kann.
Frontend
The State of CSS 2020
»The State of CSS« ist eine umfangreiche Umfrage zum Thema CSS, deren Ergebnisse jetzt veröffentlicht wurden. Abgefragt wurden neben verschiedenen technischen Aspekten auch Meinungen zum Umgang mit CSS und flankierende Werkzeuge und Technologien.
10 Jahre Responsive Web Design – wie RWD entstanden ist
Vor zehn Jahren wurde der Begriff »Responsive Web Design« geschaffen. Der berühmte Artikel erschien auf dem Fachportal »A List Apart« und leitete eine neue Ära im Web Design ein. Der Autor Ethan Marcotte hat nun einen Artikel über die Entstehungsgeschichte veröffentlicht.
Alles über die CSS-Eigenschaft »hyphens«
Die CSS-Eigenschaft »hyphens« vereinfacht die Gestaltung von typografisch ansprechenden Texten im Web deutlich. Im Artikel »All you need to know about hyphenation in CSS« stellt der Designer und Typografie-Spezialist Richard Rutter die CSS3-Funktion »hyphens« detailliert und anschaulich vor.
Übersicht aller CSS-Eigenschaften nach Verbreitung
Der Browser Chrome sammelt bekanntermaßen Daten von Websites und erstellt daraus Statistiken. Eine solche Statistik wird im Chrome Plattform Status veröffentlicht und zeigt, welche CSS Eigenschaften wie häufig auf Websites im Einsatz sind.
Die CSS-Eigenschaft »font-size-adjust«
Mit »font-size-adjust« wird bei Verwendung mehrerer Schriftarten die Höhe der Kleinbuchstaben angepasst, sodass diese gleich groß dargestellt werden. Das kann Lesbarkeit und visuelle Darstellung verbessern. Wesentlich für die Nutzung von »font-size-adjust« ist der sogenannte Aspektwert. Wie man diesen ermittelt sowie alles Weitere zu »font-size-adjust« beschreibt der Artikel auf Sitepoint im Detail.
Buttons in Formularen korrekt positionieren
Buttons haben beim Gestalten von Formularen eine entscheidende Bedeutung. Ihre Position ist wesentlich für Versand oder Abbruch und damit den Erfolg des Formulars verantwortlich. Adam Silver geht anschaulich auf verschiedene erfolgskritische Konstellationen ein und zeigt fundierte Lösungen. Mitunter führt das auch zu Überraschungen.
Tools und Techniken für Frontend-Development: Überblick und Roadmap
Moderne Web- bzw. Frontend-Entwicklung entwickelt sich rasend schnell weiter und umfasst zahlreiche Technologien und Tools. Der folgende Link zeigt anhand einer Roadmap, in welcher Reihenfolge Technologien erlernt werden können und gibt Empfehlungen.
Variable Fonts, das SVG der Typografie
Überdurchschnittlich gutes typografisches Design im Web stellt oftmals eine große Herausforderung dar. Die notwendigen Schriftarten und -schnitte in verschiedenen Dateien können die Ladezeit einer Website spürbar verschlechtern. Bei Variable Fonts befindet sich die gesamte Schriftvariabilität hingegen in einer einzigen Datei. Der Beitrag »How to start with variable fonts on the web« gibt eine detaillierte Einführung in die Thematik.
Explicit und Implicit Grids im CSS Grid Layout
Mit CSS Grid Layout definieren wir Raster in CSS und platzieren Objekte in Rasterzellen. Dabei müssen wir nicht alle Werte manuell angeben, CSS Grids sind flexibel genug, um Objekte automatisch zu platzieren. Dies wird durch das sogenannte explizite und implizite Raster gehandhabt. Um was es sich dabei handelt und worin der Unterschied besteht, erläutert Manuel Matuzovic.
CSS transform für Hintergrundbilder
Mit der CSS3-Eigenschaft transform kann man Elemente skalieren, drehen und neigen. Dabei betrifft die Anweisung das gesamte Element inkl. aller Kind-Elemente. Was aber, wenn nur der Hintergrund transformiert werden soll? Oder wenn zwar das Element, aber nicht der Hintergrund verändert werden soll? Craig Buckler stellt ein paar Tricks im Zusammenhang mit CSS Pseudoelementen vor.
Verschiedene Lazy Load-Techniken für Bilder
Bilder haben auf vielen Webseiten einen Anteil von mehr als 50 % an der zu ladenden Dateimenge. Auch wenn die Bilder optimiert sind, beeinträchtigen Sie die Geschwindigkeit der Seite erheblich. Mit dem sog. Lazy Load-Verfahren werden Bilder erst dann geladen, wenn das Bild sich im Viewport befindet. Sitepoint hat verschiedene Techniken zusammengefasst.
Die Einheit »fr« im CSS Grid Layout
Mit dem CSS Grid Layout erhalten wir eine neue Längeneinheit, die fr-Einheit. fr ist eine Brucheinheit und 1fr ist 1 Teil des verfügbaren Platzes. Robin Rendle erklärt die flexible Längeneinheit und zeigt Vorteile auf.
Praktischer Leitfaden zum Einsatz von CSS-Variablen
Mit den sog. »benutzerdefinierten Eigenschaften« (CSS-Variablen) können Werte von CSS-Eigenschaften gespeichert werden, die später für beliebige Deklarationen wiederverwendet werden können. Bei einem Redesign muss bspw. eine definierte Farbpalette nur einmal im Dokument geändert werden. Einen praktischen Leitfaden zum Einsatz von CSS-Variablen hat Maria Antonietta Perna veröffentlicht.
Möglichkeiten mit Viewport Units
Schon seit längerer Zeit ist die Browserunterstützung von Viewport Units überaus gut und aufgrund der vielfältigen Anwendungsmöglichkeiten erfreuen sie sich großer Beliebtheit. Miriam Suzanne stellt die Grundlagen vor und rundet den Artikel mit ihren liebsten Anwendungsfällen ab, Code-Beispiele inklusive.
Quantity Queries for CSS
Mit »Quantity Queries« ist es möglich, Veränderungen an einem Website-Modul vorzunehmen, sobald eine bestimmte Anzahl an Kind-Elementen erreicht ist oder unterschritten wird. Heydon Pickering erklärt die Technik sehr anschaulich.
Es muss ja nicht immer JavaScript sein
Speckyboy hat einen interessanten Artikel zum Thema JavaScript und CSS veröffentlicht. Es geht darum »typische« JavaScript-Lösungen mit reinem CSS umzusetzen. Vielleicht könnt Ihr Euch so in Zukunft die ein oder andere JavaScript-Zeile sparen.
WordPress
Bedingtes Laden von CSS und Javascript in WordPress
Häufig wird ein Stylesheet und/oder ein JavaScript nur auf einer bestimmten Unterseite benötigt. In diesem Fall sollte der Style bzw. das Script auch nur auf dieser Seite geladen werden. Maria Antonietta Perna beschreibt ausführlich, wie mithilfe der Conditional Tags von WordPress CSS- und JavaScript-Dokumente bedingt geladen werden.
Tipps zur Beschleunigung einer WordPress-Webseite
Eine Website muss schnell geladen sein, denn ansonsten steigt die Wahrscheinlichkeit, dass die Besucher die Seite wieder verlassen, noch bevor diese fertig geladen ist. Auch in Bezug auf das Ranking in den Suchergebnissen ist eine schnelle Webseite vorteilhaft. Der Artikel (Update 11/2024) benennt verschiedene Standard-Optimierungsmöglichkeiten für eine WordPress-Website.
Tipps, um WordPress sicherer zu machen
WordPress ist das mit Abstand beliebteste Content-Management-System und daher auch ein bevorzugtes Angriffsziel. Adrian Try hat zahlreiche Tipps zum Thema Sicherheit zusammengetragen und diese mit eigenen Erfahrungen ergänzt (Update 11/2024).
Barrierefreiheit
<select>-Listen
Die nativen Formular-Elemente von HTML werden in verschiedenen Browsern und Betriebssystem sehr unterschiedlich dargestellt und bedient. Da nicht alle Formularelemente visuell angepasst werden können, werden die Elemente häufig selbst nachgebaut. Sarah Highley beschreibt sehr detailliert, worauf zu achten ist und warum das native Element – trotz fehlender Anpassungsmöglichkeiten – meist die beste Wahl ist.
Texte im Browser vorlesen lassen mit Speech Synthesis
Die Speech Synthesis API ist ein Bestandteil der Web Speech API und ermöglicht die Ausgabe von Texten mit einer menschlichen Stimme. Mit dieser Technologie kann der Browser den Text einer Webseite automatisch oder auch per Knopfdruck vorlesen. Die Anzahl der zur Verfügung stehenden Sprachen und auch der Stimmen pro Sprache kann je nach Browser variieren. Im Tutorial von Phil Nash wird der Einsatz der Speech Synthesis API ausführlich beschrieben.
Hinweise zur Verwendung von WAI-ARIA-Attributen in HTML5
Mit Hilfe von WAI-ARIA ist es möglich, semantisch bedeutungslosen HTML-Elementen bzw. -Konstrukten eine Bedeutung zu geben. Das Projekt kann ggf. barrierefrei gestaltet werden. Wann WAI-ARIA sinnvoll eingesetzt werden kann, wird in diesem Artikel kurz und knapp zusammengefasst.
Performance
Lighthouse Scoring Calculator
Eine mit Lighthouse erstellte Leistungsbewertung zeigt den gewichteten Durchschnitt einer metrischen Bewertung. Natürlich haben stärker gewichtete Metriken einen größeren Einfluss auf das Gesamtergebnis. Die metrischen Bewertungen sind im Bericht selbst nicht sichtbar. Was unter der Haube berechnet wird, kann mit dem Lighthouse Scoring Calculator nachvollzogen werden.
100% erreicht und trotzdem schlecht
Neben Validatoren, Lintern und Google Page Speed sind insbesondere die Lighthouse Audits interessant, um die Code-Qualität von Websites automatisch zu überprüfen. Dass die volle Punktzahl allerdings nicht zwangsläufig eine gute Qualität bedeutet, zeigt dieser Beitrag. Fazit: Die automatisierten Tools sind wichtig und hilfreich. Aber die Auswertung muss gelesen werden können.
Warum werden Websites immer langsamer?
»Slow Websites« geht in erster Linie auf »The Bullshit Web« von Nick Heer ein, der eine rapide Verfettung des Internets beklagt. Diese liegt seiner Meinung nach im grundlegenden Geschäftsmodell vieler Websites. Es handelt sich hierbei nicht nur um ein technisches, sondern auch ein kulturelles Problem, das für uns alle mit dem Stichwort »Gratiskultur« selbstkritisch nur angerissen werden kann.
Tools
- »Optimal Overlay Finder« erstellt das optimale, den AA-Kriterien der WCAG entsprechende Overlay für Text auf Hintergrundbildern.
- Polypane ist ein kostenpflichtiger Browser, der es u. a. ermöglicht, eine Website in zahlreichen synchronisierten Viewports parallel zu benutzen und damit das Testen und Debuggen von responsiven Layouts zu erleichtern.
- CSS3 Button Maker erstellt binnen Sekunden simple und ansehnliche CSS3-Buttons.
Feedback & Ergänzungen – Schreibe einen Kommentar
Geschrieben von:
Raimund Büchner
