Faire des maquettes
Dans un premier temps, il faut être bien conscient que le rendu de votre site sur ordinateur ne pourra pas être exactement le même sur tablette ou mobile. En effet, certains éléments sont inappropriés aux petits formats. Prenons l’exemple des images beaucoup plus large que la hauteur, si on réduit sa taille à la largeur de l’écran sur laquelle elle est affichée cela peut facilement la rendre illisible. Il faut donc penser à utiliser une autre image ou ne pas l’afficher afin que l’expérience utilisateur soit optimale. C’est dans ce sens que les maquettes sont indispensables car elles vous permettront de visualiser tout cela et vous rendre compte des problèmes que vous pourrez rencontrer. Les maquettes sont importantes lors de la création d’un site responsive.
Maîtriser les media queries
La chose essentielle à maîtriser lorsque l’on fait du responsive design sont les « media queries ». Mais je vous vois déjà venir en me disant : « Et les media queries c’est quoi ? ». La réponse est simple, c’est une technique utilisée dans le CSS. Cela utilise l’attribut @media pour inclure un bloc de propriétés CSS uniquement si la condition énoncée est vraie.
Exemple : Si le navigateur une résolution inférieure à 480px, la couleur de fond changera en bleu
Sans oublier les min-width et max-width
Dans notre exemple, vous avez pu voir un max-width trainé, cela est la 2ème chose essentielle dans le responsive design. En effet, cela va déterminer ce que le CSS devra adapté ou non en fonction d’un point de rupture spécifique.
Exemples :
On veut afficher un élément si l’écran à une résolution supérieur à 480px :
min-width: 480px
On veut afficher un élément sur les navigateurs ayant une résolution entre 768px et 1024px :
min-width: 768px and max width: 1024px
Certains tutos permettent d’en savoir plus sur ce genre d’exemples.
Faire des tests
Bien sûr, vous n’êtes pas sans savoir que chaque appareil est différent et qu’ils utilisent parfois une résolution qui leur est propre. En conséquent, il faut passer par une grosse phase de test avec des appareils de différentes dimension afin d’être sûr d’avoir pensé tout. Car il faut savoir que 61% des internautes utilisent des smartphones et tablettes. Il est donc indispensable pour vous de rendre votre site internet responsive Design. C’est un plus que vous devez avoir sans tarder. De nos jours, de nombreux thèmes proposent un site déjà responsive, ou vous n’aurez rien à faire à part peut-être vérifier si tout est ok. A vous de voir comment procéder.
