Responsive WebdesignSeitenladezeiten sind ein durchaus entscheidender Faktor in puncto Usability. Der vor allem durch Smartphones hervorgerufene Unterschiede zwischen Displaygrößen stellen Webentwickler und Webdesigner vor neue Aufgaben. Aus einer statista.de Statistik geht hervor, dass bereits 2013 rund 95% der Internetnutzer mit einer Bandbreite von 2 MBit / s oder mehr im Internet surften. Von diesen Werten können Smartphone Nutzer beim mobilen Internet ohne einen LTE Tarif nur träumen.

Was ist Conditional Loading?

Conditional Loading – übersetzt “bedingtes Laden” – ist der Mechanismus, Website Inhalte je nach Gerät in optimierter Form darzustellen. In der Praxis kann dies beispielsweise bedeuten, dass alle Geräte, deren Bildschirmbreite 500 oder weniger Pixel beträgt, ein 500 Pixel breites Hintergrundbild erhalten. Geräte, deren Breite 500 Pixel überschreitet, erhalten ein größeres Bild (z.B. mit 700 Pixel Breite). Es gibt verschiedene Arten des Conditional Loadings.

Alle guten Dinge sind Drei

Man kann über eine Klasse wie MobileDetect überprüfen, ob der Besucher eine Website von einem Smartphone, Tablet oder Desktop PC aufruft. Die Methode finde ich allerdings nicht optimal, da Design & Programmlogik vermischt werden müssten. Man müsste sich im Script um die Darstellung kümmern. Javascript lässt sich ebenfalls für Conditional Loading verwenden, indem man die Breite und Höhe der Geräte über die Standard Javascript Funktionen abfragt. Mein Favorit bleibt jedoch das Conditional Loading über CSS. Seit CSS 3.0 ist es möglich, mithilfe einiger Längenattribute eigene Stylesheets für bestimmte Gerätegrößen zu definieren.

 

Media Queries – Das individuelle Stylesheet

Media Queries sind relativ simpel. Sie werden innerhalb eines Stylesheets definiert und überschreiben die CSS-Eigenschaften speziell für ein gewisses Gerätemedium oder eine Gerätegröße.

Die Queries funktionieren wie eine if-Abfrage und sind wie folgt aufgebaut: media <Medientyp> and (weitere Attribute, z.B. Gerätebreite)

Eine Beispiel Query, die alle Geräte mit einer Breite von 500 Pixeln auswählt, sähe wie folgt aus:

@media all and (min-device-width: 500px) {
spezielle CSS Eigenschaften für Geräte mit einer Breite von <500px
}

Als Medientypen kann man zahlreiche Werte definieren, darunter beispielsweise print zum Druck der Website oder handheld für Geräte die üblicherweise in der Hand gehalten werden. Eine Übersicht über die Medientypen lässt sich dem Dokument von SelfHtml zu Mediaqueries entnehmen. Ich verwende für Responsive Webdesign dennoch meist all als Medientyp, weil die entsprechenden Stylesheets dann auch auf Desktop PCs geladen werden, was ich ebenfalls sinnvoll finde.

Stylesheets auf die Gerätegröße zurechtschneiden (Unterschied zwischen Geräte- und Fensterbreite)

Widmen wir uns nun den Größenangaben der Geräte. Es gibt einen wesentlichen Unterschied bei den Attributen, den man bei der Implementierung beachten sollte: Man kann für die Media Queries die Gerätegröße oder die aktuelle Größe des Browserfensters als Bedingung festsetzen. Der Unterschied ist für Besucher von Desktop PCs besonders entscheidend. Wenn man die Gerätebreite für das nachfolgende Stylesheet auf 500 Pixel festsetzt, dann wird es nur für entsprechend kleine Geräte verwendet. Setzt man jedoch nur die Breite als Bedingung fest, laden auch Browser, deren Browserfenster die Breite unterscheidet, diese Eigenschaften.

Media Query für Gerätebreite

@media all and (max-device-width:749px){
Stylesheet
}

Media Query für Breite des Browserfensters

@media all and (max-width:749px){
Stylesheet
}

 

Bilder von Gerätegröße abhängig herunterladen

Ziel ist es, durch das Conditional Loading Datenmengen einzusparen, die unnötig übertragen werden. In der heutigen Zeit mag dies auf den ersten Augenblick vielleicht “sinnlos” zu wirken, doch für Smartphone Besucher können macht die Datenmenge einen großen Teil der Usability aus. Das W3 Konsortium empfiehlt sogar ein Maximum von 20KB für mobile Websites. Aus diesem Grund laden wir die verkleinerten Bilder für Mobilgeräte über CSS.

Ein Browser arbeitet immer mit dem letzten CSS-Wert, den er versteht. Aus diesem Grund nimmt man beim Stylesheet eine Abstufung vor. Die Bedingungen werden von oben nach unten immer kleiner. Erst definieren wir in unserem Beispiel das Stylesheet für alle Geräte, dann für 750 Pixel Breite und zu guter Letzt für 500 Pixel Breite. Ich empfehle, für statische Bilder am besten 3 oder mehr Versionen anzulegen. Groß, mittel und klein. Hier ein Beispiel zur Implementierung:

 

#teaser{
background-image: url(background-image.jpg);
}
 
@media all and (max-width:750px{
 
#teaser{
background-image: url(background-image-middle.jpg);
}
 
}
 
@media all and (max-width:500px{
 
#teaser{
background-image: url(background-image-small.jpg);
}
 
}

 

Welche Technik nutzt ihr für Responsive Webdesign Bilder? Lasst es mich in den Kommentaren wissen! 🙂

 

 

 

Bild: Jorma Bork  / pixelio.de