Optimisé mobile – Responsive

Un site dit optimisé mobile est capable de s’adapter à tous les supports :
 
– mobiles
– tablettes, et phablettes
– fixes, TVs, etc.


L’objectif est de garantir une expérience utilisateur optimale sur tous les supports.

Avantages : Une seule version de site unique à 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.

 
le contenu est comme l'eau
Analogie visuelle avec la relation entre un contenant et son contenu
 

Expérience utilisateur

Sur mobile, les objectifs sont de :

– ne jamais avoir besoin de « zoomer »
– rendre les textes toujours parfaitement lisibles
– proposer des menus simplifiés
– prise en compte efficacement l’aspect tactile (facilité de défilement des pages)

Les actions mises en oeuvre

– ajustement des police de caractères
– redimensionnement des images
– menus à la demande et en liste verticale (menu ‘hamburger’)
– bascule des colonnes en listes

Technologies employées

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 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

Article ‘Site web adaptatif’ / Wikipedia

Vous pourriez aussi aimer...