Responsable pédagogique dans un centre de formation et formateur sur les technologies Web et les Arts graphiques pendant plus de quinze ans, Christophe Aubry est aujourd hui dirigeant de la société netplume spécialisée dans la rédaction pédagogique et la création de sites internet. Auteur de nombreux livres aux Editions ENI notamment sur Dreamweaver, WordPress, Drupal, HTML et CSS, il reste au fait des nouveautés concernant la conception des sites Web, en effectuant une veille technologique régulière et en intervenant dans de nombreux forums. Pour plus d informations : 26,50 sur www.editions-eni.fr : b Exemples utilisés dans le livre b Webographie Christophe AUBRY ISBN : 978-2-7460-8933-4 L objectif du Responsive Web Design est de créer des sites Web dont la mise en page s adapte automatiquement pour un affichage optimal quel que soit le type d écran sur lequel il est affiché : écran d ordinateur, de tablette ou de smartphone. Dans ce livre, nous allons commencer par un rappel sur les méthodes de mise en page "classiques" et leur limitation avant d introduire la technique de mise en page basée sur l utilisation des tableaux et des CSS3. Nous apprendrons ensuite à utiliser les grilles de mise en page, les grilles fixes et fluides. Le Responsive Web Design est essentiellement basé sur les requêtes de média CSS3, les Media Queries : nous apprendrons à maîtriser cette technique à l aide de nombreux exemples. Nous verrons ensuite les différents aspects de la mise en page responsive : les grilles, les images et la typographie. Pour nous aider à travailler plus efficacement, nous apprendrons à utiliser les bases de certains frameworks CSS qui permettent d utiliser foute une série de composants HTML5/ CSS3 pour concevoir efficacement des sites responsive. Nous verrons aussi l utilité des librairies JavaScript pour gérer au mieux les problèmes de compatibilité avec les navigateurs. Enfin nous terminerons en vous présentant les futures techtéléchargement niques avancées de mise en page qui sont en cours d étude www.editions-eni.fr.fr actuellement par le W3C. Web Design Responsive Web Design HTML5 et CSS3 pour des sites Responsive HTML5 et CSS3 pour des sites HTML5 et CSS3 pour des sites Responsive Web Design Christophe AUBRY
Table...... des... matières................................................................. 1 Chapitre 1 : Introduction A. Le design Web aujourd'hui.............................................................. 11 B. Le Responsive Web Design.............................................................. 11 C. Les approches dans la conception....................................................... 12 D. Le lâcher-prise.......................................................................... 12 E. Les objectifs du livre.................................................................... 13 F. Les outils de l intégrateur Web.......................................................... 13 1. Les objectifs......................................................................... 13 2. Mozilla Firefox....................................................................... 13 3. Google Chrome..................................................................... 14 4. Apple Safari......................................................................... 15 5. Microsoft Internet Explorer........................................................... 16 G. Télécharger les exemples................................................................ 17 Editions ENI - All rights reserved Chapitre 2 : Des solutions pour la compatibilité A. La disparité des navigateurs............................................................. 21 B. Pour une meilleure compatibilité........................................................ 21 C. Le rendu initial des navigateurs.......................................................... 22 1. La problématique.................................................................... 22 2. Le reset universel.................................................................... 22 3. Le reset d'eric Meyer................................................................. 22 4. Le reset d'html5 Doctor............................................................. 22 D. Normalize.css........................................................................... 23 1. Le projet............................................................................ 23 2. Télécharger Normalize.css........................................................... 23 3. Installer Normalize.css............................................................... 25 E. L'HTML5 et html5shiv.js................................................................. 25 1. L'objectif............................................................................ 25 2. Le fichier d'exemple................................................................. 25 3. La librairie html5shiv.js............................................................... 28 F. Les requêtes de média et respond.js..................................................... 29 1. L'objectif............................................................................ 29 2. Le fichier d'exemple................................................................. 29 3. La librairie respond.js................................................................ 31 G. Les solutions de rechange et Modernizr.js................................................ 33 1. L'objectif............................................................................ 33 2. Télécharger Modernizr............................................................... 33 3. Créer une page d'exemple........................................................... 35 4. Installer et lier le script Modernizr.................................................... 36 5. La mise en action de Modernizr...................................................... 36
HTML5 et CSS3 pour des sites Responsive Web Design 2......................................................................... 6. Utiliser les classes de Modernizr...................................................... 37 7. Utiliser Modernizr avec du JavaScript................................................. 39 H. Les règles @supports.................................................................... 41 1. L'objectif............................................................................ 41 2. Utiliser les règles @supports......................................................... 42 3. Les opérateurs....................................................................... 44 Chapitre 3 : La mise en page classique A. Les designers et les intégrateurs......................................................... 47 B. Le modèle des boîtes.................................................................... 47 C. Les marges des éléments................................................................ 48 D. L'affichage des éléments................................................................ 48 E. L'affichage dans le flux courant.......................................................... 49 F. L'affichage en position absolue.......................................................... 50 G. L'affichage en position fixée............................................................. 51 H. L'affichage en position relative.......................................................... 53 I. Utiliser l'affichage en position relative et absolue......................................... 53 J. L'affichage des boîtes flottantes......................................................... 55 1. Le positionnement flottant.......................................................... 55 2. Placer des boîtes côte à côte......................................................... 57 3. Interdire le flottement............................................................... 58 4. Un exemple avec quatre boîtes...................................................... 59 5. Une mise en page simpliste.......................................................... 60 6. Conclusion sur la mise en page en élément flottant................................... 68 Chapitre 4 : La mise en page à l'aide des tableaux A. L'objectif............................................................................... 71 B. La propriété display..................................................................... 71 C. Une mise en page simple avec un tableau............................................... 73 D. La largeur d'affichage du tableau........................................................ 74 E. Les éléments anonymes................................................................. 74 F. D'autres éléments pour les tableaux..................................................... 75 1. Les paragraphes en cellule........................................................... 75 2. Les listes en tableau................................................................. 76 G. L'affichage des lignes................................................................... 77 H. Définir la largeur des cellules............................................................ 78 1. Les largeurs fixes.................................................................... 78 2. Les largeurs en pourcentage......................................................... 79 I. Une mise en page avec un tableau plus structuré........................................80
Table...... des... matières................................................................. 3 J. Les autres propriétés d'affichage........................................................ 82 1. La propriété table-layout............................................................. 82 2. La propriété border-collapse......................................................... 83 3. La propriété border-spacing......................................................... 86 4. La propriété empty-cells............................................................. 87 5. La propriété caption-side............................................................ 89 K. L'alignement vertical.................................................................... 91 L. Conclusion............................................................................. 92 Editions ENI - All rights reserved Chapitre 5 : Les grilles de mise en page A. L'objectif............................................................................... 95 B. La structure des grilles pour le Web...................................................... 96 C. Les grilles fixes.......................................................................... 97 D. La grille fixe 960gs...................................................................... 98 1. La grille............................................................................. 98 2. Les fichiers CSS...................................................................... 99 3. La page d'exemple.................................................................100 4. Les liaisons aux feuilles de style.....................................................100 5. Les styles personnels...............................................................101 6. Le conteneur de la mise en page....................................................101 7. Les blocs sur 12 colonnes...........................................................102 8. Les blocs placés sur des colonnes dans la grille......................................102 9. Interdire les blocs flottants adjacents................................................104 10. Les blocs placés avec un décalage...................................................105 11. Les blocs centrés...................................................................106 12. Le code complet de la page.........................................................108 E. La grille fixe notjustagrid...............................................................109 1. Le framework.......................................................................109 2. La grille............................................................................110 3. La page d'exemple.................................................................111 4. Les fichiers CSS.....................................................................111 5. Les liaisons aux feuilles de style.....................................................112 6. Les styles personnels...............................................................112 7. Le conteneur de la mise en page....................................................113 8. Le système des classes..............................................................113 9. Un bloc sur la largeur de la grille....................................................114 10. Trois blocs sur un tiers de la grille...................................................115 11. Deux blocs sur 3/5e et 2/5e de la grille..............................................116 12. Un seul bloc sur les 2/3 de la grille...................................................116 13. Le code complet de la page.........................................................117
HTML5 et CSS3 pour des sites Responsive Web Design 4......................................................................... F. La grille fluide Gridiculous..............................................................118 1. Les grilles fluides...................................................................118 2. La grille Gridiculous.................................................................118 3. La page d'exemple.................................................................119 4. Télécharger la grille.................................................................119 5. Installer la grille.....................................................................120 6. Des styles personnels...............................................................120 7. Le conteneur.......................................................................120 8. Les lignes...........................................................................121 9. Trois blocs de même largeur........................................................122 10. Deux blocs de largeur différente....................................................124 11. Un bloc décalé......................................................................126 12. Affichage de la grille fluide..........................................................127 Chapitre 6 : Les Media Queries A. L'objectif..............................................................................131 B. Les origines............................................................................131 C. Utiliser les requêtes de média..........................................................131 D. La syntaxe des requêtes de média......................................................132 E. Les fonctionnalités à tester.............................................................133 F. Où placer les requêtes de média........................................................134 G. La taille des écrans des mobiles.........................................................135 H. La notion de viewport..................................................................137 I. Un exemple très simple................................................................141 1. La maquette........................................................................141 2. Le code HTML et CSS...............................................................142 J. Une grille responsive...................................................................148 1. La grille............................................................................148 2. Télécharger et installer la grille......................................................149 3. Créer une page simple sur 12 colonnes..............................................149 4. Les liaisons aux styles et aux scripts.................................................150 5. La structure de la mise en page.....................................................151 6. Les règles CSS......................................................................152 K. Exemples de sites avec des requêtes de média..........................................154
Table...... des... matières................................................................. 5 Editions ENI - All rights reserved Chapitre 7 : La mise en page responsive A. Le design responsive...................................................................159 B. Les grilles responsives..................................................................159 C. La grille responsive Simple Grid........................................................160 1. Utiliser Simple Grid.................................................................160 2. Télécharger et installer Simple Grid.................................................160 3. Les lignes..........................................................................161 4. La maquette........................................................................162 5. La première ligne...................................................................163 6. La deuxième ligne..................................................................164 7. La troisième ligne...................................................................165 8. Utiliser la grille fluide et responsive..................................................165 9. Le code complet....................................................................168 D. La grille responsive Columnal..........................................................169 1. Utiliser Columnal...................................................................169 2. Télécharger et installer Columnal...................................................170 3. La maquette........................................................................171 4. Le conteneur et les lignes...........................................................171 5. La première ligne...................................................................172 6. La deuxième ligne..................................................................175 7. La troisième ligne et le décalage....................................................175 8. La quatrième ligne et les blocs imbriqués............................................176 9. Utiliser la grille fluide et responsive..................................................178 10. Le code complet de la mise en page.................................................181 11. Les images responsives.............................................................182 12. Le code complet de la mise en page avec l'image responsive.........................185 E. L'utilisation des images................................................................185 F. Les images fluides......................................................................186 1. L'objectif...........................................................................186 2. La mise en page fixe................................................................186 3. La mise en page fluide..............................................................189 4. La largeur fluide des autres éléments................................................190 5. Les largeurs des images fluides......................................................191 6. Afficher et redimensionner la page..................................................192 7. Le code complet de la page.........................................................194 G. Le script Response.js...................................................................196 1. Utiliser le JavaScript................................................................196 2. Télécharger les JavaScript...........................................................196 3. Les liaisons aux JavaScript..........................................................197 4. Préparer les images.................................................................198 5. Le code de la page..................................................................198
HTML5 et CSS3 pour des sites Responsive Web Design 6......................................................................... 6. Le fonctionnement du script........................................................199 7. Optimiser les légendes..............................................................199 8. Le code complet de la page.........................................................201 H. Le script picturefill.js...................................................................202 1. Utiliser le JavaScript................................................................202 2. Télécharger le JavaScript............................................................202 3. Les liaisons aux JavaScript..........................................................202 4. Préparer les images.................................................................203 5. Le code de la page..................................................................203 6. L'affichage de l'image responsive...................................................204 7. Le code pour des écrans haute définition (Retina)....................................205 8. Le code complet de la page.........................................................206 I. Le script responsive-images.js..........................................................207 1. Utiliser le JavaScript................................................................207 2. Télécharger la démonstration.......................................................207 3. Le code de la page..................................................................208 4. Utiliser la page......................................................................209 J. Les propositions d'avenir...............................................................211 1. Les groupes de travail : RICG et W3C.................................................211 2. Les groupes de travail : Apple et W3C...............................................212 K. La typographie responsive.............................................................213 1. L'objectif...........................................................................213 2. Les unités utilisées..................................................................213 3. L'unité em et la cascade.............................................................214 4. L'unité rem et la cascade............................................................215 5. La typographie responsive et l'unité rem............................................216 6. La typographie responsive et les polices de caractère................................217 7. Les unités liées au viewport.........................................................218 L. Les tableaux responsives...............................................................219 1. L'objectif...........................................................................219 2. La solution Zurb....................................................................220 3. La solution de Goeff Yuen...........................................................224 4. La solution de Chris Coyier..........................................................228 5. D'autres solutions..................................................................231
Table...... des... matières................................................................. 7 Chapitre 8 : Les frameworks CSS A. Utiliser les frameworks CSS.............................................................239 B. Des frameworks CSS...................................................................239 C. Le framework UIkit.....................................................................241 1. Utiliser UIkit........................................................................241 2. Télécharger le framework...........................................................243 3. Télécharger jquery.................................................................244 4. Installer le framework...............................................................245 5. Créer une grille fluide...............................................................245 6. Utiliser la grille fluide...............................................................249 7. Utiliser la grille responsive d'uikit...................................................250 8. Créer une barre de navigation.......................................................255 9. Créer un tableau mis en forme......................................................256 D. Le framework Kube....................................................................258 1. Utiliser Kube........................................................................258 2. Télécharger le framework...........................................................260 3. Installer le framework...............................................................260 4. Créer une grille fluide et responsive.................................................261 5. Utiliser la grille fluide et responsive..................................................265 6. Insérer un formulaire...............................................................267 7. Insérer des boutons.................................................................270 E. Le framework Pure.....................................................................271 1. Utiliser Pure........................................................................271 2. Télécharger le framework...........................................................272 3. Lier le framework...................................................................272 4. Utiliser la grille fluide responsive....................................................273 5. Insérer un tableau..................................................................277 6. Insérer une barre de menu avec un menu déroulant.................................278 Editions ENI - All rights reserved Chapitre 9 : Le futur de la mise en page A. Les objectifs...........................................................................285 B. Le multicolonnage.....................................................................285 1. Le principe d'utilisation.............................................................285 2. Mise en place des colonnes.........................................................286 3. Mise en place des gouttières........................................................287 4. Mise en place des sauts de colonnes................................................288 5. Répartition sur plusieurs colonnes...................................................289 6. Un générateur de multi-colonnes...................................................290 7. Les colonnes et le design responsive................................................291
HTML5 et CSS3 pour des sites Responsive Web Design 8......................................................................... C. Les boîtes flexibles.....................................................................293 1. Placer les éléments de mise en page................................................293 2. Le module des boîtes flexibles......................................................293 3. Les boîtes flexibles..................................................................294 4. L'orientation et le sens des boîtes...................................................295 5. Le débordement des boîtes.........................................................297 6. L'orientation des boîtes.............................................................299 7. L'alignement horizontal des boîtes..................................................301 8. L'alignement vertical des boîtes.....................................................304 9. Les exceptions dans l'alignement vertical............................................305 10. Les exceptions dans l'alignement horizontal.........................................307 11. Les propriétés de flexibilité.........................................................309 12. La propriété flex-grow..............................................................309 13. Les propriétés flex-shrink et flex-basis...............................................311 14. Des constructeurs en ligne..........................................................314 15. Un exemple de mise en page flexible................................................315 D. Les autres modules du W3C............................................................319 1. L'habillage.........................................................................319 2. Les grilles..........................................................................320 3. Le modèle de page.................................................................320 4. La mise en page....................................................................321 5. Les régions.........................................................................322 Index..................................................................................323
Chapitre........ 7.. :. La.. mise.... en... page.... responsive.................................................. 159 Chapitre 7 : La mise en page responsive HTML5 et CSS3 pour sites Responsive Web Design A. Le design responsive L'objectif du Responsive Web Design est de créer des mises en page qui puissent s'adapter en fonction du type d'écran sur lequel est affiché le site. Ethan Marcotte dans son article fondateur du Responsive Web Design (http://alistapart.com/article/responsive-web-design) indique les trois techniques qui doivent être mises en œuvre pour créer des sites responsives : grilles fluides, images fluides et requêtes de média. Nous allons bien sûr étudier ces trois techniques, auxquelles nous allons ajouter des éléments pour avoir une typographie responsive, ainsi que des tableaux. B. Les grilles responsives Editions ENI - All rights reserved Les grilles responsives permettent de créer une mise en page basée sur une grille typographique qui s'adapte en fonction de la largeur de l'écran de diffusion. C est-à-dire qu'assez usuellement nous avons une grille sur 12 colonnes par exemple pour les écrans les plus larges, qui passe à une seule colonne pour les smartphones. Certaines grilles peuvent aussi intégrer des "resets" CSS et des CSS pour avoir des images responsives. Si vous effectuez une recherche sur le Web pour trouver des grilles de mise en page responsive, vous trouverez de très nombreuses solutions, plus ou moins pérennes. Voici une liste non exhaustive de solutions : - Golden Grid System : http://goldengridsystem.com - Responsive Grid System : http://www.responsivegridsystem.com - Profound Grid : http://www.profoundgrid.com - Gridiculous : http://gridiculo.us - Frameless : http://framelessgrid.com - Grid : http://www.adamkaplan.me/grid/ - Responsive Grid System : http://responsive.gs Vous devez tester chaque solution pour identifier celle répondant le mieux à vos attentes. Analysez les CSS utilisées pour voir si elles vous conviennent. Regardez si les propriétés utilisées sont conformes à vos habitudes. Si elles sont simples, pas trop verbeuses et élégantes d un point de vue syntaxique. Il faudra aussi voir si leur mise en place s'adapte bien à votre projet, sans alourdir le code. Dans le cadre de cet ouvrage, nous allons étudier deux systèmes, Simple Grid et Columnal. Ces deux solutions sont légères et simples à mettre en œuvre.
HTML5 et CSS3 pour des sites Responsive Web Design 160......................................................................... C. La grille responsive Simple Grid 1. Utiliser Simple Grid Pour ce premier exemple, nous vous proposons d'utiliser Simple Grid : http://thisisdallas.github.io/simple-grid/ C'est une grille très simple à mettre en place, avec un fichier CSS de 2 ko. La grille a une largeur initiale de 1140 pixels et utilise 12 colonnes. Les colonnes sont élastiques (ou fluides), c'est-à-dire que leur largeur se réduit proportionnellement à la largeur de la fenêtre du navigateur. Le point de rupture de Simple Grid est placé à 767 pixels. En dessous de cette largeur d'écran, la mise en page bascule sur une seule colonne. 2. Télécharger et installer Simple Grid v Allez sur le site de Simple Grid : http://thisisdallas.github.io/simple-grid/ v Cliquez sur le bouton Download. Vous téléchargez une archive nommée ThisIsDallas-Simple-Grid-2fe3f18.zip. v Décompressez cette archive pour obtenir un dossier nommé ThisIsDallas-Simple-Grid- 2fe3f18.
Chapitre........ 7.. :. La.. mise.... en... page.... responsive.................................................. 161 Dans ce dossier vous trouverez : - Un fichier nommé index.html. C'est le fichier de démonstration de Simple Grid. - Un fichier nommé simplegrid.css, c'est le fichier des styles CSS. - Un fichier nommé README.md qui contient les instructions de base pour mettre en place la grille. Nous allons maintenant créer une page d'exemple. v Créez un dossier pour cet exemple. v Dans ce dossier placez-y un fichier simplegrid.css. v Créez un fichier HTML. Vous retrouvez cet exemple dans le dossier à télécharger Chapitre-07/simple-grid/. Dans ce fichier HTML saisissez cet en-tête : <!DOCTYPE html> <html lang="fr"> <head> <title>ma grille Simple GRid</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="simplegrid.css" /> </head> Editions ENI - All rights reserved 3. Les lignes Simple Grid fonctionne avec des lignes, il n'y a pas de conteneur de mise en page. Vous ne devez donc réfléchir votre mise en page qu'avec des lignes. Dans chacune des lignes créées, vous allez insérer des blocs alignés sur les colonnes de la grille. Dans un premier temps nous créons une première ligne. La ligne utilise la classe.grid. <div class="grid">... Voici le premier sélecteur utilisant la classe.grid :.grid { width: 100%; max-width: 1140px; min-width: 755px; margin: 0 auto; overflow: hidden;
HTML5 et CSS3 pour des sites Responsive Web Design 162......................................................................... La largeur est définie à 100 % de celle de son élément parent, avec une largeur maximale de 1140 pixels et minimale de 755 pixels. La boîte est centrée dans la fenêtre du navigateur (margin: 0 auto;). Un deuxième sélecteur CSS utilise cette classe :.grid:after { content: ""; display: table; clear: both; Cela permet d'interdire tout flottement après l'utilisation d'une boîte <div class="grid">. Si vous souhaitez utiliser un remplissage (padding) dans cette boîte, utilisez la classe.grid-pad. Cela permet d'ajouter un remplissage de 20 pixels en haut et à gauche..grid-pad { padding: 20px 0 0px 20px; 4. La maquette Voici la mise en page simple que nous allons mettre en place avec la grille Simple Grid. La première ligne comporte 3 blocs. Chacun de ces blocs est placé sur 4 colonnes. Nous avons bien 4+4+4=12 colonnes. La deuxième ligne comporte 2 blocs. Le premier est placé sur 7 colonnes et le deuxième sur 5 colonnes. La dernière ligne comporte 3 blocs. Le premier et le troisième sont placés sur 3 colonnes et le deuxième sur 6 colonnes.
Chapitre........ 7.. :. La.. mise.... en... page.... responsive.................................................. 163 5. La première ligne Dans cette première ligne, nous insérons donc trois blocs alignés sur 4 colonnes. Nous allons utiliser la classe.col-1-3. Le système de nommage est simple et est basé sur la syntaxe.col-*-*. Le premier * indique la part de la largeur de la grille, 1 veut dire que nous utilisons la largeur totale de la grille, soit les 12 colonnes. Le deuxième * indique que les colonnes sont alignées sur le tiers, 3, de la largeur de la grille. Chaque bloc est donc aligné sur 12/3 = 4 colonnes. Voici le code utilisé pour cette première ligne : <div class="grid grid-pad"> <div class="col-1-3"> <p>fictum, deserunt...</p> <div class="col-1-3"> <p>morbi odio eros, volutpat...</p> <div class="col-1-3"> <p>quisque ut dolor gravida...</p> Voici les sélecteurs utilisant la classe.col-1-3 :.col-1-3,.col-4-12 { width: 33.33%; Nous avons une largeur égale à 33,33 % de celle de son élément parent. Voilà le deuxième sélecteur utilisant cette classe : [class*='col-'] { float: left; padding-right: 20px; Cela permet à tous les blocs d'avoir un flottement à gauche et un remplissage à droite de 20 pixels. Voici l'affichage obtenu : Editions ENI - All rights reserved
HTML5 et CSS3 pour des sites Responsive Web Design 164......................................................................... 6. La deuxième ligne La deuxième ligne comporte un premier bloc aligné sur 7 colonnes et un deuxième sur 5 colonnes. Nous avons donc un premier bloc qui est aligné sur 7 des 12 colonnes de la grille, sa classe est donc.col-7-12. Nous avons un deuxième bloc qui est aligné sur les 5 dernières colonnes des 12 colonnes de la grille, sa classe est donc.col-5-12. Voici le code à utiliser. <div class="grid grid-pad"> <div class="col-7-12"> <p>fictum, deserunt mollit...</p> <div class="col-5-12"> <p>morbi odio eros, volutpat ut...</p> Voici les sélecteurs exploitant les classes utilisées, pour définir la largeur des blocs :.col-7-12 { width: 58.33%.col-5-12 { width: 41.66%; Voici le sélecteur permettant d'ajouter un remplissage à droite de 20 pixels pour le dernier élément de la ligne :.grid-pad > [class*='col-']:last-of-type { padding-right: 20px; Nous retrouvons le sélecteur générique pour le flottement des blocs et le remplissage à gauche : [class*='col-'] { float: left; padding-right: 20px; Voilà l'affichage obtenu :