Mobile Web Design

Eigentlich hatte ich das (ziemlich preiswerte) Nokia Lumia 620 lediglich als Testgerät gedacht, um im Bereich Mobile Web Frontend Entwicklung  auch ein aktuelles Windows Phone 8 Gerät zum testen in unserem Device-Lab zu haben. Und jedes neue Gerät benutze ich eine Zeit lang als persönliches Hauptgerät, um mich mit den Besonderheiten von Betriebssystem, Hardware und speziell dem Default Browser – hier die mobile Version des IE10 – und der daraus entstehenden Benutzbarkeit des (mobilen) Internet vertraut zu machen.

Abgesehen davon, dass sich das Gerät sehr gut anfühlt, ist vor allem das Betriebssystem sehr modern, performant und, wie ich finde, echt gut durchdacht. Da hat jemand die Konkurrenz studiert (wohl studieren müssen) und ein paar Sachen sehr richtig gemacht. Und ich bin nun wirklich kein Microsoft Fanboy oder so was. Übrigens klappt die Kombination Mac/iTunes und WP8 dank der entsprechenden kostenfreien App dazu recht gut – kein Vergleich zur Situation mit dem Android Teil, was ich zuletzt im täglichen Einsatz hatte.

OK, alles schön und gut, aber Mobile Web Entwicklung ist eigentlich hier das Thema… Erste Tests diverser Seiten lieferten rundum gute Ergebnisse. Ein paar Sachen sind – natürlich – ziemlich Webkit-lastig entwickelt worden in den ersten Jahren der Smartphone-Welle. Vor allem so touch-drag Kram geht oft nicht. Einige Seiten mit HTTP-Header basierter Device-Detection haben ihre Gerätematrix wohl noch nicht aktualisiert.
Aber das HTML5 und CSS Rendering des IE10 ist sehr prima, ebenso die Systemschriften und die Performance sowieso (auch in Sachen JavaScript).

Ein Pendant zum apple-touch-icon.png, um eine Website ala iOS/Android auf den Homescreen zu pinnen, gibt es hier so nicht, aber das erklärt sich eben aus dem Konzept des Betriebssystems bzw. wie hier der Homescreen funktioniert. Hier wird entweder automatisch ein Screenshot der Seite zu einem sog. Tile gemacht, oder aber, man kann “Live-Tiles” (in JS) bereitstellen, wo dieses Tile-HomeIcon-Shortcut (wie soll man’s nennen) auch dynamisch Infos der Seite ziehen kann. Hier eine Anleitung dazu.

Dennoch gibt es natürlich noch einiges zu erforschen:

• Genaue Angabe der installierten Schriften
• Sripting Besonderheiten (Event Modell und so)
• Multimedia im Detail
• …

OK, das war jetzt alles eher allgemein gehalten. Mein Fazit nach zwei Wochen WP8 / mobile IE10 ist aber das, dass man als Web Frontendler diese Plattform in naher Zukunft nicht mehr nur als exotische “nice-to-have” Nischenplattform wird links liegen lassen können. Die ersten sehr tollen Webkit-Jahre haben uns ein wenig in die – im Desktop-Web längst überwundenen -  “optimiert für IE bei 1024 Breite” artigen Situation gebracht. Weniger Webkit-spezifische Entwicklung, mehr Web-Standards wären in aller Interesse angesagt.

Ich  wünsche dieser mobilen Plattform (wie auch den anderen neuen Playern, Firefox OS, Ubuntu Mobile, etc)  jedenfalls alles Gute. Es bleibt spannend in der Welt des Mobile Web…

“Das heutige iPhone 5 ist eigentlich ein iPhone Mini. Das Standard iPhone muss erst noch entwickelt werden.”

Als ich vor Jahren anfing, Web Frontend für Mobile Endgeräte zu entwickeln, war eine QVGA-Auflösung (320 × 240) sozusagen die maximal mögliche Auflösung. Das war richtig gut. Windows Mobile, Nokia mit dem Symbian Betriebssystem, und – ach ja… – BlackBerrys aller Art. Wir mussten allerdings auch kleinere Screens im Auge behalten. Ich erinnere mich an ein ansonsten sehr gutes Sony Eriksson Teil. Die Bedienung: Entweder so eine Art Mauszeiger, oder durch die Links tabben.
Und dann kam – großer Tusch!! – das iPhone! Jappadappaduh! Auf die Touch-Bedienung etc. will ich erstmal gar nicht eingehen, auch nicht auf den endlich guten Browser (danke Webkit!), sondern auf die unvorstellbare Auflösung von sage und schreibe 640 x 320 Pixeln. Wow! Damit konnte man endlich was machen.
Anfangs dachten wir noch an “die anderen”, jaja, responive und so, die Kleinen sollten auch noch unsere mobilen Seiten genießen, aber bald war der Damm gebrochen. Mit irgendwas anderem als dem iPhone geht doch (hierzulande) keiner ins Internet, so die sich breitmachende Haltung.
Ein Kollege sagte in der Zeit zu mir: “Diese iPhone Auflösung von 640 x 320 Pixeln wird schon bald unsere kleinste zu bedienende Mobile-Device-Screensize sein, sozusagen das 800 x 600 der frühen Desktop-Web Jahre.” Dem habe ich vehement widersprochen, und heute meine ich, er hatte recht:
Fast alle Smartphones heute haben eine größere Auflösung als das iPhone (das aktuelle iPhone5 hat 1136 x 640 Retina-Pixel, was aus Screendesign-Sicht also einer Höhe von 568 Pixeln, und einer unveränderten Breite von 320 Pixeln entspricht), während das schon veraltete Samsung Galaxy S2 bereits mit einer Auflösung von 480 x 800 Pixeln daherkommt.
Daher meine These: “Das heutige iPhone 5 ist eigentlich ein iPhone Mini. Das normale iPhone muss erst noch entwickelt werden.”

Frohes Fest

MobileWebDesign.de ist wieder zurück. Bald geht’s mit neuen und überarbeiteten Artikeln weiter…

Auch alte Beispiele wie z.B. die Mobile Viewport Sizes 1.0 ind wieder da.