Responsive Web design

Petit déjeuner defimedia 21 février 2013

Préambule : le Webet ses utilisateurs en 2013

Plus de smartphones, moins d’ordinateurs

Ventes globales

d’appareils connectés

Source : Gartner, IDC, Strategy Analytics, Company filings, Business Insider

Quelques chiffres

• France, 1er trimestre 2012 : Hausse de 195% des ventes depuis smartphones et tablettes, non compris les téléchargements payants d’applications. 

• Panier moyen des achats très supérieur sur les tablettes (20% de plus que sur les ordinateurs, 54% de plus que sur les smartphones).

• 28% des mobinautes américains n’accèdent au Web que grâce à leur smartphone et/ou tablette.

Source : Edatis Digital Marketing (France) / BigCommerce.com (US)

Any Time, Any Where, Any Device

Où sontutilisés les

smartphones ?

Source : Google / IPSOS

98% 65%

76% 62%

76%

79% 63% 42%

44%

26%

45%

La diversité des appareils connectés

La quantité et la diversité des appareils connectés– la plupart dont nous ne savons encore rien – va exploser dans le futur.

On dénombre plus de 230 résolutions d’écran différentes parmi les appareils capables de se connecter au Web

70 % des téléphones vendus

dans le monde sont des « feature

phones »

Limitations de l’approche traditionnelle« version mobile séparée »

• Les utilisateurs veulent retrouver les mêmes contenus et les mêmes fonctionnalités, quel que soit leur device du moment.

• Site mobile + site desktop = 2 versions SEULEMENT. De nombreux devices ne sont pas spécifiquement optimisés (typographie et lisibilité, « feature phones » oubliés…).

• Site mobile + site desktop = 2 URL différentes (problèmes dans les détections et les versions servies automatiquement, désavantage SEO).

Une solution : le responsive Web design

La notion de Responsive Web Design regroupe différents principes et technologies qui forment une approche de conception de sites Web dans laquelle un site est conçu pour offrir au visiteur une expérience de consultation optimale facilitant la lecture et la navigation, quel que soit son interface connectée (moniteurs d'ordinateur, smartphones, tablettes, TV...).

La définition d’un concept

• Ethan Marcotte (inventeur du concept) le définit comme l’usage :• de grilles fluides ;• d’images flexibles ;• de media queries,

afin de délivrer une expérience visuelle élégante (layouts, typographie…) qui s’accommode de notre paysage numérique post-iPhone, post-Android, post-iPad.

• Plutôt que de concevoir différents designs indépendants pour chacun des types de devices Web (dont la variété se multiplie), nous pouvons les traiter comme différentes facettes d’une même expérience.

La définition de techniques

HTML5 / CSS3 (media queries) / Javascript

/* Smartphones (landscape) */@media only screen and (min-width : 321px) { /* Styles */ }

/* Smartphones (portrait) */ @media only screen and (max-width : 320px) { /* Styles */ }

/* iPads (portrait and landscape) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ }

Source : mediaqueri.es

Source : mediaqueri.es

Responsive VS Adaptive (fixed + switch)• Fluidité totale VS grille fixe et points de rupture

http://www.barackobama.com/http://www.defimedia.behttp://blog.defimedia.be

http://www.sony.com/

Le responsive design : panacée ?

Mobile first

• Les contraintes du média mobile nous forcent à nous concentrer sur ce qui est vraiment important (contenus et fonctions essentielles).

• La problématique de la bande passante est davantage considérée.

• La rédaction des textes part sur des contraintes productives (exigence d’être synthétique, « scannable » et concret).

Une méthode de design et une solution technique

Mobile first

(basic) Mobile First + Unobtrusive JavaScript + Progressive Enhancement

Un trio de choc si l’on veut cibler notamment les feature phones : leurs navigateurs ne comprennent pas JavaScript ou media queries. Une bonne pratique est de créer un site Web basique et de l’enrichir pour les smartphones et écrans plus larges—plutôt que suivre la logique de « dégradation harmonieuse » pour faire fonctionner une site complexe et lourd sur un téléphone mobile basique.

Une méthode de design et une solution technique (suite)

Mobile firstUne tendance, voire une « philosophie » de design

• Les capacités du mobile et du tactile offrent des opportunités d’innovation.

• La culture mobile influence davantage la culture numérique « desktop » que l’inverse (ex: interfaces single task focused)

• Philosophie sur laquelle devrait se baser un CMS aussi important que Drupal 8…

• Tendance intéressante : le mobile only.

Mobile first / Mobile only

Enjeux, mutations…

• Ne plus penser la flexibilité d’un site comme une entrave à la maîtrise d’un espace délimité (qui est un enjeu du « print ») mais la voir comme une opportunité de répondre au mieux à chaque cas particulier d’utilisation.

• The fold : l’organisation d’une page Web tient moins au fait de concentrer tous les éléments importants le plus haut possible, que d’inciter le visiteur à faire défiler le contenu en minimisant le nombre de possibilités d’interaction à chaque écran…

• Scrolling is the new click (FB, Pixmania…) / la pagination devient peu à peu obsolète.

Merci !

defimedia Parc CREALYSRue Phocas Lejeune, 325032 Gembloux

Tél : +32 (0)81 81 03 81info@defimedia.be www.defimedia.beblog.defimedia.be

Pôle Image de LiègeRue de Mulhouse, 364020 Liège

facebook.com/defimedia

twitter.com/defimediaAgency/

linkedin.com/company/defimedia-sa/