Comment ajouter une version pour mobile à un site web existant Adaptation d'un site au mobile : les feuilles de styles

Dans un premier temps, l'adaptation de la feuille de styles consistera à définir des dimensions maximales au lieu de dimensions fixes :

 la largeur du conteneur global ne sera plus fixée avec la propriété width, mais seulement limitée pour les grands écrans avec max-width, donc elle pourra se réduire et s'adapter aux plus petites tailles d'affichage ;

 cette même propriété max-width permettra de limiter la taille des images à 100% de leur conteneur, ce qui leur évitera de déborder de leur colonne ;

 l'image d'en-tête, qui s'affichait auparavant dans ses dimensions natives, remplira 100% de la largeur du conteneur global, pour pouvoir s'adapter à un rétrécissement éventuel de cette largeur utile ; dans une grande fenêtre, elle n'aura pas pour autant à s'afficher au-delà de sa taille initiale, puisque ce conteneur est limité en largeur.

Ensuite, la mise en forme de trois classes (.mobile, .afficher, .masquer) servira à gérer les éléments spécifiques aux petits écrans, notamment le menu : le bouton Menu ne doit apparaître que sur les mobiles, les deux dernières classes permettant d'afficher ou masquer le menu complet suivant l'action du visiteur sur ce bouton.

Enfin, et grâce aux media queries, nous pourrons régler les propriétés du menu (leurs marges, la taille des caractères) et des colonnes (leur répartition dans la page) pour les adapter aux différentes tailles d'écrans mobiles, en définissant trois plages de largeurs.

Par rapport à la feuille de styles initiale, les parties modifiées sont celles mises en gras ainsi que les trois règles media queries situées à la fin. Ces quelques ajouts et transformations suffiront pour adapter notre page à tout type d'écran.

Feuille de styles CSS adaptative pour le site Hong Kong

.mobile { display: none; } (1)
body, div, ul { margin: 0; padding: 0; }

body { background-image: url(hk-body.jpg);
  font-family: Garamond, Times, sans-serif; }

.global { margin: 0 auto; max-width: 950px; (2) 
 background-color: whitesmoke;
  border: solid 1px lavender; border-top: none; }

.entete img { display: block; width: 100%; } (3)

#menu { height: 48px; background-color: lavender;
  background: linear-gradient(lightgray, whitesmoke);
  border-bottom: solid 1px lavender; }

ul.afficher, ul.masquer { height: 48px; } (4)  

 .contenu { clear: both; padding: 10px; }
  .contenu img { max-width: 100%; } (5)

article { float: left; width: 65%; }
aside { float: right; width: 30%;
    padding-top: 15px; text-align: center; }
.pied { clear: both; height: 85px;
  background: linear-gradient(whitesmoke, lightgray);
  padding: 5px; border-top: solid 1px lightgray; }

/* Détails pour le menu de navigation */
#menu li { float: left; list-style-type: none;
    line-height: 28px; }

#menu li a, #menu li a:visited {
  display: block; padding: 10px 28px;
  border-right: solid lightgray 1px;
  font-family: Arial, sans-serif;
  font-size: 1em; font-weight: bold;
  color: brown; text-shadow: white 2px 0 0;
  text-decoration: none; }

#menu li a:hover {
  background-color: lightsteelblue;
  background: linear-gradient(silver, dimgray);
  color: white; text-shadow: none; }

/* Contenu de la page */
h1 { font-family: Arial, sans-serif;
    font-size: 1.5em; color: #d06b19; }
h2 { font-family: Arial, sans-serif;
    font-size: 1.2em; color: brown; }

.droite { float: right; margin-left: 10px; }
.gauche { float: left; margin-right: 10px; }

/* RESPONSIVE */

@media only screen and (min-width: 768px)
                   and (max-width: 959px) { (6) 
  body { background-image: none; }
  #menu li a, #menu li a:visited {
    padding: 10px 15px; }
}

@media only screen and (min-width: 640px)
                   and (max-width: 767px) { (7)
  body { background-image: none; }
  #menu li a, #menu li a:visited {
    padding: 10px 8px; font-size: 0.95em; }
  article { width: 60%; }
  aside { width: 35%; }
}

@media only screen and (max-width: 639px) { (8)    
  body { background-image: none; }
  .mobile { display: block; } (9)
  #menu, #menu.masquer { height: 0; } (10)
  #menu.afficher { height: 343px; } (11)

#menu { transition: height 1s; overflow: hidden; (12)
    border-bottom: none; background: none; }
#menu li { float: none; (13)
  background-color: lightgray;
  background: linear-gradient(lightgray, whitesmoke);
  border-bottom: solid 1px lavender; }

#menutitre { display: block; width: 100%; line-height: 3em; (14)
  background-color: lightsteelblue;
  background: linear-gradient(silver, gray);
  text-align: center; font: 1.1em/2.5em Arial, sans-serif;
  color: white; font-weight: bold; text-decoration: none; }

article, aside { float: none; width: 100%; } (15)
}

Nous allons tout d'abord faire le tour des changements qui concernent la première partie, qui va du début du code CSS jusqu'aux règles @media.

Les éléments de classe mobile (1) sont masqués dans la feuille de styles standard : cela ne concerne ici que le bouton Menu destiné aux smartphones, créé à partir d'une balise a de classe mobile.

La largeur du conteneur global n'est plus fixée à 950 pixels avec la propriété width : il s'agit maintenant d'une largeur maximale fournie par la propriété max-width (2). Cela ne change rien pour les écrans d'ordinateurs, mais ce conteneur s'adaptera maintenant à la largeur des écrans, si elle est inférieure à cette dimension.

Pour la même raison, l'image d'en-tête voit sa largeur (3) ajustée à 100% de celle de son conteneur, qui est la balise header, elle-même ayant la largeur du bloc div de classe global. Sur un ordinateur, cette image conserve donc une largeur de 950 pixels, puis elle s'adapte à tous types d'écrans. Ainsi, elle reste entièrement visible dans tous les cas.

La règle (4) nous indique que les balises ul, qu'elles soient de classe afficher ou masquer, doivent avoir une hauteur de 48 pixels. Ceci paraît étonnant pour deux raisons :

  le masquage d'un élément correspond normalement à une hauteur nulle, bien qu'il y ait d'autres méthodes pour masquer un élément ;

 aucune balise ne possède initialement une de ces deux classes. Elles sont ajoutées au code HTML par la fonction JavaScript menumobile(), après un clic sur le bouton Menu qui n'apparaît que sur la version smartphone.

Il s'agit en fait d'une précaution, au cas où une fenêtre serait nettement réduite, puis à nouveau agrandie, par exemple sur un ordinateur. La page reprend alors ses dimensions habituelles, mais la balise ul du menu peut avoir conservé une des deux classes afficher ou masquer, si le bouton Menu a été actionné. Il est donc important de redonner au menu sa hauteur normale dans ce cas-là. L'effet de ces deux classes sur les petits écrans sera traité plus loin.

La règle (5) concerne toutes les balises img placées dans la section de classe contenu, c'est-à-dire dans la partie principale de la page. C'est une des bases de la conception adaptative (responsive design en anglais) : toute image ne doit pas dépasser la largeur de la fenêtre, si petite soit-elle. Une largeur maximale max-width de 100% ne change pas la dimension des images sur un écran d'ordinateur et résout ce problème de façon très simple !

Tous les autres styles sont identiques à ceux de la version initiale de notre site, ils sont expliqués en détail dans le chapitre précédent.

Pour compléter l'adaptation du site, il nous reste à ajouter des styles spécifiques pour différentes largeurs d'écrans, classées par catégories à partir de valeurs en pixels appelées "points de rupture". Ceux-ci sont déterminés de façon pratique pour chaque site, avec souvent des valeurs classiques liées aux tailles d'écrans courantes, qui sont données par le tableau 9-2 mais qui n'ont rien de contraignant.

Tableau 9–2 Quelques largeurs courantes d'écrans

Dans la pratique, nous pouvons trouver les points de rupture à utiliser en réduisant progressivement la fenêtre du navigateur et en notant les dimensions à partir desquelles il faut modifier l'affichage. Ces valeurs s'affichent directement dans un navigateur qui propose un aperçu de type "écran mobile" (par exemple, Firefox avec le raccourci Ctrl +Maj +M).

Dans notre page sur Hong Kong et, compte tenu de la présence possible d'une barre de défilement verticale, nous allons utiliser comme points de rupture les largeurs 960, 768 et 640 pixels. Dans ces trois cas, l'image de fond de la balise body est supprimée car elle n'est plus visible, le contenu prenant toute la largeur de l'écran. Les autres modifications de styles sont fonction des dimensions d'écrans.

Entre 768 et 959 pixels (6), les liens du menu sont resserrés, leurs marges horizontales passant de 28 à 15 pixels.

De 640 à 767 pixels (7), ces marges horizontales sont réduites à 8 pixels, tandis que la taille des caractères du menu diminue et vaut 0.95em, soit à peine plus de 15 pixels. Par ailleurs, les largeurs des colonnes sont légèrement modifiées, à 60% et 35% au lieu de 65% et 30%, pour éviter que la colonne latérale ne devienne trop étroite.

Pour une largeur de fenêtre qui ne dépasse pas 639 pixels (8), nous voici dans la configuration "petit écran" qui nécessite davantage de modifications.

 Le menu devient déroulant à partir d'un bouton Menu de classe mobile, qui n'est plus masqué mais affiché comme bloc

 Le bloc <ul id="menu"> est rendu invisible par une hauteur nulle (10), lorsqu'il n'a aucune classe (affichage initial) ou quand il a la classe masquer (après deux clics sur le bouton Menu, par exemple).

 Lorsqu'il possède la classe afficher (après un clic sur le bouton Menu, par exemple), ce bloc ul d'identifiant menu prend une hauteur de 343 pixels (11), correspondant à 7 lignes de menu de 49 pixels chacune (hauteur de 48 pixels plus la bordure de 1 pixel qui sera ajoutée en bas de chaque ligne).

 Toujours à ce même bloc ul d'identifiant menu sont attribuées les propriétés suivantes (12) : transition d'une seconde pour la propriété height, de façon à animer le déroulement du menu, débordement overflow masqué par la valeur hidden (sinon, une hauteur nulle de ul n'empêcherait pas les lignes de menu de s'afficher), pas de bordure en bas et aucune de couleur de fond.

 En ce qui concerne les lignes li (13) de ce menu, les changements sont les suivants : pas de flottement (les lignes redeviennent des blocs ordinaires, placés les uns sous les autres), un fond sous forme de dégradé en CSS3 (précédé par un fond uni background-color, pour les anciens navigateurs qui ne connaissent pas les dégradés) et une bordure de séparation en bas de chaque ligne. Au passage de la souris, le dégradé prévu pour les grands écrans est conservé.

 Le bouton Menu, créé avec la balise a d'identifiant menutitre (14), n'avait pas encore de mise en forme : c'est un bloc qui s'étend sur toute la largeur de l'écran, sa hauteur de ligne est de 3em, avec un fond dégradé en CSS3 (toujours précédé d'un autre fond de couleur fixe, pour les navigateurs ignorant les CSS3). Le texte est centré, écrit en police Arial et en blanc, sans soulignement pour le lien. Sa taille est de 1.1em et son interligne de 2.5em, de façon à obtenir un centrage vertical (dans la propriété font, les deux chiffres séparés par une barre représentent respectivement la taille de police et la valeur de l'interligne).

 Enfin, les deux colonnes de contenu, balises article et aside (15), ne flottent plus: elles apparaissent l'une sous l'autre et occupent toute la largeur de l'écran.