Mobile web #bch11

Websites für das Mobile Web optimieren

Über mich
Gesichtserkennung mit iOS 5 Leif Janzik Software Engineer bei der conVISUAL AG Twitter: ElliotMonster & ThoughtOnMobile Blog: http://www.thoughtsonmobile.com

Über conVISUAL
conVISUAL AG Mobile Marketing Firma aus Oberhausen we‘re hiring: convisual.de/jobs

Gedanken im Vorfeld
Fragen über Fragen

Was ist ein Mobiles Endgerät?

„ Today Apple is going to reinvent the phone“ – Steve Jobs bei der Vorstellung des ersten iPhone

"iPad's Not Mobile...It's A Computer...Sorry!“ Mark Zuckerberg über das iPad

Herausforderungen einer Mobile Site
Unterschiede von Mobile zu Desktop
Kleiner Bildschirm
Teils langsame Verbindung
Vielzahl an Browsern, Endgeräten und anderen technischen Unterschieden
Viele heterogene Nutzungssituationen

Für welches Land entwickele ich eine Mobile Seite? 29. August 2011

Konzeption
Welche Geräte sollen angesprochen werden?
kleinster gemeinsamer Nenner bestimmt das Gerüst
Geräte-Weichen erfordern mehr Aufwand, da verschiedene Versionen umgesetzt werden müssen
Weniger ist mehr: auch ein schlankes, nicht grafiklastiges Design kann schick aussehen
Eyecatcher / JavaScripts on top, nicht als grundlegendes Konzept

Usability
Optimierung des Contents für mobile Geräte
Textwüsten vermeiden: kurze, aussagekräftige Texte
Content-Elemente untereinander anordnen, nicht nebeneinander
Seitenlänge auf max. das 2 - 2,5fache der Screenhöhe begrenzen
klare Menüführung und Navigation auf allen Seiten

Usability
Formulare
Ausfüllen auf mobilen Geräten ist naturgemäß schwieriger als mit Hardware-Tastatur (es gibt z.B. kaum Autocomplete)
Anzahl der Felder gering halten
Neue HTML5 Input-Types nutzen (email, tel, url)
Eingaben im Fehlerfall behalten

Wo ist mein User? Wenn er meine Seite besucht 29. August 2011

Wie findet mein Besucher zu mir? Der Einstiegsweg ist wichtig!

Wie kommt mein Besucher zu mir?
Im einfachsten Falle:
Über meine Domain

Wie kommt mein Besucher zu mir
QR-Code
Ein anderer Weg
Durch einen aufgedruckten QR Code, der mit einer App eingelesen wird

Wie kommt mein Besucher zu mir
Was will ich damit sagen?
Die (hauptsächliche) Situation in der der Besucher die Seite besucht bestimmt die Inhalte der Seite:
z.B. wenn der Besucher über einen QR-Code auf der Verpackung eines Produkts auf die Seite kommt ist das letzte was er sehen will die Informationen, die er auch auf der Verpackung findet (maximal auf Unterseiten oder den 2. Blick). Stattdessen sollten weiterführende Informationen angeboten werden.

Ein paar Tipps zum Entwickeln von Mobilen Seiten

Eine Seite für alle
Mobile First!
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

Mobile first
Die „schlechteste“/simpelste Version zuerst
Die minimalste Version für die ältesten Geräte wird zuerst entwickelt
Alle Erweiterungen und Verbesserungen werden z.B. mit Media Queries „oben drauf“ gesetzt, denn alte Geräte unterstützen diese neuen Techniken nicht und ignorieren sie daher
Denn schon seit längerem wissen wir...

nachsalzen kann man immer, wegsalzen kann man nie

Performance
Was sollte man beachten?
Komprimierung des Webservers nutzen (mod_deflate)
Anzahl der Requests minimieren
JavaScripts in eine Datei zusammenfassen und diese minimalisieren (z.B. Google Closure)
Grafiken wenn möglich durch CSS ersetzen (z.B. Farbverläufe) oder einbinden (Base64), CSS-Sprites nutzen

Performance
Was sollte man beachten?
auf älteren Geräten lieber reines CSS (langsame Verbindungen), sofern möglich
Grafiken optimiert ausliefern, ggf. alle Dateien in verschiedenen Auflösungen vorhalten (nicht für jedes Gerät bzw. Auflösung)
Animationen (GIF) vermeiden
Kommentare aus dem HTML entfernen

Ende Danke für eure Aufmerksamkeit und noch ein schönes #bch11

Mobile web #bch11

by Leif Janzik on Aug 29, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

Mobile web #bch11 — Presentation Transcript