View
2.211
Download
1
Category
Preview:
DESCRIPTION
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.
Citation preview
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
Comment nous voyions le Web…• Les navigateurs de nos ordinateurs
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?
L’effet non désiré
DÉM
O
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.
Responsive Web Designs
DÉM
O
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.
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!
Mise en page flexible
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?
L’algorithme des Pixels vers Ems
𝚫 𝒚𝚫 𝒙
≈ 𝐥𝐢𝐦𝒏→∞ (𝟏+𝟏
𝒏 )𝒏
×−𝒃±√𝒃𝟐−𝟒𝒂𝒄
𝟐𝒂± 𝒇 (𝒙 )=𝒂𝟎+∑
𝒏=𝟏
∞
(𝒂𝒏𝐜𝐨𝐬𝒏𝝅 𝒙𝑳
+𝒃𝒏𝐬𝐢𝐧𝒏𝝅 𝒙𝑳 )
cible contexte résultat÷ ¿
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
%
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÷ ¿
PAUSE
Images et médias flexibles
Une solution simple
img { max-width: 100%;}
Fonctionne sur les images,comme sur les autres médias tel que <video>.
Images et médias flexibles
DÉM
O
Une autre possibilité
Filament Group – dépends des cookies et du JavaScript
Media Queries
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.
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.
Exemple simple@media screen and (max-width: 600px) { body { font-size: 80%; }}
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)
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”>
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
Little Pea Bakery
DÉM
O
Qu’en est-il des appareils?• viewport meta tag• <meta name=“viewport”
content=“width=device-width”>• device-width vs. width• maximum-zoom
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
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!
Questions?Frédéric Harper
Developer Evangelist @ Microsoftfredh@microsoft.com
@fharper
http://webnotwar.cahttp://oocz.net
Recommended