Den Multi Device Konsumenten zufrieden stellen …
-
Upload
connected-blog -
Category
Technology
-
view
1.336 -
download
0
description
Transcript of Den Multi Device Konsumenten zufrieden stellen …
![Page 1: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/1.jpg)
Den Multi Device Konsumenten zufrieden stellen …Stephan HauxDirector Product ManagementNetbiscuits GmbH
February 9, 2012 © Netbiscuits GmbH 2011 1
![Page 2: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/2.jpg)
…Mehr als nur Design erforderlich
Stephan HauxDirector Product ManagementNetbiscuits GmbH
February 9, 2012 © Netbiscuits GmbH 2011 2
![Page 3: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/3.jpg)
Telefone überholen PCs
February 9, 2012 © Netbiscuits GmbH 2011 3
![Page 4: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/4.jpg)
Wieviel sufen Smartphone Besitzer ?
February 9, 2012 © Netbiscuits GmbH 2011 4
![Page 5: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/5.jpg)
February 9, 2012 © Netbiscuits GmbH 2011 5
“The hyper‐connected consumer of today has little patience for clutter or noise. His smartphone is the compass with which he engages the world, the persistent interface that guides him through the ever‐evolving digital landscape. How then, as marketers, do we evolve in order to not only keep pace with the mobile revolution, but also to utilize it as intended?”– Jan 2012: http://mashable.com/2012/01/23/mobile‐marketing‐flaws/
![Page 6: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/6.jpg)
February 9, 2012 © Netbiscuits GmbH 2011 6
![Page 7: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/7.jpg)
1. Falle: Ist doch alles Web/ HTML / ….
February 9, 2012 © Netbiscuits GmbH 2011 7
![Page 8: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/8.jpg)
1. Falle: Ist doch alles Web/ HTML / ….
February 9, 2012 © Netbiscuits GmbH 2011 8
Unterschätzen der Einzigartigkeit mobiler Medien
![Page 9: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/9.jpg)
Niemand steht mit dem Laptop im Laden …
February 9, 2012 © Netbiscuits GmbH 2011 9
![Page 10: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/10.jpg)
2. Falle: Laufen ist nicht Sitzen
February 9, 2012 © Netbiscuits GmbH 2011 10
Mobile Konsumenten nicht wie sitzende PC Surfer behandeln
![Page 11: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/11.jpg)
3. Falle: Die Stärke des Augenblicks versäumt
February 9, 2012 © Netbiscuits GmbH 2011 11
Warum Special Apps (und Webseiten) nicht funktionieren
![Page 12: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/12.jpg)
3. Falle: Die Stärke des Augenblicks versäumt
Stationäres Web Ungeteilte Aufmerksamkeit
Konzentrierte Nutzung
Animation muß aus dem Web selber kommen
“Wenn ich schon mal dran sitze”
Mobil Insellösungen funktionieren nicht
Eines von vielen Eindrücken
Anlass zum Surfen jenseits des Internet
Schnell an – Schnell aus
February 9, 2012 © Netbiscuits GmbH 2011 12
Smartphones machen das Internet zum Begleiter im Alltag
![Page 13: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/13.jpg)
4. Falle: Monolog statt Dialog
February 9, 2012 © Netbiscuits GmbH 2011 13
… Dialog ist nicht nur Worte und Menschen
![Page 14: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/14.jpg)
5. Falle: Nehmen statt Geben
Web ist voll von Formularen …
Marketing Kampagnen sammeln E‐Mails oder “Freunde” oder “Fans” …
… damit man kommunizieren kann.
Cookies, Social Graph und Profile verlangen/ sammeln viel Information, um …
… häufig wenig Antworten zu geben.
February 9, 2012 © Netbiscuits GmbH 2011 14
![Page 15: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/15.jpg)
Besser Machen
February 9, 2012 © Netbiscuits GmbH 2011 15
![Page 16: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/16.jpg)
Alltag
February 9, 2012 © Netbiscuits GmbH 2011 16
AUFWACHEN
FRÜHSTÜCKEN
![Page 17: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/17.jpg)
Alltag
February 9, 2012 © Netbiscuits GmbH 2011 17
UNTERWEGS
VORMITTAGSPAUSE
![Page 18: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/18.jpg)
Alltag
February 9, 2012 © Netbiscuits GmbH 2011 18
MITTAGSPAUSE
KAFFEPAUSE
![Page 19: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/19.jpg)
Alltag
February 9, 2012 © Netbiscuits GmbH 2011 19
ZUHAUSE
WECKER STELLEN
![Page 20: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/20.jpg)
Zusammenfassung
February 9, 2012 © Netbiscuits GmbH 2011 20
Hand aufs Herz: Nur 12 Mal pro Tag online?
Nutzung nach Verfügbarkeit und Situation
Tägliche Surfzeit: 3,4 Stunden – 2,7 davon irgendwie “socializing”(Land: USA)
Tablet + Smartphone billiger als Laptop
![Page 21: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/21.jpg)
February 9, 2012 © Netbiscuits GmbH 2011 21
![Page 22: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/22.jpg)
Mobile Web Considerations
Challenges, Problems, Devices, Thoughts
February 9, 2012 © Netbiscuits GmbH 2012 22
![Page 23: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/23.jpg)
Layout Paradigm: Stack
February 9, 2012 © Netbiscuits GmbH 2012 23
Positions of layout containers are changed depended on orientation or form factor
Functionality remains unchanged
![Page 24: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/24.jpg)
Layout Paradigm: Stretch & Collapsible
February 9, 2012 © Netbiscuits GmbH 2012 24
Content is stretched between portrait and landscape mode
Individual Items reduced independently to a minimum
![Page 25: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/25.jpg)
Layout Paradigm: Show & Hide
February 9, 2012 © Netbiscuits GmbH 2012 25
Layout Container becomes visible if device is turned from landscape to portrait and vice versa
In portrait mode hidden elements can be made visible via button
![Page 26: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/26.jpg)
Today’s Approaches to Mobile Design
09.02.2012 Folie 26© 2010 Netbiscuits GmbH
Name Core principle Content adaptation
Resolution independe
nce
Context Inspection
Performance Pros Cons Device DB req.
Responsive design
Serve same HTML to every device.
‐ flexible grid‐media queries‐ flexible images
No Yes No Good Good technique for making site less dependent on browser resolution
•Inefficient image handling •Achieves resolution independence only •No context driven adaptation
No
Progressive enhancement
Serve base HTML to device, use JavaScript to build up functionality as far as possible
Yes Yes Yes Bad •Full adaptation possible • No High End functionality, look & feel possible• Content adaptation only on client• Hard to maintain
No
Server‐side adaptation
All logic on server, client receives only what is required
Yes Yes No Limited only by server performance
•Full adaptation possible•Fine‐grained controls
Device detection library required (usually commercial)
Yes
(TACTILE + NB Platf.)= Hybrid
Use device detection to serve initial device‐sensitive HTML payload, use client‐side progressive enhancement to build up
Yes Yes Yes GoodAll clients get initial page quickly but subsequent enhancement may impose delays dependend on web app
•Full adaptation possible• Utilize client side adaptation (e.g. config settings, real‐time data) to add to experience • Can be used to overcome HTML5 fragmentation
•Device detection library required•Complex
Yes
![Page 27: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/27.jpg)
Why adaptation begins on the Server …
09.02.2012 Folie 27© 2010 Netbiscuits GmbH
All that
happens on
the server
before sending
it to the client.
![Page 28: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/28.jpg)
Layouts differ
February 9, 2012 © Netbiscuits GmbH 2012 28
Smartphone Spaghetti to Tablet Layouts
![Page 29: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/29.jpg)
Cross Device Design and Flows
February 9, 2012 © Netbiscuits GmbH 2012 29
Split
Transform
Overlays (Hide)
![Page 30: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/30.jpg)
Evolution of Device Categories
February 9, 2012 © Netbiscuits GmbH 2012 30
Distinct Devices evolved to a Connected Continuum
Distin
ct Hardw
are capabilities
Software & Con
tent capab. secon
dary
Continou
s Software & Con
tent capabilitie
sHardw
are capab. secon
dary
![Page 31: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/31.jpg)
Was kommt? & Was machen?
Was kommt?
Die mobile Welt bleibt in Bewegung
Neue Geräte & Geräteklassen
Unbekannte Anforderungen & Benutzergruppen
Was machen?
Mobile First ‐ Now
In multiplen Bildschirmgrößen denken
Design & Business Logik entkoppeln
February 9, 2012 © Netbiscuits GmbH 2011 31
![Page 32: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/32.jpg)
Einladung: Tactile Open Beta
February 9, 2012 © Netbiscuits GmbH 2011 32
Netbiscuits Multi Device Framework
http://www.netbiscuits.com/tactile‐open‐beta
![Page 33: Den Multi Device Konsumenten zufrieden stellen …](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b873ed4a795901648b45fe/html5/thumbnails/33.jpg)
Stephan Haux+49 175 2234652
Twitter: sthaux
February 9, 2012 © Netbiscuits GmbH 2011 33
See you at our Mobile Web Sitem.netbiscuits.com
Mobile First N>1 Bildschirmgrößen Geräte & OS übergreifend Smart Development
Design statt Code