Archiv der Kategorie: responsives Webdesign (RWD)

RWD und Retina Displays: Bilder mit hoher Qualität auf Kilobyte-Diät

Ich mag PNG. Aber seit ich mich mit responsivem Webdesign auseinandersetze, greife ich doch immer häufiger auf JPEG zurück. Natürlich kann man für alles JavaScript einsetzen. Auch um auf kleinen Bildschirmen kleine Bilder auzuliefern und große Bilder auf großen Bildschirmen. Weil ich möchte, dass möglichst viel ohne JavaScript läuft, habe ich aber immer öfter mit den Kompressionsraten an großen Bildern heumgespielt und festgestellt, dass häufig erstaunlich kleine (leichte) Dateien dabei herauskommen, JPEG sei dank.

Das war erst mal nur eine Praxiserfahrung, die ich so hingenommen habe. Ich dachte, das sei mehr oder weniger zufällig so, weil die Bilder, mit denen ich gearbeitet hatte, das so hergaben. Allerdings trat dieser Zufall so häufig auf, dass ich in letzter Zeit bei Vorträgen und Schulungen immer häufiger empfahl, mit der Kompressionsrate zu „spielen“ statt Bilder generell per JavaScript auszutauschen (was die Bereitstellung und Abarbeitung eines weiteren JavaScriptes erfordert, vorausgesetzt JavaScript ist überhaupt aktiv).

Irgendwann wollte ich dieses Phänomen mal genauer untersuchen, aber die Arbeit wurde mirvon Dann Jobsis abgenommen. Wie sich herausstellt, handelt es sich nicht um an eine Anhäufung von „Einzelfällen“ sondern um eine belegbare Gesetzmäßigkeit.

Auch wenn es trotzdem immer noch Fälle geben mag, wo der Einsatz eines JavaScriptes Sinn macht, werden diese Fälle seltener:

Retina Revolution

Linktipps Responsives Webdesign (RWD)

In aller Kürze ein paar nützliche Links zum Thema responsives Webdesign:

Online Tool zum  Testen:
https://quirktools.com/screenfly/

RWD muss schnell sein und ein (von mir nicht präferierter) Lösungsansatz:
http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/

Die Bücher aus dem Galileo-Verlag haben mich immer wieder begeistert. Das unten verlinkte werde ich mir auf jeden Fall besorgen. Ihr solltet Euch mal die Videos ansehen. Vor allem im Video Lektion: 3.4 Mobile First, Content First [12:02] wird eine prima Lösung gezeigt, um (ältere) InternetExplorer zu unterstützen, die ja keine media queries verstehen (Stichwort response.js).

Da diese Lösung JS benötigt könnt Ihr natürlich alternativ (falls die Seite auch ohne JS laufen muss) meine an anderer Stelle vorgeschlagene Lösung verwenden (d.h. alle Angaben in media queries für den IE wiederholen. Entweder per HTML5-Boilerplate-Klasse oder in einer CSS-Datei extra für den IE (was ich aus Performanz-Gründen empfehlen würde)).

Hier der Link zum Buch, (Auszüge und einige Videos können Online betrachtet werden):
http://www.galileocomputing.de/katalog/buecher/titel/gp/titelID-3347

Alle hier genannten links habe ich auch der Seite über Responsoves Webdesign zugefügt.