Das Web in voller Größe auf dem Tablet

Montag, 19. November 2012


Seit es unsere Empfehlungen zur Erstellung von Smartphone-optimierten Websites gibt, haben uns viele Webmaster gefragt, wie sie mit Websites für Tablets verfahren sollen. Ein ähnliches Problem haben auch die Entwickler von Android-Apps. Hier bietet der Leitfaden zur Erstellung hochwertiger Tablet-Apps einen idealen Ausgangspunkt.

Obwohl wir keine spezifischen Empfehlungen für die Erstellung suchmaschinenfreundlicher und Tablet-optimierter Websites aussprechen, haben wir dennoch ein paar Tipps für die Gestaltung von Websites, die sowohl für Smartphone- als auch Tablet-Nutzer geeignet sind.

Wenn ihr eure Website für Tablet-Nutzer optimieren möchtet, ist es wichtig, sowohl das Gerät als auch die Erwartungen der Nutzer zu berücksichtigen. Verglichen mit Smartphones haben Tablets größere Touchscreens und verfügen in der Regel über eine WLAN-Verbindung. Tablets bieten eine Interneterfahrung, die mit jedem Computer oder Laptop vergleichbar ist, sind aber flexibler, leichter und insgesamt handlicher. Wenn ihr also auf eurer Website keine Tablet-optimierten Inhalte anbietet, erwarten Tablet-Nutzer die Desktop- und nicht die Smartphone-Version eurer Website.



Für Smartphone-optimierte Websites empfehlen wir Responsive Webdesign . Mit diesem Design ist eine Website für alle Geräte geeignet. Wenn ihr Responsive Webdesign für eure Website verwendet, seht sie euch unbedingt auf verschiedenen Tablets an und prüft, ob alles richtig funktioniert. Genau wie die Smartphone-Version, solltet ihr auch eure Tablet-Version auf verschiedenen Bildschirmgrößen und mit unterschiedlichen Bildschirmauflösungen testen.

Alternativ dazu ist es auch üblich, verschiedene Websites für Desktops und Smartphones zu erstellen und die Nutzer dann auf die passende Version weiterzuleiten. Falls ihr euch hierfür entscheidet, stellt sicher, dass Tablet-Nutzer nicht aus Versehen auf die Smartphone-optimierte Webseite weitergeleitet werden.

Unterscheidung zwischen Android-Smartphones und Android-Tablets
Bei Android-Geräten ist die Unterscheidung zwischen Smartphones und Tablets einfach, nämlich mithilfe des User-Agent-Strings, der vom Browser bereitgestellt wird: Während die User-Agent-Strings von Android-Smartphones und -Tablets beide das Wort "Android" enthalten, findet sich nur im User-Agent-String von Smartphones das Wort "Mobile".

Das bedeutet, dass jedes Android-Gerät ohne ein "Mobile" im User-Agent ein Tablet oder ein anderes Gerät mit einem großen Bildschirm ist und sich daher besser für die Desktop-Website eignet.

Als Beispiel seht ihr hier den von Chrome übermittelten User-Agent-String auf einem Galaxy Nexus-Smartphone:

Mozilla/5.0 (Linux; Android 4.1.1; Galaxy Nexus Build/JRO03O) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19

Oder hier der von Firefox auf dem Galaxy Nexus übermittelte String:

Mozilla/5.0 (Android; Mobile; rv:16.0) Gecko/16.0 Firefox/16.0

Und hier zum Vergleich der User-Agent-String von Chrome auf dem Nexus 7:

Mozilla/5.0 (Linux; Android 4.1.1; Nexus 7 Build/JRO03S) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Safari/535.19

Oder von Firefox auf dem Nexus 7:

Mozilla/5.0 (Android; Tablet; rv:16.0) Gecko/16.0 Firefox/16.0

Da der User-Agent-String auf dem Galaxy Nexus ein “Mobile” enthält, sollte der Nutzer auf die Smartphone-optimierte Website geleitet werden. Auf dem Nexus 7 sollte hingegen die Vollversion der Website erscheinen.

Wir hoffen, dass euch diese Informationen bei der Erstellung Tablet-optimierter Websites weiterhelfen. Wie immer könnt ihr gerne in unserem Forum für Webmaster posten, falls ihr noch weitere Fragen habt.

Post von Pierre Far , Webmaster Trends Analyst, und Scott Main , Lead Tech Writer bei developer.android.com. Veröffentlicht von Sven Naumann, Search Quality Team