xingtwittersharerefreshplay-buttonpicture as pdfLogo_DPM_SCHRIFTZUGinstagram icon blackShapeGroup 3 Copy 2Group 2 Copydepartment_productdepartment_datascienceuserclosebasic clockblogShapearrows slim right copy 3arrows slim right copy 3arrows slim right copy 3

Mobile Optimierung von Webseiten – Technische Umsetzung

DieProduktMacher

DieProduktMacher |

10. Sep. 2015 |

- min Lesezeit

Mobile Optimierung von Webseiten – Technische Umsetzung

Wie setzt man nun eine Webseite für mobile Geräte am besten um? Technisch habt Ihr prinzipiell zwei Möglichkeiten eine Website für mobile Geräte zu optimieren: Als responsive oder als eigenständige mobile 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”.

  1. 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.
  2. 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.
  3. 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:

  1. Einführung
  2. Technische Umsetzung
  3. Content Strategy
  4. SEO für mobile
  5. Responsive Layout
  6. Responsive Media
  7. Mobile Performance

Ähnliche Artikel

Ähnliche Artikel


Was denkst Du?

Picture from our last Facebook Post
facebook

Wir sind super stolz auf unser erstes Printprodukt…

twitter

Wie kann man #chatbots durch #crowdtesting besser …

Picture from our last Facebook Post
instagram

Wir sind super stolz auf unser erstes Printprodukt…

ARKit, an opportunity you will regret having missed
blog

ARKit, an opportunity you will regret having missed