Rendre son site responsive design

Rendre son site responsive design

Tout d’abord savez vous ce qu’est le responsive design ? Si oui, vous pouvez passer à la suite. Dans le cas contraire je vous laisse lire notre article à ce sujet ici

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.

Connaître les points de rupture

Les résolutions les plus courantes peuvent être divisé en 6 points de ruptures majeurs :

Les “must have” :

< 480

les smartphones de 1ère génération

< 768

les smartphones les plus modernes ainsi que les Ipad en mode portrait

> 768

les tablettes en mode paysage, les grandes tablettes et les ordinateurs

Les “nice to have” :

< 320

les smartphones avec une très faible résolution

768-1024

les tablettes et Ipad en mode portrait et paysage

> 1024

les ordinateurs

responsive design

Bien sûr il faut se concentrer sur les “must have” car ce sont vraiment les points de rupture essentiels. C’est en quelque sorte le strict minimum si l’on veut faire du responsive design. Et si vous êtes plutôt quelqu’un d’exigeant ou si vous voulez offrir la meilleure navigation possible à vos visiteurs penché vous sérieusement sur les “nice to have”. De même nous vous conseillons d’avoir une version “full desktop” supérieur à 1024px.

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

css

Nous vous avons parlé des min-width et max-width ? Non pas encore, mais ça arrive.

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

La concept de linéarisation

Sur mobile il faut absolument adopter le concept linéarisation. En effet, sur mobile on affiche pas les colonnes les unes à côté des autres mais les unes sous les autres. En conséquent, on utilise des lignes et non des colonnes.

linérarisation

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.

Partagez cette article sur vos reseaux sociaux favoris ?

Laisser un commentaire