Webdesign

C'est quoi le Responsive Web Design ?

Article par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (192002 lectures)
Tags : design, application, responsive, dédié, rwd, liquid, adaptive, mobile-first

Consacré "mot-clé de l'année 2013" par le célèbre magazine Mashable, le Responsive Web design (RWD) est aujourd'hui incontournable dans nos projets web (et dans les cahiers des charges de nos clients)… mais demeure toujours aussi confus et insaisissable même chez les professionnels !

Voici donc une petite introduction pour mieux comprendre ce phénomène...

Ébauche de définition

multiscreen 2

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é

web mobile

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

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

Un site web Liquide (ou fluide) 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.

Démo design Liquide

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.

Démo design Adaptatif

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.

Démo design Responsive

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 !

Le récapitulatif en une image ? 

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

==> voir l'image en plus grand

Ressources

Crédits illustration "iceberg" : Stéphanie Walter

Commentaires

QuentinC a dit le

Merci pour cet article, il donne une bonne vue d'ensemble rapide du sujet.

par contre :
> 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

Les raccourcis, ce n'est pas exclusif aux applications natives. En tout cas sur iOS 6 et 7, on peut en mettre un vers une page web sur l'écran d'accueil si on veut. Et en plus, on peut le nommer comme on le souhaite...

Raphael a dit le

@QuentinC : oui on peut, c'est c'est beaucoup moins naturel que pour une app native où c'est automatique.

Digiwebpro a dit le

En effet, c'est le mot clé en vogue avec le flat design. Dommage de ne pas avoir cité Boostrap qui est la référence ...

kaimiteNet a dit le

Bonjour et merci pour l'article !

Un petit point négatif pour le Responsive c'est de "forcer" l'utilisateur a télécharger des informations qui ne seront pas affichées selon son terminal.

Avec le bootstrap de Twitter on a par exemple différentes class ".hidden-xxx" pour afficher / masquer des blocs selon l'écran...

J'ai utilisé un thème pour Magento avec une navigation doublée. Une pour la version desktop avec une richnav et une autre adaptée au mobile. Mais dans le code source les 2 étaient là !

Je pense qu'on peut faire un site dédié sans forcément avoir 2 urls.
Détecter le mobile / tablette et charger un thème spécifique.

Perso j'ai tendance à procéder comme ça. Mais niveau maintenance c'est x templates à modifier à chaque maj... C'est un choix à faire en fonction de la taille du site...

Kaimite

Raphael a dit le

@Digiwebpro : Bootstrap est un framework, un outil, parmi d'autre. Dire que c'est LA référence, c'est un peu comme dire que Dreameaver est la référence pour produire une page web : c'est un outil qui peut être pratique et pertinent selon ses besoins et son usage... mais il n'est pas du tout inévitable.

D'ailleurs, nous n'utilisons pas Bootstrap (que nous considérons comme trop usine à gaz) dans notre agence.

Raphael a dit le

@kaimiteNet : "Un petit point négatif pour le Responsive c'est de "forcer" l'utilisateur a télécharger des informations qui ne seront pas affichées selon son terminal."

Non, justement.
Tu as sans-doute survolé une partie importante de l'article :

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

Stéphanie W. a dit le

@QuentinC : La même que Raph, je connais très peu d'utilisateurs qui ajoutent des raccourcis de site sur le bureau (je sais même pas le faire sur mon Android) par contre j'ai eu des clients qui voulaient une app "juste" pour être sur le bureau des gens au milieu des autres petites apps, à ce stade c'est une question de branding et d'image du client.

@Digiwebpro Bootstrap la référence en ... ?

@kaimiteNet rien ne t'empêche de faire du RWD plus proprement et justement commencer par le petit, et charger en plus uniquement les ressources supplémentaires pour le grand écran, mais là on touche du doigt la limite responsive/adaptive (au final peu importe le nom en fait). Et pour ton thème Magento, c'est un parfait exemple de responsive non maitrisé, j'ai vu la même combine dans bien des thèmes responsive WordPress :(

Souvent les sites "dédiés" ont justement leur propre url en m. pour que l'utilisateur puisse repasser au site non mobile (flickr, rueducommerce, etc.) Mais effectivement tu pourrais juste changer le template sans changer d'url. Les barrières sont de plus en plus minces au final et les techniques se confondent :) J'ai l'impression que les sites en m. sont voués à disparaître pour uniquement envoyer un HTML/CSS différents après UA sniffing.

Geoffrey C. a dit le

Commentaire constructif :
"mais là on touche du doigt" >> c'est du digital !

motjoy a dit le

Je suis d'accord avec Digiwebpro.

Quel autre framework Responsive peut se vanter d'être autant utilisé que Bootstrap ?

http://web.developpez.com/actu/59152/Twitter-...

Je pense que l'article de Raphael n'apporte pas grand chose de plus que celui de Stéphanie.

L'intérêt d'un nouvel article aurait été d'avoir un cas d'usage d'implémentation mettant en avant un retour concret d'utilisation avec un framework précis.

kustolovic a dit le

@motjoy, si l'article de stéphanie aborde avec pertinence les enjeux et problèmes techniques du responsive web design, celui-ci est plus générique à l'adaptation de site au divers appareils, et constitue ainsi une bonne ressource à mentionner pour quiconque ne comprendrait que peu ces problématiques.
En gros il apporte juste d'être plus généraliste, d'être une entrée en matière.

Merci Raphaël d'ailleurs, à force d'entendre responsive à tort et à travers, c'est toujours bien de remettre l'église au milieu du village.

"Je pense qu'on peut faire un site dédié sans forcément avoir 2 urls.
Détecter le mobile / tablette et charger un thème spécifique. "
Du coup ce n'est plus un site dédié…

@Bootstrap: lourd, pas forcément le mieux équipé. La grande force de Bootstrap c'est surtout que maintenant, la plupart des documents techniques faites par des devs ont de la gueule. :P

Stéphanie W. a dit le

@motjoy : En fait nos deux articles n'ont pas le même public ni la même fonction.
Mon article est destiné à un public averti et aborde le "future" du responsive (enfin il y a un an quoi) et tous les enjeux techniques et ergonomiques au delà des media-queries et grilles fluides.
L'article de Raphaël se veut une explication "simple" pour une public non averti du buzz word "responsive webdesign" que l'ont peut envoyer à un client par exemple (ou à ma maman).
Certes c'est peut-être fait dans le désordre (il vaudrait mieux lire l'intro de Raph puis mon article), mais nous nous sommes rendu compte qu'il n'y avait pas vraiment de ressources "débutant" pour expliquer sans code les différentes options de stratégie mobile (app, site dédié ou rwd, etc.) et cet article est là pour ça :)
Même si nous publions souvent des articles avec un degré technique plus élevé, il ne faut pas oublier qu'il y a dans la communauté des débutants, voir des clients et non initiés pour lesquels ce genre de ressource peut devenir utile. Donc de là à dire qu'il n'apporte pas grand chose de plus je ne suis pas d'accord puisque les buts et lecteurs ne seront pas les mêmes.

Mais @motjoy si tu as un super cas d'utilisation sur un retour concret d'utilisation avec un framework précis et que tu as très envie de le partager avec nous, tu es le bienvenu et je suis sûre qu'on se fera un plaisir de te publier :)

Ten a dit le

+1 aux kiwis, et effectivement proposer un article pour Alsa est très simple, « faisez-le » :D

Pour Bootstrap, ça fait un peu peur les commentaires : aucun des pro-bootstrap ne s’est penché sur Foundation (qui est bien mieux adapté à l’univers mobile que Bootstrap), ou même Pure, ou encore sur le couple jQuery UI + mobile, ou même sur des bases plutôt que des structures (Knacss, Toast, Röcssti…) ?

Bootstrap n’est pas la référence — et certainement pas un outil à mettre en avant lorsqu’on s’adresse à un public de tous niveaux.

motjoy a dit le

Pour Foundation, la première place est auto-proclamée sur la home du site :
"The most advanced responsive front-end framework in the world" :D

Mais ce que je trouve intéressant dans ton commentaire Ten, c'est que tu cites différents frameworks, ce qui donne différents points d'entrée pour les lecteurs.

Par exemple, je ne connaissais pas Foundation et ça me donne envie d'y jeter un coup d'oeil. ( donc je n'aurai pas perdu ma matinée :) )

La plus value d'un article sur ce site est aussi parfois dans les commentaires où la discussion continue de vivre.

Je n'ai pas souhaité dénigrer la qualité de l'article de Raphael sur l'aspect théorique, mais c'est clair que je serais intéressé par un débat argumenté sur les atouts et les faiblesses des frameworks responsives sur le WEB.

A continuer peut-être sur le forum :)

Stéphanie W. a dit le

@motjoy : "A continuer peut-être sur le forum :)" ==> +1 je te laisse ouvrir le poste dans le bar ^^
(à une époque on avait des posts du forum dédié à la discussion des articles mais ça a disparu je crois)

Et ne pas oublier non plus que le RWD (ou la stratégie de contenu mobile) c'est pas QUE le technique et les frameworks mais aussi l'ergonomie, le design, le dev côté serveur, la gestion client et un choix entre site mobile dédié, application mobile ou site responsive va au final également impacté ces étapes du projet :)

emg75 a dit le

Tout d'abord merci pour cet article fort éclairant.

Sur le plan technique, je reste un peu dubitatif sur le fait que le RWD implique nécessairement une grille fluide. Si tel est le cas comment nommer les sites dont la dimension des blocs seraient définis en pixels mais changeraient de mise en forme en fonction de la taille de la fenêtre (via media queries) ?

Il me semble d'ailleurs que fixer la largeur des blocs en em ne les rend pas plus fluide que le pixels (seul le % a cette vertu), juste plus flexible peut-être.

Emmanuel

kustolovic a dit le

@emg75: Pourtant c'est le point de départ de la réflexion du responsive: face à la quantité de formats d'écran variés toujours grandissante, ne plus s'adapter en fonctions de quelques dimensions choisies, mais s'adapter pour toutes les situations. La grille fluide est le départ de cette réflexion, complétée par d'autres moyens pour en améliorer la qualité.
Définir des tailles fixes en pixels selon certaines conditions données ne permet pas de résoudre ce genre de problèmes, on se retrouve plutôt avec des visuels dédiés à certains appareils, ce qui ne sera jamais optimal.
Par contre certains sites limitent la taille maximale en pixels (notamment ceux s'étant adaptés en RWD sans refondre le visuel, mais pas seulement).

emg75 a dit le

@kustolovic : Je n'ai rien contre les sites dont le design est fluide et je comprend bien l'enjeu d'une telle mise en oeuvre, notamment pour les petites surfaces (smartphones, phablettes, mini tablettes). Ma question portait plutôt sur sur le problème de la définition du Responsive Web Design. Par exemple comment définir le site qui présente la google nexus : http://www.google.fr/nexus/7/, que ce soit une bonne ou mauvaise pratique ? Des pistes ? un nouveau terme à inventer ?

Raphael a dit le

@emg75 : Ce site correspond parfaitement à la définition d'un design "Responsive". Pas besoin de nouveau terme à inventer ;)

papay84 a dit le

@Raphael : si vous pouvez m'aider a résoudre ce problème svp?

ma page d’accueil de mon site mobile est devisé sur 3 partie(3 images différent pour chaque partie), je vais que la première partie soit affiché sur tout l’écran de mobile avec la possibilité de scroller en bas pour voir le reste de la page?