Kategorien
Design JavaScript & jQuery Programmierung Responsive Design

Responsive Images: Mit rwd.images.js machen oder auf den Standard warten?

Das leidige Thema "Responsive Images" ist noch lange nicht vom Tisch. Soll es nun das Picture-Element werden, wie das W3C es vorsieht, oder ist doch das Srcset-Attribut der WHATWG das Mittel der Wahl? Abseits jeglicher Streitereien um Standards muss die Design-Community schlichtweg das Problem lösen. Denn, ob die Gremien nun zur Verabschiedung gelangen oder nicht, responsive Bilder werden jetzt und nicht erst in ein paar Jahren benötigt. Das Mittel der Wahl ist naheliegenderweise JavaScript. Ein ganz frisches Script aus der Feder des Australiers Matt Stow hat das Potenzial zur besten, bisher verfügbaren, clientseitigen (Zwischen-)Lösung zu werden…

html5-logo

Die Problematik Responsive Images

Ich spare mir an dieser Stelle lange Abhandlungen zum Thema und beschränke mich auf das Wesentliche. Weiter unten sind auch ältere Beiträge aus dem Dr. Web Magazin zum nochmaligen Nachlesen verlinkt. Wer sich mit Responsive Images beschäftigt, sieht sich mit folgenden Problemen konfrontiert:

  • Es ist nicht sinnvoll, ein Bild, das für die Anzeige auf einem HiDPI-Display optimiert ist, auf die Größe einer wesentlich kleineren Auflösung runter zu skalieren. Umgekehrt ist es noch weniger sinnvoll. Ziel ist also, jede Zielauflösung mit einem dafür optimierten Bild zu bedienen.
  • Ebenfalls nicht bewährt hat sich die Verwendung extrem starker Kompressionsfaktoren, um wenigstens die Bandbreitenverwendung bei zu großen Bildern zu begrenzen.
  • Das IMG-Element wird von Browsern jeden Alters zuverlässig verarbeitet, dabei aber mit verschiedenen Maßnahmen je nach Browser vorbehandelt (Prefetching etc.). Bilder responsiv über das SRC-Attribut auszutauschen, ist von daher nicht konsistent und in jedem Falle zuverlässig möglich. Zumindest sorgt es für mehrfache Requests. Ältere Browser zeigen weitere Fehlverhalten. Die Vermeidung des SRC-Attributs wäre ein guter Weg, die Browser von Vorbehandlungstechniken abzuhandeln und multiple Requests zu vermeiden.
  • Häufig ist es nicht sinnvoll, auf kleineren Displays das gesamte Bild anzuzeigen. Mittels sog. "Art Direction" sollte man in der Lage sein, den Anzeigebereich des Bildes zu kontrollieren. So könnte man sich etwa vorstellen, dass ein Onlineshop für Hundenahrung in der großen Desktopvariante eine Hundefamilie zeigt, während die mobile Version lediglich den Kopf eines der Tiere darstellt. Das ist kein trivialer Task und das Hauptargument gegen Srcset, den Ansatz der WHATWG. Genau diesen Anwendungsbereich kann das Attribut nicht abdecken, Picture, der Vorschlag des W3C hingegen schon.

Mit JavaScript ist bekanntlich nahezu alles möglich. Die Zahl verfügbarer Scripte für Responsive Images ist entsprechend hoch. Kaum eines jedoch adressiert alle Problempunkte. Zudem bringt JavaScript als solches wieder einige eigene Probleme mit. Das größte dabei: Was passiert, wenn der Nutzer JavaScript abgeschaltet hat oder – wahrscheinlicher – JavaScript nicht funktioniert. Letzteres ist umso häufiger der Fall, je mehr Scripts, wohlmöglich noch aus unterschiedlichsten Quellen, eingebunden sind. Ein Script zur Behandlung von Responsive Images sollte daher stets eine Noscript-Lösung mitbringen.

rwd.images.js: Das Beste bis zur Verabschiedung des Picture-Elements?

Das erst seit wenigen Tagen auf Github verfügbare Script rwd.images.js des Australiers Matt Stow ist auf die Vermeidung aller genannten Problembereiche getrimmt. Im Einzelnen fängt Stow folgendes ab:

  • Das SRC-Attribut wird nicht dem Element mitgegeben, sondern in einem Data-Attribut versteckt. So vermeidet Stow Prefetching und andere Techniken, sowie multiple Requests.
  • Mittels Noscript kann ein Bild im Falle des Nichtfunktionierens von JavaScript gesetzt werden.
  • Art Direction, also die Veränderung von Bildfokus, Zoom und Ausschnitt, wird unterstützt.

Weitere Features bestehen etwa darin, dass Pixelwerte in ems umgerechnet werden können, HiDPI-Varianten bei Einhaltung einer Namenskonvention unterstützt werden und einiges mehr. So sieht das Script, das minifiziert und gezippt auf unter 1,7 kb kommt, im Einsatzbeispiel aus:




Über die Klasse rwdimage wird das Script auf das entsprechende Bild getriggert, alles andere wird über das Data-Attribut `data-rwdimage‘ und dessen Derivate geregelt. Sämtliche Anweisungen, die man ansonsten im Stylesheet machen würde, werden über das Data-Attribut übergeben.

Das ist im Grunde auch schon mein einziger Kritikpunkt, besonders mit Blick auf die Zukunft. Perspektivisch kommt eine ganze Menge Arbeit auf Designer zu, die jetzt intensiven Gebrauch von den Möglichkeiten des Scripts machen. Jegliche Änderung am CSS muss wieder inline erfolgen. Andererseits, wenn es letztlich das Picture-Element würde (oder eben doch Srcset) und man seine Projekte in den standardkonformen Zustand bringen will, muss man eh erneut ran.

Insofern darf rwd.images.js aktuell als eine der vollständigsten Lösungen für das Responsive-Images-Problem gelten. Nachdem es über keinerlei Abhängigkeiten verfügt, ist die Tauglichkeit schnell getestet und rückstandsfrei entfernt bei Nichtgefallen.

Links zum Beitrag

Kategorien
Design HTML/CSS

Bootstrap 3: Warp-Geschwindigkeit für CSS-Selektoren und andere Neuerungen

Das bekannte Frontend-Framework Bootstrap, entwickelt im Hause Twitter, ist vor Kurzem in der Version 3.0.0. veröffentlicht worden. Kenner schätzen Bootstrap in der Version 3.0 aufgrund des strikten Mobile-First-Ansatzes und des damit verbundenen „Easy Goings“ bei der Entwicklung für das schier endlose Heer von mobilen Endgeräten, von denen jedes für sich eigene Darstellungsmacken mitbringt.

bootstrap

Die neue Bootstrap-Variante wurde innerhalb von 9 Monaten gestaltet, entwickelt und fertig gestellt. Das minifizierte CSS wurde um mehr als 20% von 127kb auf 97kb reduziert. Die neue Bootstrap-Version kommt außerdem mit einem optimierten Box-Modell sowie einem neuen, spezifischen dreiteiligen Grid-System, welches die entsprechenden Breakpoints für Smartphones, Tablets, Desktops und breite Desktops gleich mitbringt. Bootstrap antizipiert und behebt durch diese 3 Standardklassen, die Breakpoints für „small“ (Smartphones etc.), „medium“ (Tablets, Phablets etc.) und „large“ (Desktops, Extra-large Desktops) setzen, sowie das 12er-Grid das lästige Erstellen von separaten Stylesheets oder zusätzlichen Media Queries.

Die Neuerungen sind dabei so beträchtlich, dass der Sprung der Versionierung – von 2.3.2. auf 3.0.0. – ebenfalls größer ausgefallen ist.

Lässiges Schreiben von Stylesheets mit LESS

Zu den weiteren wichtigen Neuerungen gehört die Integration des CSSFrameworks LESS: Mit LESS wird CSS um Variablen, Mixins, Operationen und Funktionen erweitert; so lässt sich beispielsweise ein hexadezimaler Farbwert wiederverwenden, in dem er in eine Varable wie z.B. @color geschrieben wird – was widerrum wiederholtes Nachschauen des Hex-Wertes sowie weitere kleinere Lästigkeiten erspart und ganz nebenbei noch die Geschwindigkeit erhöht, mit der die gesamte Softwareapplikation kompiliert wird.

Darüber hinaus bietet Bootstrap 3.0 neues Design und ein neues Theme. Die Javascript-Plugins wurden ebenfalls umgeschrieben.

Glyphicon-Fonts auf der Basis einer Schriftfamilie

Ein weiteres, äußerst interessantes Feature sind die Glyphicon Fonts. Sie wurden wieder ins Projekt geholt und die Bilder durch eine Schriftfamilie ausgetauscht, mit insgesamt 40 neuen Glyphen – das erspart viele Lästigkeiten bei der Implementation von Icons, die ganz nebenbei – durch die Verwendung als Schriftfamilie – nahezu beliebig skalierbar sind.

glyphicons

Es wurden einige Komponenten hinzugefügt, beispielsweise die Panels und gruppierten Listen, andere entfernt, wie das Akkordeon – es wurde durch zusammenklappbare Panels ersetzt; auch Untermenüs und einige andere Komponenten wurden entfernt. Viele Klassennamen wurden umgeschrieben und aktualisiert.

Vor der Dokumentation haben die Bootstrap-Entwickler ebenfalls nicht Halt gemacht und diese um einige wichtige Aspekte erweitert. Dazu zählen vertiefende Abhandlungen und nützliche Informationen rund um die Themen Bootstrap-Komponenten, die Browserunterstützung, Lizenzfragen, Barrierefreiheit sowie weitere Aspekte.

Bootstrap 3 macht Schluss mit alten Zöpfen

Die beste Nachricht der Bootstrap-Entwickler ist jedoch zweifellos, dass die Unterstützung für Internet Explorer 7 aufgegeben worden ist. Die Bootstrap-Entwickler folgten ganz den rauhen Gesetzen des Marktes. Da für IE 7 zweifellos eine Oldtimer-Zulassung benötigt wird, muss er nicht mehr zwangsläufig unterstützt werden, mag sich das Entwicklerteam gedacht haben. Firefox 3.6 wird ebenfalls nicht mehr unterstützt; die Unterstützung von IE 8 ist gewährleistet, allerdings muss zur Unterstützung das Javascript-Framework Respond.js eingebunden werden, damit die Media Queries korrekt funktionieren.

Die Navbars und Panels benötigen nun die .navbardefault und .panel-default-Klasse für die jeweilige Standardvariante. Die berühmten Bootstrap-Jumbotrons gehen nun über die volle Breite des Viewports und beinhalten einen weiteren Container.

Ein vollständiger Baukasten für die Entwicklung von Responsive und Mobile Websites

Bootstrap 3 verfolgt den „Responsive“ und „Mobile First“-Ansatz konsequent. Die für die mobile Entwicklung notwendigen Komponenten sind bereits vollständig eingebaut und bedürfen keiner weiteren Stylesheets. So erklärt sich der Erfolg von Bootstrap durch die Fokussierung auf das Notwendige: Minimaler Aufwand bei gleichzeitig bestmöglicher Performance, Reduzierung auf Klassen, die die Breakpoints für automatisch regeln, schlankes CSS durch den Einsatz von Mixins und Variablen via LESS – alles zusammen der ideale Ansatz für ein performantes Frontend-Framework, welches sich auf ideale Art und Weise mit mächtigen Backend-Frameworks und Applikationen verweben lässt.

Natürlich gibt es für die populärsten Content Management Systeme, wie zum Beispiel WordPress und Drupal, bereits Bootstrap-Themes, die ein Layout anhand des Bootstrap-Grids ermöglichen. Der Einsatz von Bootstrap ist leicht verständlich und sehr intuitiv; Beginner in der Web-und Mobileentwicklung werden ebenfalls gut und schnell mit dem Framework zurechtkommen.

Die schnelle Verbreitung und Übernahme von Bootstrap in der Entwicklercommunity bestätigt, dass sich mit Bootstrap sehr gut performante und skalierbare Webapplikationen bauen lassen. Entwickler von Webapplikationen, die mit Ihren Applikationen auch „nach vorn hin“, also auf mobilen Endgeräten eine „bella figura“ machen wollen, sollten dieses Framework in ihren Werkzeugkasten aufnehmen.

(dpe)