<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=410661216031617&amp;ev=PageView&amp;noscript=1">

Elu "mot-clé de l'année 2013" par le magazine Mashable, le Responsive Web Design (RWD) fait parti aujourd'hui de tous nos projets web, mais reste toujours aussi nébuleux et insaisissable même chez les professionnels !

Préambule

Le Responsive Web Design, ou conception web adaptative est une approche de conception Web qui vise grâce à différents principes et techniques, à offrir pour l'utilisateur une consultation confortable qui pourra s’auto-adapter quelle que soit son support de lecture (Desktop, Téléphones mobiles, Tablettes, Liseuses …).
Le terme de "Responsive Web Design" a été cité pour la première fois par Ethan Marcotte dans un article de A List Apart publié en mai 2010.

Quelles sont les principales techniques de Responsive Web Design ?

Le Responsive Web Design fait appel aussi bien à des méthodes de conception ergonomique, puisqu'il ne s'agit plus de concevoir autant de parcours qu'il y a de familles de terminaux mais de concevoir une seule interface auto-adaptable. Mais également à des requêtes (les Media Queries) poussant des styles CSS différents en fonction de la taille de l'écran de l’internaute.
Cela engendre des économies dans la conception et la maintenance de sites web bénéficiant de ce mode de conception.

Téléchargez le tableau périodique de Mendeleiev revisité pour l'UX Designer

Site dédié, application ou responsive ? Quelle solution ?

Lorsque l’on veut proposer à ses visiteurs un site visible sur mobile, trois solutions s’offrent à nous :

  • Créer un site dédié
  • Développer une application
  • Créer un site en version responsive

Chacun de ces choix possède ses avantages et ses inconvénients.

 

Un site dédié

Cela consiste à concevoir un site dédié pour chaque support : un site desktop, un site pour tablettes, un site pour smartphones, etc.

Avantages

  • La structure et contenus du site dédié sont précisément adapté au support
  • Possibilité de développer des fonctionnalités variées (notamment le touch)
  • Peut être une alternative "rapide", en attendant une refonte complète (et responsive) de son site web

Inconvénients

  • Le contenu dupliqué
  • La maintenance de plusieurs versions de site et de plusieurs adresses web prend énormément de temps
  • Les différentes adresses web sont moins facilement indexables par les moteurs de recherche

 

Une application mobile

Une application est un produit développé spécifiquement dans divers langages (iOS, Android, WindowsPhone) et qui se télécharge et se référence au sein d'un "Store" (AppStore, Google Play, Windows store).

Avantages

  • Une prise en charge facilitée de fonctionnalités natives (touch, accéléromètre, notifications, GPS, etc.)
  • Un total ajustement au périphérique (ergonomie, performances, densité de pixels)
  • Visibilité de la marque dans les « stores »
  • Accès directe au smartphone de l’utilisateur

Inconvénients

  • Nécessite un développement dans plusieurs langages propres à iOS, Android, WindowsPhone, etc.
  • Cette solution représente un certain coût en ce qui concerne le développement et la maintenance contenus
  • Non indexé par les moteurs de recherche
  • La mise à jour de l'application nécessite une action de l'utilisateur

 

Un site responsive

Cette solution paraît la plus facile à l'heure où des centaines de formats d'écrans différents se connectent à chaque instant.

Avantages

  • Le Responsive peut être envisagé après la conception initiale du site même si ce n'est pas l’idéal
  • Le coût ainsi que les délais sont généralement inférieurs aux autres solutions
  • Une mise à jour transparente et un déploiement multi-plateformes
  • La gestion du projet est facilité

L'un des avantages indéniables depuis quelques temps est que Google met en avant les sites "adaptés au mobile" au sein de ses résultats de recherche.

Inconvénients

  • Il est difficile de contourner les limites ergonomiques et de performances des navigateurs web
  • Il est nécessaire de prévoir des tests tout au long du projet

Il est fréquent qu'un cumul de différentes méthodes soit employé : par exemple un site à la fois dédié et responsive, ou un site responsive complété d’une application.

Autres notions à connaître :

DESIGN STATIQUE

La mise en page statique correspond à la grande majorité des sites web construit avant l'arrivée du Responsive Web Design dans les années 2010.
Il utilise des dimensions figées (souvent 960px) quelle que soit la surface de l'écran.
Par exemple, si la fenêtre du navigateur est plus large que le site, il y aura du blanc sur les côtés. Par contre, si elle est moins large, il y aura une barre de scroll horizontal en bas de la fenêtre pour pouvoir accéder à la partie cachée, ce qui n’est pas du tout ergonomique.

DESIGN ADAPTATIVE

Un design Adaptatif est une amélioration du design statique : les unités de largeur sont fixes, mais différentes selon la taille de l’écran. Lorsque la fenêtre du navigateur est redimensionnée, à chaque franchissement de points de rupture (souvent : 320px, 480px, 768px, 1024px), une mise en page correspondante est utilisée.

DESIGN LIQUIDE

Ici les largeurs des différents éléments, sont exprimées en pourcentage, ce qui fait que le site s’adapte de façon automatique à la taille de la fenêtre. Ce design n’est pas très adapté aux très grandes tailles d’écrans ni aux très petites tailles.

DESIGN MOBILE FIRST

Système qui privilégie la construction d'une ergonomie mobile avec un faible espace d’affichage avant de concevoir celle pour « desktop » (ordinateur de bureau) qui reste le standard de l'affichage traditionnel.
L'augmentation constante des ventes via smartphone accroît l’intérêt de cette démarche pensée pour améliorer l'expérience utilisateur...


Parmi les outils destinés à la création de site web, le CMS Drupal a élaboré la version 8 de son CMS en intégrant cette pensée « Mobile First ».

Publié par Adimeo

Un conseil, un projet, un devis ?
Nous repondons a toutes vos questions !

N'hésitez pas à nous contacter pour plus d'informations

Nous contacter

Sur les mêmes sujets