Was muss innerhalb einer Webseite angepasst werden, um sie für mobile Geräte zu optimieren?
Update: 30.06.2013
Während der Erstellung von mobile Webseiten sind einige Besonderheiten zu beachten.
Dies beginnt mit der Zuordnung einer anderen DOCTYPE-Definition, beinhaltet optional zusätzliche
Meta-Tags und modifizierte Stylesheet-Angaben.
Des Weiteren kann es notwendig sein, die Inhalte zu optimieren.
DOCTYPE für mobile Webseiten
Sofern Sie Ihre mobilen Webseiten noch nicht in HTML5 implementieren, beginnt die Webseite in der Regel mit der XML Headerzeile, gefolgt von der DOCTYPE-Deklaration:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
In HTML5 würde sich der Beginn einer mobilen Webseite nicht von einer konventionellen Webseite unterscheiden:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
Anpassungen im Head-Bereich
Im <head>-Bereich können optional verschiedene zusätzliche Angaben hinterlegt werden, z.B.:
- Meta-Tag "viewport": enthält Angaben zur Größe des sichtbaren Bereiches und zur Skalierbarkeit
- Meta-Tag "handheldfriendly": Hinweis, dass das Markup der Seite für mobile Geräte optimiert ist (auf HTML5-Seiten sehe ich für dieses Tag keine Notwendigkeit mehr)
- apple-touch-icon: Spezielles Bookmark-Icon für iOS-Geräte, z.B. iPhone, iPad (standardmäßig wird sonst ein Screenshot der aktuellen Webseite als Bookmark genommen).
- apple-touch-icon-precomposed: analoges Bookmark-Icon für Android-Endgeräte.
Tipp: Auf das apple-touch-icon muss nicht unbedingt im Quellcode verwiesen werden. Es ist ausreichend, das Icon in der Webroot abzulegen. Die iOS-Geräte finden das Icon dort automatisch. Somit kann man sich diese Aufblähung des Quellcodes an dieser Stelle sparen. Diese Aussage gilt allerdings nicht für die Android-Variante.
<meta name="handheldfriendly" content="true" />
<link rel="apple-touch-icon-precomposed" href="./image/touch-icon.png" />
Stylesheet-Anpassungen für mobile Webseiten
In den Stylesheets sollten möglichst folgende Angaben überprüft und ggf. angepasst werden:
- Verwendung von relativen Maßen (Prozent oder "em") und keine Verwendung von festen Maßangaben in "px".
- Eventuelle Vergrößerung der Schrift
- Elemente mit float-Angaben können Probleme bereiten. Deshalb ist zu empfehlen, auf float-Angaben zu verzichten.
- Divisions sind vorzugsweise mit der Eigenschaft display:block; zu versehen
- Um aktivierte Links leichter erkennen zu können, sollte man die Pseudoklasse :active zusätzlich zur vorhandenen Pseudoklasse :hover ergänzen und zu diesen beiden Klassen kontrastreiche Farbangaben hinterlegen.
- Generell ist zu testen, ob der Kontrast der Seiten ausreichend ist oder ob ggf. nachjustiert werden muss.
- Ein einfaches Ausblenden von Bereichen durch display:none; macht hingegen wenig Sinn, da die meisten mobilen Geräte die Inhalte dieser Bereiche trotzdem auf das Gerät übertragen und somit das zu übertragende Datenvolumen sich nicht verringert.