HTML5mtl - 2012-02-22 - Responsive Web Design
-
Upload
frederic-harper -
Category
Technology
-
view
2.211 -
download
1
description
Transcript of HTML5mtl - 2012-02-22 - Responsive Web Design
![Page 1: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/1.jpg)
Responsive Web Design :La vision du monde dépend
des lunettes que je porte
Frédéric HarperDevelopers Evangelist @ Microsoft CanadaHTML5mtl – 2012-02-22
@fharper | outofcomfortzone.net
![Page 2: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/2.jpg)
Comment nous voyions le Web…• Les navigateurs de nos ordinateurs
![Page 3: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/3.jpg)
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?
![Page 4: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/4.jpg)
L’effet non désiré
DÉM
O
![Page 5: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/5.jpg)
![Page 6: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/6.jpg)
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.
![Page 7: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/7.jpg)
Responsive Web Designs
DÉM
O
![Page 8: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/8.jpg)
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.
![Page 9: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/9.jpg)
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!
![Page 10: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/10.jpg)
Mise en page flexible
![Page 11: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/11.jpg)
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?
![Page 12: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/12.jpg)
L’algorithme des Pixels vers Ems
𝚫 𝒚𝚫 𝒙
≈ 𝐥𝐢𝐦𝒏→∞ (𝟏+𝟏
𝒏 )𝒏
×−𝒃±√𝒃𝟐−𝟒𝒂𝒄
𝟐𝒂± 𝒇 (𝒙 )=𝒂𝟎+∑
𝒏=𝟏
∞
(𝒂𝒏𝐜𝐨𝐬𝒏𝝅 𝒙𝑳
+𝒃𝒏𝐬𝐢𝐧𝒏𝝅 𝒙𝑳 )
![Page 13: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/13.jpg)
cible contexte résultat÷ ¿
![Page 14: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/14.jpg)
cible contexte résultat÷ ¿
h1 { font-size: 24px;}
24 / 16 = 1.5h1 { font-size: 1.5em;}
h1 a { font-size: 11px;}
11 / 24 = 0.458333333+ h1 a { font: 0.458333333+;}
32
Responsive Web Design Lire la suite >>
1
em
%
![Page 15: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/15.jpg)
Et la grille, elle?#page { margin: 36px auto; width: 960px;}.blog { margin: 0 auto 53px; width: 900px;}.blog .main { float: left; width: 566px;}.blog .other { float:right; width: 331px;}
#page { margin: 36px auto; width: 90%;}.blog { margin: 0 auto 53px; width: 93.75%;}.blog .main { float: left; width: 62.88+%;}.blog .other { float:right; width: 36.77+%;}
.blog { width: 900/960;}.blog .main { width: 566/900;}.blog .other { width: 331/900;}
cible contexte résultat÷ ¿
![Page 16: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/16.jpg)
PAUSE
![Page 17: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/17.jpg)
Images et médias flexibles
![Page 18: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/18.jpg)
Une solution simple
img { max-width: 100%;}
Fonctionne sur les images,comme sur les autres médias tel que <video>.
![Page 19: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/19.jpg)
Images et médias flexibles
DÉM
O
![Page 20: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/20.jpg)
Une autre possibilité
Filament Group – dépends des cookies et du JavaScript
![Page 21: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/21.jpg)
Media Queries
![Page 22: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/22.jpg)
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.
![Page 23: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/23.jpg)
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.
![Page 24: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/24.jpg)
Exemple simple@media screen and (max-width: 600px) { body { font-size: 80%; }}
![Page 25: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/25.jpg)
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)
![Page 26: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/26.jpg)
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”>
![Page 27: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/27.jpg)
Propriétés média supportées• min/max-width• min/max-height• device-width• device-height• orientation• aspect-ratio• device-aspect-ratio
• color• color-index• monochrome• resolution
![Page 28: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/28.jpg)
Little Pea Bakery
DÉM
O
![Page 29: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/29.jpg)
Qu’en est-il des appareils?• viewport meta tag• <meta name=“viewport”
content=“width=device-width”>• device-width vs. width• maximum-zoom
![Page 30: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/30.jpg)
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
![Page 31: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/31.jpg)
![Page 32: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/32.jpg)
![Page 33: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/33.jpg)
![Page 35: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/35.jpg)
![Page 36: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/36.jpg)
![Page 37: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/37.jpg)
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!
![Page 38: HTML5mtl - 2012-02-22 - Responsive Web Design](https://reader033.fdocuments.fr/reader033/viewer/2022052823/5555c980d8b42aaf158b497c/html5/thumbnails/38.jpg)
Questions?Frédéric Harper
Developer Evangelist @ [email protected]
@fharper
http://webnotwar.cahttp://oocz.net