Aller au contenu

Introduction

Responsive Design

Avec la diversité des supports utilisés pour surfer sur le web, il est primordial de prévoir un affichage qui s'adapte à différentes tailles d'écrans.

Le responsive design se base sur l’idée que le contenu doit « répondre » aux caractéristiques de l’appareil de l’utilisateur en s’ajustant automatiquement.

En général pour un site web moderne, 3 modes de rendu sont conçus : petits écrans (smartphone), moyens écrans (tablette) et écrans larges (ordinateur).

Les seuils de largeur d'écran utilisés pour basculer d'un mode de rendu à un autre sont appelés les points de rupture. Pour un mode de rendu, la disposition et la taille des éléments constituant la page peut varier. Si des éléments peuvent être masqués par défaut sur un écran de taille réduite, il est cependant recommandé de proposer les mêmes fonctionnalités/informations quel que soit le support.

alt
Illustration du changement d'organisation des contenus d'une page en fonction des points de rupture.

Media Queries

Media Queries : Ce sont des règles CSS qui appliquent des styles spécifiques en fonction des caractéristiques de l’appareil, comme la taille de l’écran, la résolution ou l’orientation.

Objectif principal : Permettre aux développeurs d’adapter le contenu et le style d’un site en fonction des caractéristiques des appareils, pour une meilleure accessibilité et expérience utilisateur.

Rôle des Media Queries :

Elles permettent de détecter certaines caractéristiques (ex. : largeur d’écran) et d’appliquer des styles conditionnels.

Exemple : Sur un écran de smartphone, les éléments d’une page peuvent être affichés en pile, alors que sur un écran d’ordinateur, ils apparaîtront côte à côte.

Responsive Design Source : Image de freepik

Pourquoi les Media Queries sont Essentielles pour l’Accessibilité et l’Expérience Utilisateur

Accessibilité :

  • Assurer une lisibilité et une navigabilité optimale pour tous les utilisateurs, quel que soit leur appareil ou leur capacité (par exemple, sur des écrans de faible résolution).

  • Adapter l’interface aux besoins spécifiques de certaines catégories d’utilisateurs, comme les personnes utilisant des dispositifs de lecture assistée.

Expérience Utilisateur (UX) :

  • Favoriser une mise en page qui s’adapte sans compromis sur la lisibilité ni sur les fonctionnalités.

  • Garantir une continuité de l’expérience entre les différents types d’appareils, ce qui est crucial pour des sites à usage fréquent ou professionnel.

Historique Rapide

Origines du Web Fixe :

  • À l’origine, les sites web étaient créés pour des écrans de bureau avec des résolutions fixes, sans tenir compte des variations d’appareils.

  • Le contenu était figé, et la navigation sur d’autres types d’appareils était souvent médiocre ou impossible.

Naissance du Responsive Design :

  • Avec l’essor des smartphones et des tablettes, le besoin d’un design adaptable a pris de l’importance.
  • Ethan Marcotte, en 2010, a popularisé le concept de responsive design, incluant les media queries, les grilles flexibles, et les images fluides comme éléments centraux.

CSS3 et Media Queries :

  • Avec CSS3, les media queries sont devenues une spécification standard du CSS, permettant de cibler précisément divers types d’écrans et de résolutions.

  • Aujourd’hui, elles sont au cœur des techniques modernes de développement front-end, utilisées avec des frameworks (Bulma, Bootstrap, Foundation...) et des méthodologies CSS comme Mobile First.