Neue Werkzeuge im JS-Armeemesser

Vor einem halben Jahr habe ich hier mein jQuery-Armeemesser vorgestellt – eine Sammlung von jQuery-Plugins, die ich immer mal wieder in Projekten verwende. Mittlerweile hat dieses Messer drei neue Klingen, die nicht einmal jQuery benötigen.

Stumpfe Klinge

In der Praxis hat sich FlexNav leider als wenig brauchbar in – und das möchte ich ausdrücklich betonen – meinem Workflow herausgestellt. Das bedeutet nicht, dass das Plugin schlecht ist, es funktioniert nur für mich nicht besonders gut, was einfach heisst, dass die Integration in meine Projektvorlage umständlich war.

Plugins für Smallscreen-Navigation scheinen mir generell „schwierig“ zu sein. Auch wenn Autovergleiche immer irgendwie hinken: Bei denen, die gut aussehen, darf man nicht unter die Haube gucken und die, die vermutlich in 10 Jahren noch laufen, sehen nach nichts aus. Klar, eine simple Toggle-Navigation, die auf Tap oder Klick eines Buttons ein Menü anzeigt, kann man auch mal eben schnell selbst bauen; das geht sogar (fast) ohne JavaScript. Aber in einer Projektvorlage ist es eben doch bequemer, ein Plugin zu haben, das „einfach funktioniert“. Diese Aufgabe übernimmt nun – für simple Smallscreen-Navigationen – responsive-nav.js.

Neue Klingen

Eine der größeren Herausforderungen im responsiven Web sind Grafiken, die über das <img>-Element eingebunden werden. Angefangen damit, dass man auf kleinen Displays normalerweise keine hochauflösenden Fotos in HD-Dimensionen ausliefern sollte, über Retina-Displays, die eigentlich jede Pixelgrafik in doppelter Auflösung erhalten sollten, damit sie nicht „verwaschen“ aussieht, bis hin zu verzögerten Ladezeiten auf Seiten, die viele <img>-Elemente enthalten.

Nachgeschärft

Mittlerweile gibt es eine Lösung für responsive Bilder in der HTML-Spezifikation, die sowohl die Dimensionen als auch die Auflösung des Zieldisplays bedenken kann und die es erlaubt, aus redaktionellen Gründen unterschiedliche Grafiken auszuliefern. Der Haken ist – wie so oft – die (noch) fehlende Browseruntersützung der dafür notwendigen Elemente und Attribute.

Es gibt diverse Polyfills für <picture>, srcset und sizes, ich mag respimage von Alexander Farkas. Es ist schlank, unkompliziert zu verwenden, hervorragend dokumentiert und bei Bedarf sogar noch erweiterbar.

Nachgeladen

Ein weiteres Plugin von Alexander kann man nutzen, um die sogenannte „wahrgenommene Performance“ zu optimieren. Mitunter ist es sinnvoll, Inhalte (Bilder, iframe-Inhalte, HTML-Bausteine) nachträglich bzw. zuerst eine schlankere Version des Inhaltes zu laden, um den Aufbau der Seite insgesamt zu optimieren. Man sorgt also dafür, dass der Besucher schnellstmöglich „etwas“ sieht und lädt dann die endgültige Version von „etwas“ nach.

lazysizes kann all das und noch mehr. Es ist ebenfalls ein Leichtgewicht, in der „Basisversion“ simpel einzusetzen, auch hier ist die Dokumentation ausführlich und es gibt zahlreiche Erweiterungen. Wie übrigens auch respimage wird lazysizes grundsätzlich über data-*-Attribute gesteuert, was die Integration in Content Management Systeme erleichtert (sofern man Zugriff auf das erzeugte Markup hat).

Nachgerüstet

Überhaupt dürfte die größte Schwierigkeit an responsiven Bildern die Integration durch Content Management Systeme sein, insbesondere wenn technisch wenig versierte Redakteure solche Bilder einsetzen sollen. Für mein Lieblings-CMS Processwire gibt es bereits ein Modul, dass srcset und sizes nachrüstet: TextformatterSrcset – und auch dieses nutzt die beiden oben genannten Scripte.