The mobile-web

The mobile web

lammertpostma.com / @lammertpostma

woensdag 23 november 2011 ()

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

World Bank data, ITU Data

2002 75,3

Mobiele abonnementenPer 100 personen

Men heeft in ieder geval één telefoon.

50%is een smartphone

GfK Retail and Technology

2010 25%

Verkoop mobiele telefoonsNederland

2015 75%

3.000.000

GfK Retail and Technology / Strategy Analytics

2010 2.500.000293.000.000 wereldwijd

Verkoop smartphonesNederland

Iedereen heeft straks een smartphone

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

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

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.

AlphaWise CIO survey

2010 21%

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

IDC, Gartner, Morgan Stanley Research - http://www.businessinsider.com/morgan-stanley-tablets-2011-2#were-going-from-a-computing-world-

Verkoop devices Wereldwijd

200920082007

700x 1.000.000

200620052004200320022001200019991998199719961995

Smartphones

Tablets

Netbooks

Notebooks

Desktops

De markt fragmenteert.

IDC, Gartner, Morgan Stanley Research - http://www.businessinsider.com/morgan-stanley-tablets-2011-2#were-going-from-a-computing-world-

Verkoop devices Wereldwijd

200920082007

700x 1.000.000

200620052004200320022001200019991998199719961995

Smartphones

Tablets

Netbooks

Notebooks

Desktops

De markt fragmenteert.

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

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/

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

l Netw

Readin

Playin

Listen

ing to

hing V

E-mail

Create

/ Edit

al Wor

ific W

54%55%

51%48%

29%Tablets vervangen de contentconsumptie niet de content

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

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/

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

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.

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

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%

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

http://caniuse.com/

HTML 5 support door browsers

Firefo

85% 85% 84%

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

Mobile First

“Mobile forces you to focus” - LukeW1

Responsive design

Wees niet pixel-perfect, maar context-perfect.

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.

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

Groepen

Responsive design

Er is geen fixed screensize

Er is geen fixed screensize.

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

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

http://caniuse.com/

HTML 5 support door browsers

Firefo

85% 85% 84%

“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

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

The mobile-web

Design

Transcript of The mobile-web

We The Web

The Mobile Way Ppt

Microcoordination and mobile web 2.0

1011q1 design for mobile les 1 the carry principle

Mobile Learning

Mobile Research als Onderzoekstool (Marcom'13 Mobile Dome) YoungWorks.pptx

The Social Conference - Ruud Huigsloot T-mobile

Ricoh Mobile Services Mobile Services... · Bron: IDG Connect – iPad for Business Survey 2012 The Role of Document-driven Business Processes in driving top-line growth - IDC Research

Mobile Security - Dutch Mobile .Net Developers

The Mobile Consumer in Belgium

MIE presentatie 2015: The Year of Mobile

THE YEAR OF MOBILE - Ruigrok NetPanel

Mobile Apps

CARAVANS CARAVANES 2021 · MOBIEL WERKEN* Mobiel werken* Wi-Fi hotspot functionaliteit (toegang tot web, IP radio en TV). *SIM kaart nodig. BUREAU MOBILE* Bureau mobile * et Fonction

· Web viewRespect to the mobile frame, the center of the two rear wheels has coordinates (0,0), the point P d has coordinates (x d,y d) and the ICR has coordinates (0,r), where

Pieter Brinkman - My first mobile experienceFrom mobile no no, to mobile go go - SUGCON

SFSDOverDrive Mobile App App.pdf · OverDrive Mobile App A Quick Guide sfsdlibrary.help@gmail.com school b. alls, With the mobile OverDrive Media Console application, you can download

Jeroen van Glabbeek - The convergence of the mobile market

Web ads mobile 2013

Impact of the Mobile First Index By Eric Enge

CARAVANS CARAVANES 2021 · MOBIEL WERKEN* Mobiel werken* Wi-Fi hotspot functionaliteit (toegang tot web, IP radio en TV). SIM kaart nodig. BUREAU MOBILE Bureau mobile * et Fonction