Die mobile Website für Smartphones und Tablets optimieren

Mobile Nutzer erwarten optimierte WebseitenHast du in letzter Zeit mal in deinem Analytics-Service nachgeschaut, wie viele Besucher mit einem Smartphone oder Tablet auf deine Website zugreifen? Wenn nicht, dann wird es Zeit, denn höchstwahrscheinlich ist es ein beachtlicher Anteil. Je nach Art und Zielgruppe kann die mobile Version über Erfolg oder Misserfolg der Website entscheiden.

Meist wird die Desktop-Version der Website, auf mobilen Geräten eher schlecht als recht  angezeigt. Daher ist eine Optimierung nötig, um die Ansprüche mobiler Nutzer zu erfüllen. Ich bin gerade selber dabei meine Website für Smartphones und Tablets zu optimieren und möchte meinen Erfahrungen in diesem Artikel teilen.

Etwas Motivation für die Optimierung der mobilen Website gefällig?

Die Arbeitsgemeinschaft Online Forschung (AGOF) hat im Januar 2013 eine aktuelle Studie veröffentlicht, in der die mobile Internetnutzung in Deutschland untersucht wurde. Demnach haben von den knapp 61 Millionen deutscher Handynutzer ab 14 Jahren, über 30% mindestens einmal monatlich auf eine App oder eine Website zugegriffen.

Auch wenn die Steigungsraten seit 2010 abnehmen, können wir davon ausgehen, dass jeder Dritte Handybesitzer das mobile Internet nutzt (laut einer accenture-Studie ist der Anteil auf das Jahr bezogen mit 50% sogar noch deutlich höher). Eigentlich sollte das Motivation genug sein, um die eigene Website für Mobilgeräte zu optimieren.

Eine weitere Studie “Mobile Web Watch 2012” von accenture gibt interessante Einblicke in das Verhalten mobiler Nutzer. Neben den Smartphones, spielen auch Tablets wie ebook-Reader oder das iPad eine immer größer werdende Rolle. Von nur 3% in 2011 stieg die Zahl der Personen, die ein Tablet für den Internetzugang nutzen, auf 17% im Jahr 2012. Auch die kleinen Netbooks werden von 28% der deutschen Bevölkerung zum Surfen im Internet verwendet.

Mobiles Internet Stats

Wenn es zu den benutzten Betriebssystemen kommt, hat das Android mit 46% klar die Nase vorn. Apple’s iOS mit 26% und Windows mit überraschend hohen 20%, folgen auf den Plätzen zwei und drei. Die restlichen Anteile teilen sich Symbian (Nokia), RIM (Blackberry) und Bada (Samsung).

Warum sind diese Daten wichtig? Ganz einfach, weil verschiedene Bildschirmgrößen und Betriebssysteme bei der Optimierung der Website berücksichtigt werden müssen. Ein Layout verhält sich auf einem kleinen iPhone natürlich anders als auf einem Netbook- oder Tablet-Bildschirm.

Auch das Betriebssystem nimmt Einfluss auf das Aussehen der Seite. Deshalb heißt es optimieren, testen und weiter optimieren, bis die Website auf allen mobilen Geräten ansprechend aussieht und benutzerfreundlich ist.

Wie viele Leute greifen von mobilen Geräten auf meine Website zu?

Die Statistiken sind gut und schön, aber natürlich muss das nicht für dich oder mich zutreffen. Wenn deine Besucher ausschließlich von Desktop-PC’s auf die Website zugreifen, ist eine Optimierung für mobile Geräte natürlich nicht oberste Priorität. Allerdings wird dies selten der Fall sein.

Um genaue Daten zu erhalten, kannst du in deiner Analytics-Anwendung nachschauen. Ich selbst habe Google Analytics installiert und sehe dort unter Besucher -> Mobil -> Übersicht sofort, wie viele Besucher meiner Seite mobile Geräte nutzen. Für mich sind es um die 14%.

Wenn ich mir dann die verschiedenen Geräte ansehe, sehe ich den Anteil der Nutzer, die meine Website mit einem Tablet und Smartphone aufgerufen haben. Weiterhin wird das installierte Betriebssystem ausgegeben. Bei mir dominieren Android und iOS, gefolgt von diversen anderen Formaten. Die Optimierung lohnt sich also in jedem Fall.

Tools zum Testen der Website für mobile Geräte

Du kannst zwar das Aussehen deiner Website mit dem eigenen Smartphone und bestenfalls mit einem Tablet überprüfen, jedoch nicht für die verbleibenden Bildschirmgrößen und Betriebssysteme. Dafür gibt es ein paar hilfreiche Tools, die über den PC oder Laptop gesteuert werden können und die mobile Website simulieren und analysieren.

Mobile Website GVIIB

Mobile Website von GVIIB nach dem Fitnesstest von Google – viel Potenzial zur Optimierung

Um das Aussehen deiner Website auf verschiedenen Smartphones und Tablets zu überprüfen, bietet sich ein Tool von dem Browser Opera an. Mit der downloadbaren Anwendung Opera Mobile Emulator siehst du wie die Seite auf verschiedenen Bildschirmgrößen dargestellt wird. Außerdem kannst du Änderungen an deiner mobilen Website sofort live überprüfen.

Zur intensiven Überprüfung der Website auf die mobile Tauglichkeit hin, möchte ich zwei der zahlreichen Anwendungen erwähnen. Der W3C mobileOK Checker unterzieht deiner Website einer Analyse und zeigt Probleme für die Darstellung auf mobilen Geräte an.

Ein Tool das etwas benutzerfreundlicher ist, kommt direkt von Google. Mit dem kostenlosen Start Mobile Fitnesstest wird deine Website auf die Tauglichkeit für Smartphones überprüft. In einem ausführlichen Bericht erhältst du dann Vorschläge zur Optimierung der Seite. 

Desktop vs. Mobile Version der Website

Normalerweise skalieren mobile Geräte die bestehende Website einfach auf die Größe des Bildschirms. Darunter leiden oft Benutzerfreundlichkeit und Lesbarkeit des Inhalts. Außerdem wird die Seite mit Fingern und nicht mit dem Mauszeiger navigiert, weshalb Doppelklicks oder Mouseover-Effekte nicht möglich sind.

Die Unterschiede beim mobilen Zugriff auf Webseiten sind erheblich: 

  • Flash-Inhalte werden von iPhone, iPad und iPod nicht wiedergegeben
  • Dropdown-Listen und sind für Smartphone schwierig zu nutzen
  • Hover- oder Mouse-Over-Effekte funktionieren nicht auf dem Touchpad
  • Bilder und Schriftgröße müssen flexibel sein, um sich sich auf den kleineren Bildschirmen anzupassen
  • Ein Layout mit mehreren Spalten ist schwer steuerbar über ein Smartphone, deshalb empfiehlt sich eine einzige Spalte
  • Ladezeiten sind länger, weshalb für mobile Nutzer auf einige Anwendungen und Elemente verzichtet werden sollte
  • SEO für mobile Seiten variiert, da Titel und Seitenbeschreibungen verkürzt angezeigt werden
  • Suchverhalten mobiler Nutzer kann abweichend sein, weshalb Keyword Research separat durchgeführt werden sollte
Navigation auf einem Smartphone

Die Navigation auf einem Smartphone unterscheidet sich deutlich von der herkömmlichen Website

Der Fokus liegt also auf einer benutzerfreundlichen Navigation, leicht erkennbare Schrift und Bilder sowie der Anzahl der Spalten und Anwendungen der mobilen Website. Generell sollte für mobile Geräte nur eine Spalte angezeigt werden (Tablets können die Desktop-Version benutzen) und auf große Plugins verzichtet werden. Die wichtigsten Inhalte müssen durch Antippen mit einem Finger leicht erreichbar sein.

Die unterschiedliche Darstellung auf mobilen Geräten wird möglich durch sogenannte Media Queries. Diese sorgen dafür, dass die Website für den abfragenden Browser bzw. das abfragende Gerät unterschiedlich aussehen. Das Ganze funktioniert über das Stylesheet und ist relativ technisch.

Zum Glück gibt es aber auch Anwendungen, die uns diese Arbeit abnehmen. Wenn du dich mit CSS auskennst, kann ich diesen Artikel vom PC-Magazin wärmstens empfehlen.

Tools für die Optimierung mobiler Webseiten

Es gibt verschiedene Wege, um deine Website für mobile Geräte zu optimieren. Wie eingangs bereits gesagt, befinde ich mich gerade noch beim Ausprobieren der verschiedenen Möglichkeiten. Ich möchte die drei Optionen vorstellen, die für mich bisher in Frage kommen würden, um meine Website für Smartphones und Tablets anzupassen.

Option #1 – Theme Switcher

Mit einem sogenannten Theme Switcher kannst du deine Website, je nach benutzten Gerät, mit einem unterschiedlichen Theme anzeigen lassen. Zwei der vielen WordPress Plugins sind “Any Mobile Theme Switcher” und “Device Theme Switcher”. Für andere CMS findest du sicher auch passende Plugins, indem du nach einem mobilen Theme Switcher suchst.

Durch diese kleine Hilfe sparst du dir die Erstellung eines Redirects für die mobile Version und kannst dich vorhandenen Themes bedienen und diese bequem den Ausgabegeräten zuordnen. Die Anzahl kostenloser Themes für Blogs ist mittlerweile riesig. Ein Beitrag von t3n stellt eine Auswahl an mobilen Themes für WordPress vor.

Option #2 – WordPress Plugin Lösung

Das WordPress Plugin WPTouch ist wohl die bekannteste Anwendung, um Webseiten kostenlos für mobile Geräte zu optimieren. Es ist in deutscher Sprache verfügbar und bietet eine ganze Reihe an Einstellungen, mit denen du deine mobile Website individuell gestalten kannst. Besucher deiner Website können dann selbst auswählen, ob die mobile oder herkömmliche Website angezeigt werden soll.

Ein anderes Plugin ist das WordPress Mobile Pack, welches einen Theme Switcher, Basic-Themes und Optionen zur Anpassung vorhandener Widgets enthält. Eigentlich eine gute Gesamtlösung, allerdings sind die Themes und Einstellungsmöglichkeiten nicht außerordentlich ansprechend.

Option #3 – Externe App erstellen

Mobile App GVIIB

Baue deine eigene mobile App mit AppYourself

Mit AppYourself ist es kinderleicht eine mobile Version deiner Website zu erstellen und auch wenn es keine hoch-klassige iTunes App ist, wird es deine Besucher sicher beeindrucken. Diese App leitet Besucher von mobilen Geräten an eine URL von AppYourself weiter und stellt die mobile Website dar, die sogar heruntergeladen werden kann. 

Nach der Registrierung kannst du mit dem kostenlosen Plan aus fünf Funktionen (RSS-Feed, Twitter, Video usw.) auswählen und das Design selbst bestimmen. Außerdem hast du die Möglichkeit individuelle Inhalte für die Homepage oder About-Seiten zu erstellen. Ich habe mich mit einer Version für meinen Blog probierte, welche du dir hier ansehen kannst.

Eine gute Variante, um schnell und einfach eine gut aussehende Version einer mobilen Website zu erstellen. Nachteil hierbei ist, dass die App ausgelagert ist und somit nicht die volle Kontrolle darüber besteht. Außerdem hat dies Auswirkungen auf das mobile SEO der Website.

Fazit: Die perfekte Lösung muss noch gefunden werden 

Meiner Meinung nach, bieten die vorgestellten Optionen gute Ansätze zur Optimierung mobiler Webseiten. Allerdings bin ich bisher mit keiner Lösung rundum zufrieden. Die Plugins sind größtenteils beschränkt in den Einstellungsmöglichkeiten, wodurch die gewohnten Inhalte und Anwendungen der Website nicht zur Geltung kommen. Die mobilen Themes und Apps bieten zwar viele Optionen zur Individualisierung der Website, benötigen aber auch viel Arbeit, um kleinere Fehler wie Anpassung von Bildern oder Formatierungen zu korrigieren.

Derzeit wird mein Blog auf Smartphones und Tablets noch als Desktop-Version angezeigt, aber ich werde weiter an Lösungen arbeiten. Da ich in dieser Woche meinen WordPress Blog auf das Thesis Theme umgestellt habe, muss ich mich damit erst einmal weiter vertraut machen, bevor ich mich für eine endgültige Lösung entscheide.

Hoffentlich können dir die gegebenen Hinweise trotzdem dabei helfen, um deine Website für mobile Geräte zu optimieren. Wenn du bereits einen Schritt weiter bist und eine gute Lösung gefunden hast, wäre ich für jegliche Anregungen und einem Kommentar zu deinen Erfahrungen überaus dankbar. Viel Spaß beim Testen und maximalen Erfolg für deine Website! 

Copyright Artikelbild (c) 123RF Stock Photos

Comments on this entry are closed.

  • Carsten Todt 30. März 2013

    Eine gute mobile Website zu haben, wird immer wichtiger. Allerdings unterschätzen nach wie vor einige Webmaster, wie wichtig dies ist. Da lässt sich dann wohl nur sagen: Die Nutzer entscheiden ohnehin selbst, welche Angebote sie nutzen.

  • Rufud 14. Mai 2013

    Wenn ich doch entliche ne bauanleitung finden würde… hette ich die schon. Alle vesuche eine zu bauen schlagen fehl.