Comment rendre son site responsive design ?

Vous voulez que les internautes puissent visiter votre site sur un smartphone ou une tablette ?
Initiez-vous aux joies du responsive design !

Vous avez des notions d’intégration mais vous ne savez pas comment vous y prendre ?

En fait, c’est très simple : voici un tutoriel pour vous aider…

A l’heure où le nombre de tablettes vendues dépasse celui des ordinateurs portables, il est indispensable de rendre son site accessible sur tout support.

Faire l’économie de ce travail, c’est perdre des centaines, voire des milliers de visiteurs qui repartiront déçus de votre site. Ils s’apprêtaient à le visionner sur leur smartphone (Iphone, Samsung, etc), mais les ascenseurs horizontaux rendent la lecture trop pénible.

On pourrait croire que le responsive design, c’est très difficile, mais en fait, il suffit d’avoir quelques notions d’intégration pour s’en sortir.

Vous savez ce que c’est une « div » ? Très bien, vous avez le niveau suffisant ! Commençons donc le cours…

En fait, il suffit d’utiliser quatre éléments fondamentaux.

1/ Les media queries

Il vous suffit de vous rendre dans votre CSS et d’ajouter une ligne de code, appelée « media query », pour commencer la série des instructions pour mobiles.

Il s’agit de celle-ci :

Cette ligne de code signifie en gros : « si l’écran du terminal utilisé par le visiteur est inférieur à 480 px (=si l’internaute utilise un smartphone), alors fais telle ou telle chose ».

A l’intérieur de cette balise, nous verrons quel type d’instruction mettre.

Maintenant, si votre visiteur utilise une tablette, son écran sera plus large. Si l’on s’en tenait là, alors le site ne serait pas adapté aux tablettes.

Pour finaliser le travail et étendre le résultat aux tablettes, on va affiner et rajouter deux types de taille d’écran :

Avec cela, vous êtes parés pour faire face à toutes les situations possibles, à savoir toutes les tailles d’écran imaginables.

Rentrons à présent dans le détail des instructions. Naturellement, il ne m’est pas possible de vous fournir des lignes de code à rajouter à l’intérieur de ces balises, puisque chaque site est unique. Les commandes vont varier selon le nom que vous avez donné à vos divs, leur nombre, etc.

Il suffit de comprendre trois principes fondamentaux, et vous pourrez facilement les appliquer au cas particulier de votre site.

2/ Les miracles du « float :none »

Il est fortement probable que votre site articule des divs (ex : une qui va contenir une image et l’autre qui va contenir un texte, à droite de l’image), en utilisant le classique « float :left » ou « float :right ».

Sur mobile, oubliez ça ! L’écran est trop petit pour aligner horizontalement des blocs, l’un à gauche, l’autre à droite. En général, donc, les divers éléments sont placés les uns en dessous des autres, et non plus à côté. Par exemple, le logo ne sera plus à gauche du menu, mais au-dessus.

Votre principal allié sera donc le « float :none ».

Supposons donc que vous ayez deux divs, l’une contenant le logo, et l’autre contenant le menu, à droite de celle-ci.

Et que votre code ressemble à ceci :

Avec en css :

Voici ce qu’il vous reste à rajouter dans votre fichier css :

Vous n’avez plus qu’à lire votre code source, repérer chaque div, et pour celles qui en ont besoin, les faire passer en « float :none »

Naturellement, vous devez ajuster le padding et le margin de ces divs, puisque leur place est modifiée. Sur ce point précis, attention aux éventuelles divs dont vous avez fixé la margin non pas dans le css, mais dans le code html lui-même

(ex : <div id= « logo » style= margin-left :600px ;»). En effet, sur mobile, cela va dépasser la taille de l’écran. Du coup cette div n’apparaîtra pas.

Il faut prendre l’habitude de préférer les classes css.

(ex : <div id = « logo » class= « logo »>. Vous pourrez dans la css fixer la margin “classique” (pour les ordinateurs portables), puis la margin pour les mobiles de cette classe "logo".

Pour ce qui concerne les tablettes : l’écran est plus large, donc certaines divs peuvent rester alignées l’une à côté de l’autre ; tandis que ce ne sera pas possible pour certaines autres divs.

A vous de faire ce travail fin d’analyse, et de remplir en conséquence vos media queries correspondantes :

3/ Changer la width

Le dernier point à connaître pour obtenir un beau site responsive design consiste à remplacer la largeur de vos divs, souvent fixées en pixels, par :

• la commande width :auto ; (qui ajuste automatiquement la largeur de la div à la largeur du petit écran du mobile). C’est très utile, en général, je mets 80% de mes divs en auto.
• pour les divs qui ne doivent qu’occuper une petite largeur de l’écran : fixer la largeur en pixel, mais de manière à ce qu’elle soit plus petite, pour s’adapter à la taille de l’écran du téléphone portable.
• ou mieux : fixer la largeur en pourcentage : de cette manière, la div s’agrandira au fur et à mesure que l’écran s’agrandit

Là encore, cela s’opère dans la media query appropriée, correspondante au mobile.

4/ Utiliser le « display:none »

Un site pour mobile est la plupart du temps plus simple, plus épuré, que sa version « ordinateur de bureau ».

La raison en est simple : quand on a un petit écran, on n'a pas la place de mettre la même quantité d'information, même si celle-ci est bien agencée par une intégration réussie.

Il faut s'y résoudre : il y aura certainement quelques divs, quelques images, quelques blocs, qui vont disparaître sur la version pour smartphone.

Pour cela, rien de plus simple : repérez la div ou l'image que vous souhaitez supprimer, et donnez lui une classe, si ce n'est pas déjà fait.

Puis, dans la css, donnez lui l'attribut « display:none ». Par exemple, pour ne pas afficher une div nommée « bloc1 » :

A vous de voir ce que vous souhaitez conserver sur la version mobile. Pour moi, j'ai tendance à en conserver le plus possible, mais je sacrifie toujours au moins deux ou trois éléments sur un site.

Bilan

Voici un petit exemple de ce à quoi devrait ressembler votre feuille css

Voilà, c’est, pour moi du moins, tout ce qu’il y a à savoir concernant spécifiquement l’intégration sur mobile.

Pour vérifier votre travail, vous pouvez certes utiliser un outil en ligne comme celui-ci, mais pourquoi se compliquer ? Mieux vaut cliquer sur la case de « réduction » de votre navigateur (la case juste à côté de la croix "fermeture" de votre navigateur). Vous pouvez alors ajuster la taille de l’écran, en l’agrandissant ou en la réduisant à volonté, avec votre souris. Vous obtenez alors l’équivalent de ce que vous pouvez voir de votre site sur mobile et sur tablette. Profitez-en !

Bon courage, et si vous craignez de ne pas y arriver, n’hésitez pas à me contacter pour que je me charge de ce travail !

Cet article vous a plu ? Découvrez-en d'autres !