Il n'y a ni Web mobile, ni de Web pour les PC et pas plus de Web spécifiques aux tablettes. Nous voyons le même Web, mais de différentes façons. Alors, comment fait-on? En se débarrassant de nos approches à largeur fixe et appareil spécifique, tout en utilisant la technique du design Web adaptatif. Cette présentation se veut une explication de cette façon de développer des sites et applications Web. Cette approche à 3 volets permettra à vos projets actuels d'être capable de s'adapter aux appareils dans le futur.
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
HTML5mtl - 2012-02-22 - Responsive Web Design
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
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?
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.
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!
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?
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.
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”>
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
31.
32.
33.
34.
35.
36.
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!