Technologie heute
Wie setzt man nun eine Webseite für mobile Geräte am besten um? Technisch hat man zwei Möglichkeiten eine Website für mobile Geräte zu optimieren: Als responsive oder als eigenständige Website.
Der Unterschied besteht darin wie der Code an den Browser ausgeliefert wird: Bei einer responsiven Seite wird derselbe Code (Seitenstruktur, Inhalte und Funktionalität) an alle Geräte ausgeliefert und nur das Layout an die Anforderungen der unterschiedlichen Geräte angepasst. Bei einer mobilen Seite wird an mobile Geräte anderer Code ausgeliefert als an Desktops.
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 das Layout aufbaut. Um für die Vielfalt an Ausgabegeräten das jeweils optimale Layout zu benutzen muss das Raster sich der Bildschirmgröße flexibel anpassen. Früher wurde immer in Pixelwerten gerechnet, im responsive Design werden die Spaltenbreiten und Abstände in Prozent angegeben. Eine weitere Layouttechnik die sich für responsive Seiten eignet ist das elastische Layout, das eine fixed und fluid Komponenten kombiniert.
Flexible images:
Entsprechend des Rasters 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 aufgepasst: die Dateigröße kann sich bei mobilen Geräten sehr schlecht auf die Ladezeiten auswirken.
Media queries:
Auch mit Prozentwerten gibt es Grenzen: ein Button kann auf einem Smartphone in 100% Breite toll aussehen, auf einem großen 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 für Sie 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.
Doch heutzutage ist es viel zu teuer individuelle Webseiten für alle möglichen Ausgabemedien zu programmieren. So geht man oft einen Kompromiss ein.
Billigste Variante ist auf alle Fälle nach einem Template Ausschau zu halten. Wichtig hierbei jedoch, dass dieses Template HTML5 und CSS3 tauglich ist.
Hier hat man immer noch Möglichkeit später Spezial-Features zu programmieren um vielleicht noch eine extravagante Diashow oder Ähnliches einzubauen.
Die Templates ersparen einem jedoch viel Zeit die Webseite Responsive anzupassen.
Danach hat man zumindest für ein paar Jahre Ruhe, bevor die Neuerungen im Internet wieder zuschlagen und Änderungen hervorrufen.
Free Responsive Website Templates built with HTML5, CSS3 and Bootstrap WordPress Themes
WordPress - Creative Publisher
