Présentation des bases du Responsive par Ruben Pieraerts - http://www.alinoa.be

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

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

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

5. 3 concepts :

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

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

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

10. En 2001:

11. En 2005:

12. En 2010:

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

14. Que faire ?

15. •
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)

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

17. Responsive
Web
Design
?

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

21. Exemple : Amazon

22. Exemple : Boston Globe

23. Exemple : shun.kaiusaltd.com

24. Comment
mettre en oeuvre
le Responsive
Web Design

25. 3 techniques
à connaitre :

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

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

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

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

30. 1.
Grille %uide

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

34. Grille %uide
=
Grille proportionnelle

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

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

41. 2.
Images
et médias
%exibles

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

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

44. 3.
Media
queries

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

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

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

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

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

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

52. Responsive
dégradation
ou
Mobile rst

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

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

55. -
•
Site plus lourd

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

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

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

59. Conclusion(s)

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

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

62. Pour aller
plus loin