Mobile Web Design

“Phone Audioguide - hören Sie, was es zu sehen gibt.“

David Heintz von Phone Audioguide (*) ermöglicht Anbietern / Betreibern von Sehenswürdigkeiten, Messen, Museen etc. eine einfache und kostengünstige Möglichkeit, akustische Führungen durch eben diese Sehenswürdigkeiten anzubieten, ohne dass der Betreiber in irgendwelche Hardware investieren müsste. (Man kennt das z.B. von Museen, wo man solche Kästen mit Kopfhörern ausleihen kann, die einen dann durch die Ausstellung geleiten.)

Das Verfahren ist denkbar simpel: Der Besucher ruft entweder von seinem Handy aus eine Festnetznummer an - in Zeiten von Festnetzflatrates unproblematisch - und lässt sich so leiten, oder er ruft eine simple mobil optimierte Website auf, wo er pro Station seines Rundganges per Klick entweder eine MP3-Datei abruft, oder eine verlinkte Telefonnummer anruft. Je nach persönlicher Situation oder Netzauslastung kann das eine oder das andere sinnvoller sein…
All das wird auf Schildern bzw. in vor Ort verteilten Flyern sehr klar verständlich kommuniziert.

Ein klasse Konzept wie ich finde. Die mobile Sites kommen noch sehr einfach daher, es musste mal wieder sehr schnell gehen. Die knöpfe ich mir aber alsbald vor…

Infos dazu und Beispiele: www.phone-audioguide.de

Vor allem bei Betreibern aller Art kommt das Konzept gut an, weil:

• Ein Handy - oft mit Festnetzflat - haben fast alle Besucher sowieso dabei
• Die Mobile-Web-Fraktion kann’s sogar Buzzword-kompatibel nutzen
• Ein Audioguide an sich ist sehr nützlich
• Keine Hardware muss beschafft, gewartet, verliehen oder repariert werden

Ergo ist das Ganze für den Anbieter viel günstiger als herkömmliche Verfahren. Und sehr gut produziert sind die Guides sowieso.

(*) Disclaimer:
Ich bin da involviert: David Heintz ist ein langjähriger Freund von mir, und ich helfe ihm in Sachen Web/Mobile Web.

Ich bin ja eher für das Testen auf echten Geräten. Mit echten Providern. Aber im Vorfeld, während der Entwicklung einer Mobile-Web-App, kann so ein Simulator ganz nützlich sein.

Vor allem der neue Opera Mobile 10 Emulator erscheint mir sehr praktisch, zumal er tatsächlich so Sachen wie den Opera Compressions Proxy simuliert (oder geht der wirklich darüber?).

Für den schnellen Test zwischendurch gibt’s auch online den Opera Mini Simulator …

Er hat damals eines der ersten guten Bücher zum Thema “Mobile Web Design” geschrieben, Vorträge gehalten und was nicht noch: Cameron Moll aus Kanada.

In einem aktuellen Blogpost - The Mobile Web vs. the Objective-C Web - schreibt er über das, was im Mobile-Bereich ein großes Thema ist, und auch hier schon besprochen wurde: (iPhone-)Apps vs.Webapplikationen. Oder eben Objective-C versus HTML(5), xhtml-mp, css, css3, javascript…

Kurz. Lesenswert.

Im Oktober 2009 führte Robert Rockmann aus Berlin im Rahmen seiner Bachelor-Arbeit eine Umfrage durch. Heute stellt er uns freundlicherweise das Ergebnis - seine mit “sehr gut” bewertete Bachelor-Arbeit - zur Verfügung:

Konzeption & Distribution mobiler Inhalte
Eine empirische Untersuchung zur Nutzerzufriedenheit von Hybrid-
Applikationen am Beispiel der Social-Networks Facebook und StudiVZ

Download (PDF):
http://www.robert-rockmann.de/download/bachelor-thesis-mobile-web/

Herzlichen Glückwunsch Robert Rockmann zu dem guten Ergebnis und vielen Dank für den Link!

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/

Kurz zwischendurch zwei drei kleine Linktips:

molipo.mobi
Hier gibt’s jede Menge “Mobile Web”. Das Portal ist ein umfangreiches Linkverzeichnis für mobile Seiten und listet aktuell ca. 1.000 mobile Links aus unterschiedlichen Kategorien.
Der Frage “Wie (mobile) designen eigentlich die anderen?” lässt sich hier gut nachgehen.

App vs. Website
Als Nachtrag zur Diskussion neulich hier noch ein lesenswerter Artikel zum Thema “App vs. Website” im Blog von insertEFFECT

The iPhone obsession
Kleine Denkanregung vom - wie immer recht bissigen - PPK / Quirksmode Blog. (Hinweis: Nicht so ganz der “Standard - Umgangston”. Ich würde vieles anders formulieren.)

Ok, ok - der Titel ist etwas irreführend und dieser Post leicht off-topic, aber: Kürzlich machte mich jemand darauf aufmerksam, dass diese Website hier (mobilewebdesign.de) - laut bizinformation.org - angeblich fast 13.000 EUR wert sei.

Seht selbst: mobilewebdesign.de Bewertung: EUR 12.927,93

Da muss ich doch mal kräftig schmunzeln. Kaufinteressenten können sich ja gerne mal melden

Ansonsten hätte ich noch im Angebot:

• mobilecampaigning.de
• mobilecampaigning.com
• mobilecampaigning.mobi

Na, da könnte man doch was draus machen, oder?

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.

Erleben nach dem großen App-Store-Erfolg mobil-optimierte Webanwendungen vielleicht doch wieder eine Renaissance?

Ich muss erkennen: Ich habe  2007 die weitere Entwicklung des “Mobile Web” ganz anders eingeschätzt. Mit diversen, einigermaßen leistungsfähigen Smartphones ausgestattet dachte ich “jetzt geht’s los”. Jetzt werden Webseiten für Handys benötigt, immer mehr Geräte “können das”, das ist das nächste große Ding. Habe mich mit XHTML-MP und WAP-CSS beschäftigt, Geräte-Betriebssystem-Browser-…-spezifische Besonderheiten untersucht und (teilweise) gelöst, mich zum “Certified DotMobi Web Developer” weitergebildet, einige mobile Sites entwickelt und überhaupt viel gelernt.

Dann kam das iPhone und mit ihm kurz darauf der AppStore. Plötzlich wurde klar, dass sich hier - neben allerlei Apps und dem Businessmodell hinter alledem - eine völlig neue Art des mobilen Internet entwickeln würde. Und so ist’s dann auch gekommen: Native Apps nutzen das Internet, um zu funktionieren. Der (mobile) Browser wird da gar nicht benötigt. Und jede andere Firma, jedes andere System zieht nach. Nokia, Palm, Android, Windows Mobile…

Aber trotzdem frage auch ich mich: Muss denn alles eine “App” sein? Ist nicht auch viel Marketing-Tam-Tam dabei, wenn man etwas, was wirklich gut im Browser liefe dennoch als App baut. Meistens “nur” als iPhone, weil’s so hip ist und jede weitere App für eine andere Plattform dann auch wieder erst entwickelt (also bezahlt) werden müsste? Insbesondere weil die mobilen Browser und die Geräte ja heute wirklich viel mehr können als 2007. HTML5 zum Beispiel… Und auch Desktop-Websites halbwegs benutzbar darstellen.

Tja. Was also wird aus dem (browserbasierten, optimierten) mobile Web? War’s das also?