1.
Responsive
Web Design
Back to Basics
par Ruben Pieraerts / Alinoa
@ruben_pieraerts
@alinoa

2.
En 2012,
environ 15 %
des sites sont
optimisés pour
le mobile

3.
Ruben Pieraerts
(homme / 30 ans / Bruxelles)
• Alinoa : Designer, manager
• Prof : Web design, identité visuelle
(Design Innovation / technocité)

4.
3 concepts :

5.
3 concepts :
1.
Qu’est-ce que le
Responsive Web Design ?

6.
3 concepts :
1.
Qu’est-ce que le
Responsive Web Design ?
2. Quels sont les outils
à notre disposition ?

7.
3 concepts :
1.
Qu’est-ce que le
Responsive Web Design ?
2. Quels sont les outils
à notre disposition ?
3. Deux approches ?
Laquelle choisir ?

8.
En 2001:

9.
En 2005:

10.
En 2010:

11.
Au jeu des prédictions...
En 2009...
Il était prévu que les ventes de
smartphones dépassent celles
d’ordinateurs en 2012
...
Cela s’est produit en 2010 !

12.
Que faire ?

13.
•
Développer un site
pour chaque plate-forme ?
•
Développer une application
native par plate-forme ?
•
Ne faire qu’un seul site avec
un design "xe ?
(et tant pis pour les autres)

14.
Sur le même temps...
Le tra"c Internet sur mobile
a explosé de + de 600 %.

15.
Responsive
Web
Design
?

16.
Site Responsive Web Design
=
Site capable d’a#cher
le même contenu dans deux
contextes di$érents

17.
Exemple : Amazon

18.
Exemple : Boston Globe

19.
Exemple : shun.kaiusaltd.com

20.
Comment
mettre en oeuvre
le Responsive
Web Design

21.
3 techniques
à connaitre :

22.
3 techniques
à connaitre :
1. Grille %uide

23.
3 techniques
à connaitre :
1. Grille %uide
2.
Images et médias %exibles

24.
3 techniques
à connaitre :
1. Grille %uide
2.
Images et médias %exibles
3. Media queries

25.
Un exemple :
www.ozmoz.be
(merci Thomas)

26.
1.
Grille %uide

27.
Grille
=
Système qui permet
d’organiser
de manière rationnelle
une mise en page

28.
Grille %uide
=
Grille proportionnelle

29.
Formule magique :
cible / contexte = résultat

30.
cible / contexte = résultat
960px / 1024 px = 0,9375
soit 93,75%

31.
2.
Images
et médias
%exibles

32.
Un exemple :
www.ozmoz.be
(merci encore Thomas)

33.
cela marche aussi pour les vidéos,...

34.
3.
Media
queries

35.
•
Introduit depuis CSS 3
•
Supporté par les bons
navigateurs
• Pour les autres (IE 6 à 8) :
respond.js
https://github.com/scottjehl/Respond

36.
Avec la grille %uide
et les images %exibles :
le design s’a#che
sur tous les supports

37.
Mais la mise en page
n’est pas adéquate

38.
media queries
=
permet d’appliquer
un style de manière
conditionnelle

39.
Récapitulatif des caractéristiques pour les medias queries
color support de la couleur (bits/pixel)
color-index périphérique utilisant une table de couleurs indexées
aspect-ratio ratio du périphérique de sortie (par exemple 16/9)
device-aspect-ratio ratio de la zone d'achage
device-height dimension en hauteur du périphérique
device-width dimension en largeur du périphérique
grid périphérique bitmap ou grille (ex : lcd)
height dimension en hauteur de la zone d'achage
monochrome périphérique monochrome ou niveaux de gris (bits/pixel)
orientation orientation du périphérique (portait ou landscape)
resolution résolution du périphérique (en dpi, dppx, ou dpcm)
scan type de balayage des téléviseurs (progressive ou interlace)
width dimension en largeur de la zone d'achage

40.
Proposition de poins de ruptures
320 pixels Appareil à petit écran comme les téléphones en mode portrait.
480 pixels Appareil à petit écran comme les téléphones en mode paysage.
600 pixels Petites tablettes comme le Kindle d'Amazon (600 * 800) et le Nook de
Barnes Nobles (600 * 1024) en mode portrait.
768 pixels Tablette de 10 pouces comme l'iPad en mode portrait.
1024 pixels Tablette de 10 pouces comme l'iPad en mode paysage, ainsi que certains
netbook, ordinateurs portable et ordinateurs de bureau.
1200 pixels Ecrans larges, principalement ceux des ordinateurs portables et de
bureau.

41.
Responsive
dégradation
ou
Mobile rst

42.
Responsive dégradation :
=
Mise en page classique.
On dégrade (enlève)
des contenus à basse
résolution.

43.
+
•
Partir de l’existant
(en théorie)
•
Même méthode
de travail

44.
-
•
Site plus lourd

45.
Mobile rst :
=
On ré%échit d’abord
au mobile.
On ajoute ensuite des
contenus pour enrichir.

46.
+
•
Oblige à faire des choix
de contenus
•
Allège le site

47.
-
•
On change
les méthodes de travail.
• Importance du couple
designer / intégrateur.

48.
Conclusion(s)

49.
Epoque imprévisible
-
Miser sur le RWD =
se prémunir des évolutions

50.
RWD
=
Complément des
applications mobiles
-
On y présente pas
les mêmes contenus

51.
Pour aller
plus loin