Compatible mobile (Responsive)

* rwd

Compatible mobile (Responsive)

Un site compatible mobile, ou responsive, s'adapte à toutes les résolutions d'écran.

Utilisation du glossaire WP

Un site responsive adapte dynamiquement la taille de ses contenus pour les rendre lisibles sur n’importe quelle taille 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.

On parle de résolution d’écran, en pixels. Par exemple 1920 sur 1080, pour un écran fixe en mode ‘Full HD’, 320 x 480 pour le premier Iphone, 3840 x 2160 pour le mode ‘4K’, etc.

Avantage : Une seule version de site à maintenir.

Terminologies équivalentes : Responsive, adaptatif, Responsive Web Design (RWD), compatible mobile, site web adapttif, site web réactif, 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.

 
Analogie visuelle avec la relation entre un contenant et son contenu - Inspiré par Josh Clark et Bruce Lee
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 responsive UI
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