Mobile Website vs. Responsive Webdesign

14. Januar 2013 | Kommentieren

Die Optimierung der Website für die Nutzung auf mobilen Endgeräten wird eines der Top-Themen 2013 für Unternehmen sein. Doch welche Möglichkeiten gibt es eigentlich? Wir präsentieren die unterschiedlichen Ansätze und erläutern Vor- und Nachteile.

Mobile Website

Eine Möglichkeit, das eigene Webangebot für die Nutzung auf dem Smartphone zu optimieren, ist die Erstellung einer sogenannten mobilen Website. Dabei handelt es sich um eigenständige HTML-Seiten, die für Smartphones gängige Maße haben. In der Regel enthalten sie weniger Features als die Desktop-Version, einen gekürzten Inhalt und größere Bedienelemente, beispielsweise in der Navigationsleiste.

Mobile Website Adler-SchiffeDie mobile Website ist meist über eine eigenständige URL erreichbar, beispielsweise mobil.domain.de oder m.domain.de – so kann sie separat beworben werden. Über eine Geräteerkennung werden mobile Nutzer automatisch auf diese Subdomain umgeleitet bzw. darauf hingewiesen, dass eine alternative Version verfügbar ist.

Problematisch bei der Auswahl der reduzierten Inhalte ist die Tatsache, dass mobile Internetnutzung nicht gleichbedeutend mit der Nutzung von unterwegs ist - viele Nutzer surfen beispielsweise mit ihrem Smartphone auf der Couch vor dem Fernseher. Hier sind reduzierte Inhalte gegebenenfalls fehl am Platz, der Wechsel zwischen der mobilen Version und der Desktop-Version sollte deshalb jederzeit möglich sein.

In bestimmten Szenarien bietet eine mobile Website mit speziellen Inhalten für unterwegs aber durchaus einen Mehrwert, beispielsweise in der Tourismusbranche. Zu bedenken ist jedoch, dass angepasster Content auf längere Sicht einen entsprechenden Pflegeaufwand hervorruft.

Da die mobile Website oft für ein bestimmtes Spektrum von Displaygrößen angelegt ist, kann es potenziell zu Darstellungsproblemen kommen, denn mobile Endgeräte verfügen über unterschiedlichste Auflösungen. Gerade für Tablets sind Darstellung und Inhalt oftmals nicht optimal, deshalb empfiehlt sich entweder eine dritte Variante in einer Zwischengröße oder die Desktop-Version muss vom Tablet aus gut bedienbar sein.

Responsive Webdesign

Mit Responsive Webdesign kann man dem Problem der unterschiedlichen Bildschirmauflösungen auch anders begegnen. Basierend auf relativen Maßangaben wie Prozent oder Zeichengrößen (ems) passt sich die Website den Eigenschaften des Ausgabegeräts flexibel an. Zusätzlich lassen sich über CSS Media Queries sogenannte Breakpoints definieren, an denen bestimmte Seitenelemente ausgeblendet werden oder alternative Formatierungen greifen. Mehrspaltige Layouts werden einspaltig, Bildgrößen, Textformatierungen und -umbrüche ändern sich ebenso wie die Position der Navigation. So wird es möglich, komplette Website-Inhalte auf unterschiedlichsten Smartphones und Tablets jederzeit komfortabel abzubilden.

Beispiel: The Boston Globe

Responsive Webdesign Boston GlobeDer Nachteil des Responsive Webdesign ist das Dilemma, dass tendenziell die gesamte Website überarbeitet werden muss und der Aufwand gegenüber einer expliziten Mobilversion vordergründig ansteigt. Inhaltlich sehr umfangreiche Seiten wirken zudem auf kleinen Bildschirmen häufig sehr überladen und es muss viel gescrollt werden. Wird aber ohnehin über den Relaunch einer Website nachgedacht, empfiehlt es sich durchaus, auf ein Responsive Design zurückzugreifen. Damit der inhaltliche Umfang dabei im Rahmen bleibt, gilt bei der Konzeption der Gedanke "mobile first".

In der Praxis wird Resonsive Webdesign häufig in einer leicht abgeschwächten Form umgesetzt. Dabei werden verschiedene Layouts mit einem starren Raster für zwei oder drei unterschiedliche Geräteklassen definiert - Desktop, Tablet und Smartphone. Der Übergang zwischen diesen ist dann nicht vollständig fließend, sondern relativ abrupt. Welche konkreten Techniken für den eigenen Internetauftritt am besten geeignet sind, hängt wie so oft vom Unternehmen und dessen Zielgruppe ab. Nicht zuletzt ist man nämlich auf eine gewisse Verbreitung moderner Browser angewiesen, um deren ganzes Potenzial für eine flexible Darstellung nutzbar zu machen.

In welchem Grad eine Website im Hinblick auf Responsive Webdesign umgesetzt wurde, lässt sich ganz einfach durch Verkleinern des Browserfensters testen. Oder man verwendet eines der zahlreichen Werkzeuge wie z.B. das Bookmarklet von Benjamin Keen, das die aktuelle Seite in verschieden großen Inline-Frames lädt.


Kommentieren


Vorheriger Artikel

Nächster Artikel

Übersicht

Schleswig-Holstein. Der echte Norden.