Qu’est-ce qu’on entend dire par responsive design ?

responsive designVous souhaitez fidéliser vos visiteurs ? Vous souhaitez qu’ils passent plus de temps sur votre site ? Et si vous essayez le responsive design…

Pourquoi le responsive web design est nécessaire ?

Parce que les types d’écrans sont aujourd’hui variés. Il faut pouvoir adapter votre contenu web aux différents formats.

Le Responsive Design facilite la navigation et améliore l’expérience utilisateur quand il consulte le site sur un appareil mobile.

Le Responsive Web Design est fréquemment confondu avec l’Adaptive Design qui est un concept plus large. Ces deux méthodes de conception permettent d’améliorer l’ergonomie mobile du site internet. C’est un enjeu important pour les entreprises.

responsive design

Sommaire

 

1. Qu’est-ce qu’on entend dire par responsive design ?

Le terme « responsive web design » a été utilisé pour la première fois par Ethan Marcotte dans article A List Apart en mai 2010.

Ensuite, il va décrire sa pratique et sa théorie du responsive design dans un livre appelé « Responsive Web Design » et publié en 2011. Cette dernière se contente des adaptations du côté du client : CSS3 Media Queries, images fluides et grilles flexibles.

Par définition, le Responsive design renvoie à une approche de conception web qui permet d’élaborer des sites offrant à l’utilisateur une expérience de navigation et de lecture optimale, et ce quelle que soit la gamme d’appareil utilisé : ordinateur de bureau, smartphone, tablette, liseuse, etc.

D’autre part, une bonne expérience utilisateur « Responsive » doit impliquer un minimum de recadrage, de redimensionnement (zoom) et de défilements multidirectionnels de pages.

 

2. Site dédié, application ou responsive design ?

Il existe 3 moyens pour véhiculer le contenu web sur des appareils connectés : une version responsive de site web, une application native et un site dédié.

Par ailleurs, chaque solution présente ses avantages et ses inconvénients. En fonction de vos contraintes (budget, délais, etc.) et besoins, il pourra être plus intéressant d’opter pour l’une ou l’autre.

 

2.1. Un site dédié

Développer un site dédié consiste à créer deux ou plusieurs entités diverses en fonction du dispositif visé : un site principal, un site pour tablettes, un site pour smartphones, etc.

Un test initial côté serveur détecte souvent le type d’appareil et renvoie vers une adresse web dédiée.

 

⇒ Les avantages du site web dédié

  • Vous pouvez affiner la structure du site et son contenu en regard du périphérique utilisé, et ce de façon précise
  • Vous avez la possibilité de cibler et de vous adapter à des fonctionnalités différentes (notamment le touch)
  • Le site web dédié peut être une alternative “rapide”, en attendant une refonte responsive et complète de votre site internet

 

Les inconvénients du site web dédié

  • Les contenus dupliqués (“duplicate content”)
  • La maintenance de plusieurs adresses web et de plusieurs versions de site rendra difficile leur indexation par un moteur de recherche
  • La détection côté serveur (“UA sniffing”) est généralement biaisée ou non à jour

 

2.2. Une application native

Il s’agit d’un produit qui est développé spécifiquement dans différents “langages” (Android, iOS, Windows Phone). En plus, il se télécharge et se référence dans un “Store” (Windows store, AppStore, Google Play).

D’autre part, cela favorise certains avantages.

 

Les avantages d’une application native

  • Une prise en charge facilitée de fonctionnalités natives (notifications, touch, GPS, accéléromètre, etc.)
  • La possibilité d’une installation sur son périphérique
  • Une « acclimatation » complète au périphérique (performances, ergonomie, densité de pixels)
  • La présence de votre marque sur l’AppStore
  • La possibilité de disposer d’un “raccourci” sur le smartphone de l’utilisateur

 

Les inconvénients d’une application native

  • La diversité des langages (propres à iOS, WindowsPhone, Android, etc.)
  • Le prix du développement, de la maintenance pour chaque système d’exploitation et des licences
  • La mise à jour de l’application exige une intervention de l’utilisateur
  • Le contenu n’est pas indexable par un moteur de recherche web classique

 

2.3. Une version responsive design

Aujourd’hui, des centaines de tailles et formats d’écrans divers se connectent à chaque seconde. Dans ce cadre, la méthode du Responsive Web design semble être la meilleure solution de par son objectif principal. Ce dernier consiste à s’adapter à tout type d’appareil de façon transparente pour l’utilisateur.

 

Les avantages d’une version responsive design

  • Les coûts et les délais sont souvent inférieurs aux techniques citées ci-haut
  • La maintenance de projet est facilitée : un seul fichier HTML, une seule feuille de style, etc
  • Une mise à jour transparente
  • Un déploiement multi-plateformes
  • Le Responsive design peut avoir lieu après la conception initiale du site bien que cela n’est pas en faveur du référencement : en effet, Google met en avant les sites qui sont adaptés au mobile dans ses résultats de recherche

 

Les inconvénients d’une version responsive design

  • Il vous faut de bonnes connaissances techniques et une bonne et constante veille technologique
  • Vous devez prévoir plusieurs tests variés durant le projet (“device labs”, simulateurs)
  • Avec un responsive design, il est moins facile de contourner les limites ergonomiques et les performances des navigateurs web
  • Cela prend plus de temps que de ne rien faire. En effet, il faut envisager 25% du temps supplémentaire

Certes, le responsive design est une solution, toutefois, il ne faut pas le considérer comme la seule éventualité ou comme la solution magique.

Par ailleurs, il est possible d’employer différentes méthodes.

 

3. Responsive design , Adaptatif ou Fluide ?

D’après Wikipedia, le Responsive Web Design est synonyme de « site web adaptatif ».

Ainsi, il faut distinguer entre sites web statiques, sites web liquides, sites adaptatifs et Responsive :

3.1. Le design « Statique »

Le design statique, appelé aussi design fixe, renvoie à des dimensions figées (960px, par exemple), et ce indépendamment de la surface de l’écran. La plupart des sites web étaient développés sur cette base avant l’apparition du Responsive Web Design à partir des années 2010.

 

3.2. Un design “Fluide”

Le site web fluide, appelé aussi « liquid », possède des largeurs de colonnes qui sont toutes exprimées en unités variables : pourcentages, vw, em, etc. Ce type de sites s’adapte de façon générale automatiquement à la taille de la fenêtre, jusqu’à une certaine mesure.

 

3.3. Un design “Adaptive”

Le design Adaptatif est une version améliorée du design statique. En effet, les unités de largeur sont fixes, néanmoins, elles sont différentes en fonction de la taille de l’écran, détectée à travers un CSS3 Media Queries.

Par ailleurs, ce design prend en considération uniquement des principaux points de rupture (320px, 480px, 768px, 1024px, etc.). Ensuite, il adapte le gabarit en conséquence. Enfin, on se retrouve avec assez de gabarits fixes que de points de ruptures.

 

3.4. Responsive design

Le site web Responsive représente une version optimisée du design liquide relié à des méthodes CSS3 Media Queries. Cela permet de modifier les styles (par exemple, la réorganisation de la page) en fonction de certains critères afin de pouvoir s’adapter totalement à la taille de l’écran, et ce indépendamment du point de rupture.

 

Conclusion

Notez qu’il existe des sites (comme le site liquidapsive.com) qui proposent de tester visuellement ces divers types de design.

Techniquement, le RWD (Responsive Web design) c’est quoi ?

Le Responsive Web design nécessite actuellement – généralement – les technologies et les méthodes suivantes :

  • Une grille fluide : les largeurs des éléments de structure doivent être débarrassées des unités de pixels.
  • Des médias, des images et des contenus flexibles pour leur permettre de ne pas « déborder de leur parent » si celui-ci se restreint.
  • L’affichage doit être adapté au Viewport du terminal.
  • Des CSS3 Media Queries qui permettent d’appliquer diverses règles de styles CSS en fonction de la taille, le ratio du device ou l’orientation.
  • Des adaptations conditionnelles (menu de navigation) basées sur jQuery ou JavaScript, côté client.
  • Les philosophies de type “Mobile First” et “Enrichissement progressif”. Cela facilite l’accessibilité, la performance des pages produites et leur compatibilité.
  • Des parties générées et détectées côté serveur (RESS) afin d’accélérer l’affichage de certaines ressources ou certains composants.
5/5 (1 Review)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *