CSS Darstellung auf mobilen Endgeräten (responsive Design)

Wer kennt das nicht? Eine Internetseite sieht auf dem eigenen Computer super aus, sobald diese aber von mobilen Endgeräten oder kleinen Netbooks aufgerufen wird, passt gar nichts mehr.
Da gilt es zu entscheiden: Für welche Geräte möchte ich mich entscheiden? Lohnt sich der Aufwand, auch quasi unbedeutende Endgeräte zu beachten?

Wir erläutern das Ganze mal an dem Beispiel dieser Webseite. Ich selbst nutze ein 13″ MacBook Air Display und einen 24″ SAMSUNG SyncMaster. Beide haben eine hohe Auflösung, meist ist auf Internetseiten bei mir daher rechts und links noch etwas Platz. Netbooks habe ich ganz vernachlässigt, denn diese sterben auf dem Markt gerade aus und werden hauptsächlich durch Tablet-PCs ersetzt. Mal ehrlich – wer gibt auch ca. 250€ aus, um einen zwar relativ kleinen, aber dennoch meist recht dicken PC mit sich herumzutragen? Die Leistung ist zudem größtenteils grottig. Auch normale Handys haben wir außer Acht gelassen. Die meisten Surfen mittlerweile via Smartphone, es gibt kaum Zugriffe durch „alte“ Handybrowser wie z.B. durch Opera auf einem kleinen SonyEricsson Handydisplay.
Mein Augenmerk lag daher also auf Laptops, Tablets (in diesem Falle iPad mini) und Smartphones (in diesem Falle iPhone).

Es gibt nun die Möglichkeit, die Internetseite für verschiedene Endgeräte einzeln zu progrmamieren und durch eine Browser-Systemweiche einzeln aufzurufen. Wir wollten aber erreichen, dass die Seite von websplash auch bei Browsern, die nicht maximal vergrößert wurden (also evtl. nur in einem kleinen Fenster geöffnet sind), möglichst optimal dargestellt wird.
Das ganze lässt sich durch die Darstellungssprache CSS lösen:

Dieser Code gibt an, dass die Darstellung auf „normalen“ Browsern (also keine Handybrowser – aber Achtung: Smartphones und Tablets stellen Internetseiten ohne Abzüge dar, also wie bei dem Zugriff von einem Computer) anders stattfinden soll. Außerdem nur bei einer Breitenauflösung von bis zu 1024 Pixel. Dies entspricht z.B. dem iPad Mini, wenn es quergehalten wird.

Für die Darstellung auf iPhones oder dem iPad mini im Hochformat sollte dieser Code verwendet werden:

Insgesamt können auch beide Codes nacheinander verwendet werden, sodass die maximale Breitenauflösung von 1024 Pixeln in Kraft tritt, bei einer geringeren Auflösung von bis zu 800 Pixel diese aber durch die neuen Eigenschaften überschrieben wird.

Hier ein Codebeispiel für die korrekte Nutzung:

Was gibt dieser Code nun genau an? Hier die Antwort:

Bei normaler Anzeige auf einem maximal geöffneten Browser mit über 1024 Pixel in der Breite (Standarddarstellung) wird der Hintergrund in rot dargestellt. Auf einem Tablet ändert sich die Hintergrundfarbe in grün, auf einem Smartphone in blau.

Das ganze kann man auch auf dem Computer beobachten, denn wir haben diese CSS Angaben ja allgemein gehalten, sie richtet sich also nach der Darstellungsbreite – und nicht nach dem Endgerät.

Die Codes können auch beliebig erweitert werden, beispielweise

Diese Demo sollte das ganze veranschaulichen: [ Demo anzeigen ]

Eine weitere Demo bietet diese Homepage selbst. Einfach die Browserbreite verändern, um eine andere Darstellung zu bewirken.

Natürlich lassen sich nicht nur Hintergrundfarbe, sondern auch alle weiteren CSS Eigenschaften so anwenden.
Es können beispielsweise auch Elemente in der Breite verändert oder komplett ausgeblendet werden.

Noch zwei Hinweise:
Erstens: Bei dem ausblenden von Elementen sollte darauf geachtet werden, dass die Ladezeiten dennoch gering gehalten werden. Diese Funktion sollte kein Ersatz sein, um reine mobile Internetseiten zu erstellen.
Zweitens: Aufpassen bei Styleangaben! Alle Eigenschaften, die für max-width: 1024px gegeben werden, gelten natürlich auch für max-width: 800px! Sollen für max-width: 800px andere Eigenschaften gelten, müssen diese explizit neu angegeben werden. Alte Eigenschaften müssen ggf. aufgehoben werden (z.B. float:left; zu float:none; ändern). Es ist zu empfehlen, zuerst die Angaben für max-width: 1024px zu machen und danach die für max-width: 800px. In dieser Reihenfolge sollten die Angaben auch in der CSS Datei gemacht werden!

Abschließend ist zu sagen, dass dieses responsive Design oft schwierig umzusetzen ist und viel zeitlichen Aufwand benötigt. Habt Verständnis für Internetseiten, die sich auf euerm Smartphone oder Tablet noch nicht optimal darstellen lassen ;-).
Für Verbesserungsvorschläge und das Melden von Darstellungsfehlern bei websplash sind wir übrigens immer dankbar :-).

Internetseiten von websplash werden übrigens Seit einiger Zeit grundsätzlich möglichst responsiv programmiert, sodass Sie von allen Endgeräten aufrufbar sind. Die Zusatzoption für eine besonders optimale Darstellung auf verschiedenen Endgeräten ist jederzeit buchbar.

Ihre Meinung ist uns wichtig

*

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Ausgezeichnet.org