29. Eine App fü
iPad 1,2,3,
2. Apps
rs
Eine App fü
r alle
Mini Android Tab
lets
r
Eine App fü
Symbian Eine
s
Smartphone Blackberry
App
ü r
pp f
Ei ne A ws
W indo Eine iPhone
s
Ph one App
Eine
Android App
30. 26%
150x täglich
schaut eine Person im 48% Wie häufig werden
Apps genutzt?
Durchschnitt auf ihr Handy.
Was sieht sie sich an? 26%
Selten eine App. App wird nur 1 mal genutzt
68% aller Smartphone-Besitzer App wird 11 mal oder mehr genutzt
nutzen nur 5 oder weniger Apps App wird nur 2-10 mal genutzt
regelmäßig.
http://www.lukew.com/ff/entry.asp?1501
31. Mobile Webseite
App für iPhone
12% App für Android
App für Blackberry
14%
60%
18,9%
14%
37,9%
21,6%
Mobile Webseite
SMS Service
App für iPhone 21,6%
App für Blackberry
http://www.lukew.com/ff/entry.asp?1413
33. Von allen Smartphone
Nutzern
haben empfehlen nehmen
95% 50% 79%
auf ihrem Unternehmen mit Werbung auf
Telefon nach einem schlechten mobilen
einem Produkt mobilen Webseiten wahr,
oder einer Webauftritt nicht jedoch nur 38%
Dienstleistung an Freunde in einer App.
gesucht. weiter.
Google Studie zusammen mit Ipsos OTX MediaCT, Mai 2012
Compuware "What Users Want from Mobile" 2011
35. 3. Sites stattde
ssen
jedoch nicht wird d
ie
optimiert für herköm
mliche
optimiert für Tablets Webse
ite
S martphones angez
eigt
Zwei
versch
iedene
Webse
iten
mobil.post.at mobil.post.at ≠ post.at
57. Client, sei flexibel
CSS Mediaqueries / Flexibles Layout
Größere Anpassungen werden an definierten Breiten vorgenommen
Fluid Images
Bilder füllen den maximal verfügbaren Platz
Responsive Typography
Schriften werden relativ in em oder rem definiert
und für alle Displaygrößen optimal angepasst
59. Design Workflow
Alles auf Papier
Die Content- und Layout-Struktur mit möglichen Breakpoints wird grob
gezeichnet, am besten mit Papier und Bleistift oder auf Whiteboards
Mobile-First im Browser
Semantische HTML-Struktur, Echtdaten und keine Lorem Ipsums,
CSS Stile und Animationen, Interaktivität mit JavaScript / jQuery
Style-Tiling im Grafikprogramm
Der visuelle Stil für die verwendeten Elemente wird in einem
Grafikprogramm gestaltet und schrittweise via CSS in den HTML-
Prototyp integriert
61. 60%
< 3 sec.
Compuware "What Users Want from Mobile" 2011
62. Server, sei wachsam
Feature Detection / Cookies
Der Server identifiziert die Features von Gerät und Browser z.B. via DeviceAtlas
Scaled Media
Bilder werden entsprechend der erwarteten Bildschirmgröße skaliert und dann erst
verschickt
Custom HTML, CSS & JavaScript
Der Server liefert die notwendige HTML Struktur und nur tatsächlich benötigte CSS
und JavaScript Dateien