Compatible mobile (Responsive)

 

RWD Responsive Web Design icon by WebExpress

Responsive

Un site responsive s’adapte dynamiquement à toutes les résolutions d’écran.

Adaptabilité

Un site responsive, ou optimisé mobile, s’adapte dynamiquement (sans rechargement) à la taille d’écran disponible, pour garantir une expérience utilisateur optimale sur tous les supports :

  • mobiles
  • tablettes, et phablettes
  • fixes, TVs, etc.

Avantage : Une seule version de site à maintenir.

Terminologies équivalentes : Responsive, adaptatif et Responsive Web Design (RWD), compatible mobile, etc.

Principe de fonctionnement

Des mécanismes techniques détectent la taille de l’écran et appliquent des règles de redimensionnement appropriées directement dans le navigateur.

Le site redimensionne son contenu pour l’adapter de la meilleure façon à la dimension disponible de l’écran.

 
Responsive Design - le contenu est comme l'eau
Analogie visuelle avec la relation entre un contenant et son contenu – Inspiré par Josh Clark et Bruce Lee
 

Expérience utilisateur

Sur mobile, les objectifs sont de :

  • ne jamais avoir besoin de « zoomer » la page
  • rendre les textes toujours parfaitement lisibles
  • proposer des menus simplifiés
  • prendre en compte efficacement l’aspect tactile (facilité de défilement des pages, etc.)

  • Pour les concepteurs du site, l’approche responsive permet de n’avoir à développer qu’une seule version du site (pas de ‘version mobile’ du site à maintenir en parallèle).

Les actions mises en oeuvre

  • ajustement de la taille des polices de caractères
  • redimensionnement des images
  • transformation du menu horizontal en menu vertical, non invasif, accessible par une petite icone (menu ‘hamburger’)
  • bascule des colonnes en empilements de blocs verticaux
  • masquage éventuel de certains blocs non essentiels

 

Comportement d’affichage dynamique responsive

Technologies employées

Normalement le CSS permet de gérer seul l’intégralité des règles qui vont rendre un site responsive. Dans certains scénarios élaborés, il peut être fait appel à du javascript pour executer des calculs.

rwdhtml5 css3 javascript
HTML5, CSS3, Javascript, media queries, jQuery, SVG, …

Tester son site

Comment tester si un site est responsive ?

  • Sur un fixe, il suffit de réduire suffisamment la largeur fenêtre du navigateur web, ce qui doit provoquer le passage en version optimisée mobile.
  • Sur un mobile, en général le seul besoin de zoomer caractérise simplement un site non optimisé mobile.

En savoir plus

Utilisation du glossaire WP

Vous pourriez aussi aimer...