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

1. Responsive Web design
Petit déjeuner defimedia
21 février 2013

2. Préambule : le Web
et ses utilisateurs en 2013

3. Plus de smartphones, moins d’ordinateurs
Ventes
globales
d’appareils
connectés
Source : Gartner, IDC, Strategy Analytics, Company filings, Business Insider

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

5. Any Time, Any Where, Any Device
98% 65% 44%
Où sont 79% 63% 42%
utilisés les
smartphones ?
76% 62% 26%
76% 45%
Source : Google / IPSOS

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

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

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

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

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

11. 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 */ }

12. Source : mediaqueri.es

13. Source : mediaqueri.es

14. Responsive VS Adaptive (fixed + switch)
• Fluidité totale VS grille fixe et points de rupture
http://www.sony.com/
http://www.barackobama.com/
http://www.defimedia.be
http://blog.defimedia.be

15. Le responsive design : panacée ?

16. Mobile first
Une méthode de design et une solution technique
• 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).

17. Mobile first
Une méthode de design et une solution technique (suite)
(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.

18. Mobile first
Une 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.

19. Mobile first / Mobile only

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

22. Merci !

23. defimedia Parc CREALYS Pôle Image de Liège
Rue Phocas Lejeune, 32 Rue de Mulhouse, 36
5032 Gembloux 4020 Liège
facebook.com/defimedia
twitter.com/defimediaAgency/
linkedin.com/company/defimedia-sa/
Tél : +32 (0)81 81 03 81
info@defimedia.be
www.defimedia.be
blog.defimedia.be