Mobile Web Design

Kurze Antworten:

• Nein. Selten. Denn die Mobile-Web-Nutzer in Deutschland sind insgesamt mit neueren, leistungsfähigen Geräten unterwegs. “XHTML MP (…)  is designed specifically for (…) resource-constrained devices”…
• xhtml-mp ist übrigens kein W3C Standard (was nicht automatisch böse ist, die OMA war wohl damals einfach schneller)
• html5 und CSS(3) - plus viewport meta-tag - sind auf modernen touch smartphones schon eher die Mittel der Wahl

Wikipedia sagt dazu:
“XHTML Mobile Profile (XHTML MP) is a hypertextual computer language standard designed specifically for mobile phones and other resource-constrained devices.
It is an XHTML document type defined by the Open Mobile Alliance. XHTML-MP is derived from XHTML Basic 1.0 by adding XHTML Modules …”

Im Bereich Mobile Web Frontend Entwicklung kommen CSS Media Queries ständig zur Anwendung (und die sind mit Einschränkungen (IE) auch auf dem Desktop nützlich).

Folgende Anweisung greift, wenn das Browserfenster größer als 800px ist:

<link rel="stylesheet" type="text/css"
media="only screen and (min-width: 800px)"
href="desktop800plus.css" />

Diese Anweisung greift, wenn das Anzeigegerät kleiner/gleich 480px ist ist:

<link rel="stylesheet" type="text/css"
media="only screen and (max-device-width: 480px)"
href="small-device.css" />

Das Thema “Website vs. App” ist die eine Sache, spezielle Webseiten-Ausprägungen nach Geräteklasse (device-detection) eine andere. Fragt mich doch neulich jemand nach einer “iPhone WAP Browser-Weiche“. Also, hier ist eine ganz simple Weiche in PHP. Das Prinzip, wie immer, lautet HTTP-Header auslesen und einen Redirect auslösen:

Hier die index.php :

<?php
if(eregi(”iPhone”,$_SERVER[”HTTP_USER_AGENT”])){
header(”Location: http://m.mwxp.de/iweiche/iphone.php”);
}else {
header(”Location: http://m.mwxp.de/iweiche/default.php”);
}
?>

Um dies gleich zu testen, hier ein Beispiel. Einfach folgende Adresse in beliebigem (vor allem mobilen) Webbrowser eingeben, anschließend mal im iPhone:
m.mwxp.de/iweiche

Als Nachtrag zum letzten Beitrag zum Thema “viewport meta tag”, habe ich mal eine Version mit und ohne diesen eingebaut. Im Apfeltel sowie im Opera Mobile u.a. kann man den Unterschied gut sehen.

Natürlich kann man obiges Beispiel in jeder beliebigen serverseitigen Sprache nachbauen und vor allem verfeinern. Oder gleich eine professionelle Device Detection ala Device Atlas einsetzen.

Eine explizit für mobile Geräte (also “Handys”) optimierte Website sollte unbedingt trotzdem den “viewport meta tag” mitbringen.

Wieso trotzdem? Was macht dieser “viewport meta tag” denn eigentlich?
Dieser meta tag wurde ursprünglich von Apple eingeführt, um die Darstellung von “normalen” Webseiten  auf dem iPhone besser zu kontrollieren. Per default geht es von einer Standard-Webseiten-Breite von 980px aus und skaliert die passend runter. Hat man abweichende Breiten aus seiner Website, kann man über verschiedene Parameter “das Ding passend machen”. (Alle Details dazu im Safari Dev Center.)

Aber warum dann in einer mobil optimierten Seite verwenden?
Das pure Vorhandensein des viewport meta tag zeigt an, dass der Website-Anbieter bereits eine Optimierung vorgenommen hat, und diverse “ich skalier Dich mal runter” Mechanismen bzw. automatische Optimierungen (aka small screen rendering) seitens des mobilen Browsern mögen bitte ausbleiben.

Im Opera-Mobile beispielsweise wäre die ganze Mobil-Optimierung umsonst gewesen, denn der versucht sonst selber, die Seite “mobil-freundlich” darzustellen - und das will man hier nicht. Hier will man, dass der Browser die bereits mobil-optimierte Seite nicht mehr verändert, sondern unangetastet darstellt. Auch andere Browser ziehen hier sukzessive nach.

Zitat: “… the presence of the viewport meta tag in the page’s head section indicates the author has taken care of optimizing for mobile, small screen rendering is not applied.” (Quelle: http://dev.opera.com/articles/view/opera-mobile-9-5-the-developer-angle/)

Langer Rede kurzer Sinn, mit diesen Parametern geht es ganz gut:

<meta name = “viewport” content = “width = device-width,  initial-scale=1″ />Man könnte width oder height auch mit Pixelangaben* fest verdrahten, dies ist aber selten sinnvoll. Nimmt man statt dessen wie oben empfohlen device-width und device-height, dann passt sich die Seite an die Auflösung (VGA, QVGA, WVGA , WQVGA, etc.)  des mobilen web client gut an.

(*Achtung, das wäre dann z.B. “width = 240″ und nicht “width = 240px“!)

- - -

Nachtrag:
Der viewport meta tag funktioniert immerhin “… in many smartphone browsers, including Safari Mobile for the iPhone, Android browser, webOS browser in Palm Pre and Pixi devices, Opera Mini, Opera Mobile and BlackBerry browsers.”
Quelle: http://learnthemobileweb.com/2009/07/mobile-meta-tags/

Oft benutzt und immer noch recht aktuell - ausser, dass die kleineren Auflösungen immer unbedeutender werden: Unter www.mobilewebdesign.de/beispiele/viewport-sizes.html habe ich einige verbreitete Display-Auflösungen als iFrames angelegt.

So eine Seite kann während der lokalen Entwicklung einer Mobile-Site hilfreich sein, um die “Wirkung” des eigenen Schaffens auf verschiedenen Displays ein wenig im Auge zu behalten. Einfach die URLs austauschen (und nicht den Internet Explorer verwenden).

Im Feld oben die zu testende Adresse eingeben. Wild hin-ge-hackt - ich weiß. Aber es erleichtert die Arbeit etwas. Wer länger an einem Projekt arbeitet, kann ja in den iFrames seine Adresse bei src=”…” eintragen.

Der Artikel “Adding a Google Map Image to your Mobile Website” von David Wiles auf coders.mobi beschreibt, wie einfach die Einbindung einer Google Map in eine mobile Website ist. Inklusive ein- und auszoomen mit PHP …