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

http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/

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