Download - The mobile-web

The mobile web

lammertpostma.com / @lammertpostma

woensdag 23 november 2011 ()

http://www.lammertpostma.com


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.flickr.com/photos/yourdon/5398063184/sizes/l/in/photostream/


geen login

http://www.flickr.com/photos/johnwilliamsphd/5132328951/


117,5

World Bank data, ITU Data

2002 75,3

2007

Mobiele abonnementenPer 100 personen

Men heeft in ieder geval één telefoon.


50%is een smartphone

GfK Retail and Technology

2010 25%

2011

Verkoop mobiele telefoonsNederland

2015 75%


3.000.000

GfK Retail and Technology / Strategy Analytics

2010 2.500.000293.000.000 wereldwijd

2011

Verkoop smartphonesNederland

Iedereen heeft straks een smartphone


“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


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

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




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.


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.


http://www.apple.com/pr/library/2010/07/20results.html

http://www.apple.com/pr/library/2010/07/20results.html

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.


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.


http://www.businessinsider.com/morgan-stanley-tablets-2011-2#


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/




De gebruiker gebruikt niet één device, maar een verscheidenheid aan devices.

“Focussen op desktop is niet voldoende.”


Hoe gebruikt men deze devices?


Smartphones gebruikt men voor directe contentconsumptie in verschillende contexten.

Flicr - johnwilliamsphd - http://www.flickr.com/photos/johnwilliamsphd/5132328951/




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


http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/

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.flickr.com/photos/smolianitski/5008046254/sizes/l/in/photostream/




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

E-mail

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




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

E-mail

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.


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

http://www.sanomamedia.nl/nl-web-Nieuws-Persberichten-2010-Meer_dan_een_uur_per_dag_gebruik_van_de_iPad.php

http://www.sanomamedia.nl/nl-web-Nieuws-Persberichten-2010-Meer_dan_een_uur_per_dag_gebruik_van_de_iPad.php

54%

Sanoma Digital

Hoe lang wordt de iPad gebruikt

In tegenstelling tot de smartphone gebruikt men langer een tablet.

84%30 - 60minuten

+ 60minuten


Hoe zit het met de browsers?


Iphone en Android zijn de meest gebruikte mobiele platformen

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




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


http://www.mobilemetrics.nl/2011/04/ipad-most-used-mobile-device-for-web-surfing/


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.




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?!




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

70%

56%

42%

28%

14%

0%maart 2010

maart 2011

IE58,22%

Chrome - 14,39%

Top 8 Desktop Browsers Nederland


Firefox20,15%

In de desktop browser markt is IE populair, maar toont een dalende lijn.

Safari - 5,89%

Opera - 0,99%




50%

40%

30%

20%

10%

0%maart 2010

maart 2011

iPhone38,76%

Nokia - 7,73%

Top 8 Mobile Browsers Nederland


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%)




En hoe zit het met de webstandaarden?


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

http://www.findmebyip.com/litmus


Nou ja, bijna alle browsers....

http://www.findmebyip.com/litmus


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%


http://caniuse.com

http://caniuse.com

Recap


We gebruiken verschillende devices gedurende een dag.

Flicr - yagankiely - http://www.flickr.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.flickr.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.flickr.com/photos/patrickgage/3321120314/




...waarbij snelheid een steeds belangrijke factor is.

Flicr - thomashawk - http://www.flickr.com/photos/thomashawk/2567945057


Amazon 100ms trager 1% minder verkoopGoogle 500ms trager 20% minder zoekopdrachtenBing 1s trager 4% less reveneu



Wat betekent dit voor het ontwerp


Flicr - tranchis - http://www.flickr.com/photos/tranchis/3523630730

Laat los




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


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


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

5 concepten voor multi-device webdesign


Het zijn uitgangspunten, maar de weg blijft hobbelig en onzeker

http://www.intomobile.com/2010/09/07/idc-smartphone-shipments-grew-55-5-android-the-wild-card/


Mobile First

“Mobile forces you to focus” - LukeW1


Responsive design

Wees niet pixel-perfect, maar context-perfect.

2


Progressive enhancement3


Webstandaarden4HTML5/CSS3/JS


Object georienteerd ontwerpen5


Mobile first


Eric Schmidt, GoogleEric Schmidt, Google


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

Eric Schmidt, GoogleKate Aronowitz, Design Director Facebook


“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



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 fixed screensize


Er is geen fixed screensize.

Ethan Marcotte

Responsive web design


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

Ethan Marcotte

Responsive web design

Fluid grid

Fluid images

Media queries


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


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

HTML is per definitie 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

Pinch

Flick


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 Lawhttp://en.wikipedia.org/wiki/Fitts's_law

Progressive enhancement en Gracefull degradation


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.


<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


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


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%


http://caniuse.com

http://caniuse.com

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


Silverlight stop mobilehttp://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-first-look/


http://phonegap.com/

Flicr - dimi15 - http://www.flickr.com/photos/dimi15/708856438

Web v.s. Native




Het hangt er van af.


Pro native = nische markten, marketing, exposure, app store, homescreenGoogle 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 defaultnative 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

Ontwerp in lagen

Structuur / HTML(5)



Ontwerp in lagen

Structuur / HTML(5)

Presentatie / CSS(3)



Ontwerp in lagen

Structuur / HTML(5)

Presentatie / CSS(3)

Gedrag / JS



Bedankt voor jullie aandacht

lammertpostma.com / @lammertpostma


