De populariteit van smartphones en tablets dwingt ons om beter na te denken over de ontwikkeling en ontwerp van nieuwe websites. In deze presentatie vind je veel feiten en grafieken van actuele ontwikkelingen en de conclusies die we hier als ontwerpers uit moeten halen.

1. Content follows Context
Lammert Postma - www.lammertpostma.com
woensdag 20 april 2011 ()

2. Hoe zit het nu precies met het gebruik van
smartphones en tablets?
woensdag 20 april 2011 ()

3. De smartphone is de werkelijke
‘personal computer’. Altijd binnen
handbereik en altijd online.
Flicr - yourdon - http://www.flickr.com/photos/yourdon/5398063184/sizes/l/in/photostream/
woensdag 20 april 2011 ()

4. Verkoop mobiele telefoons
Nederland
2010 25%
2011
50%
is een smartphone
2015 75%
GfK Retail and Technology
woensdag 20 april 2011 ()

5. Verkoop smartphones
Nederland
2010 2.500.000
293.000.000 wereldwijd
2011
3.000.000
Iedereen heeft straks een smartphone
GfK Retail and Technology / Strategy Analytics
woensdag 20 april 2011 ()

6. Mobiel data abonnementen
T-Mobile “Bij de verkoop van
smartphones neemt de
helft een mobiel data
abonnement”
En is altijd online via wifi of via 3G
T-Mobile
woensdag 20 april 2011 ()

7. Mobiele abonnementen
Per 100 personen
2002 75,3
2007
117,5
Men heeft in ieder geval één telefoon.
World Bank data, ITU Data
woensdag 20 april 2011 ()

8. “Tablets penetratie gaat 4 keer sneller
dan die van de smartphone.”
Flicr - ntr23 - http://www.flickr.com/photos/ntr23/4545975787/sizes/l/in/photostream/
woensdag 20 april 2011 ()

9. Verkoop tablets
Nederland
2010 250.000
20.000.000 wereldwijd
2011
1.000.000
55.000.000 wereldwijd
Ook de tablet bereikt steeds een groter
publiek.
GfK Retail and Technology / Gartner
woensdag 20 april 2011 ()

10. Verkoop tablets
Wereldwijd
Er zijn in Q3 van 2010 3,27
miljoen iPads verkocht.
Slechts 200.000 minder dan
er van de Mac zijn verkocht.
En wordt snel geadopteerd door de
consument.
Apple - http://www.apple.com/pr/library/2010/07/20results.html
woensdag 20 april 2011 ()

11. Gebruik van tablets in
Enterprises
Wereldwijd
2010 21%
2011
51%
Niet alleen privé, maar ook in de zakelijk
markt doet de tablet zijn intrede.
AlphaWise CIO survey
woensdag 20 april 2011 ()

12. Verkoop devices
Wereldwijd
x 1.000.000
700 Smartphones
Tablets
600 Netbooks
Notebooks
500 Desktops
400
De markt defragmenteert.
300
200
100
0
1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010
IDC, Gartner, Morgan Stanley Research - http://www.businessinsider.com/morgan-stanley-tablets-2011-2#were-going-from-a-computing-
woensdag 20 april 2011 ()

13. “Men gebruikt devices naast elkaar en
aanvullend aan elkaar. Men wisselt
‘seamlessly’ tussen tablet, smartphone
en laptop.”
Flicr - istig - http://www.flickr.com/photos/istig/5599004092/sizes/l/in/photostream/
woensdag 20 april 2011 ()

14. “Focussen op desktop is
niet voldoende.”
De gebruiker gebruikt niet één device, maar
een verscheidenheid aan devices.
woensdag 20 april 2011 ()

15. Hoe gebruikt men deze devices?
woensdag 20 april 2011 ()

16. Smartphones gebruikt men voor
directe contentconsumptie in
verschillende contexten.
Flicr - johnwilliamsphd - http://www.flickr.com/photos/johnwilliamsphd/5132328951/
woensdag 20 april 2011 ()

17. Mobiel sitebezoek
Onder top 20 nl-websites
iPad 34,39%
iPhone 33,96%
Android 16,90%
Blackberry 5,92%
iPod 4,67%
Symbian 3,52%
iOS is de meest gebruikte platform
Others 0,46%
voor browsing
Windows 0,20%
Mobile Metrics - http://www.mobilemetrics.nl/2011/04/ipad-most-used-mobile-device-for-web-surfing/
woensdag 20 april 2011 ()

18. Gebruik van de smartphone
n = 1246 participants
At Home n = 1246 participants
16% 50% 26% 5+ hours
3-5 hours
Misc. Downtime
throughout the day
n = 1246 participants
20% 52% 24% 1-3 hours
0-1 hour
Waiting in line / appointment n = 1246 participants 26% 59% 12%
Not at all
While shopping n = 1246 participants 31% 53% 13%
At Work n = 1246 participants 36% 43% 16%
While Watching TV n = 1246 participants 38% 43% 16%
During my commute to work n = 1246 participants 53% 35% 9%
0 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
Compete.com 2010 - http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/
woensdag 20 april 2011 ()

19. Tablets vervangen de ‘traditionale PC’
op het gebied van contentconsumptie
en zal aanvullend zijn op content
creatie.
Flicr - smolianitski - http://www.flickr.com/photos/smolianitski/5008046254/sizes/l/in/photostream/
woensdag 20 april 2011 ()

20. Tablets v.s. Traditional PC’s
Wereldwijd
100%
Tablets
90%
Traditional PC
80%
81% 82%
70%
68%
60% 62%
55% 54%
50% 54% 54%
52% 52% 51%
48%
46%
40% 41%
44%
30%
Tablets vervangen de contentconsumptie 29%
27%
niet de content creatie.
20% 21%
17%
10% 14%
0
g
g
g
es
ic
o
ail
es
se
se
sin
in
in
de
us
am
fil
U
U
m
rk
ad
ow
M
Vi
E-
k
k
it
wo
gG
Re
or
or
Ed
ng
to
Br
W
cW
et
hi
in
e/
ng
eb
N
c
ay
al
at
at
ni
ifi
W
er
Pl
l
re
W
cia
e
ec
st
en
C
So
Sp
Li
G
IDC, Gartner, Morgan Stanley Research - http://www.businessinsider.com/morgan-stanley-tablets-2011-2#were-going-from-a-computing-
woensdag 20 april 2011 ()

21. Gebruik van de iPad
Nieuws Vaak
Surfen Soms
Zoeken Nooit
E-mail
TV / Video kijken (youtube,
uitzendinggemist
Foto’s bekijken
Gamen 35%
Tijdschrift lezen
Muziek luisteren
Aankopen doen
Boeken lezen
Tekstverwerking
Sociale netwerken / bloggen De resultaten worden gestaafd
Zakelijke presentaties
door onderzoek onder gebruik van
Beeldbewerking 35%
Chatten 35%
de iPad.
0 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
Sanoma Digital - http://www.sanomamedia.nl/nl-web-Nieuws-Persberichten-2010-Meer_dan_een_uur_per_dag_gebruik_van_de_iPad.php
woensdag 20 april 2011 ()

22. Hoe lang wordt de iPad
gebruikt
30 - 60
minuten
84%
+ 60
minuten
54%
In tegenstelling tot de smartphone
gebruikt men langer een tablet.
Sanoma Digital
woensdag 20 april 2011 ()

23. Hoe zit het met de browsers?
woensdag 20 april 2011 ()

24. Iphone en Android zijn de meest
gebruikte mobiele platformen
Flicr - arkland_swe - http://www.flickr.com/photos/arkland_swe/5515420422/sizes/l/in/photostream/
woensdag 20 april 2011 ()

25. Top 8 Mobiele OS
Nederland
70%
56%
iOS
52,24%
iOS (iPhone,iPod,iPad) is in Nederland nog
42%
populair, maar android maakt een opmars.
Android
28% 28,85%
14%
Symbian OS - 8,85%
Blackberry OS - 4,37%
Samsung (2,13%), Sony Ericsson
0% maart maart
(0,96%), Windows (0,49%)
2010 2011
Statcounter - http://gs.statcounter.com/#mobile_os-NL-monthly-201003-201103
woensdag 20 april 2011 ()

26. Top 8 Mobiele OS
Europa
50%
40%
iOS
44,53%
In Europa vechten Android en Blackberry
30%
om de tweede plek, maar geen windows?!
20%
Android - 17,97%
Blackberry - 17,17%
10% Symbian - 11,76%
Sony Ericsson (2,93%), Samsung
(2,27%), Playstation and others
0% maart maart
2010 2011
Statcounter - http://gs.statcounter.com/#mobile_os-eu-monthly-201003-201103
woensdag 20 april 2011 ()

27. IE als browser is misschien groot op de
desktop maar op mobiel stelt het niks
voor.
iPhone en Android (Webkit) zijn op mobiel de
spelers.
woensdag 20 april 2011 ()

28. Top 8 Desktop Browsers
Nederland
70%
56% IE
58,22%
In de desktop browser markt is IE populair,
42%
maar toont een dalende lijn.
28%
Firefox
20,15%
14% Chrome - 14,39%
Safari - 5,89%
Opera - 0,99%
0% maart maart
2010 2011
Statcounter - http://gs.statcounter.com/#mobile_os-NL-monthly-201003-201103
woensdag 20 april 2011 ()

29. Top 8 Mobile Browsers
Nederland
50%
40% iPhone
38,76%
Op de mobile platforms speelt IE geen rol.
30% Android
28,18%
Daar domineren iPhone en Android.
20%
iPod Touch - 13,27%
10%
Nokia - 7,73%
Blackberry - 4,27%
Opera - 3,37%
Samsung (1,68%), Sony PSP
0% maart maart
(0,48%)
2010 2011
Statcounter - http://gs.statcounter.com/#mobile_os-NL-monthly-201003-201103
woensdag 20 april 2011 ()

30. En hoe zit het dan met de webstandaarden?
woensdag 20 april 2011 ()

31. Alle browsers voor zowel Desktop als
Mobiel adopteren redelijk goed de
nieuwe HTML 5 webstandaarden.
http://www.findmebyip.com/litmus
woensdag 20 april 2011 ()

32. Nou ja, bijna alle browsers....
http://www.findmebyip.com/litmus
woensdag 20 april 2011 ()

33. HTML 5 support door browsers
100% HTML
90% CSS
85% 85% 84%
80% 83%
81%
79% 79%
75% 75%
70%
67% 67% 67%
60% 61%
55%
50% 51%
50% 49%
40%
30%
20%
10% 15%
0
9
4
i5
10
.+
.+
i5
11
3
2.
r
ox
11
i4
far
in
re
e
le
r
M
om
far
ef
se
i
lo
Sa
ra
ob
Fir
ow
ra
xp
Sa
pe
hr
M
pe
tE
O
C
Br
S
ra
iO
O
ne
pe
d
oi
r
O
te
dr
In
An
http://caniuse.com/
woensdag 20 april 2011 ()

34. Recap
woensdag 20 april 2011 ()

35. De gebruiker neemt content op
verschillende devices tot zich.
Flicr - yagankiely - http://www.flickr.com/photos/yagankiely/5270152477
woensdag 20 april 2011 ()

36. ...op het werk, terras, wachtend in de
rij voor de kassa of thuis op de bank...
Flicr - Ed Yourdon - http://www.flickr.com/photos/yourdon/5518739750/
woensdag 20 april 2011 ()

37. ...middels touch of muis.
Flicr - patrickgage - http://www.flickr.com/photos/patrickgage/3321120314/
woensdag 20 april 2011 ()

38. Maar één element is overal
hetzelfde.
woensdag 20 april 2011 ()

39. De content
woensdag 20 april 2011 ()

40. De content en manier waarop je
gebruiker met deze content
interacteert moet zich aanpassen aan
zijn context.
woensdag 20 april 2011 ()

41. Maar doen we dit niet al jaren?
woensdag 20 april 2011 ()

42. Misschien wel, maar de mobiele devices
brengen een aantal extra features met
zich mee die nieuw of actueler zijn
geworden.
woensdag 20 april 2011 ()

43. Speed is key, niet iedereen heeft WiFi
Flicr - thomashawk - http://www.flickr.com/photos/thomashawk/2567945057
woensdag 20 april 2011 ()

44. Location awareness
Flicr - rnikko - http://www.flickr.com/photos/rnikko/5503321261
woensdag 20 april 2011 ()

45. Touch
Flicr - patrickgage - http://www.flickr.com/photos/patrickgage/3321120314/
woensdag 20 april 2011 ()

46. Veel variatie in pixels en pixels per inch
http://www.intomobile.com/2010/09/07/idc-smartphone-shipments-grew-55-5-android-the-wild-card/
woensdag 20 april 2011 ()

47. In continu wisselende contexten
Flicr - mr_quan_nguyen - http://www.flickr.com/photos/mr_quan_nguyen/4672471227
woensdag 20 april 2011 ()

48. Wat betekent dit voor ons als ontwerpers?!
woensdag 20 april 2011 ()

49. Zorg voor een adaptief/responsief
ontwerp dat naadloos aansluit op de
gebruikscontext.
Wees niet pixel-perfect, maar context-perfect.
woensdag 20 april 2011 ()

50. Met alle mogelijk en onmogelijkheden
van het platform waarop dit plaats
vindt in ogenschouw genomen.
woensdag 20 april 2011 ()

51. Het ontwerp hoeft niet over alle
browsers pixel perfect te zijn!
woensdag 20 april 2011 ()

52. Ontwerp met behulp van de laatste
webstandaarden, maar zorg voor een
alternatief.
Het is echt niet erg dat men op IE 7 geen ronde
hoekjes ziet!
woensdag 20 april 2011 ()

53. Focus in je ontwerp op de key-
features. De rest is clutter.
“Mobile forces you to focus” - LukeW
woensdag 20 april 2011 ()

54. Ontwerp voor herbruikbaarheid en
consistentie.
woensdag 20 april 2011 ()

55. Nog niet genoeg gehad?
Mobile First - LukeW (and a lot more of lukeW)
http://www.lukew.com/ff/entry.asp?1249
Responsive Design - Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design/
Rethinking the web - Bryan Rieger
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
Not a mobile web, merely a 320px-wide one - James Pearce
http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-
one
woensdag 20 april 2011 ()

56. Dank voor het lezen
Lammert Postma - www.lammertpostma.com
woensdag 20 april 2011 ()