Le responsive design : La problématique du multi-écran (2)

publié 20 mars 2012 par dans la catégorie STJOHN'S LAB

Notre première solution pour mettre en œuvre une politique multi-écran est celle qui a indubitablement le vent en poupe actuellement : le responsive design, qui permet de s’appuyer sur un site unique.

Le concept :

L’idée de base est d’avoir un site unique dont la mise en page va s’adapter à certains paliers de largeur d’écran.
Petit rappel pour les néophytes, une page web doit (en théorie) être composé coté client d’une partie HTML qui contient l’ensemble des données à afficher et d’une autre partie CSS qui, elle, contient les instructions de mise en page de ce contenu.
Dans le cas du responsive design, la zone HTML est toujours la même, mais suivant la largeur d’écran la partie CSS appelée va être différente adaptant ainsi la mise en page pour chaque appareils.


Multi-écran


On appelle cette technique de chargement de CSS conditionné à la largeur : « media queries ».

Technologies :

C’est simple, HTML5 (plus CSS3 / Javascript / Canvas)
D’abord parce qu’il s’agit d’un site web classique, l’HTML est donc logiquement privilégié (cf mon article précédent sur les technologies HTML5 et Flash).
Ensuite, parce que le site a vocation à fonctionner pleinement sur un maximum de navigateur, dont notamment les navigateurs mobiles.

Les avantages de cette technique :

L’idée d’un design « adaptatif » est, à juste titre, séduisante : vous n’avez véritablement qu’un seul site à gérer et vous êtes assuré d’offrir une expérience « unifiée » à vos utilisateurs quel que soit leur appareil.
L’expérience utilisateur qui en résulte est d’ailleurs vraiment intéressante, l’internaute appréciera forcément de retrouver son site quasi identique et pourtant correctement adapté à son contexte de navigation.

En termes de développement, cela réduit la production de fichier HTML, et si votre site bénéficie d’une administration en ligne (type CMS), c’est autant de page en moins à s’occuper.
Il y aura donc bien là-dessus une économie de temps, pour les administrateurs du site comme pour les développeurs.

Les défauts :

Car il y en a !
D’abord, une seul page veut dire un contenu unique, or ce contenu est peut-être trop lourd ou trop détaillé pour un usage en mobilité par exemple.
Il est certes possible de masquer certaines portions lors de la mise en page, mais il aura était malgré tout chargé.
C’est d’ailleurs un autre souci, qui dit même contenu, dit aussi même besoin en qualité de connexion.
Or la 3G de nos téléphones a beau être relativement rapide, les temps de chargement se feront forcément d’avantage sentir que sur une connexion ADSL. Et que dire si le réseau n’est pas très bon là où se trouve votre utilisateur… Un temps de chargement trop lent est clairement un élément négatif voir un facteur de sortie du site pour le mobinaute.

Pour en revenir au coût de réalisation, le temps que vous gagnez dans la création et la gestion du contenu HTML, les développeurs vont en passer une partie à la création des CSS – responsables de la mise en page – ces dernières étant évidemment bien plus complexes que sur un site classique.

Dernier point, et non des moindres, l’ergonomie et le webdesign qui en résultera, vont être fortement contraint par la nécessité de pouvoir s’adapter à différentes largeurs et types de navigation… et par les différentes modalités de navigation (souris ET tactile).
La conception du site va donc nécessiter un temps supplémentaire et une rigueur plus grande… Le gain en termes de budget n’est pas garanti, loin de là.

Finalement :

Quel est l’objectif de votre site, ses fonctionnalités, son contenu ?
Sachant cela, interrogez-vous sur l’usage qui sera fait de ce site en différentes situations.
L’utilisateur cherchera-t-il la même chose, parcourra-t-il le même contenu sur votre site, qu’il soit concentré devant son ordinateur, devant sa tablette (et souvent devant la télé en même temps !) ou en situation de mobilité devant le petit écran de son smartphone.

Si la réponse est oui, alors le responsive design sera effectivement une bonne solution.

Si la réponse est non, par exemple pour des sites au contenu moins « abordable », possédant une interface plus complexe, ou carrément expérientiels, alors il faudra sans doute s’orienter vers une autre solution pour être présent sur l’ensemble des écrans.

Autres solutions sur lesquelles je reviendrai prochainement…