kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …


Welches Icon für Accordions am besten funktioniert

Welches Zeichen unterstützt das bekannte und oft genutzte UI-Pattern »Accordion« visuell am besten? Dieses Thema hat die Nielsen Norman Group, eines der führenden Institute für UX-Forschung, gewohnt akribisch untersucht:

Es zeigt sich, dass einige Icons missverständlicher wirken als andere. 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.

Direkter Link zum Artikel

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.

Direkter Link zur Auswertung

Aktuelle Websites auf Foldables

Immer größere Smartphones mit immer höher auflösenden Displays verleiten zusehends dazu, Viewport-Breiten von 320 Pixeln im Web Design zu vernachlässigen. Faltbare Geräte, sogenannte Foldables, erinnern uns aber nachdrücklich daran, dass wir uns unverändert um solche oder noch schmalere Displays kümmern müssen.

In seinem Artikel »Current Web on Galaxy Fold« zeigt Diego González nicht nur ausführlich die Rahmenbedingungen, denen die Anzeige von Websites auf Foldables unterliegt, sondern gibt auch Tipps zum besseren Bestehen dieser Herausforderungen.

Direkter Link zum Artikel

Scroll-Verhalten im Web

An welcher Stelle auf meiner Website platziere ich welche Inhalte? Um diese Frage zu klären, hilft es zu wissen, welche Bereiche einer Seite das Potenzial für die größte Wirkung auf den Menschen haben.

Above the fold bekommt besondere Aufmerksamkeit, wenn es um priorisierte Inhalte und technische Optimierung geht. Aber auch wenn nicht immer gescrollt wird, verbringt die überwiegende Mehrheit der Leser*innen die meiste Zeit »below the fold«. In dem Artikel Scroll behavior across the web wird analysiert, welcher Bereich einer einzelnen Unterseite, potenziell wie viel Aufmerksamkeit bekommt.

Texte auf Hintergrund-Bildern lesbar gestalten

Texte, die vor Hintergrundfotos oder Videos platziert werden, sind ein beliebtes Gestaltungsmerkmal auf Websites. Leider ist die Lesbarkeit der Texte oft schlecht, da das Hintergrundbild entweder sehr unruhig ist, oder sehr viele verschiedene Farben beinhaltet. Um dieses Problem zu lösen, wird das Bild häufig mit einer Farbe überlagert um die Lesbarkeit wieder herzustellen.

Beitrag zu Ende lesen

Lighthouse Scoring Calculator

Der Lighthouse-Report versucht darzustellen, was die größte Auswirkung auf die vom Benutzer wahrgenommene Leistung hat. Die mit Lighthouse erstellte Leistungsbewertung zeigt einen 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.

Eine sehr interessante Ansicht ist der Vergleich der Metriken verschiedener Lighthouse-Versionen, die zeigen, wie stark sich die Bewertungskriterien einer Website ändern können.

Wer genauer hinguckt, findet den Link zum Calculator auch unterhalb der Zusammenfassung des Reports in den Google Chrome DevTools.

Was heißt wie in CSS? – CSS Vocabulary

Wer sich mit CSS beschäftigt, muss eine Vielzahl von Begriffen kennen. Es gibt Keywords, Values, Media Queries, Combinators, Attribute-Selectors, Rule-Sets, Functions etc. Um sich fachlich korrekt und somit verständlich ausdrücken zu können, sollte man exakt wissen wie verschiedenen Bestandteile im CSS-Code heißen. Genau hier setzte das »CSS Vocabulary« an. Es zeigt in interaktiver und sehr anschaulicher Form ein Glossar mit nebenstehenden Code-Beispielen. Sehr hilfreich – nicht nur für Menschen die sich neu mit CSS beschäftigen.

Screenshot des CSS Vocabulary
Screenshot des CSS Vocabulary

CSS Vocabulary anzeigen