1. RESPONSIVE WEBDESIGN
POUR DEVENIR #RWD MASTER
@jonathanpath // #rwdiesa

2. 1. MISE EN PAGE HTML/CSS
ESSENTIEL POUR ABORDER LE #RWD
@jonathanpath // #rwdiesa

3. 1.1 DISPLAY
La base
display: block;
<div> <p> <form> <header> <footer> <section> ...
Prend la largeur du conteneur
display: inline;
display: inline-block;
<span> <a> ...
Semblable à «inline», mais on peut attribuer une
Prend la largeur du contenant. hauteur et une largeur.
On ne peut peut pas attribuer de hauteur ni de largeur. Compatible avec IE8+
On peut simuler display:inline-block; sur IE6 et 7 avec
*display: inline;
*zoom: 1;
@jonathanpath // #rwdiesa

4. 1.1 DISPLAY
Mise en page avec display: inline-block;
.bloc .bloc .bloc
.bloc .bloc .bloc
.bloc {
display: inline-block;
/* <=IE7 Hack */
Note : entre chaque bloc, il y a un espace qui correspond à
*display: inline;
un caractère. Il y a plusieurs méthodes pour faire disparaître
*zoom: 1;
cet espace. (article creativjuiz / alsacreation)
width: 33%;
margin-bottom: 1em;
}
@jonathanpath // #rwdiesa

5. 1.1 DISPLAY
Centrer un bloc
width: 1140px;
margin: 0 auto;
auto display: block; auto
Mettre un margin auto à gauche et à droite
d’un bloc (display: block;) permet de le
centrer.
@jonathanpath // #rwdiesa

6. 1.2 FLOAT
Sortir du flux
display: block;
float: left; float: right;
Le conteneur ne prend pas en compte la hauteur
Place le bloc à gauche Place le bloc à droite
des blocs flottants qu’il contient
@jonathanpath // #rwdiesa

7. 1.2 FLOAT
Sortir du flux
display: block;
float: left; float: right;
Place le bloc à gauche Place le bloc à droite
clear: both;
Solution n°1
Mettre un élement «block» en dessous des
élements flottants à l’intérieur du conteneur.
@jonathanpath // #rwdiesa

8. 1.2 FLOAT .clearfix:after {
content: ".";
Sortir du flux display: block;
clear: both;
heigth: 0;
visibility: hidden;
}
.clearfix
float: left; float: right;
Place le bloc à gauche Place le bloc à droite
élément généré par .clearfix:after
Solution n°2
Mettre une class clearfix sur le contenant.
Meilleure solution parce que cela évite de rajouter
un élément HTML qui n’a pas de valeur
sémantique.
@jonathanpath // #rwdiesa

9. 1.2 FLOAT
Mise en page
float: left; display: block;
width: 300px; margin-left: 350px;
@jonathanpath // #rwdiesa

10. 1.3 MODELE DE BOITES
width + padding + border + margin
Margin
Border
Padding
.bloc
Width / Height
width
@jonathanpath // #rwdiesa

11. 1.3 MODELE DE BOITES
Se simplifier la vie avec CSS3
*{
Margin
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; Border
box-sizing: border-box;
} Padding
.bloc
Width / Height
Largeur du .bloc = width
width
@jonathanpath // #rwdiesa

12. 1.4 LA SUITE SUR
Learnlayout.com
@jonathanpath // #rwdiesa

13. 2. TAILLE D’ECRAN
VIEWPORT / DEVICE-WIDTH
@jonathanpath // #rwdiesa

14. 2.1 VIEWPORT
Taille de fenêtre virtuelle
Navigateur Viewport Taille réelle
Bureau Taille de la fenêtre Taille de la fenêtre
Mobile 980px 320px / 480px
@jonathanpath // #rwdiesa

15. 2.1 VIEWPORT
Paramètres
Paramètre Signification
Initial-scale Zoom par défaut
Maximum-scale Zoom maximum
User-scalable=no Interdit à l’utilisateur de zoomer
@jonathanpath // #rwdiesa

16. 2.1 VIEWPORT
Combo breaker
Que s’affiche-t-il sur un mobile si je mets ce code sur un site?
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1, user-scalable=no">
@jonathanpath // #rwdiesa

17. 2.1 VIEWPORT
Combo breaker
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1, user-scalable=no">
Je ne pourrais pas zoomer, et je pourrais
uniquement visualiser la largeur et la
hauteur du viewport.
@jonathanpath // #rwdiesa

18. 2.2 DEVICE-WIDTH
Largeur déclarée par le périphérique
• iPhone 3 et iPhone 4 ont le même device-width, malgré leur
densité de pixels différente
• Le device-width sur Safari est identique en portrait qu’en
paysage (!)
• Un device-width (en portrait) peut globalement varier de
240px à 640px selon les terminaux mobiles
En savoir plus : Lire l’excellent article de @goetter sur ce sujet
@jonathanpath // #rwdiesa

19. 2.3 VIEWPORT=DEVICE-WIDTH
nous permet de faire du #rwd
<meta name=“viewport“ content=“width=device-width“>
La fenêtre virtuelle est égale à la largeur de l’écran.
@jonathanpath // #rwdiesa

20. 3. MEDIA QUERIES
VIVE CSS3
@jonathanpath // #rwdiesa

21. 3.1 ATTRIBUT MEDIA
Quelles significations à votre avis?
Type Signification
screen
handheld
embossed
projection
tty
tv
print
all
@jonathanpath // #rwdiesa

22. 3.1 ATTRIBUT MEDIA
depuis CSS2
Type Signification
screen écrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv téléviseur
print Impression
all tout
@jonathanpath // #rwdiesa

23. 3.1 ATTRIBUT MEDIA
depuis CSS2
Malheureusement, handeld est ignoré
par la grande majorité des navigateurs mobiles
Il faut donc utiliser “screen“
comme pour les navigateurs bureaux
@jonathanpath // #rwdiesa

24. 3.2 CRITERES
peut être préfixé par min- et max- pour les valeurs numériques
Critère Signification
color support de la couleur (bits/pixel)
aspect-ratio ratio du périphérique de sortie (par exemple 16/9)
device-aspect-ratio densité de pixels : utile pour détecter “Retina“
device-height hauteur déclarée par le périphérique
device-width largeur déclarée par le périphérique
height hauteur du viewport
width largeur du viewport
@jonathanpath // #rwdiesa

25. 3.3 ORIENTATION
Paysage ou Portrait
@media (orientation: portrait) ou @media (orientation: landscape)
• permet de savoir si un périphérique est en vue portrait ou
paysage
• Certains navigateurs l’implémentent également en calculant
le ratio hauteur/largeur
• Petit détail : il y a une faille sur iPhone : si on active la
console d’erreurs, on ne peut plus détecter l’orientation
Navigateurs qui supportent le paramètre orientation sur caniuse.com
@jonathanpath // #rwdiesa

26. 3.4 EXEMPLES
Améliorations ou dégradation progressive ?
Mobile
first
Dégradation progressive Amélioration progressive
nav li { nav li {
display: inline; display: block;
} }
@media (max-width: 780px) { @media (min-width: 780px) {
nav li { nav li {
display: block; display: inline;
} }
} }
@jonathanpath // #rwdiesa

27. 3.5 COMPATIBILITE
<= IE8
• Respond.js : script javascript qui simule les medias queries
pour les anciennes version d’IE
• Une déclaration CSS uniquement pour <=IE8
• <!--[if lt IE 9]><link href=“IE.css“ ... ><![endif]-->
• .lt-ie9 avec Boilerplate
@jonathanpath // #rwdiesa

28. 4. DESIGN FLUIDE
POUR S’ADAPTER A TOUTES LES TAILLES
@jonathanpath // #rwdiesa

29. 4.1 PIXEL
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple : Thème Focus
@jonathanpath // #rwdiesa

30. 4.1 PIXEL
Avantages / Inconvénients
+ -
- beaucoup de points de rupture
- maitrise des changements - beaucoup d’espace sur les côtés dans certains cas
- difficulté de changer la taille des polices
@jonathanpath // #rwdiesa

31. 4.2 EM
Taille de typographie relative
1em = Taille de police par défaut du navigateur
em : Taille de police relative au parent
Exemple : Thème Focus
@jonathanpath // #rwdiesa

32. 4.2 EM
Si on veut agrandir la taille de la typographie sur mobile ?
px : On change la taille pour em : On change la taille
chaque déclaration une seule fois
@media (max-width: 480px) {
p{
font-size: 20px;
} @media (max-width: 480px) {
h1 { body {
font-size: 30px; font-size: 1.5em;
} }
h2 { }
font-size: 25px;
}
}
@jonathanpath // #rwdiesa

33. 4.2 EM
On mélange «em» et px ?
«Padding» sur un bouton ?
«Width» sur la largeur d’un site ?
@jonathanpath // #rwdiesa

34. 4.2 EM
On mélange «em» et px ?
«Padding» sur un bouton : NON
La taille d’une marge intérieure est relative à la typographie
«Width» sur la largeur d’un site : POSSIBLE
La largeur d’un site dépend de la taille de la fenêtre
@jonathanpath // #rwdiesa

35. 4.2 EM
On mélange «em» et px ?
Certains préfèrent tout définir en «em»
pour avoir une cohérence globale.
D’autres de garder la largeur des blocs en «px»
pour éviter de faire de nombreux calculs et d’avoir des valeurs telles que 34.4293837em
@jonathanpath // #rwdiesa

36. 4.2 %
Exploiter toute la largeur exploitable
2 colonnes qui font la même taille
float: left; float: right;
width: 48%; width: 48%;
Taille de la fenêtre
Exemple : CSSgrid
@jonathanpath // #rwdiesa

37. 4.2 %
Définir les points de rupture
D’après le critère 10.11 de accessiweb
faire en sorte que les colonnes aient maximum 80 caractères par ligne
@jonathanpath // #rwdiesa

38. 5. OPTIMISER
ET SURTOUT, PENSER MOBILE FIRST
@jonathanpath // #rwdiesa

39. 5.1 OPMISATIONS GENERALES
POUR SITES BUREAUX
• Javascript en bas de page
• CSS en haut de page
• Compression en 1 seul fichier CSS et javascript
• Utilisation de sprites CSS et/ou encoder en data URI
• Optimisation de la taille des images (shmushit, jpegmini,
imageoptim)
• Réduire la taille du DOM
• Favoriser CSS3 tant que possible (mais attention aux
dégradés et aux animations infinies)
Détail sur Developer Yahoo performances
@jonathanpath // #rwdiesa

40. 5.2 OPMISATIONS MOBILE
CHARGEMENT D’IMAGES PLUS PETITES
/* Grands écrans */ /* Petits écrans */
@media (min-width: 481px) { @media (max-width: 480px) {
.img { .img {
background-image: url(‘img-big.jpg’); background-image: url(‘img-small.jpg’);
} }
} }
/* Penser à faire le chargement des grandes images pour <=IE8 */
.lt-ie9 .img {
background-image: url(‘img-big.jpg’);
}
Voir l’article correspondant sur goetter.fr
@jonathanpath // #rwdiesa

41. 5.2 OPMISATIONS MOBILE
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
/* display: none; sur le contenant et non sur l’image */
@media (max-width: 480px) { .bloc <img>
.bloc {
display: none;
}
}
Voir l’article correspondant sur le blog de @theystolemynickname
@jonathanpath // #rwdiesa

42. 5.2 OPMISATIONS MOBILE
JAVASCRIPT
• Ne pas mettre les scripts js en bas de page pour iOS :
Safari mobile attend de les charger pour afficher la page
(marche par contre sur Android)
• Solution : Chargement asynchrone de JS : lazyloadlight
• Se passer de jQuery & jQuery mobile si possible
@jonathanpath // #rwdiesa

43. 5.2 OPMISATIONS MOBILE
MOBILE FIRST
Penser premièrement à la version mobile permet d’avoir une
version minimaliste avec peu d’information et de code à
charger. Il n’y a pas meilleure optimisation.
@jonathanpath // #rwdiesa

44. 6. ADAPTIONS ECRANS TOUCH
TOUCH PAS A TOUT
@jonathanpath // #rwdiesa

45. 6.1 PAS D’EFFET DE SURVOL
QUE DES CLICS
• A chaque fois que vous pensez à un effet de survol,
réfléchissez à l’alternative écran «touch».
• Important de désactive les effets de survol sur les écrans
«touch» pour éviter d’avoir l’effet qui s’active au clic
@jonathanpath // #rwdiesa

46. 6.2 FIXER
AVEC PRECAUTION
• Si vous avez une menu fixe sur version bureau, désactiver
le sur mobile, ou sinon, faites un hack pour que cela
fonctionne
• Attention à la petite taille d’écran des mobiles
@jonathanpath // #rwdiesa