Dossier Comment ajouter une version pour mobile à un site web existant

Comment adapter son site pour permettre sa consultation depuis smartphones ou tablettes ? Des bonnes issues de l'ouvrage "Premiers pas en CSS 3 & HTML 5" chez Eyrolles.

Le site Hong Kong, qui va nous servir de référence, possède une largeur fixe qui n'est pas pensée pour les petits écrans. C'est pourquoi, avant de nous lancer dans un codage spécifique, il nous faut réfléchir sur la méthode à suivre.

Il n'est pas question ici de créer un deuxième site pour les mobiles, car cela doublerait le travail ultérieur de mise à jour des pages. Ce sont bien les mêmes pages qui s'afficheront sur tous les types d'écrans, mais de façon différente et au moyen de quelques aménagements, ceci grâce à la performance des feuilles de styles CSS3.

Tout d'abord, reprenons les points à ne pas oublier pour réussir une adaptation au Web mobile.

 Toutes nos images sont légères, donc nous pourrons les conserver, sauf l'image de fond de la balise body, puisqu'elle sera invisible sur des affichages de petite largeur.

 Les fonds constitués de couleurs unies ou de dégradés ne gênent pas la lecture du texte, qui restera bien lisible sur des smartphones.

 Le contenu effectif de la page possède une largeur de 950 pixels, qu'il faudra transformer en 100 % pour des fenêtres de dimensions inférieures.

 Les deux colonnes de texte conserveront leurs proportions, puisque leurs largeurs sont déjà données en pourcentage, ceux-ci pouvant d'ailleurs être ajustés au cas par cas. Pour une taille d'écran réduite, ces colonnes s'afficheront l'une sous l'autre, en pleine largeur.

 Enfin, le menu pourra rester horizontal et tenir sur une seule ligne, si nous diminuons les marges de gauche et de droite pour chaque lien. Lorsque la largeur disponible deviendra trop petite, ce menu deviendra déroulant et sera affiché par un clic sur un lien permanent Menu, puis masqué de la même manière.