M-Days 2012 Stephan Haux Director Product Management Netbiscuits GmbH Blog by Messe Frankfurt for the Digital Business: http://connected.messefrankfurt.com/en/

1. Den Multi Device Konsumenten
zufrieden stellen …
Stephan Haux
Director Product Management
Netbiscuits GmbH
February 9, 2012 © Netbiscuits GmbH 2011 1

2. … Mehr als nur Design erforderlich
Stephan Haux
Director Product Management
Netbiscuits GmbH
February 9, 2012 © Netbiscuits GmbH 2011 2

3. Telefone überholen PCs
February 9, 2012 © Netbiscuits GmbH 2011 3

4. Wieviel sufen Smartphone Besitzer ?
February 9, 2012 © Netbiscuits GmbH 2011 4

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/
February 9, 2012 © Netbiscuits GmbH 2011 5

6. February 9, 2012 © Netbiscuits GmbH 2011 6

7. 1. Falle: Ist doch alles Web/ HTML / ….
February 9, 2012 © Netbiscuits GmbH 2011 7

8. 1. Falle: Ist doch alles Web/ HTML / ….
Unterschätzen der Einzigartigkeit mobiler Medien
February 9, 2012 © Netbiscuits GmbH 2011 8

9. Niemand steht mit dem Laptop im Laden …
February 9, 2012 © Netbiscuits GmbH 2011 9

10. 2. Falle: Laufen ist nicht Sitzen
Mobile Konsumenten nicht wie sitzende PC Surfer behandeln
February 9, 2012 © Netbiscuits GmbH 2011 10

11. 3. Falle: Die Stärke des Augenblicks versäumt
Warum Special Apps (und Webseiten) nicht funktionieren
February 9, 2012 © Netbiscuits GmbH 2011 11

12. 3. Falle: Die Stärke des Augenblicks versäumt
Smartphones machen das Internet zum Begleiter im Alltag
 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

13. 4. Falle: Monolog statt Dialog
… Dialog ist nicht nur Worte und Menschen
February 9, 2012 © Netbiscuits GmbH 2011 13

14. 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

15. Besser Machen
February 9, 2012 © Netbiscuits GmbH 2011 15

16. Alltag
AUFWACHEN
FRÜHSTÜCKEN
February 9, 2012 © Netbiscuits GmbH 2011 16

17. Alltag
UNTERWEGS
VORMITTAGSPAUSE
February 9, 2012 © Netbiscuits GmbH 2011 17

18. Alltag
MITTAGSPAUSE
KAFFEPAUSE
February 9, 2012 © Netbiscuits GmbH 2011 18

19. Alltag
ZUHAUSE
WECKER STELLEN
February 9, 2012 © Netbiscuits GmbH 2011 19

20. Zusammenfassung
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
February 9, 2012 © Netbiscuits GmbH 2011 20

21. February 9, 2012 © Netbiscuits GmbH 2011 21

22. Mobile Web Considerations
Challenges, Problems, Devices, Thoughts
February 9, 2012 © Netbiscuits GmbH 2012 22

23. Layout Paradigm: Stack
 Positions of layout containers are changed depended
on orientation or form factor
 Functionality remains unchanged
February 9, 2012 © Netbiscuits GmbH 2012 23

24. Layout Paradigm: Stretch & Collapsible
 Content is stretched between portrait and landscape mode
 Individual Items reduced independently to a minimum
February 9, 2012 © Netbiscuits GmbH 2012 24

25. Layout Paradigm: Show & Hide
 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
February 9, 2012 © Netbiscuits GmbH 2012 25

26. Today’s Approaches to Mobile Design
Name Core principle Content Resolution Context Performance Pros Cons Device
adaptation independe Inspection DB req.
nce
Responsive Serve same No Yes No Good Good technique for making •Inefficient image No
design HTML to every site less dependent on handling
device. browser resolution •Achieves resolution
independence only
‐ flexible grid •No context driven
‐ media queries adaptation
‐ flexible images
Progressive Serve base Yes Yes Yes Bad •Full adaptation possible • No High End No
enhancement HTML to device, functionality, look & feel
use JavaScript to possible
build up • Content adaptation
functionality as only on client
far as possible • Hard to maintain
Server‐side All logic on Yes Yes No Limited only by server •Full adaptation possible Device detection library Yes
adaptation server, client performance •Fine‐grained controls required (usually
receives only commercial)
what is required
(TACTILE + Use device Yes Yes Yes Good •Full adaptation possible •Device detection library Yes
detection to All clients get initial • Utilize client side required
NB Platf.) serve initial page quickly but adaptation •Complex
= Hybrid device‐sensitive subsequent (e.g. config settings, real‐
HTML payload, enhancement may time data) to add to
use client‐side impose delays experience
progressive dependend on web • Can be used to overcome
enhancement to app HTML5 fragmentation
build up
09.02.2012 © 2010 Netbiscuits GmbH Folie 26

27. Why adaptation begins on the Server …
All that
s on
happen r
e
the serv ng
se n d i
before ient.
cl
it to the
09.02.2012 © 2010 Netbiscuits GmbH Folie 27

28. Layouts differ
Smartphone Spaghetti to Tablet Layouts
February 9, 2012 © Netbiscuits GmbH 2012 28

29. Cross Device Design and Flows
Split
Transform
Overlays (Hide)
February 9, 2012 © Netbiscuits GmbH 2012 29

30. February 9, 2012
Distinct Hardware capabilities
Software & Content capab. secondary
Evolution of Device Categories
Distinct Devices evolved to a Connected Continuum
© Netbiscuits GmbH 2012
Continous Software & Content capabilities
Hardware capab. secondary
30

31. 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

32. Einladung: Tactile Open Beta
Netbiscuits Multi Device Framework
http://www.netbiscuits.com/tactile‐open‐beta
February 9, 2012 © Netbiscuits GmbH 2011 32

33.  Mobile First Stephan Haux
 N>1 Bildschirmgrößen +49 175 2234652
s.haux@netbiscuits.com
 Geräte & OS übergreifend
Twitter: sthaux
 Smart Development
Design statt Code
See you at our Mobile Web Site
m.netbiscuits.com
February 9, 2012 © Netbiscuits GmbH 2011 33