Le Responsive Web design est une approche de conception Web qui vise à l’élaboration de sites offrant une expérience de lecture et de navigation optimales pour l’utilisateur quelle que soit sa gamme d’appareil (téléphones mobiles, tablettes, liseuses, moniteurs d’ordinateur de bureau).

Une expérience utilisateur “Responsive” réussie implique un minimum de redimensionnement (zoom), de recadrage, et de défilements multidirectionnels de pages.

Le terme de “Responsive Web design” a été introduit par Ethan Marcotte dans un article de A List Apart publié en mai 2010.
Il décrira par la suite sa théorie et pratique du responsive dans son ouvrage “Responsive Web Design” publié en 2011. Celle-ci se limite à des adaptations côté client (grilles flexibles en pourcentages, images fluides et CSS3 Media Queries).

Site dédié, application ou responsive ?

Nous disposons actuellement de trois moyens pour véhiculer le contenu web sur des appareils connectés : un site dédié, une application native et une version responsive de site web.

Sachez que chaque solution a des avantages et des inconvénients : selon vos besoins et contraintes (notamment de budget et de délais), il pourra être parfaitement pertinent d’opter pour l’une ou l’autre.

Un site dédié

Un projet de site dédié consiste à concevoir deux ou plusieurs entités différentes selon le dispositif visé : un site principal, un site pour smartphones, un site pour tablettes, etc.

Généralement, un test initial côté serveur détecte le type d’appareil et renvoie vers une adresse web dédiée (m.monsite.com par exemple).

Les avantages des sites web dédiés sont :

  • La possibilité d’affiner précisément la structure du site et ses contenus en regard du périphérique utilisé
  • La possibilité de cibler et de s’adapter à 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

Mais un site dédié n’est pas exempt d’inconvénients :

  • Le contenu dupliqué (“duplicate content”)
  • La maintenance de plusieurs versions de site et de plusieurs adresses web (moins facilement indexables par un moteur de recherche)
  • La détection côté serveur (“UA sniffing”) souvent biaisée ou non à jour

Une application native

Une application native 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).

Cela lui confère certains avantages :

  • La prise en charge facilitée de fonctionnalités natives (touch, accéléromètre, notifications, GPS, etc.)
  • Un installation possible sur son périphérique
  • Une totale “acclimatation” au périphérique (ergonomie, performances, densité de pixels)
  • La présence de sa marque sur l’AppStore (pour ne citer que lui) et de pouvoir disposer d’un “raccourci” sur le smartphone de l’utilisateur

… Mais aussi certains inconvénients :

  • Un développement spécifique dans plusieurs langages (propres à iOS, Android, WindowsPhone, etc.)
  • Le coût du développement, des licences, et de la maintenance pour chaque système d’exploitation
  • Un contenu non indexable par un moteur de recherche web classique
  • La mise à jour de l’application nécessite une action de l’utilisateur

Une version responsive

À l’heure où des centaines de tailles et formats d’écrans différents se connectent à chaque instant, la méthode du Responsive Web design apparaît comme la “solution de facilité” en vertu de son objectif principal:

s’adapter à tout type d’appareil de manière transparente pour l’utilisateur

  • Des coûts et des délais généralement inférieurs aux techniques citées précédemment
  • Une maintenance de projet facilitée (une seule feuille de style, un seul fichier HTML, etc.)
  • Une mise à jour transparente et un déploiment multi-plateformes
  • Le Responsive peut être envisagé après la conception initiale du site (même si ce n’est pas l’idéal)

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 :

site mobile

Les inconvénients ne sont cependant pas nuls :

  • De bonnes connaissances techniques, et une veille technologique constante, sont indispensables
  • Il est nécessaire de prévoir des tests nombreux et variés tout au long du projet (“device labs”, simulateurs)
  • Il est difficile de contourner les limites ergonomiques et de performances des navigateurs web
  • Faire du responsive, c’est… plus long que de ne rien faire (25% du temps supplémentaire)

Au final, le Responsive Web design n’est qu’un moyen parmi d’autres de parvenir à ses objectifs mais ne doit pas être considéré comme la seule éventualité ni comme une “solution magique” à tous les problèmes.

D’ailleurs, 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 garni de certaines détections côté serveur (on parle alors de RESS), etc.

Le site mediaqueri.es est une excellente ressource pour découvrir d’autres sites web responsive à travers un annuaire.

multiscreen

Responsive, Adaptatif ou Fluide ?

En France, et selon Wikipedia, le Responsive Web Design est un synonyme de “site web adaptatif”.

Techniquement, il conviendrait de distinguer les sites web Statiques, Liquides, Adaptatifs et Responsive :

  • Un design “Static”

Un design statique (ou fixe) se réfère à des dimensions figées (par exemple 960px) quelle que soit la surface de l’écran. La grande majorité des sites web était construite sur cette base avant l’arrivée du Responsive Web Design dans les années 2010.

  • Un design “Fluide”

Un site web Fluide (ou “liquid”) est un site web dont toutes les largeurs de colonnes sont exprimées en unités variables (pourcentages, em, vw, etc.) et qui s’adapte généralement automatiquement à la taille de fenêtre, jusqu’à une certaine mesure.

  • Un design “Adaptive”

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, qui est détectée via CSS3 Media Queries.

Un tel design tient uniquement compte des principaux points de rupture (320px, 480px, 768px, 1024px, etc.) et adapte le gabarit en conséquence. Au final, on se retrouve avec autant de gabarits fixes que de points de ruptures.

  • Un design “Responsive”

Un site web Responsive est une amélioration du design liquide associé à des méthodes CSS3 Media Queries permettant de modifier les styles (ré-organisation de la page par exemple) selon certains critères, pour s’adapter complètement à la taille d’écran, quel que soit le point de rupture.

En résumé

Le site liquidapsive.com propose de tester visuellement ces différents types de design.

et techniquement, le RWD ça implique quoi ?

Iceberg

Depuis sa première appellation en 2010, le Responsive Web design a quelque peu évolué. Il nécessite actuellement – en général – les technologies et méthodes suivantes:

  • Une grille fluide, où les largeurs des éléments de structure sont débarrassées des unités de pixels
  • Des images, des médias et des contenus flexibles leur permettant de ne pas “déborder de leur parent” lorsque celui-ci se restreint
  • Une adaptation de l’affichage au Viewport du terminal
  • Des CSS3 Media Queries permettant d’appliquer différentes règles de styles CSS selon la taille, l’orientation ou le ratio du device
  • Éventuellement des adaptations conditionnelles (menu de navigation) côté client, basées sur JavaScript ou jQuery
  • Une philosophie “Mobile First” et “Enrichissement progressif” facilitant l’accessibilité, la compatibilité et la performance des pages produites
  • De plus en plus souvent de parties détectées et générées côté serveur (RESS), là aussi notamment pour accélérer l’affichage de certains composants ou ressources.

Au final, le Responsive Web design, c’est pas si facile ! Mais chez TOPDESIGN tout est facile 😉

Le récapitulatif en une image ?

responsive/adaptive/mobile dédié pour quelle utilisation ?

Ressources

Crédits illustration “iceberg” : Stéphanie Walter