So machen Sie Ihre Website mobilfähig

Hier können Sie die Infografik über die weltweite mobile Trafficprognose downloaden.

Doch nicht nur das Smartphone stiehlt dem Desktop-PC die Show. Statt sich am Schreibtisch vor den Bildschirm zu setzen, machen es sich auch immer mehr Internetnutzer mit dem Tablet auf dem Sofa bequem.

Webseitenbetreiber stellt dieser Trend vor neue Herausforderungen: Ein Layout, das auf einem 17 Zoll-Bildschirm funktioniert, lässt sich nicht ohne weiteres auf ein Tablet- oder Handydisplay herunterrechnen. Hinzu kommen herstellerspezifische Größenunterunterschiede. Grund genug, sich intensiv mit der Frage zu beschäftigen, wie sich Webauftritte für Mobilgeräte optimieren lassen, ohne am Desktop-Rechner an Funktionalität einzubüßen. Lösungsansätze bieten separate Webseiten für den mobilen Zugriff, mobile Website-Templates mit adaptivem oder responsivem Layout sowie Plug-ins für gängige Content-Management-Systeme (CMS). Wir beleuchten die Vor- und Nachteile der genannten Möglichkeiten und zeigen Ihnen, welche Alternative Ihrem Webprojekt zur gewünschten Mobilfähigkeit verhilft.  

Mit der Priorisierung mobilfreundlicher Internetangebote setzt Google Webseitenbetreiber weltweit unter Druck. Zwar geistern Schlagwörter wie „Mobile First“ oder „Responsive Webdesign“ nicht erst seit dem Mobile Update durch die Chefetagen internetaffiner Unternehmen. Doch das klare Statement des mächtigsten Suchmaschinenbetreibers der Welt hat Gewicht. Und so fragen sich nicht nur die Verantwortlichen großer Unternehmensauftritte, Behördenseiten, Online-Shops oder Newsportale, wie man den neuen Anforderungen zeit- und kosteneffizient gerecht wird. Auch kleine Betriebe und Selbstständige, die vom Online-Geschäft leben, stehen unter Zugzwang. Dennoch bleibt die Umsetzung entsprechender Anpassungen eine Frage des Budgets.

Während sich eine mobilfreundliche Ausrichtung für neu angelegte Webprojekte heutzutage mit relativ geringem Mehraufwand realisieren lässt, kann der mobilgerechte Relaunch einer etablierten Website mit erheblichen Kosten verbunden sein. Je nach Projekt bieten sich daher verschiede Möglichkeiten an, eine Website geräteunabhängig zu gestalten: Separate mobile Webseiten, Mobile Website-Templates im adaptiven oder responsiven Layout sowie Plug-in-Lösungen für Content-Management-Systeme. 

Mobile Webseiten

Bei mobilen Webseiten handelt es sich um unabhängig von der Hauptseite erstellte HTML-Dokumente, die ausschließlich der mobilen Nutzung unter einer separaten URL dienen. Mobile Angebote werden oft unter dem Hostname „m“ ins Netz gestellt, während sich die Standardseite als Webservice unter „www“ abrufen lässt:

m.beispiel.de

www.beispiel.de

Im Idealfall gibt es von jeder relevanten Desktop-Seite auch eine mobile Version. Mobile Webseiten müssen jedoch nicht zwangsläufig 1:1-Entsprechnungen ihrer Desktop-Pendants sein. Eine mobile Webseite als Alternative neben der Desktop-Seite anzubieten, ist vor allem dann sinnvoll, wenn die Seitenbesucher von unterwegs auf andere Inhalte zugreifen als vom Heim-PC. Verdeutlichen lässt sich dies am Beispiel der Deutschen Bahn: Während das Desktop-Angebot unter „www.bahn.de“ auf den Ticketverkauf ausgerichtet ist, stehen bei der mobilen Version „www.bahn.de/m“ die Fahrplanauskunft, Reservierungen und Baustelleninformationen im Mittelpunkt.

Das Beispiel zeigt zudem, dass mobile Webseiten nicht zwangsläufig als Subdomains realisiert werden müssen. Mobile Webseiten sind in der Regel auf Smartphones ausgerichtet. Das äußert sich in einer Anpassung auf die geringe Bildschirmgröße, große Schaltflächen und den Verzicht datenintensiver Grafiken. Auf anderen Mobilgeräten wie Tablets werden mobile Webseiten, die für Smartphone-Displays konzipiert wurden, nicht optimal angezeigt. Dennoch gibt es gute Gründe, separate mobile Webseiten zu erstellen.

Vorteile:

• Webseitenbetreiber können exakt festlegen, welche Inhalte der Website sie mobil optimieren und welche Informationen nur am Desktop-PC zur Verfügung stehen.
• Beide Website-Versionen lassen sich separat anpassen, ohne dass die Änderungen die jeweils andere Version beeinflussen.
• Bei der Konzeption mobiler Webseiten haben Webentwickler die Möglichkeit, auf die technischen Voraussetzungen des Endgeräte-Typs (in der Regel Smartphones) einzugehen.
• Durch eine reduziere Darstellung lassen sich kleine Webseiten realisieren, die auch bei begrenzter Datenrate schnell geladen werden.

Nachteile:

• Jede separate Website, die als mobile Version erstellt wird, muss zusätzlich gepflegt werden.
• Änderungen auf der Desktop-Seite werden für die mobile Version nicht automatisch übernommen.
• Wenn Webseitenbetreiber für eine Desktop-Webseite eine mobile Version erstellen, erzeugen sie in der Regel Duplicate Content. Dieser kann zu einer Abwertung im Suchmaschinenranking führen.

Adaptives Layout

Eine Alternative zur separaten Website für den mobilen Gebrauch ist ein Layout, das sich automatisch an das jeweilige Endgerät anpasst. Dabei orientiert sich die Darstellung einer Internetseite am sichtbaren Bereich (dem Viewport) des verwendeten Displays. Adaptive Layouts richten sich nach fest definierten Breakpoints – ein relativ starres Gestaltungsraster, dass verschiedene Ansichten für exakt beschriebene Viewports bietet. Üblich sind Layout-Versionen für eine Desktop-Ansicht, eine Tablet-Ansicht und eine Smartphone-Ansicht. Eine fließende Anpassung an die jeweilige Bildschirmgröße wie beim weiter unten beschriebenen responsiven Layout lässt sich mit adaptiven Webseiten nicht umsetzen.

Als technische Grundlage adaptiver Layouts kommen sogenannte Media Queries (Medienabfragen) zum Einsatz. Dabei handelt es sich um ein CSS3-Konzept, das die Zuordnung eines Stylesheets zu einem Ausgabemedium entsprechend seiner Eigenschaften regelt. Üblicherweise werden Websites im adaptiven Layout auf bestimmte Gerätetypen optimiert. Webentwickler orientieren sich hier an beliebten Produktreihen wie dem iPhone oder dem iPad. Entsprechende Webseiten sind daher nicht immer optimal auf das darstellende Gerät abgestimmt.

Vorteile:

• Gegenüber responsiven Webseiten zeichnet sich ein adaptives Design durch eine geringere Komplexität aus.
• Da adaptive-Layouts nur eine begrenzte Anzahl an Ansichten unterstützen, haben Webseitenbetreiber mehr Kontrolle über die Darstellung der Inhalte.
• Im Gegensatz zu separaten mobilen Webseiten muss beim adaptiven Layout nur eine Version gepflegt werden.

Nachteile:

• Aufgrund der Ausrichtung auf bestimmte Display-Größen führen adaptive Designs bei abweichenden Geräteformaten mitunter zu Darstellungsproblemen.
• Die Entscheidung für bestimmte Viewpoints erfordert eine Analyse der gewünschten Zielgruppe.
• Im Gegensatz zur mobilen Website werden für alle Anzeige-Versionen dieselben Inhalte ausgespielt. Eine Reduzierung der Datenlast für Mobilgeräte nur bedingt möglich. 

Mobile Plug-ins für CMS

Für bereits bestehende Webauftritte auf Basis eines Content-Management-Systems bieten Plug-ins eine kostengünstige Möglichkeit, Online-Angebote für Mobilgeräte in kurzer Zeit zu optimieren. Diese Option empfiehlt sich vor allem dann, wenn Webseitenbetreiber am ursprünglichen Desktop-Theme festhalten und dieses lediglich um Funktionen für Mobilgeräte erweitern möchten. Eine beliebte Drittanbieterlösung ist WPTouch für das weltweit meistgenutzte Content-Management-System WordPress. Das Plug-in ermöglicht es Webseitenbetreibern, eine eigenständige, mobilfähige Version ihres Projekts zu erstellen. Diese entspricht im Grunde der separaten mobilen Webseite. Die zusätzliche Version wird ausschließlich für Mobile-Geräte und unabhängig von der Hauptseite ausgespielt. Eine Alternative zu WPTouch ist der WP Mobile Edition.

Vorteile:

• Eine Anpassung durch Plug-ins lässt sich schnell und kostengünstig umsetzten. Basisversionen stehen in der Regel gratis zur Verfügung.

Nachteile: 

• Der sichere, reibungslose Betrieb der Webseite ist vom Software-Support des Drittanbieters abhängig.
• Alle Geräte bekommen die gleichen Inhalte ausgeliefert. Webseitenbetreiber haben somit weniger Freiheiten, auf die spezifischen Anforderungen einer mobilen Nutzung einzugehen als bei separaten mobilen Webseiten. 

In weiten Teilen des Internets ist es üblich, sich bei der Webentwicklung am Suchmaschinen-Marktführer Google zu orientieren. Das Unternehmen erzielt bei Websuchen in nahezu allen relevanten Zielmärkten einen Anteil von mehr als 90 Prozent. Webseitenbetreibern, die essenzielle Google-Richtlinien außer Acht lassen, drohen somit signifikante Sichtbarkeitsverluste. Eigenen Angaben zufolge bevorzugt Google eine responsive Webseitengestaltung. Die Entscheidung begründet das Unternehmen folgendermaßen:    

• Inhalte stehen bei responsiven Layouts nur unter einer URL zur Verfügung und können so leichter geteilt und verlinkt werden.
• Anders als beim Betrieb mobiler Webseiten parallel zur Desktop-Version kann Google responsiven Layouts problemlos präzise Indexierungseigenschaften zuordnen. Somit ist es nicht mehr erforderlich, das Vorhandensein entsprechender Desktop- bzw. mobiler Seiten zu signalisieren.
• Responsive Webprojekte verursachen einen geringeren Pflegeaufwand als Internetauftritte mit mehreren inhaltsgleichen Seiten.   
• Da responsive Layouts ohne Weiterleitungen auskommen, werden typische Fehler, die bei der Zuordnung separater mobiler Webseiten auftreten können, grundsätzlich vermieden.

Der wichtigste Punkt für Google ist jedoch vermutlich, dass bei responsiven Websites ein einmaliges Crawlen genügt, während separate mobile Webseiten vom Google-Bot jeweils einzeln erfasst werden müssen. Der Suchmaschinenanbieter spart durch eine responsive Webseitengestaltung somit deutlich an Ressourcen.