Le document présente le concept de responsive web design, soulignant l'importance d'adapter les sites web aux divers appareils tels que les ordinateurs, mobiles et tablettes. Il décrit les éléments fondamentaux du responsive design, y compris les mises en page flexibles, les images adaptatives et les media queries. Enfin, il évoque le défi de créer des expériences utilisateur optimales et propose des solutions techniques pour y parvenir.

1. Responsive Web Design :
La vision du monde dépend
des lunettes que je porte
Frédéric Harper
Developers Evangelist @ Microsoft Canada
HTML5mtl – 2012-02-22
@fharper | outofcomfortzone.net

2. Comment nous voyions le Web…
• Les navigateurs de nos ordinateurs

3. Comment nous voyons le Web aujourd’hui…
• Les navigateurs de nos ordinateurs
• Les navigateurs mobiles
• Les tablettes
• Les télévisions
• Les consoles de jeux
• Et bien plus…
• Alors, quel est le problème?

4. L’effet non désiré
DÉMO

6. Responsive Web Design
• Pensez aux besoins de l’utilisateur au lieu des
nôtres.
• Adapter aux différentes capacités des appareils au
lieu de leurs configurations.
• Aide nos sites à être possiblement prêts pour le
futur.

7. Responsive Web Designs
DÉMO

8. Les éléments du Responsive Web Design
• Une mise en page flexible, basée sur une grille,
• Des images et des médias flexibles, et
• Media queries.

9. Les éléments du Responsive Web Design
• Une mise en page flexible, basée sur une grille,
• Des images et des médias flexibles, et
• Media queries.
• … et quelque chose d’autre!

10. Mise en page flexible

11. OK, alors quel est le problème?
• Les sites non responsive ne sont pas plaisants
• Les sites à largeur fixes ne donnent pas la
meilleure expérience.
• Les outils de design ont tendance à utiliser les
pixels.
• De fois, un pixel n’égale pas un pixel.
• Alors, comment transforme-t-on un pixel vers
son homologue em?

12. L’algorithme des Pixels vers Ems

14. Responsive Web Design Lire la suite >>
h1 { h1 {
em font-size: 24px; 24 / 16 = 1.5 font-size: 1.5em;
} }
h1 a { 11 / 24 = 0.458333333+ h1 a {
% font-size: 11px; font: 0.458333333+;
} }
1 2 3

15. Et la grille, elle?

16. PAUSE

17. Images et médias flexibles

18. Une solution simple
Fonctionne sur les images,
comme sur les autres médias tel que <video>.

19. Images et médias flexibles
DÉMO

20. Une autre possibilité
Filament Group – dépends des cookies et du JavaScript

21. Media Queries

22. Il n’y a pas si longtemps…
• On pouvait définir le type de média: screen & print
• Mais pas facilement répondre à l’affichage de
l’utilisateur.
• Beaucoup de travail pour y arriver.
• On ne passait pas beaucoup de temps pour penser
aux appareils mobiles.

23. CSS3 Media Queries
• Les CSS3 Media Queries permettent aux
développeurs Web de conditionner la prise en
compte d'une feuille de style à des contraintes
concernant notamment la résolution ou la
capacité de restitution des couleurs.

24. Exemple simple
@media screen and (max-width: 600px) {
body {
font-size: 80%;
}
}

25. D’autres Media Queries
@media screen and (min-width:320px) and (max-
width:480px)
@media not print and (max-width:600px)
@media screen (x) and (y), print (a) and (b)

26. Peuvent être déclaré…
Dans la feuille de style
En l’important
@import url(mq.css) only screen and (max-
width:600px)
Avec un élément link
<link rel=“stylesheet” media=“only screen and
(max-width:800px)” href=“mq.css”>

27. Propriétés média supportées
• min/max-width • color
• min/max-height • color-index
• device-width • monochrome
• device-height • resolution
• orientation
• aspect-ratio
• device-aspect-ratio

28. Little Pea Bakery
DÉMO

29. Qu’en est-il des appareils?
• viewport meta tag
• <meta name=“viewport”
content=“width=device-width”>
• device-width vs. width
• maximum-zoom

30. Les navigateurs qui ne le supportent pas?
• css3-mediaqueries-js par Wouter van der Graaf
• Seulement inclure le script dans vos pages
• Analyse le CSS et applique le style pour les tests
de médias positifs

37. Hey! Quel était le 4e élément?
• Design.
• Est-ce qu’on débute avec “mobile-first”?
• Est-ce bon pour tous les sites?
• Est-ce que nous avons besoin ou veut-on avoir une
composante visuelle pour chaque appareil?
• Mobile n’est pas seulement “marcher et regarder
quelque chose”.
• Nous en sommes au début… c’est ce qui rend le tout
fort intéressant!

38. Questions?
Frédéric Harper
Developer Evangelist @ Microsoft
fredh@microsoft.com
@fharper
http://webnotwar.ca
http://oocz.net