kulturbanause Blog

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


Effizientes Laden von Third-Party-JavaScript

Das Verwenden von JavaScript von Drittanbietern, bspw. von einem CDN (Content Delivery Network), hat diverse Vorteile. Ein CDN ist im Normalfall schneller als der eigene Server, was die Ladezeiten verringert. Darüber hinaus wird der eigene Server entlastet, wenn Skripte von externen Quellen geladen werden.

Um das Laden von Third-Party-JavaScript effizienter zu gestalten, können die Attribute »async« und »defer« verwendet werden. Den Einsatz dieser Attribute beschreibt Milica Mihajlija in ihrem Leitfaden zum effektiven Laden von Drittanbieter-Skripten.

Direkter Link zum Artikel

UX-Probleme mit Dropdowns

Platzersparnis und erprobte Funktionalität, das sind in Formularen die vermeintlich größten Vorteile von Dropdowns oder Select-Elementen. Besonders im mobilen Kontext verursachen diese UI-Patterns häufig eine erschwerte Nutzung für den Benutzer.

Der ausführliche Artikel von Josh Wayne zeigt anschaulich, welche Grundüberlegungen der Wahl des Elements vorausgehen sollten und welche Lösungen wann am besten geeignet sind.

Direkter Link zur Seite

Ebenso lohnend ist der dort verlinkte Artikel »Responsive Design: Why and how we ditched the good old select element«. Hier führen die Beschränkungen des Select-Elements zu ganz neuen Ansätzen.

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. Der Praxiswert bemisst sich wie so oft stark durch den Browser-Support.

Direkter Link zum Artikel

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.

Direkter Link zum Artikel

Frontend-Development Tools und Techniken: Überblick und Roadmap

Moderne Web- bzw. Frontend-Entwicklung entwickelt sich rasend schnell weiter und umfasst zahlreiche Technologien und Tools. Es ist schwer den Überblick zu behalten und zu verstehen wie die verschiedenen Trends sich gegenseitig beeinflussen, welche Tools und Sprachen voneinander abhängen und was überhaupt relevant ist.

Der folgende Link zeigt anhand einer Roadmap in welcher Reihenfolge Technologien erlernt werden können und gibt Empfehlungen.

Direkter Link zum Artikel

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