Mobile Optimierung von Webseiten – Technische Umsetzung

Responsive Website

Bei einer responsiven Website bleibt das HTML für alle Endgeräte unverändert und die grafische Darstellung wird über CSS media queries flexibel an die Bildschirmgröße anpasst. Nach Ethan Marcottes ursprünglicher Definition ist “Responsive Web Design” eine Kombination aus “fluid grids, flexible images und media queries”.

Fluid grids: Ein Grid ist ein Gestaltungsraster auf dem der Designer sein Layout aufbaut. Um für die Vielfalt an Ausgabegeräten das jeweils optimale Layout zu benutzen muss das Grid sich der Bildschirmgröße flexibel anpassen. Wo früher in festen Pixelwerten gerechnet wurde, berechnet man im responsive Design Spaltenbreiten und Abstände in Prozent. Eine weitere Layouttechnik die sich für responsive Seiten eignet ist das elastic Layout, das eine Kombination aus fixed und fluid Komponenten benutzt.

Flexible images: Entsprechend des Rasters in dem sie platziert werden müssen sich natürlich auch Bilder (und Videos) flexibel anpassen – eventuell müssen für kleinere Bildschirme auch andere Bildausschnitte angezeigt werden damit die Bildinhalte erkennbar bleiben. Aber Vorsicht: die Dateigröße kann sich bei mobilen Geräten negativ auf die Ladezeiten auswirken, deshalb müsst Ihr hier zusätzliche Maßnahmen ergreifen, auf die wir in den Artikeln “Responsive Media” und “Mobile Performance” intensiver eingehen werden.

Media queries: Auch mit Prozentwerten stößt man jedoch irgendwann an Grenzen: ein Button kann auf einem Smartphone in 100% Breite toll aussehen, auf einem 27”-Bildschirm eher nicht. Hier kommen die media queries ins Spiel: an sogenannten “breakpoints” können die Styles an Bildschirmbreite, Auflösung und einige andere Eigenschaften des Ausgabemediums angepasst werden.

Mobile Webseite

Bei einer mobilen Webseite existiert für mobile Geräte eine separate Code Basis. Diese wird mittels Browserweiche an den Browser ausgeliefert – entweder dynamisch, auf derselben URL, oder auf einer separaten URL (z.B. m.domain.de). Die Browserweiche orientiert sich am sogenannten “user-agent”, in dem Name und Version der benutzten Browsersoftware an den Webserver übermittelt wird. In jedem Fall muss es dem Besucher zusätzlich möglich sein manuell zwischen mobiler und Desktop-Ansicht hin und her zu schalten – vor allem wenn die mobile Seite noch nicht den vollen Funktions- und inhaltlichen Umfang hat.

Welche Methode ist die beste?

Eine responsive Seite ist langfristig sicherlich die beste Lösung da das Gesamtkonzept durchgängiger, der Erhaltungsaufwand geringer, und die Umsetzung weniger fehleranfällig ist.

Bei einer mobilen Website ist der Erhaltungsaufwand durch die doppelte Codebasis sehr hoch, zudem ist eine Browserweiche nicht sehr zuverlässig, sodass der Browser nicht immer korrekt identifiziert wird. Auch die SEO wird problematischer: Bei dynamischer Auslieferung z.B. können Searchbots nicht ohne Weiteres sehen dass hier auch eine mobile Variante verfügbar ist. Bei einer separaten URL wiederum ist die korrekte Umleitung sehr komplex: wenn eine bestimmte Unterseite für mobile Geräte noch nicht existiert, kommt es häufig vor dass einfach zur Homepage der mobilen Seite umgeleitet wird. Dies ist für den Benutzer jedoch inakzeptabel und wird auch von Google entsprechend schlecht bewertet.

Dennoch kann es aus unterschiedlichen Gründen manchmal gerechtfertigt sein mit einer separaten mobilen Seite zu beginnen. Diese wird dann in sich ebenfalls als responsive Website aufgebaut und kann später die Desktopseite ganz ersetzten. Unternehmen mit sehr komplexen oder inhaltsreichen Seiten ermöglicht dies manchmal eine schnellere Umsetzung einer mobilen Webseite, sollte aber nicht als finale Lösung angestrebt werden.

Alle Artikel in der Responsive Design Serie:

Einführung

Technische Umsetzung

Content Strategy

SEO für mobile

Responsive Layout

Responsive Media

Mobile Performance