Pourquoi passer au web mobile avec le design réactif

Pourquoi passer au web mobileavec le design réactif

(Responsive Web Design)

Raison n° 1

Le marché mobile est énorme

32 millionsMobinautes en décembre 2011

17 000 téraoctetsVolume de données consommées par des mobiles

entre octobre et décembre 2011 (hors WiFi)

+ 78,7% en 1 anAugmentation des données consommées par des mobiles

1 251 milliards $Total des achats en ligne du “Cyber Monday” 2011

6,6%Achats effectués depuis un mobile ce jour-là,

Soit plusieurs milliards de dollars...

12% seulement...Entreprises françaises ayant un site mobile

L’existant est médiocre

Raison n° 2

Loading...

3:15 PMFREE 3G

3

Loading

3:15 PMFREE 3G

3

3:15 PMFREE 3G

3

Loading

3:15 PMFREE 3G

3

Une application ou un site dédié ne sont pas adaptés

Raison n° 3

User-Agent

Caractéristiques

3:15 PMFREE 3G

3

La technologie est mature

Raison n° 4

Media Queries<meta name=”viewport” content=”width=device-width” />

ET

<link rel="stylesheet" href="mobile.css"media="only screen and (max-width: 480px)" />

OU

@media screen and (max-width: 480px) { .bloc { display: block; clear: both; }}

“The absence of a media query is in fact, the first media query.”

Bryan Rieger, Rethinking the Mobile Web

Ces optimisations sont aussi valables sur desktop et pour

l’accessibilité

Raison n° 5

3:15 PMFREE 3G

3

Code mort

/*// Disabled, because it does nothing :-)function doSomething (params) {

// return param;}*/

http://www.flickr.com/photos/girliemac/6508022985/

float: none;

Réduire les dimensions

http://www.flickr.com/photos/maggieduvall/3875906399/

display: none;

http://www.nickbrandt.com/portfolio.cfm?i=176198

Tester(et pas seulement sur émulateur)

Les outils sont là (et gratuits)

Raison n° 6

OutilsValidateur MobileOK validator.w3.org/mobile/

WebPageTest webpagetest.org

Responsive design tester mattkersley.com/responsive/

Autre testeur de design réactif responsinator.com

Polyfill pour Media Queries github.com/scottjehl/Respond

Thème Wordpress réactif gratuit smashingmagazine.com/2011/06/07/free-html5-css3-wordpress-3-1-theme-with-responsive-layout-yoko/

Bootstrap twitter.github.com/bootstrap/

Mobile Boilerplate html5boilerplate.com/mobile

SourcesRapport trimestriel Arcep arcep.fr/?id=36

Luke Wroblewski lukew.com/ff/entry.asp?1478

Livre blanc Performics slideshare.net/PerformicsFrance/mobil-i-zation-search-des-opportunits-saisir-google-performics-livre-blanc

Niveau de support des Media Queries caniuse.com/#feat=css-mediaqueries

Questions ?

Merci !

@goulvench

goulven.champenois@userland.fr

Cette présentation est (déjà) en ligne :

http://files.userland.fr/www2012/