Très souvent, on me demande la version web mobile d’un site sans rien toucher ou presque à la version bureautique du site actuel. Ce genre de demande n’est pas toujours évidente à mettre en place. Dans ce petit billet, je vais vous suggérer certaines étapes pour avoir très rapidement une structure qui répondra à ce genre de demandes.
Supposons que le site web actuel comprend le fichier index.html accessible par tous les utilisateurs mais non adapté aux personnes qui se connectent à partir d’un périphérique mobile. Notre approche consiste à s’appuyer sur la fonctionnalité (RWD) de Twitter Bootstrap.
Etape 0 : Page web initiale
[gist https://gist.github.com/4681897#file-gistfile1-txt]
On remarque que la page index.html référence le fichier de style site.css, qui est le fichier de style par défaut pour les écrans bureautiques. L’objectif et la contrainte, sont de ne pas toucher à ce fichier. Nous allons essayer de rendre responsive une page existante sans trop de modifications.
Etape 1 : Télécharger Twitter bootstrap et copier le répertoire « less » de bootstrap dans votre projet.
Pour mettre en place le RWD, nous allons décider d’intégrer Twitter bootstrap dans notre site. Nous n’allons pas directement utiliser les fichiers bootstrap.css ou bootstrap-responsive.css. On apprendra plutôt à mieux personnaliser Bootstrap et prendre que les composants qui nous intéressent.
Etape 2 : Créer les fichiers custom-site.less, custom-responsive-site.less et custom-variables.less pour faire du spécifique.
Less est un langage de style qui étend le CSS avec des comportements dynamiques. Il est très utilisé par bootstrap et surtout permet de personnaliser et de mieux structurer le style des pages HTML.
- Dans le fichier custom-site.less, il suffit de copier-coller le contenu du fichier bootstrap.less de bootstrap.
- Dans le fichier custom-responsive.less, il suffit de copier-coller le contenu du fichier responsive.less de bootstrap
- Enfin dans le fichier custom-variables.less, il suffit de copier-coller le contenu du fichier variables.less de bootstrap.
L’objectif de créer séparément ces trois fichiers à partir des contenus de leurs correspondants bootstrap est de pouvoir facilement mettre à jour les fichiers du répertoire « less » lorsqu’il y a une nouvelle version de Twitter bootstrap disponible.
Le contenu de custom-site.less montre qu’on ne chargera des composants bootstrap que lorsque nous sommes sur des écrans dont la largeur maximale est de 767px. (Téléphone en mode portrait ou tablette). En bas de ce fichier, on peut se permettre de surcharger les éléments de style du fichier site.css du site web.
[gist https://gist.github.com/4681897#file-gistfile2-txt]
Pour le moment, le contenu du fichier custom-responsive-site.less est identique à celui de responsive.less.
Dans le fichier custom-variables.less, on peut personnaliser entièrement bootstrap (couleur des liens, des boutons, la typographie, le contour des boutons..). Pour le moment, nous n’avons pas pour objectif de personnaliser bootstrap.
Etape 3 : Télécharger un éditeur et un compilateur less
Le plus simple est de convertir les fichiers .less (custom-site.less et custom-responsive-site.less) en leurs équivalents .css afin de les référencer dans la page index.html.
Il existe plusieurs outils (graphique ou ligne de commande) pour faire cette conversion. Dans mon cas, j’ai utilisé l’outil graphique LESS.
Etape 4 : Référencer les fichiers générés dans les pages du site.
Dans le fichier index.html, on aura en plus les deux références aux fichiers générés. Attention à l’ordre des inclusions.
[gist https://gist.github.com/4681897#file-gistfile3-txt]
Etape 5 : Réaménager un peu la page index.html pour inclure certaines classes de bootstrap
Afin de bénéficier de certaines fonctionnalités de bootstrap lorsque qu’on est en mode réduit (largeur maximale de l’écran équivalent à 767px), on peut injecter dans la page HTML certains attributs ou classes de Twitter bootstrap. Ainsi le formulaire de départ peut se réécrire de cette façon :
[gist https://gist.github.com/4681897#file-gistfile4-txt]
La différence avec la version desktop de la page est que le fond est blanc et les éléments input sont automatiquement disposés en bas des labels.
La structure globale du projet est la suivante :
NB : Pour ceux qui préfèrent Maven, il faut savoir qu’il existe des plugins maven permettant de convertir les fichiers .less en .css. J’ai eu à utiliser lesscss-maven-plugin dans un autre projet et il fait bien le job.
La petite astuce est de :
- Créer un répertoire « src-gen/main/webapp » dans votre projet maven.
- Dans le fichier pom.xml, configurer le plugin WAR pour qu’il aille chercher les fichiers .css générés par le plugin lesscss depuis « src-gen/main/webapp » et les packager dans le .war final de l’application en utilisant le paramètre « webResources » du plugin.
Notons que dans un fichier .less, on peut importer d’autres fichiers .less ou d’autres fichiers .css. Il faut aussi faire attention à l’indentation dans les fichiers .less qui peuvent rendre la conversion en .css impossible dans certains cas.
Voilà, vous avez maintenant quelques clefs pour rendre vos pages HTML existantes responsives. Le plus grand soucis pour les pages plus complexes demeure surtout la collision des éléments de style (des fichiers .css) qu’il faut bien résoudre.
