The mobile-web

The mobile web

lammertpostma.com / @lammertpostma

woensdag 23 november 2011 ()

♥ Web

....en van mijn vrouw en kinder



1 pc staat tot n-personen is geworden n-pc’s staat tot 1 persoon

Facts & Figures


De smartphone is de werkelijke ‘personal
computer’. Altijd binnen handbereik en
altijd online.

Flicr - yourdon - http://www.ﬂickr.com/photos/yourdon/5398063184/sizes/l/in/photostream/


geen login

Mobiele abonnementen
Per 100 personen

2002 75,3

2007
117,5
Men heeft in ieder geval één telefoon.

World Bank data, ITU Data


Verkoop mobiele telefoons
Nederland

2010 25%

2011
50%
is een smartphone

2015 75%
GfK Retail and Technology


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


Mobiel data abonnementen

T-Mobile “Bij de verkoop van
smartphones neemt de
helft een mobiel data
abonnement”

En is altijd online via wiﬁ of via 3G

T-Mobile


“Tablets penetratie gaat 4 keer sneller
dan die van de smartphone.”

Flicr - ntr23 - http://www.ﬂickr.com/photos/ntr23/4545975787/sizes/l/in/photostream/


Verkoop tablets
Nederland

2010 250.000

2011
1.000.000

Ook de tablet bereikt steeds een groter publiek.

GfK Retail and Technology / Gartner


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


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


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

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-


Men gebruikt devices naast elkaar en
aanvullend aan elkaar. Men wisselt
‘seamlessly’ tussen tablet, smartphone en
laptop.

Flicr - istig - http://www.ﬂickr.com/photos/istig/5599004092/sizes/l/in/photostream/


“Focussen op desktop is
niet voldoende.”
De gebruiker gebruikt niet één device, maar een
verscheidenheid aan devices.


Hoe gebruikt men deze devices?


Smartphones gebruikt men voor directe
contentconsumptie in verschillende
contexten.

Flicr - johnwilliamsphd - http://www.ﬂickr.com/photos/johnwilliamsphd/5132328951/


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/


Tablets vervangen de ‘traditionale PC’ op
het gebied van contentconsumptie en
zal aanvullend zijn op content creatie.

Flicr - smolianitski - http://www.ﬂickr.com/photos/smolianitski/5008046254/sizes/l/in/photostream/


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

ﬁl

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

iﬁ
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-


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


KPN digitaal ook via de iPad
http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/

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


Hoe zit het met de browsers?


Iphone en Android zijn de meest
gebruikte mobiele platformen

Flicr - arkland_swe - http://www.ﬂickr.com/photos/arkland_swe/5515420422/sizes/l/in/photostream/


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-surﬁng/


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


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


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.


Dit geldt voor de Westerse wereld. In andere werelddelen is Opera leading

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



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



En hoe zit het met de webstandaarden?


Alle browsers voor zowel Desktop als
Mobiel adopteren redelijk goed de
nieuwe HTML 5 webstandaarden.

http://www.ﬁndmebyip.com/litmus


Nou ja, bijna alle browsers....

http://www.ﬁndmebyip.com/litmus


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/


Recap


We gebruiken verschillende devices
gedurende een dag.

Flicr - yagankiely - http://www.ﬂickr.com/photos/yagankiely/5270152477


Met verschillende dimensies

...op het werk, terras, wachtend in een rij
of thuis op de bank...

Flicr - Ed Yourdon - http://www.ﬂickr.com/photos/yourdon/5518739750/


Mobiel betekent niet ‘opzoek naar mijn adresgegevens’. Men besteld via mobile, lees
artikelen, etc.

...middels touch, muis, trackball, etc

Flicr - patrickgage - http://www.ﬂickr.com/photos/patrickgage/3321120314/


...waarbij snelheid een steeds belangrijke
factor is.

Flicr - thomashawk - http://www.ﬂickr.com/photos/thomashawk/2567945057


Amazon
100ms trager
1% minder verkoop
Google
500ms trager
20% minder zoekopdrachten
Bing

1s trager

4% less reveneu

Wat betekent dit voor het ontwerp


Laat los

Flicr - tranchis - http://www.ﬂickr.com/photos/tranchis/3523630730


“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”


http://www.alistapart.com/articles/dao/

We weten niet de netwerksnelheid
We weten niet de mogelijkheden
We weten niet de dimensies


http://vimeo.com/27484362

Eén element is 100% zeker


De content


Begin bij de content en werk
langzaam omhoog


5 concepten voor multi-device webdesign

Flicr - Urbanfeel - http://www.ﬂickr.com/photos/30003006@N00/583346305/


Het zijn uitgangspunten, maar de weg blijft hobbelig en onzeker

1 Mobile First
“Mobile forces you to focus” - LukeW


2 Responsive design
Wees niet pixel-perfect, maar context-perfect.


3 Progressive enhancement


4 Webstandaarden
HTML5/CSS3/JS


5 Object georienteerd
ontwerpen


Mobile ﬁrst


Eric Schmidt, Google


“Apps die mobile ﬁrst zijn ontworpen leveren betere applicaties op.”

Kate Aronowitz, Design Director Facebook


“We overwegen om mobile ﬁrst te gaan voor onze diensten.”

1 Groei in gebruikers geeft potentie.

2 Beperkingen geeft focus.

3 Mogelijkheden geeft ruimte voor
innovatie.



De mobile versie heeft veel meer focus. De gebruiker en zijn taak staat centraal


Hoe zou nshispeed voor mobiel eruit zien?

Epicenter based design


Focus eerst op de key-features van je ontwerp. Werk daar van uit.
Jason Fried - http://gettingreal.37signals.com/ch09_Epicenter_Design.php

zoeken



zoeken

Groepen



Responsive design


Er is geen ﬁxed screensize


Er is geen ﬁxed screensize.

Ethan Marcotte

Responsive web design


http://www.alistapart.com/articles/responsive-web-design/

Fluid grid
Fluid images
Media queries

Ethan Marcotte

Responsive web design


http://www.alistapart.com/articles/responsive-web-design/


Ontwerp o.b.v. breakpoint bepaalt door de content niet het device
http://lammertpostma.com, http://mediaqueri.es/

HTML is per deﬁnitie responsive


Responsive design is meer dan
grids, images en mediaqueries



Financial Times, http://www.ft.com en http://app.ft.com


Houd ook rekening met andere input - Vinger is de nieuwe muis en vraagt andere grootte
van scherm elementen

8/10 mm

Flick

Pinch


Houd ook rekening met andere input - Vinger is de nieuwe muis en vraagt andere grootte
van scherm elementen


Grotere touchpoints voor de gebruiker - Fitt’s Law
http://en.wikipedia.org/wiki/Fitts's_law

Progressive enhancement en Gracefull
degradation


Gracefull Progressive
degradation enhancement

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

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>


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>


Webstandaarden


HTML5 input types


Niet ontwerpen voor browsers


Kindle browser is op basis van webkit, DS op basis van Opera

Gebruik van HTML5 standaarden helpt de gebruiker


HTML5 input types zorgt voor betere UX op mobile devices.

De basis blijft HTML, CSS
en Javascript


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/


“We will no longer adapt Flash Player for
mobile devices.”


Silverlight stop mobile
http://tweakers.net/nieuws/77975/microsoft-stopt-mogelijk-met-ontwikkeling-
silverlight.html

Chromebook

http://www.google.com/chromebook/

Applications ontwikkeld o.b.v. front-end
technologie (JavaScript/HTML/CSS) kunnen
nu gedistribueerd worden als native
Windows applications.


http://www.sencha.com/blog/ie10-preview-html5-ﬁrst-look/


http://phonegap.com/

Web v.s. Native

Flicr - dimi15 - http://www.ﬂickr.com/photos/dimi15/708856438


Het hangt er van af.


Pro native = nische markten, marketing, exposure, app store, homescreen
Google en Facebook zetten vol in op web

Domino's Pizza Hero


Domino’s pizza - http://youtu.be/NVyIslpS87Y / http://dominospizzahero.com/
Een pizza game waarbij je de gemaakte pizza kan laten bezorgen.

Layar Reality Browser


http://www.layar.com/

Waar gaat de link naar toe?


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


Google > Facebook gaan voor web

Web is je default
native is een add-on


Object georienteerd ontwerpen


Men gebruikt seamlessly meerdere devices

Object oriented design


Decomponeer het ontwerp en ontwerp componenten in verschillende contexten.

Ontwerp in lagen


Zorg voor een goede defensieve semantische structuur

Structuur / HTML(5)

Ontwerp in lagen



Presentatie / CSS(3)
Structuur / HTML(5)

Ontwerp in lagen



Gedrag / JS
Presentatie / CSS(3)
Structuur / HTML(5)

Ontwerp in lagen



Bedankt voor jullie aandacht

lammertpostma.com / @lammertpostma


The mobile-web

Recommended

Recommended

More Related Content

Featured

Featured (20)

The mobile-web