Webinhalte für Smartphones und Pocket PCs aufbereiten
Wer Internetseiten erstellt, steht seit jeher vor der großen Herausforderung, die Inhalte für möglichst viele Browser und Systeme gleich aufzubereiten. Dank zunehmend einheitlicher Konventionen und CSS-Standards - vom Internet Explorer einmal abgesehen - hat sich dieses Problem trotz größerer Browser-Vielfalt relativiert.
Seitdem Internetseiten nicht nur per PC und Notebook aufgerufen werden können, sondern auch per Mobiltelefon und PDA, stehen Webdesigner vor neuen Herausforderungen. Wollen Website-Betreiber die wachsende Zahl der mobilen Surfer mit ihren kleinen Displays nicht durch ständiges Scrollen verärgern, sind sie gut beraten, Internetseiten speziell für dieses Medium aufzubereiten.
Die einfache Lösung
Dank Cascading Stylesheets ist es möglich, für verschiedene Ausgabemedien unterschiedliche Stylesheets einzubinden, wie es für den Druck einer Website schon lange üblich ist. Auf diese Art können Sie zusätzlich auch ein Stylesheet für ein mobiles Gerät referenzieren:
<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
<link rel="stylesheet" href="handheld.css" type="text/css" media="handheld" />
Vorteil: Diese Methode ist recht schnell und ohne größeren Aufwand realisierbar. Die Inhalte werden nur einmal angelegt und mithilfe separater CSS-Datein unterschiedlich dargestellt.
Nachteil: Die Inhalte lassen sich nur bedingt an mobile Geräte anpassen - zum Beispiel Bilddateien. Theoretisch lassen sich Bilder zwar auch per CSS kleiner darstellen. Allerdings wird immer das Bild in Originalgröße geladen. Wünschenwert wäre, dass für Mobilgeräte Bilder direkt in geringerer Dateigröße geladen werden. Das ist mit dieser Methode nicht möglich.
Die komplexere Lösung
Die Alternative zur CSS-Lösung besteht darin, eine spezielle Version der Website für Mobiltelefone anzubieten. Die meisten Anbieter, wie Tagesschau oder stern.de, haben sich für diese Variante entschieden. Statt nur die CSS-Datei zu wechseln, wird eine komplett eigene mobile Website angeboten, die man auch mit einem normalen Browser anschauen kann.
mobile Website von stern.de (mit fester Spaltenbreite)
Über eine Browser-Weiche wird zudem der automatische Wechsel zur Mobilversion ermöglicht, sodass man automatisch immer die passende Website angezeigt bekommt. Eine Browser-Weiche lässt sich bequem per PHP realisieren. Über die Funktion »get_browser()« lassen sich nicht nur verwendeter Browser und Version feststellen, sondern auch, ob es sich um ein mobiles Gerät handelt.
Den Browser per PHP ermitteln
Die Funktion »get_browser()« liefert einen Array zurück, der alle Informationen über den Browser enthält. Folgender Code macht den ausgelieferten Inhalt davon abhängig, ob es sich um ein so genanntes »mobile device« handelt:
<?
$browser = get_browser(null, true);
if ($browser["ismobiledevice"] == true) {
echo "mobile Inhalte";
} else {
echo "normale Inhalte";
}
?>
Es hat sich mittlerweile etabliert, mobile Websites über die Subdomain "m." erreichbar zu machen, zum Beispiel so: m.sueddeutsche.de.
Die mobile Website der Süddeutschen Zeitung
Genaue Anpassung mit WURFL
Wer seine mobile Website noch genauer an die mobilen Geräte anpassen möchte und daher mehr Informationen über die jeweiligen Geräte braucht, kann auf WURFL zurückgreifen.
WURFL steht für Wireless Universal Resource FiLe und ist ein Open-Source-Projekt. Bei WURFL handelt es sich um frei verfügbare XML-Datei zum Herunterladen. Diese Datei enthält für über 400 Mobilgeräte Informationen zur Auflösung der Displays sowie zu den unterstützten Bildformaten.
Darüber hinaus lassen sich über die XML-Datei Informationen zum Dateiformat der Klingeltöne bis hin zur Auflösung von Hintergrundbildern für das Display abfragen. Die bereitgestellten Informationen variieren von Modell zu Modell und geben teils eine sehr genaue Funktionsübersicht der Geräte wieder.
Die XML-Datei lässt sich mit einer beliebigen Programmiersprache, beispielsweise mit PHP, auslesen. So lassen sich mobile Websites ganz konkret auf einzelne Geräte abstimmen. Vor allem, wenn man spezielle Dienste wie den Download von Klingeltönen oder Hintergrundbildern anbietet, kann WURFL helfen, dem Besucher der Website direkt das richtige Format anzubieten.
Ausschnitt aus der WURFL-XML-Datei:
<device id="htc_x7500_ver1_subua" user_agent="HTC_X7500" fall_back="htc_x7500_ver1">
<group id="product_info">
<capability name="has_qwerty_keyboard" value="true"/>
<capability name="pointing_method" value="stylus"/>
<capability name="uaprof" value="http://www.htcmms.com.tw/gen/Athena-1.0.xml"/>
<capability name="model_name" value="Athena"/>
<capability name="brand_name" value="HTC"/>
<capability name="marketing_name" value="Advantage"/>
</group>
<group id="wml_ui">
<capability name="softkey_support" value="true"/>
<capability name="table_support" value="true"/>
XHTML und CSS für das mobile Web
Für die speziellen Amforderungen an das mobile Web haben sich mittlerweile auch speziell angepasste Versionen von XHTML und CSS entwickelt. Das XHTML Mobile Profile oder kurz XHTML MP wurde entwickelt von der Open Mobile Alliance (OMP). Dabei handelt es sich um einen Zusammenschluss von Dienstleistungs- und Produktanbieter aus dem Bereich Mobilfunk.
XHTML MP besteht aus den Elementen von XHTML-Basic sowie einigen zusätzlichen Elementen zur Textauszeichung sowie zur Gliederung von Formularen, wie man es bei XHTML auch kennt. Eine Anpassung von XHTML auf XHTML MP ist in der Regel also ohne großen Aufwand möglich. Folgender Doctype leitet ein XHTML-MP-Dokument ein:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
Wireless CSS
Auch für CSS hat sich eine spezielle Variante für mobile Geräte entwickelt. Wireless CSS oder kurz WCSS heißt der Standard, der eine Teilmenge des CSS2-Standards ist, aber auch einige zusätzliche Möglichkeiten mitbringt. So lassen sich Eingabefelder mittels WCSS beispielsweise so einrichten, dass sie nur bestimmte Zeichen oder Zeichenfolgen zulassen. Bei folgendem Beispiel werden nur Buchstaben als Eingabe gestattet, wobei der erste Buchstabe ein Großbuchstabe sein muss:
<input type="text" style="-wap-input-format: 'A*a'"/>
Ein weiteres Beispiel, bei dem die Eingabe einer vierstelligen Zahl (etwa eine PIN) erforderlich ist:
<input type="text" style="-wap-input-format: 'NNNN'"/>
WCSS binden Sie ganz genau wie CSS ein: Entweder direkt über Inline-Tags im HTML-Element oder über eine separare CSS- beziehungsweise WCSS-Datei.
Eine weitere zusätzliche Funktion von WCSS ist das Einbinden eines Lauftextes. Man kennt diese Funktion aus alten Zeiten des Internet Explorers. Wurde ein Lauftext beziehungsweise Marquees früher per HTML eingefügt, so geschieht das bei einer mobilen Website mittels Stylesheet. Der Einfachheit halber zeigen wir hier als Beispiel ein Inline-Tag:
<p style="display: -wap-marquee; -wap-marquee-dir: rtl; -wap-marquee-style: scroll">Dieser Text bewegt sich von rechts nach links.</p>
Wer ein Mobilgerät hat, welches WCSS unterstützt, wird bei diesem Code einen von rechts nach links laufenden Text sehen.
Was die Browser machen
Einer der verbreitetsten Browser für Mobilgeräte ist Opera. Da gibt es den Opera Mini für Mobiltelefone und PDAs und den Opera Mobile für Smartphones und Pocket PCs mit Windows Mobile, Symbian OS und Linux.
Opera Mini beziehungsweise Mobile sind auf vielen Geräten vorinstalliert. Opera nimmt somit eine Vorreiterrolle unter den Browsern für mobile Geräte ein. Opera war es auch, der das sogenannte Small Screen Rendering eingeführt hat. Durch diese Methode werden Internetseiten für Mobilgeräte optimiert dargestellt. Fotos werden verkleinert und alles wird in einer Spalte dargestellt. So lassen sich auch "normale" Websites auf den kleinen Displays darstellen.
Was bei der Darstellung nicht optimierter Seiten von Vorteil ist, wird bei Seiten, die speziell für mobile Geräte optimiert wurden, zum Nachteil. Denn das Small Screen Rendering ignoriert die Einstellungen, die das Stylesheet der Website vorgibt, und wählt immer das eigene Rendering. Selbst wenn bei der Stylesheet-Einbindung speziell das Medium "handheld" verwendet wird, ignoriert Opera diese Angaben.
Erst durch eine spezielle Meta-Angabe, die dem Browser mitteilt, dass es sich bei der Website um eine für Mobilgeräte optimierte Version handelt, verzichtet Opera auf den Einsatz des Small Screen Renderings:
<meta name="viewport" description="width=device-width, height=device-height" />
Die Meta-Angabe "viewport" wurde ursprünglich von Apple für dessen iPhone eingeführt. Damit lassen sich Angaben über den Viewpoint einer Seite festlegen. Über die Meta-Angabe lassen sich auch weitere Vorgaben machen, die in der Regel jedoch nur vom iPhone interpretiert werden. So lässt sich einstellen, ob der Benutzer die Website skalieren kann oder nicht:
<meta name="viewport" description="user-scalable=no" />
Mobiles Flash
Was für Browser gilt, gilt auch für Flash. Auch hier gibt es eine spezielle Version für Mobilgeräte, genannt Flash Lite. Es handelt sich bei Flash Lite um eine abgespeckte Version des Flash-Players, der eine wesentlich geringere Prozessorlast verursacht, dabei aber auch weniger Darstellungsmöglichkeiten besitzt. Filter, mit denen sich im normalen Flash Player zum Beispiel Unschärfe- und Glüheffekte darstellen lassen, werden von Flash Lite nicht unterstützt.
Grundsätzlich entspricht die aktuelle Flash-Lite-Version 3.1 aber der Flash-Player-Version 9. Flash-Lite-Inhalte lassen sich mit der normalen Flash-Software generieren. Zu beachten ist, dass einige mobile Geräte wie das iPhone und das neue iPad von Apple ohne Flash Lite ausgeliefert werden. Dessen muss man sich bewusst sein, wenn man Flash-Inhalte für das mobile Web einsetzt.
Tipp: Ob ein Gerät Flash Lite unterstützt, lässt sich im Übrigen auch über WURFL feststellen.
Was noch zu beachten ist
Es gibt eine ganze Reihe von technischen Aspekten, die bei der Umsetzung einer mobilen Website zu beachten sind.
Gestaltung
Was die Gestaltung betrifft, sollte man beachten, dass aufgrund der kleinen Displays von mobilen Geräten eine Mehrspaltigkeit von Inhalten tabu ist. Auch auf eine feste Spaltenbreite sollte man verzichten, da die verschiedenen Smartphones und Pocket PCs sehr unterschiedliche Auflösungen haben und man bei einer festen Breite immer nur bei einer kleinen Anzahl von Geräten eine optimale Darstellung erwirkt.
Navigation
Die Navigation sollte am Seitenanfang stehen und aus wenigen Einträgen bestehen. Denn der Platz auf den kleinen Display ist kostbar. Insgesamt ist eine übersichtliche und reduzierte Darstellung von Navigation und Inhalt angebracht, damit der Besucher der Seite nicht den Überblick verliert.
Ladezeiten
Einige Netzanbieter verwenden Proxyserver, die Bilder und Grafiken stark komprimieren, um einem hohen Datenaufkommen beim Herunterladen von Webseiten entgegenzuwirken. So kann es passieren, dass Fotos mit einer schlechteren Qualität dargestellt werden. Auch Opera Mini bietet einen speziellen Proxyserver an, über den man Inhalte komprimiert empfangen und damit Datenaufkomen reduzieren kann.
Tipp für iPhone-Fans
Noch was für iPhone-Freunde: Mit dem iPhone lassen sich Links zu Websites auch auf dem Homescreen ablegen. Mit folgender Zeile – eingebunden ins HTML-Dokument – wird dann auch das passende Icon zu dem Link angezeigt:
<link rel="apple-touch-icon" href="/icon.png"/>
Das Icon sollte in der Größe 60 × 60 Pixel und als PNG abgepeichert werden.
Über Denis Potschien
Verwandte Artikel
(No Ratings Yet)
