Pearson Responsive Web Design Manuel utilisateur

Table des matières
À propos de l’auteur ...............................................................................................................
III
À propos des relecteurs . ........................................................................................................
V
Préface ........................................................................................................................................
1
1. Introduction à HTML5, CSS3 et au responsive web design ................................
5
Les smartphones sont importants (au contraire d’IE) ................................................
6
Un design réactif est-il toujours un bon choix ? ...........................................................
7
Définir le responsive web design . ...................................................................................
8
Pourquoi s’arrêter au responsive design ? ......................................................................
8
Exemples de responsive web design ...............................................................................
9
Se procurer les outils pour tester les zones de visualisation ...............................
9
Sources d’inspiration en ligne .................................................................................
16
HTML5 est formidable .....................................................................................................
17
Gagner du temps et réduire le code avec HTML5 ...............................................
17
Nouvelles balises sémantiques en HTML5 ...........................................................
18
CSS3 et designs réactifs . ..................................................................................................
19
CSS3 ne casse rien ! . .................................................................................................
19
CSS3 peut-il résoudre tous les problèmes de design ? .........................................
20
Construire un bouton sans image . ..................................................................................
23
Quels sont les autres avantages de CSS3 ? . ...........................................................
23
HTML5 et CSS3 sont-ils opérationnels aujourd’hui ? ................................................
25
Les designs réactifs ne sont pas magiques ....................................................................
26
Expliquer à nos clients que les sites n’ont pas le même aspect
dans tous les navigateurs ..................................................................................................
27
Synthèse . .............................................................................................................................
28
2. Media queries : gérer différentes zones de visualisation ......................................
29
Les media queries sont utilisables aujourd’hui .............................................................
29
Un design réactif a besoin de media queries .................................................................
30
Syntaxe des media queries . ......................................................................................
30
© 2013 Pearson France – Responsive Web Design – Ben Frain
2511-ResponsiveWebDesign.indb 7
15/01/13 11:42
VIII
Responsive Web Design avec HTML5 et CSS3

Que testent les media queries ? .......................................................................................
33
Utiliser les media queries pour modifier un design . ............................................
34
Le meilleur moyen de charger des media queries ................................................
34
Notre premier design réactif ............................................................................................
34
Pas de panique, notre design est à largeur fixe . ....................................................
35
Designs réactifs – limiter l’impact des images . ....................................................
39
Le contenu est tronqué dans les plus petites zones de visualisation . ................
40
Empêcher les navigateurs mobiles d’autoredimensionner les pages .........................
42
Améliorer le design pour différentes largeurs de zones de visualisation . ...............
45
Priorité au contenu avec un design réactif . ...................................................................
46
Les media queries ne sont qu’une partie de la solution ...............................................
50
Une mise en page fluide est nécessaire . .................................................................
51
Synthèse . .............................................................................................................................
51
3. Adopter les mises en page fluides ................................................................................
53
Les mises en page fixes ne sont pas à l’épreuve du temps ..........................................
54
Une mise en page proportionnelle est essentielle pour un design réactif . ...............
54
Transformer un design fixe en design proportionnel ...................................................
55
Une formule à retenir . ...............................................................................................
55
Définir un contexte pour les éléments proportionnels .........................................
57
Il est essentiel de se rappeler le contexte ................................................................
63
Utiliser des em et non des pixels pour la typo ..............................................................
65
Images fluides . ..................................................................................................................
67
Redimensionner les images en fonction de la zone de visualisation .................
68
Des règles spécifiques pour des images spécifiques . ...........................................
70
Contrôler les images fluides .....................................................................................
71
L’incroyable propriété versatile max-width . ..........................................................
72
Servir des images différentes pour différentes tailles d’écran ...................................
73
Mise en place de la solution Adaptive Images ......................................................
74
Stocker les images d’arrière-plan ............................................................................
76
Rencontre entre grilles fluides et media queries . .........................................................
78
Systèmes de grilles CSS ...................................................................................................
78
Construire rapidement un site avec un système de grille ....................................
79
Synthèse . .............................................................................................................................
84
© 2013 Pearson France – Responsive Web Design – Ben Frain
2511-ResponsiveWebDesign.indb 8
15/01/13 11:42
Table des matières
IX
4. HTML5 pour les designs réactifs ................................................................................
85
Les composants HTML5 utilisables dès maintenant ..................................................
86
La plupart des sites peuvent être écrits en HTML5 .............................................
86
Polyfills, shims et Modernizr ...................................................................................
86
Écrire des pages en HTML5 . ..........................................................................................
87
HTML5 est économique ...........................................................................................
88
Une approche intelligente du balisage HTML5 ....................................................
89
Vive la puissante balise <a> .....................................................................................
90
Fonctionnalités HTML obsolètes ............................................................................
90
Nouveaux éléments sémantiques de HTML5 ...............................................................
91
L’élément <section> ...................................................................................................
91
L’élément <nav> .........................................................................................................
92
L’élément <article> . ...................................................................................................
92
L’élément <aside> . .....................................................................................................
92
L’élément <hgroup> ...................................................................................................
93
L’élément <header> . ..................................................................................................
94
L’élément <footer> .....................................................................................................
95
L’élément <address> ..................................................................................................
95
Usage pratique des éléments de structure HTML5 . ....................................................
95

Que devient le contenu principal du site ? ............................................................. 101
Éléments HTML5 pour les textes ................................................................................... 101
L’élément <b> . ............................................................................................................ 102
L’élément <em> .......................................................................................................... 102
L’élément <i> .............................................................................................................. 102
Appliquer des balises sémantiques aux textes . ..................................................... 102
Rendre un site accessible avec WAI-ARIA . ................................................................. 104
Points de contrôles ARIA ......................................................................................... 104
Incorporer des médias en HTML5 ................................................................................. 107
Ajouter vidéo et audio à la manière HTML5 . .............................................................. 107
Fournir des fichiers source alternatifs .................................................................... 109
Solutions de repli pour les anciens navigateurs . ................................................... 110
Les balises audio et video fonctionnent presque à l’identique . .......................... 110
Vidéos réactives ................................................................................................................. 110
© 2013 Pearson France – Responsive Web Design – Ben Frain
2511-ResponsiveWebDesign.indb 9
15/01/13 11:42
X
Responsive Web Design avec HTML5 et CSS3

Applications web hors connexion ................................................................................... 113
Les applications web hors connexion en quelques mots . .................................... 114
Faire fonctionner les pages web hors connexion .................................................. 114
Comprendre le fichier manifest ................................................................................ 115
Chargement automatique des pages dans le cache ............................................... 115
Commentaire à propos de cette version ................................................................. 116
Consulter le site hors connexion .............................................................................. 116
Dépanner les applications web hors connexion .................................................... 117
Synthèse . ............................................................................................................................. 117
5. CSS3 : sélecteurs, typographie et modes de couleurs ............................................ 119
Ce que CSS3 offre au développeur frontal .................................................................... 120
Gestion de CSS3 avec les versions 6 à 8 d’Internet Explorer ............................ 120
Utiliser CSS3 pour concevoir et développer des pages . ...................................... 120
Anatomie d’une règle CSS ............................................................................................... 121
Les préfixes des navigateurs et leur mode d’emploi . ................................................... 121
Astuces CSS3 utiles et rapides ........................................................................................ 123
Plusieurs colonnes avec CSS3 .................................................................................. 123
Retours à la ligne ........................................................................................................ 126
Nouveaux sélecteurs CSS3 mode d’emploi ................................................................... 128
Sélecteurs d’attributs CSS3 . ..................................................................................... 128
Sélecteurs d’attributs avec correspondance de chaîne ......................................... 128
Exemple pratique et concret ..................................................................................... 129
Les pseudo-classes de structure CSS3 ........................................................................... 130
Le sélecteur :last-child . ........................................................................................... 131
Les sélecteurs nth-child ........................................................................................... 134
Comprendre les règles nth ....................................................................................... 135
Le sélecteur de négation (:not) ................................................................................ 137
Modifications apportées aux pseudo-éléments ............................................................. 138
:first-line est-il pratique pour un design réactif ? . ................................................ 138
Typographie web personnalisée ...................................................................................... 140
La règle @font-face ................................................................................................... 140
Implémenter des polices web avec @font-face ..................................................... 141
© 2013 Pearson France – Responsive Web Design – Ben Frain
2511-ResponsiveWebDesign.indb 10
15/01/13 11:42

Table des matières
XI
SOS, mes titres @font-face sont flous ............................................................................ 144
Typo personnalisée @font-face et responsive design . ......................................... 146
Nouveaux formats de couleurs et transparence alpha ................................................. 147
Couleurs RVB ............................................................................................................ 147
Couleurs HSL ............................................................................................................ 148
Valeurs de repli pour les couleurs avec IE6, IE7 et IE8 . ................................... 149
Canal alpha . ............................................................................................................... 149
Synthèse . ............................................................................................................................. 151
6. Superbes effets esthétiques avec CSS3 ....................................................................... 153
Textes ombrés avec CSS3 ................................................................................................. 154
Couleurs autorisées : HEX, HSL ou RVB ............................................................. 154
Pixels, em ou rem ...................................................................................................... 155
Limiter la portée de text shadow . ................................................................................... 156
Ombres à gauche et en haut ..................................................................................... 157
Créer un effet relief avec text-shadow . ......................................................................... 158
Plusieurs ombres pour un texte . ..................................................................................... 158
Éléments ombrés ............................................................................................................... 159
Ombre interne ............................................................................................................ 160
Plusieurs ombres . ...................................................................................................... 161
Dégradés d’arrière-plan .................................................................................................... 162
Dégradés linéaires d’arrière-plan ........................................................................... 162
Dégradé radial d’arrière-plan .................................................................................. 165
Répéter un dégradé ........................................................................................................... 169
Motifs de dégradés d’arrière-plan .................................................................................. 171
Réflexions sur le couple design réactif et CSS3 . .......................................................... 173
Fusionner les propriétés CSS3 ......................................................................................... 174
Plusieurs images d’arrière-plan ....................................................................................... 178
Propriété background size ........................................................................................ 180
Propriété background position ............................................................................... 181
Propriété background raccourcie . ......................................................................... 181
Plus de fonctionnalités CSS3 ........................................................................................... 181
Les icônes ajustables sont parfaites pour un design réactif ........................................ 181
Synthèse . ............................................................................................................................. 182
© 2013 Pearson France – Responsive Web Design – Ben Frain
2511-ResponsiveWebDesign.indb 11
15/01/13 11:42
XII
Responsive Web Design avec HTML5 et CSS3

7. Transitions, transformations et animations avec CSS3 ........................................ 185
Transitions CSS3 mode d’emploi .................................................................................... 186
Les propriétés d’une transition . ............................................................................... 187
Transitions amusantes pour un site réactif . ........................................................... 190
Transformations 2D . ........................................................................................................ 190
Que pouvons-nous transformer ? ............................................................................. 191
Aborder les transformations 3D ...................................................................................... 195
Disséquer l’effet 3D .................................................................................................. 198
Les transformations 3D ne sont pas encore prêtes .............................................. 201
Animation en CSS3 ........................................................................................................... 201
Fusionner transformations et animations CSS3 ................................................... 205
Synthèse . ............................................................................................................................. 207
8. À la conquête des formulaires avec HTML5 et CSS3 ........................................... 209
Les formulaires HTML5 .................................................................................................. 210
Comprendre les composants d’un formulaire HTML5 ...................................... 212
input type en HTML5 ...................................................................................................... 216
email ............................................................................................................................ 216
number ........................................................................................................................ 217
url ................................................................................................................................. 218
tel . ................................................................................................................................ 219
search .......................................................................................................................... 220
pattern ......................................................................................................................... 221
color . ........................................................................................................................... 222
Saisie de date et d’heure .................................................................................................. 222
date ............................................................................................................................... 222
month . ......................................................................................................................... 223
week ............................................................................................................................. 224
time .............................................................................................................................. 224
datetime et datetime-local ....................................................................................... 224
range . .......................................................................................................................... 226
Gérer les navigateurs incompatibles .............................................................................. 227
Styler un formulaire HTML5 avec CSS3 ..................................................................... 229
Les sélecteurs dédiés de pseudo-classes CSS3 ..................................................... 233
Synthèse . ............................................................................................................................. 235
© 2013 Pearson France – Responsive Web Design – Ben Frain
2511-ResponsiveWebDesign.indb 12
15/01/13 11:42

Table des matières
XIII
9. Résoudre les défis liés à la compatibilité des sites réactifs
avec tous les navigateurs ................................................................................................ 237
Amélioration progressive vs. dégradation élégante ..................................................... 242
La réalité ..................................................................................................................... 243
Doit-on traiter les anciennes versions d’Internet Explorer ? ...................................... 243
Statistiques (encore) .................................................................................................. 244
Choix personnels ........................................................................................................ 244
Modernizr est le couteau suisse du développeur web .................................................. 245
Régler les problèmes de style avec Modernizr ..................................................... 247
Gérer les éléments HTML5 pour les anciens IE ................................................. 250
Ajouter la gestion des attributs min/max d’une media query
à Internet Explorer 6, 7 et 8 .................................................................................... 251
Chargement conditionnel avec Modernizr ............................................................. 253
Transformer les liens de navigation en menu déroulant (conditionnellement) ........ 255
Les écrans à haute résolution (le futur) .......................................................................... 258
Synthèse . ............................................................................................................................. 261
Index. ........................................................................................................................................... 263
© 2013 Pearson France – Responsive Web Design – Ben Frain
2511-ResponsiveWebDesign.indb 13
15/01/13 11:42
">