Le responsive design s’adapte automatiquement à la taille de l’écran sur lequel il s’affiche. 80% des internautes naviguent sur le téléphone, c’est pour cette raison qu’il est important d’adapter l’affichage de votre site à chaque type d’écran.

Restez simple

Les design trop élaborés, qui comportent une quantité superflue de JavaScript ou de Flash, ne font pas bon ménage avec les tablettes ou les smartphones. Appuyez-vous plutôt sur une base épurée, avec un style facilement modifiable.

Les éléments les plus importants de votre page, comme les menus ou les outils de navigation, ont tout intérêt à être réalisé à partir de techniques simples, qui ont déjà fait leur preuve.

Respectez les dimensions d’écran des utilisateurs

Le media queries désigne un module, une spécification CSS3, qui permet d’adapter le contenu d’une page Internet à des conditions particulières. La plupart du temps, il est mis à contribution pour modifier l’affichage d’une page Web, selon la hauteur et la largeur de l’écran utilisé pour la navigation. Il serait donc judicieux de faire appel à cet outil pour que votre présentation s’adapte automatiquement à celle de l’écran.

Voici la liste des résolutions les plus fréquentes :

  • Smartphone : de 480 à 720 px
  • iPad : 720 à 768 px
  • Tablette en mode portrait : 768 à 900 px
  • Tablette en mode paysage : 900 à 1024 px
  • Ordinateur : 1024 à 1200 px

Pensez ergonomie

Le moyen le plus simple d’adapter sa présentation à tous les formats d’écran est d’utiliser des colonnes, qui peuvent s’agencer les unes par rapport aux autres. Mieux encore : indiquez des valeurs relatives pour leur taille, plutôt que des dimensions. Ainsi lorsque les internautes navigueront sur des supports différents  ils pourront tourner leur écran : vos colonnes doivent suivre le mouvement.

Insérez des images responsive

Les images aussi doivent se résoudre à se présenter dans un plus petit format. Il n’y a rien de plus désagréable pour un utilisateur que d’être obligé de scroller pour faire défiler l’intégralité d’une simple photo. Il faut donc penser à prévoir le redimensionnement dès leur insertion.

Fixez des limites

Il faut que le design s’adapte à l’écran, mais ce n’est pas une raison pour étirer des colonnes de manière à rendre le tout moins ergonomique. Indiquez toujours des dimensions maximales et minimales pour chaque zone. Dans votre feuille de style, vous avez établi la police des caractères, la taille des photos, des blocs, avec une hiérarchie entre tous ces éléments.

Réfléchissez à la cohérence de l’affichage

Sur l’écran d’un ordinateur, vous disposez de nombreuses colonnes ou placer vos éléments. Sur un portable, ces colonnes s’aligneront les unes en dessous des autres. Pour éviter que le contenu le moins important apparaisse en haut de page, définissez dès le départ l’ordre des blocs, de manière linéaire.

Gardez seulement l’essentiel

Certains blocs n’auront d’ailleurs aucune raison d’apparaître dans un contexte mobile, car ils ne seront pas utilisés : faites-les disparaître, tels que certaines publicités ou rubriques d’aides.

Assurez un affichage adapté

Certains supports mobiles vont tenter de visualiser votre design comme s’ils étaient des écrans d’ordinateur. Insérez dans la balise head une commande viewport qui obligera le navigateur à respecter réellement ses dimensions et donc à profiter du responsive design que vous aurez préparé.