Ons blik op het web moet veranderden voor een optimale user experience in de multi device context van hedendaagse gebruikers.
In de presentatie The web ga ik dieper in op de betekenis voor ons als ontwerpers wanneer wij vandaag de dag ontwerpen voor het web.
10. 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 23 november 2011 ()
geen login
11. Mobiele abonnementen
Per 100 personen
2002 75,3
2007
117,5
Men heeft in ieder geval één telefoon.
World Bank data, ITU Data
woensdag 23 november 2011 ()
12. Verkoop mobiele telefoons
Nederland
2010 25%
2011
50%
is een smartphone
2015 75%
GfK Retail and Technology
woensdag 23 november 2011 ()
13. 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 23 november 2011 ()
14. 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 23 november 2011 ()
15. “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 23 november 2011 ()
16. 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 23 november 2011 ()
17. Verkoop tablets
Wereldwijd
Er zijn in Q3 van 2010 3,27 miljoen iPads verkocht.
2010 Slechts 200.000 minder dan er van de Mac zijn verkocht.
2011 Er zijn in Q3 van 2011 9,25
miljoen iPads verkocht.
En wordt snel geadopteerd door de consument.
Apple - http://www.apple.com/pr/library/2010/07/20results.html
woensdag 23 november 2011 ()
18. 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 23 november 2011 ()
http://www.slideshare.net/MobileWeb/ttablets-and-media-beyond-the-hype?
from=ss_embed
http://www.themobilerevolution.be/wp-content/uploads/2011/10/
tablet_adoption_infographic.png
19. Verkoop devices
Wereldwijd
x 1.000.000
700 Smartphones
Tablets
600 Netbooks
Notebooks
500 Desktops
400
De markt fragmenteert.
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-world-
woensdag 23 november 2011 ()
20. Verkoop devices
Wereldwijd
x 1.000.000
700 Smartphones
Tablets
600 Netbooks
Notebooks
500 Desktops
400
De markt fragmenteert.
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-world-
woensdag 23 november 2011 ()
21. 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 23 november 2011 ()
22. “Focussen op desktop is
niet voldoende.”
De gebruiker gebruikt niet één device, maar een
verscheidenheid aan devices.
woensdag 23 november 2011 ()
24. Smartphones gebruikt men voor directe
contentconsumptie in verschillende
contexten.
Flicr - johnwilliamsphd - http://www.flickr.com/photos/johnwilliamsphd/5132328951/
woensdag 23 november 2011 ()
25. 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 23 november 2011 ()
26. 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 23 november 2011 ()
27. 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 27%
29%
contentconsumptie niet de content
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 23 november 2011 ()
28. 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
Zakelijke presentaties De resultaten worden gestaafd door
Beeldbewerking 35% onderzoek onder gebruik van de iPad.
Chatten 35%
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 23 november 2011 ()
KPN digitaal ook via de iPad
http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/
29. 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 23 november 2011 ()
30. Hoe zit het met de browsers?
woensdag 23 november 2011 ()
31. 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 23 november 2011 ()
32. 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%
Others 0,46% iOS is de meest gebruikte platform voor
browsing
Windows 0,20%
Mobile Metrics - http://www.mobilemetrics.nl/2011/04/ipad-most-used-mobile-device-for-web-surfing/
woensdag 23 november 2011 ()
33. Top 8 Mobiele OS
Nederland
70%
56%
iOS
52,24%
iOS (iPhone,iPod,iPad) is in Nederland nog populair,
42%
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 23 november 2011 ()
34. Top 8 Mobiele OS
Europa
50%
40%
iOS
44,53%
In Europa vechten Android en Blackberry om de
30%
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 23 november 2011 ()
35. 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 23 november 2011 ()
Dit geldt voor de Westerse wereld. In andere werelddelen is Opera leading
36. Top 8 Desktop Browsers
Nederland
70%
56% IE
58,22%
In de desktop browser markt is IE populair, maar toont
42%
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 23 november 2011 ()
37. Top 8 Mobile Browsers
Nederland
50%
40% iPhone
38,76%
Op de mobile platforms speelt IE geen rol. Daar
30% Android
domineren iPhone en Android. 28,18%
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 23 november 2011 ()
38. En hoe zit het met de webstandaarden?
woensdag 23 november 2011 ()
39. Alle browsers voor zowel Desktop als
Mobiel adopteren redelijk goed de
nieuwe HTML 5 webstandaarden.
http://www.findmebyip.com/litmus
woensdag 23 november 2011 ()
40. Nou ja, bijna alle browsers....
http://www.findmebyip.com/litmus
woensdag 23 november 2011 ()
41. HTML 5 support door browsers
100% HTML
90% CSS
85% 85%
80% 83% 84%
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 23 november 2011 ()
43. We gebruiken verschillende devices
gedurende een dag.
Flicr - yagankiely - http://www.flickr.com/photos/yagankiely/5270152477
woensdag 23 november 2011 ()
Met verschillende dimensies
44. ...op het werk, terras, wachtend in een rij
of thuis op de bank...
Flicr - Ed Yourdon - http://www.flickr.com/photos/yourdon/5518739750/
woensdag 23 november 2011 ()
Mobiel betekent niet ‘opzoek naar mijn adresgegevens’. Men besteld via mobile, lees
artikelen, etc.
48. Laat los
Flicr - tranchis - http://www.flickr.com/photos/tranchis/3523630730
woensdag 23 november 2011 ()
49. “The control which designers know in the print
medium, and often desire in the web medium, is simply
a function of the limitation of the printed page. We
should embrace the fact that the web doesn’t have the
same constraints, and design for this flexibility. But first,
we must “accept the ebb and flow of things.”
John Allsopp, “A Dao of Web Design”
woensdag 23 november 2011 ()
http://www.alistapart.com/articles/dao/
50. We weten niet de netwerksnelheid
We weten niet de mogelijkheden
We weten niet de dimensies
woensdag 23 november 2011 ()
http://vimeo.com/27484362
53. Begin bij de content en werk
langzaam omhoog
woensdag 23 november 2011 ()
54. 5 concepten voor multi-device webdesign
Flicr - Urbanfeel - http://www.flickr.com/photos/30003006@N00/583346305/
woensdag 23 november 2011 ()
Het zijn uitgangspunten, maar de weg blijft hobbelig en onzeker
55. 1 Mobile First
“Mobile forces you to focus” - LukeW
woensdag 23 november 2011 ()
56. 2 Responsive design
Wees niet pixel-perfect, maar context-perfect.
woensdag 23 november 2011 ()
57. 3 Progressive enhancement
woensdag 23 november 2011 ()
58. 4 Webstandaarden
HTML5/CSS3/JS
woensdag 23 november 2011 ()
59. 5 Object georienteerd
ontwerpen
woensdag 23 november 2011 ()
61. Eric Schmidt, Google
Eric Schmidt, Google
woensdag 23 november 2011 ()
“Apps die mobile first zijn ontworpen leveren betere applicaties op.”
62. Kate Aronowitz, Design Director Facebook
Eric Schmidt, Google
woensdag 23 november 2011 ()
“We overwegen om mobile first te gaan voor onze diensten.”
63. 1 Groei in gebruikers geeft potentie.
2 Beperkingen geeft focus.
3 Mogelijkheden geeft ruimte voor
innovatie.
woensdag 23 november 2011 ()
64. woensdag 23 november 2011 ()
De mobile versie heeft veel meer focus. De gebruiker en zijn taak staat centraal
65. woensdag 23 november 2011 ()
De mobile versie heeft veel meer focus. De gebruiker en zijn taak staat centraal
66. woensdag 23 november 2011 ()
De mobile versie heeft veel meer focus. De gebruiker en zijn taak staat centraal
67. woensdag 23 november 2011 ()
De mobile versie heeft veel meer focus. De gebruiker en zijn taak staat centraal
72. Epicenter based design
woensdag 23 november 2011 ()
Focus eerst op de key-features van je ontwerp. Werk daar van uit.
Jason Fried - http://gettingreal.37signals.com/ch09_Epicenter_Design.php
73. Epicenter based design
woensdag 23 november 2011 ()
Focus eerst op de key-features van je ontwerp. Werk daar van uit.
Jason Fried - http://gettingreal.37signals.com/ch09_Epicenter_Design.php
74. Epicenter based design
zoeken
woensdag 23 november 2011 ()
Focus eerst op de key-features van je ontwerp. Werk daar van uit.
Jason Fried - http://gettingreal.37signals.com/ch09_Epicenter_Design.php
75. Epicenter based design
zoeken
Groepen
woensdag 23 november 2011 ()
Focus eerst op de key-features van je ontwerp. Werk daar van uit.
Jason Fried - http://gettingreal.37signals.com/ch09_Epicenter_Design.php
87. HTML is per definitie responsive
woensdag 23 november 2011 ()
88. Responsive design is meer dan
grids, images en mediaqueries
woensdag 23 november 2011 ()
89. woensdag 23 november 2011 ()
Financial Times, http://www.ft.com en http://app.ft.com
90. woensdag 23 november 2011 ()
Houd ook rekening met andere input - Vinger is de nieuwe muis en vraagt andere grootte
van scherm elementen
91. 8/10 mm
Flick
Pinch
woensdag 23 november 2011 ()
Houd ook rekening met andere input - Vinger is de nieuwe muis en vraagt andere grootte
van scherm elementen
92. woensdag 23 november 2011 ()
Grotere touchpoints voor de gebruiker - Fitt’s Law
http://en.wikipedia.org/wiki/Fitts's_law
94. Gracefull Progressive
degradation enhancement
woensdag 23 november 2011 ()
Gracefull decradation
optimale experience voor moderne browsers - ontwerpoplossingen bedenken voor platvormen met minder mogelijkheden.
Progressive enhancement
Uitgangspunt is een basisontwerp - nieuwe features beschikbaar voor toekomstige platformen
95. Gracefull degradation
Default Degradation
Printing the page requires
Print this page JavaScript to be enabled.
Please turn it on in your
browser.
<p id="printthis">
<a href="javascript:window.print()">Print this page</a>
</p>
<noscript>
<p class="scriptwarning">
Printing the page requires JavaScript to be enabled.
Please turn it on in your browser.
</p>
</noscript>
woensdag 23 november 2011 ()
96. Progressive enhancement
Default Enhancement
Thank you for your order.
Please print this page for Print this page
your records.
<p id="printthis">Thank you for your order. Please print this page for your records.</p>
<script type="text/javascript">
(function(){
if(document.getElementById){
var pt = document.getElementById('printthis');
if(pt && typeof window.print === 'function'){
var but = document.createElement('input');
but.setAttribute('type','button');
but.setAttribute('value','Print this now');
but.onclick = function(){
window.print();
};
pt.appendChild(but);
}
}
})();
</script>
woensdag 23 november 2011 ()
99. woensdag 23 november 2011 ()
Kindle browser is op basis van webkit, DS op basis van Opera
100. Gebruik van HTML5 standaarden helpt de gebruiker
woensdag 23 november 2011 ()
HTML5 input types zorgt voor betere UX op mobile devices.
101. De basis blijft HTML, CSS
en Javascript
woensdag 23 november 2011 ()
102. HTML 5 support door browsers
100% HTML
90% CSS
85% 85%
80% 83% 84%
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
r
ox
11
far
re
e
om
r2
ef
i4
lo
Sa
ra
in
Fir
xp
ile
pe
hr
M
tE
O
far
C
se
ob
ne
ow
ra
r
Sa
te
M
In
pe
Br
S
ra
iO
O
pe
d
oi
O
dr
An
http://caniuse.com/
woensdag 23 november 2011 ()
103. “We will no longer adapt Flash Player for
mobile devices.”
woensdag 23 november 2011 ()
Silverlight stop mobile
http://tweakers.net/nieuws/77975/microsoft-stopt-mogelijk-met-ontwikkeling-
silverlight.html
105. Applications ontwikkeld o.b.v. front-end
technologie (JavaScript/HTML/CSS) kunnen
nu gedistribueerd worden als native
Windows applications.
woensdag 23 november 2011 ()
http://www.sencha.com/blog/ie10-preview-html5-first-look/
107. Web v.s. Native
Flicr - dimi15 - http://www.flickr.com/photos/dimi15/708856438
woensdag 23 november 2011 ()
108. Het hangt er van af.
woensdag 23 november 2011 ()
Pro native = nische markten, marketing, exposure, app store, homescreen
Google en Facebook zetten vol in op web
109. Domino's Pizza Hero
woensdag 23 november 2011 ()
Domino’s pizza - http://youtu.be/NVyIslpS87Y / http://dominospizzahero.com/
Een pizza game waarbij je de gemaakte pizza kan laten bezorgen.
111. Waar gaat de link naar toe?
woensdag 23 november 2011 ()
De url opent in browser
112. Waar gaat de link naar toe?
woensdag 23 november 2011 ()
De url opent in browser
113. “Beginning November 22, 2011, we will end support for
the Gmail app for BlackBerry (installed native app). Over
this past year, we’ve focused efforts on building a great
Gmail experience in the mobile browser and will continue
investing in this area.”
woensdag 23 november 2011 ()
Google > Facebook gaan voor web
114. Web is je default
native is een add-on
woensdag 23 november 2011 ()