Responsive design
Conception de sites web adaptatifs
Adapter le rendu d’un site web pour smartphone, tablette, ordinateur.
Adaptation de la disposition (ex. menu hamburger), certains éléments masqués…
La conception de sites web adaptatifs (responsive web design) regroupe différents principes et technologies ayant pour but de faciliter la consultation d’un site web de façon optimale quel que soit l’appareil utilisé.
Les sites web conçus avec une approche de responsive design utilisent des techniques de codage et de mise en page spécifiques pour que les éléments de la page se réorganisent et se redimensionnent dynamiquement en fonction de la taille de l'écran.
La conception de sites web adaptatifs repose sur l’utilisation de la règle @media en CSS.
Quelques idées à prendre en considération :
- Menu hamburger sur terminaux de petite taille
- Éviter l’utilisation du zoom ou du défilement, peu pratique pour la navigation
- Privilégier les tailles relatives, en % ou em, plutôt qu’absolues (pt, px) I 1em = taille de la police par défaut du navigateur
- Privilégier des images vectorielles (formats .svg) I sinon, aspect « pixelisé » en cas d’agrandissement (formats .gif, .jpg, .png)
Tester le rendu responsive : https://www.responsinator.com
Mobile-first : en 2018, plus de la moitié des pages web étaient consultées depuis un mobile !
Google utilise dorénavant la version mobile de votre site web pour son indexation.
