The mobile web lammertpostma.com / @lammertpostma woensdag 23 november 2011 ()
Oct 31, 2014
The mobile web
lammertpostma.com / @lammertpostma
woensdag 23 november 2011 ()
Web
....en van mijn vrouw en kinder
♥
woensdag 23 november 2011 ()
Web
....en van mijn vrouw en kinder
♥
woensdag 23 november 2011 ()
woensdag 23 november 2011 ()
1 pc staat tot n-personen is geworden n-pc’s staat tot 1 persoon
woensdag 23 november 2011 ()
1 pc staat tot n-personen is geworden n-pc’s staat tot 1 persoon
woensdag 23 november 2011 ()
1 pc staat tot n-personen is geworden n-pc’s staat tot 1 persoon
woensdag 23 november 2011 ()
1 pc staat tot n-personen is geworden n-pc’s staat tot 1 persoon
woensdag 23 november 2011 ()
1 pc staat tot n-personen is geworden n-pc’s staat tot 1 persoon
Facts & Figures
woensdag 23 november 2011 ()
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
117,5
World Bank data, ITU Data
2002 75,3
2007
Mobiele abonnementenPer 100 personen
Men heeft in ieder geval één telefoon.
woensdag 23 november 2011 ()
50%is een smartphone
GfK Retail and Technology
2010 25%
2011
Verkoop mobiele telefoonsNederland
2015 75%
woensdag 23 november 2011 ()
3.000.000
GfK Retail and Technology / Strategy Analytics
2010 2.500.000293.000.000 wereldwijd
2011
Verkoop smartphonesNederland
Iedereen heeft straks een smartphone
woensdag 23 november 2011 ()
“Bij de verkoop van smartphones neemt de helft een mobiel data abonnement”
T-Mobile
T-Mobile
Mobiel data abonnementen
En is altijd online via wifi of via 3G
woensdag 23 november 2011 ()
“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 ()
1.000.000 55.000.000 wereldwijd
GfK Retail and Technology / Gartner
2010 250.00020.000.000 wereldwijd
2011
Verkoop tabletsNederland
Ook de tablet bereikt steeds een groter publiek.
woensdag 23 november 2011 ()
Apple - http://www.apple.com/pr/library/2010/07/20results.html
Verkoop tabletsWereldwijd
En wordt snel geadopteerd door de consument.
Er zijn in Q3 van 2010 3,27 miljoen iPads verkocht. Slechts 200.000 minder dan er van de Mac zijn verkocht.2010
2011 Er zijn in Q3 van 2011 9,25 miljoen iPads verkocht.
woensdag 23 november 2011 ()
51%
AlphaWise CIO survey
2010 21%
2011
Gebruik van tablets in EnterprisesWereldwijd
Niet alleen privé, maar ook in de zakelijk markt doet de tablet zijn intrede.
woensdag 23 november 2011 ()
http://www.slideshare.net/MobileWeb/ttablets-and-media-beyond-the-hype?from=ss_embedhttp://www.themobilerevolution.be/wp-content/uploads/2011/10/tablet_adoption_infographic.png
500
400
300
200
100
02010
IDC, Gartner, Morgan Stanley Research - http://www.businessinsider.com/morgan-stanley-tablets-2011-2#were-going-from-a-computing-world-
Verkoop devices Wereldwijd
200920082007
600
700x 1.000.000
200620052004200320022001200019991998199719961995
Smartphones
Tablets
Netbooks
Notebooks
Desktops
De markt fragmenteert.
woensdag 23 november 2011 ()
500
400
300
200
100
02010
IDC, Gartner, Morgan Stanley Research - http://www.businessinsider.com/morgan-stanley-tablets-2011-2#were-going-from-a-computing-world-
Verkoop devices Wereldwijd
200920082007
600
700x 1.000.000
200620052004200320022001200019991998199719961995
Smartphones
Tablets
Netbooks
Notebooks
Desktops
De markt fragmenteert.
woensdag 23 november 2011 ()
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 ()
De gebruiker gebruikt niet één device, maar een verscheidenheid aan devices.
“Focussen op desktop is niet voldoende.”
woensdag 23 november 2011 ()
Hoe gebruikt men deze devices?
woensdag 23 november 2011 ()
Smartphones gebruikt men voor directe contentconsumptie in verschillende contexten.
Flicr - johnwilliamsphd - http://www.flickr.com/photos/johnwilliamsphd/5132328951/
woensdag 23 november 2011 ()
n = 1246 participants 53% 35% 9%
n = 1246 participants 38% 43% 16%
n = 1246 participants 36% 43% 16%
n = 1246 participants 31% 53% 13%
n = 1246 participants 26% 59% 12%
n = 1246 participants20% 52% 24%
n = 1246 participants16% 50% 26%
Compete.com 2010 - http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/
Gebruik van de smartphone
50%40%30%20%10%0 60% 70% 80% 90% 100%
At Home
Misc. Downtime throughout the day
Waiting in line / appointment
While shopping
At Work
While Watching TV
During my commute to work
Not at all
0-1 hour
1-3 hours
3-5 hours
5+ hours
n = 1246 participants
woensdag 23 november 2011 ()
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 ()
50%
40%
30%
20%
10%
0
IDC, Gartner, Morgan Stanley Research - http://www.businessinsider.com/morgan-stanley-tablets-2011-2#were-going-from-a-computing-
Tablets v.s. Traditional PC’s Wereldwijd
Tablets
Traditional PC
60%
70%
Web
Bro
wsing
80%
90%
100%
Socia
l Netw
orkin
g
Readin
g
Playin
g Gam
es
Listen
ing to
Mus
ic
Watc
hing V
ideo
Create
/ Edit
files
Gener
al Wor
k Use
Spec
ific W
ork U
se
68%
81%
54%55%
54%
27%
52%
46%
52%
41%
51%48%
62%
82%
21%
54%
14%
44%
17%
29%Tablets vervangen de contentconsumptie niet de content
woensdag 23 november 2011 ()
35%
35%
35%
Sanoma Digital - http://www.sanomamedia.nl/nl-web-Nieuws-Persberichten-2010-Meer_dan_een_uur_per_dag_gebruik_van_de_iPad.php
Gebruik van de iPad
50%40%30%20%10%0 60% 70% 80% 90% 100%
Nieuws
Surfen
Zoeken
TV / Video kijken (youtube, uitzendinggemist
Foto’s bekijken
Gamen
Nooit
Soms
Vaak
Tijdschrift lezen
Muziek luisteren
Aankopen doen
Boeken lezen
Tekstverwerking
Sociale netwerken / bloggen
Zakelijke presentaties
Beeldbewerking
Chatten
De resultaten worden gestaafd door onderzoek onder gebruik van de iPad.
woensdag 23 november 2011 ()
KPN digitaal ook via de iPadhttp://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/
54%
Sanoma Digital
Hoe lang wordt de iPad gebruikt
In tegenstelling tot de smartphone gebruikt men langer een tablet.
84%30 - 60minuten
+ 60minuten
woensdag 23 november 2011 ()
Hoe zit het met de browsers?
woensdag 23 november 2011 ()
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 ()
Mobile Metrics - http://www.mobilemetrics.nl/2011/04/ipad-most-used-mobile-device-for-web-surfing/
Mobiel sitebezoekOnder 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%
Windows 0,20%
iOS is de meest gebruikte platform voor browsing
woensdag 23 november 2011 ()
70%
56%
42%
28%
14%
0%maart 2010
maart 2011
iOS52,24%
Blackberry OS - 4,37%Samsung (2,13%), Sony Ericsson (0,96%), Windows (0,49%)
Top 8 Mobiele OS Nederland
Statcounter - http://gs.statcounter.com/#mobile_os-NL-monthly-201003-201103
Android28,85%
Symbian OS - 8,85%
iOS (iPhone,iPod,iPad) is in Nederland nog populair, maar android maakt een opmars.
woensdag 23 november 2011 ()
50%
40%
30%
20%
10%
0%maart 2010
maart 2011
Statcounter - http://gs.statcounter.com/#mobile_os-eu-monthly-201003-201103
Top 8 Mobiele OS Europa
iOS44,53%
Android - 17,97%Blackberry - 17,17%
Symbian - 11,76%
Sony Ericsson (2,93%), Samsung (2,27%), Playstation and others
In Europa vechten Android en Blackberry om de tweede plek, maar geen windows?!
woensdag 23 november 2011 ()
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
70%
56%
42%
28%
14%
0%maart 2010
maart 2011
IE58,22%
Chrome - 14,39%
Top 8 Desktop Browsers Nederland
Statcounter - http://gs.statcounter.com/#mobile_os-NL-monthly-201003-201103
Firefox20,15%
In de desktop browser markt is IE populair, maar toont een dalende lijn.
Safari - 5,89%
Opera - 0,99%
woensdag 23 november 2011 ()
50%
40%
30%
20%
10%
0%maart 2010
maart 2011
iPhone38,76%
Nokia - 7,73%
Top 8 Mobile Browsers Nederland
Statcounter - http://gs.statcounter.com/#mobile_os-NL-monthly-201003-201103
iPod Touch - 13,27%
Blackberry - 4,27%
Op de mobile platforms speelt IE geen rol. Daar domineren iPhone en Android.
Android28,18%
Opera - 3,37%
Samsung (1,68%), Sony PSP (0,48%)
woensdag 23 november 2011 ()
En hoe zit het met de webstandaarden?
woensdag 23 november 2011 ()
Alle browsers voor zowel Desktop als Mobiel adopteren redelijk goed de nieuwe HTML 5 webstandaarden.
http://www.findmebyip.com/litmus
woensdag 23 november 2011 ()
Nou ja, bijna alle browsers....
http://www.findmebyip.com/litmus
woensdag 23 november 2011 ()
50%
40%
30%
20%
10%
0
http://caniuse.com/
HTML 5 support door browsers
HTML
CSS
60%
70%
Inter
net E
xplor
er 9
80%
90%
100%
Firefo
x 4
Safar
i 5
Chrom
e 10
Ope
ra 11
.+
iOS S
afari
4.+
Ope
ra M
ini 5
Ope
ra M
obile
11
Andro
id Br
owse
r 2.3
55%
67%
79%
83%
67%
85% 85% 84%
67%
81%
50%
79%
15%
49%
61%
75%
51%
75%
woensdag 23 november 2011 ()
Recap
woensdag 23 november 2011 ()
We gebruiken verschillende devices gedurende een dag.
Flicr - yagankiely - http://www.flickr.com/photos/yagankiely/5270152477
woensdag 23 november 2011 ()
Met verschillende dimensies
...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.
...middels touch, muis, trackball, etc
Flicr - patrickgage - http://www.flickr.com/photos/patrickgage/3321120314/
woensdag 23 november 2011 ()
...waarbij snelheid een steeds belangrijke factor is.
Flicr - thomashawk - http://www.flickr.com/photos/thomashawk/2567945057
woensdag 23 november 2011 ()
Amazon 100ms trager 1% minder verkoopGoogle 500ms trager 20% minder zoekopdrachtenBing 1s trager 4% less reveneu
Wat betekent dit voor het ontwerp
woensdag 23 november 2011 ()
Flicr - tranchis - http://www.flickr.com/photos/tranchis/3523630730
Laat los
woensdag 23 november 2011 ()
John Allsopp, “A Dao of Web Design”
“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.”
woensdag 23 november 2011 ()
http://www.alistapart.com/articles/dao/
We weten niet de netwerksnelheid
We weten niet de mogelijkheden
We weten niet de dimensies
woensdag 23 november 2011 ()
http://vimeo.com/27484362
Eén element is 100% zeker
woensdag 23 november 2011 ()
De content
woensdag 23 november 2011 ()
Begin bij de content en werk langzaam omhoog
woensdag 23 november 2011 ()
Flicr - Urbanfeel - http://www.flickr.com/photos/30003006@N00/583346305/
5 concepten voor multi-device webdesign
woensdag 23 november 2011 ()
Het zijn uitgangspunten, maar de weg blijft hobbelig en onzeker
Mobile First
“Mobile forces you to focus” - LukeW1
woensdag 23 november 2011 ()
Responsive design
Wees niet pixel-perfect, maar context-perfect.
2
woensdag 23 november 2011 ()
Progressive enhancement3
woensdag 23 november 2011 ()
Webstandaarden4HTML5/CSS3/JS
woensdag 23 november 2011 ()
Object georienteerd ontwerpen5
woensdag 23 november 2011 ()
Mobile first
woensdag 23 november 2011 ()
Eric Schmidt, GoogleEric Schmidt, Google
woensdag 23 november 2011 ()
“Apps die mobile first zijn ontworpen leveren betere applicaties op.”
Eric Schmidt, GoogleKate Aronowitz, Design Director Facebook
woensdag 23 november 2011 ()
“We overwegen om mobile first te gaan voor onze diensten.”
Groei in gebruikers geeft potentie.1
Beperkingen geeft focus.2
Mogelijkheden geeft ruimte voor innovatie.
3
woensdag 23 november 2011 ()
woensdag 23 november 2011 ()
De mobile versie heeft veel meer focus. De gebruiker en zijn taak staat centraal
woensdag 23 november 2011 ()
De mobile versie heeft veel meer focus. De gebruiker en zijn taak staat centraal
woensdag 23 november 2011 ()
De mobile versie heeft veel meer focus. De gebruiker en zijn taak staat centraal
woensdag 23 november 2011 ()
De mobile versie heeft veel meer focus. De gebruiker en zijn taak staat centraal
woensdag 23 november 2011 ()
Hoe zou nshispeed voor mobiel eruit zien?
woensdag 23 november 2011 ()
Hoe zou nshispeed voor mobiel eruit zien?
woensdag 23 november 2011 ()
Hoe zou nshispeed voor mobiel eruit zien?
woensdag 23 november 2011 ()
Hoe zou nshispeed voor mobiel eruit zien?
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
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
zoeken
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
zoeken
Groepen
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
Responsive design
woensdag 23 november 2011 ()
Er is geen fixed screensize
woensdag 23 november 2011 ()
Er is geen fixed screensize.
Er is geen fixed screensize
woensdag 23 november 2011 ()
Er is geen fixed screensize.
Ethan Marcotte
Responsive web design
woensdag 23 november 2011 ()
http://www.alistapart.com/articles/responsive-web-design/
Ethan Marcotte
Responsive web design
Fluid grid
Fluid images
Media queries
woensdag 23 november 2011 ()
http://www.alistapart.com/articles/responsive-web-design/
woensdag 23 november 2011 ()
Ontwerp o.b.v. breakpoint bepaalt door de content niet het devicehttp://lammertpostma.com, http://mediaqueri.es/
woensdag 23 november 2011 ()
Ontwerp o.b.v. breakpoint bepaalt door de content niet het devicehttp://lammertpostma.com, http://mediaqueri.es/
woensdag 23 november 2011 ()
Ontwerp o.b.v. breakpoint bepaalt door de content niet het devicehttp://lammertpostma.com, http://mediaqueri.es/
woensdag 23 november 2011 ()
woensdag 23 november 2011 ()
woensdag 23 november 2011 ()
HTML is per definitie responsive
woensdag 23 november 2011 ()
Responsive design is meer dan grids, images en mediaqueries
woensdag 23 november 2011 ()
woensdag 23 november 2011 ()
Financial Times, http://www.ft.com en http://app.ft.com
woensdag 23 november 2011 ()
Houd ook rekening met andere input - Vinger is de nieuwe muis en vraagt andere grootte van scherm elementen
8/10 mm
Pinch
Flick
woensdag 23 november 2011 ()
Houd ook rekening met andere input - Vinger is de nieuwe muis en vraagt andere grootte van scherm elementen
woensdag 23 november 2011 ()
Grotere touchpoints voor de gebruiker - Fitt’s Lawhttp://en.wikipedia.org/wiki/Fitts's_law
Progressive enhancement en Gracefull degradation
woensdag 23 november 2011 ()
Gracefull degradation
Progressive enhancement
woensdag 23 november 2011 ()Gracefull decradationoptimale experience voor moderne browsers - ontwerpoplossingen bedenken voor platvormen met minder mogelijkheden. Progressive enhancementUitgangspunt is een basisontwerp - nieuwe features beschikbaar voor toekomstige platformen
<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>
Gracefull degradation
Default Degradation
Print this pagePrinting the page requires JavaScript to be enabled. Please turn it on in your browser.
woensdag 23 november 2011 ()
<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>
Progressive enhancement
Default Enhancement
Thank you for your order. Please print this page for your records.
Print this page
woensdag 23 november 2011 ()
Webstandaarden
woensdag 23 november 2011 ()
HTML5 input types
woensdag 23 november 2011 ()
Niet ontwerpen voor browsers
woensdag 23 november 2011 ()
Kindle browser is op basis van webkit, DS op basis van Opera
Gebruik van HTML5 standaarden helpt de gebruiker
woensdag 23 november 2011 ()
HTML5 input types zorgt voor betere UX op mobile devices.
De basis blijft HTML, CSS en Javascript
woensdag 23 november 2011 ()
50%
40%
30%
20%
10%
0
http://caniuse.com/
HTML 5 support door browsers
HTML
CSS
60%
70%
Inter
net E
xplor
er 9
80%
90%
100%
Firefo
x 4
Safar
i 5
Chrom
e 10
Ope
ra 11
.+
iOS S
afari
4.+
Ope
ra M
ini 5
Ope
ra M
obile
11
Andro
id Br
owse
r 2.3
55%
67%
79%
83%
67%
85% 85% 84%
67%
81%
50%
79%
15%
49%
61%
75%
51%
75%
woensdag 23 november 2011 ()
“We will no longer adapt Flash Player for mobile devices.”
woensdag 23 november 2011 ()
Silverlight stop mobilehttp://tweakers.net/nieuws/77975/microsoft-stopt-mogelijk-met-ontwikkeling-silverlight.html
Chromebook
woensdag 23 november 2011 ()
http://www.google.com/chromebook/
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/
woensdag 23 november 2011 ()
http://phonegap.com/
Flicr - dimi15 - http://www.flickr.com/photos/dimi15/708856438
Web v.s. Native
woensdag 23 november 2011 ()
Het hangt er van af.
woensdag 23 november 2011 ()
Pro native = nische markten, marketing, exposure, app store, homescreenGoogle en Facebook zetten vol in op web
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.
Layar Reality Browser
woensdag 23 november 2011 ()
http://www.layar.com/
Waar gaat de link naar toe?
woensdag 23 november 2011 ()
De url opent in browser
Waar gaat de link naar toe?
woensdag 23 november 2011 ()
De url opent in browser
“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
Web is je defaultnative is een add-on
woensdag 23 november 2011 ()
Object georienteerd ontwerpen
woensdag 23 november 2011 ()
Men gebruikt seamlessly meerdere devices
woensdag 23 november 2011 ()
Object oriented design
woensdag 23 november 2011 ()
Decomponeer het ontwerp en ontwerp componenten in verschillende contexten.
Ontwerp in lagen
woensdag 23 november 2011 ()
Zorg voor een goede defensieve semantische structuur
Ontwerp in lagen
Structuur / HTML(5)
woensdag 23 november 2011 ()
Zorg voor een goede defensieve semantische structuur
Ontwerp in lagen
Structuur / HTML(5)
Presentatie / CSS(3)
woensdag 23 november 2011 ()
Zorg voor een goede defensieve semantische structuur
Ontwerp in lagen
Structuur / HTML(5)
Presentatie / CSS(3)
Gedrag / JS
woensdag 23 november 2011 ()
Zorg voor een goede defensieve semantische structuur
Bedankt voor jullie aandacht
lammertpostma.com / @lammertpostma
woensdag 23 november 2011 ()