kulturbanause Blog

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


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.

Direkter Link zum Artikel

Neu in Chrome 77: Natives Lazy Loading

Ab der Version 77 unterstützt Chrome das Nachladen von Bildern und <iframes> ohne externe Hilfsmittel. Das Hinzufügen des HTML-Attributs loading="lazy" genügt, damit Medieninhalte erst geladen werden, wenn sie in den sichtbaren Bereich kommen. Detaillierte Auskunft zu Beschränkungen und Möglichkeiten gibt der Artikel von Addy Osmani und Kollegen.

Direkter Link zum Artikel

Ist die Bottom-Navigation auf mobilen Webseiten die bessere Alternative?

Die bedienerfreundliche Navigation einer Website stellt auf Smartphones eine besondere Herausforderung dar. Bei einem kleinen Display sind die meisten Bereiche auch bei einhändiger Bedienung noch leicht zu fassen, aber bei größeren Bildschirmen ist es praktisch kaum möglich, den oberen Teil zu erreichen.

Mobile Apps setzen daher oft die Tap-Bar-Navigation ein, die unten angebracht ist und die wichtigsten Elemente enthält. Diese Anordnung ist im Webdesign noch wenig verbreitet, obwohl Nutzer dadurch leichter auf das Menüsymbol klicken können.

Arturas Leonovas vom Smashing Magazine untersucht diese Alternative zum mobilen Top-Navigationsmuster mit einem Hamburger-Menü.

Direkter Link zum Artikel

Warum Text-Buttons die Benutzerfreundlichkeit auf mobilen Geräten beeinträchtigen

Inzwischen ist die Optimierung einer Webseite für mobile Geräte das A und O der Usability. Dazu gehören auch Buttons, die eine Aktion auslösen sollen. 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.

Direkter Link zum Artikel

Tipps und Ideen für moderne Navigationsmenüs

Usability ist eine der zentralen Grundlagen jeder Website und eine gut bedienbare Navigation ist ein Schlüssel zum Erfolg. Sie ist für jeden Benutzer auf den ersten Blick klar verständlich und auf PC, Tablet und Smartphone ohne Einschränkungen bedienbar.

Die Trends bei der Website-Navigation haben sich in letzter Zeit stark verändert. Einige moderne Navigationsmenüs stellt Carrie Cousins von »Design Shack« vor und beschreibt diese auch näher.

Direkter Link zum Artikel

Variable Fonts, das SVG der Typografie

Die Entwicklung von OpenType Variable Fonts ist für die digitale Typografie ein Meilenstein. Ü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 ist das nicht so, denn die gesamte Schriftvariabilität befindet sich nun in einer einzigen Datei. Mit seinem Beitrag »How to start with variable fonts on the web« gibt Oliver Schöndorfer eine detaillierte Einführung in die Thematik Variable Fonts.

Direkter Link zum Artikel

100% erreicht und trotzdem schlecht

Webentwickler nutzen zahlreiche Tools um die Code-Qualität von Websites automatisch zu überprüfen. Neben Validatoren, Lintern und Google Page Speed sind insbesondere die Lighthouse Audits interessant. Dass die volle Punktzahl allerdings nicht zwangsläufig bedeutet, dass die Qualität auch gut ist, beweist folgender Beitrag an Hand der Accessibility-Bewertung. Fazit: Die automatisierten Tools sind wichtig und hilfreich. Aber die Auswertung muss gelesen werden können.

Direkter Link zum Beitrag