Aujourd’hui créer un site web non responsive n’est plus imaginable, c’est très important car de plus en plus de personnes utilisent leurs smartphones ou leurs tablettes pour naviguer sur internet. C’est pourquoi je vais vous donner quelques astuces à appliquer lors du développement de vos projets.
Mais tout d’abord, qu’est ce qu’un site responsive ?
Un site dit responsive va s’adapter à tout types d’écrans, que ce soit un écran d’ordinateur ou un écran de smartphone, en passant par les écrans de tablettes.
Si votre site n’est pas responsive vous devez alors avoir un site dédié ou une application mobile mais je reviendrai sur ces deux autres procédés dans un autre article.
1 – Passer par le code (Développeur)
Une des solution pour rendre votre site responsive est de passer par le code, ce qui est pour moi la meilleure des solutions.
Pour cela vous allez devoir ouvrir vos fichiers HTML, PHP, CSS.
Dans le <head> de votre fichier HTML ou PHP, ajoutez les lignes suivantes
<link rel="stylesheet" href="css/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
Dans votre fichier style.css
Vous allez en fait avoir plusieurs fichiers en un, je m’explique.
Dans votre fichier style.css vous allez avoir le style pour les écrans d’ordinateurs, suivi du style pour les tablettes, pour les smartphones … Tous ça dans un seul fichier.
Pour ce faire il va falloir ajouter des lignes de code.
(Les valeurs sont variables)
/* PC */
@media (min-width: 827px) {
//votre code pour ordinateur
}
/* Tablette */
@media (max-width: 827px) {
//votre code pour tablette
}
[...]
(Le code qui n’est pas entre @media .. { … } va s’appliquer à tout les écrans)
2 – Plugin (WordPress ou autre CMS)
La deuxième solution est de passer par des extensions WordPress, il vous suffit de vous rendre dans “Extensions” > “Ajouter” puis de rechercher avec le mot clé “Responsive”, de l’installer et de l’activer.
Des milliers de plugins sont disponibles alors à vous de trouver votre bonheur
Ceci-dit, attention à ne pas trop abuser des extensions pour ne pas faire de votre site une “usine”, un site qui va mettre du temps à charger.
Conclusion
Pour réaliser un site responsive, plusieurs options s’offrent à vous mais favorisez l’intégration de ce procédé directement dans le code de votre projet.
Pourquoi ? Puisqu’en ajoutant directement ce qu’il faut dans le code votre site sera nativement responsive et saura s’adapter à tout types d’écrans. Dans le cas de l’utilisation de plugin votre site va être plus lourd et va afficher les pages moins rapidement.
Lors de l’élaboration de votre cahier des charges avec votre développeur, n’hésitez pas à lui parler de responsive, il saura vous guider et réaliser un site responsive nativement.