Contexte et objectifs
Un client (CaveCoste, vendeur en ligne de vins de la vallée du rhone) me demande de passer son site (php 5, html, css) en responsive :
- pour que ses clients puissent commander sur mobile
- pour remonter son SEO Google
En version mobile, j'ai pris le parti de tout virer de l'affichage, sauf la colonne centrale, en rajoutant le code suivant dans les css. Je créé 2 classes que je vais rajouter dans tous les blocs que je souhaite supprimer (soit, je le passe en display non ou bien, je force la hauteur à 0.
Checklist et ordonnancement de mes taches
Travail préparatoire
Découper le site en "header", "colonne de gauche", "colonne centrale", "colonne de droite", "footer"
(avec un peu de chance, c'est deja le cas de "vieux" sites)
<body>
<html>
<header>
... haut de la page ...
</header>
<div class="main">
<div class="col-gauche"> ... navigation gauche ... </div>
<div class="col-centre">... centre ...</div>
<div class="col-droite ">... navigation droite ...</div>
</div>
<footer>
... bas de la page ...
</footer>
</html>
Principes HTML et CSS
Je rajoute ensuite des classes et des blocs pour supprimer, en mobile, tout ce qui est dédié à la version ordinateur (desktop) et préparer des zones pour la partie mobile
j'ai donc ajouté, à toutes les zones de la page que je veux masquer la classe "hidemobile"
.showmobile { display: none; } /* desktop */
@media only screen and (max-width: 1130px) {/* mobile */ .hidemobile { display: none; }
.height0mobile { height: 0px; } /* autre methode pour masquer */
.showmobile { display: block; }
}
<body>
<html>
<header>
<div class="hidemobile">... haut de la page desktop ...</div>
<div class="show-mobile"></div>
</header>
<div class="main">
<div class="col-gauche hidemobile"></div>
<div class="col-centre"></div>
<div class="col-droite hidemobile"></div>
</div>
<footer>
<div class="hidemobile">... bas de la page desktop ...</div>
</div class="showmobile"></div>
</footer>
<div class="barre-laterale"></div>
</html>
Ajouter du contenu spécifique aux zones "mobiles"
Ajouter une version mobile du header
J'ai fait le choix de ne mettre seulement que le logo, une icone de "menu" (menu burger), une icone pour la "recherche", une icone de "panier" et une icone "mon compte", ainsi qu'une bandeau "slider" vers les principales catégories de produits
Ajouter une version mobile du footer. A priori, il reste donc : un header, une zone centrale et un footer
Ajout d'une barre latérale (menu burger)
ici, il s'agit de faire apparaitre ou disparaitre (via le .toogle() de jquery) un div positionné en "position : fixed" . Ici, j'ai fait le choix de faire apparaitre la colonne de gauche desktop quand on clique sur l'icone du menu burger
Afficher des élements en footer ou dans la barre latérale qui étaient dans le header, colonne de gauche ou colonne de droite
Enfin, deplacer en javascript et à chaque chargement de pages, tout ou partie des blocs qui avaient été masqués, dans les zones mobiles ajoutées : ici les bouteilles affichées dans le footer proviennent de la colonne de droite affichée en "desktop" et recopiées en javascript (à l'aide de jquery)
Astuces diverses : le display: flex
J'ai choisi d'utiliser au maximum des display:flex plutot que des "align:float" ou "align:left" habituels en responsive
Conclusion
Le travail préparatoire a été fondamental. J'ai eu la chance de récupérer la maintenance d'un site dont le html et css était propre : bravo à mon prédécesseur.
L'utilisation du display:flex a été fondamental. Ne jamais plus utiliser les "float" ;-)
Contactez moi si vous avez besoin de faire ce genre d'opération :
- réalisation du cahier des charges vers vos prestataires
- coaching et suivi de vos développeurs
- (éventuellement, je peux réaliser moi meme cette opération)
- tests et suivis
- recettage
- mise en production