ResponsiveLes appareils mobiles prennent de plus en plus de place dans nos vies. En conséquence, il est impossible lors de la conception d'un site web de faire fi des multiples dimensions d'écrans qu'ils engendrent. D'où l'importance d'adopter une approche responsive.
Pour ce faire, il faut abandonner nos idées rigides:
- 🚫 Canvas prédéterminé
- 🚫 Unités de mesure absolues
- 🚫 Positionnement en absolu et en px toujours par rapport au body
Ça peut paraître compliqué à première vue, mais si on prend le temps d'analyser le tout calmement, nous verrons que ce n'est pas sorcier!
L'approche adaptive utilise plusieurs mises en page prédéfinies (ex: mobile, tablette, grand écran, etc.). En fonction de la dimension du navigateur, la mise en page la mieux adaptée est affichée.
Le contenu est fluide et donc s'ajuste parfaitement à la dimension de l'écran, peu importe cette dernière.
You put water in a cup, it becomes the cup;
You put water into a bottle, it becomes the bottle;
You put it in a teapot, it becomes the teapot.
Les sites responsives et adaptives sont similaires, en ce sens où ils s'ajustent à leur environnement (généralement la largeur du navigateur), mais divergent dans leur façon de faire.
À gauche, responsive. À droite, adaptive.
À l’heure actuelle, le plus gros du trafic du Web est réalisé via des appareils mobiles ! Plus de 60 % du volume de visites est effectué en surfant sur la toile via un téléphone mobile ou une tablette.
La définition de l’approche mobile-first : stratégie de conception pour la réalisation des sites web en commençant par les versions mobiles afin d’optimiser au mieux le développement.
L’idée fondamentale dans cette conception de site web est de se focaliser sur l’essentiel pour la version mobile, puis tendre vers une version tablette et desktop plus avancée, en ajoutant des interactions, des effets plus complexes, etc.
Article en anglais mais vous pouvez activer la traduction de la page.