Stratégie responsive

On sait assez bien ce qu'est le design responsif, mais comment le mettre en place, surtout lorsque votre site est déjà ancien ? Brad Frost fait le tour des principales stratégies.

Par

Actuellement environ 11 à 12% des 100.000 sites les plus importants au monde sont responsifs, et ce chiffre ne fera qu'augmenter dans les années à venir.

Comme disent les professionnels du business dépravé de l'écorchage de chats, “il y a plus d'une façon d'écorcher un chat”. Ah les rascals ! Et puisque maintenant tout le monde se retrousse les manches pour s'attaquer à la réalité d'un web multi-devices, le moment est bien choisi pour se pencher sur les diverses stratégies employées pour parvenir au nirvana du compactage :

Responsive retrofitting

représentation schématique du passage d'un site sur desktop à un site adapté aux devices plus réduits

Le retrofitting (“rétro-ajustement”) est le processus qui consiste à prendre un site conçu pour desktop et à le “rendre responsif” après coup.

Pour les sites existants (en particulier ceux qui font du business) les équipes n'ont pas toujours le luxe de pouvoir reconstruire de zéro. Dan Cederholm.

Pour beaucoup d'organisations en effet, un redesign à grande échelle est simplement hors de question. C'est pourquoi le retrofitting est une approche courante lorsqu'on veut offrir une meilleure expérience utilisateur avec les devices autres que desktop.

Pour

  • relativement rapide - Il y a beaucoup de façons de faire du rétro-ajustement, mais dans son acception la plus basique cette stratégie peut se réduire à injecter un fichier small-screen.css dans votre site web. Même si cet exemple est un peu raide, le retrofitting s'avère intéressant pour de nombreuses organisations du simple fait qu'il ne requiert pas de grosse réorganisation du code.
  • Familier - Les utilisateurs ne sont pas jetés du haut de l'escalier du savoir acquis. Au fil du temps, les gens s'habituent à une interface. En réajustant une interface existante, l'organisation conserve un degré de familiarité tout en offrant une meilleure expérience utilisateur pour les écrans réduits.
  • Plus rapide en termes d'organisation - Politiquement parlant, le réajustement est beaucoup plus sûr que le bouleversement total. Moins de querelles sur la nuance de vert ou les photos à utiliser, pas de parties de bras de fer, et les équipes peuvent lancer le site responsif plus rapidement.

Contre

  • Superficiel - Là encore, il y a beaucoup de manières de réajuster, mais l'objectif est bien souvent de “rendre tout ça compact”. En se focalisant d'abord, ou seulement, sur la fluidité du layout, cette méthode passe à côté de tout une série de considérations qui entrent dans la réussite d'une expérience multi-devices réussie.
  • 1O litres d'eau dans un seau de 3 litres - Les sites conçus à l'origine pour les desktops ont souvent un certain âge et ils ont une tendance à contenir beaucoup de choses inutiles. La focalisation sur la fluidité du layout laisse de côté une nécessaire réflexion sur le contenu.
  • Performance - Il y a quelque chose d'un peu étrange dans le fait d'écrire plus de code pour entrer dans des devices plus petits. Le réajustement n'encourage pas la performance en tant que design.
  • Mauvaise compatibilité - Les media-queries mobile first ont une meilleure compatibilité avec les nombreux devices qui ne supportent pas les media-queries.
  • Rustines - Je meurs un peu à chaque fois que j'entends quelqu'un dire “rends-moi ça responsif”, comme s'il s'agissait de mettre une croix dans une case sur une planification de projet (ce qui est quelque fois le cas). Ce genre de réflexion est complètement à côté de ce que peut offrir le design responsif.

Responsive mobile sites

La pratique des sites mobiles responsifs, ou ce que j'appelle planter une graine pour un futur responsif, consiste à construire un site séparé employant des techniques responsives.

Des organisations telles que la BBC, The Guardian, et Entertainment Weekly (sur lequel j'ai travaillé) utilisent cette stratégie.

un arbre, le desktop, une graine, le site mobile
Le mobile est l'occasion de planter une graine qui poussera à partir de votre site historique
l'arbre est mort, la graine a poussé, l'arbre est magnifique et coloré
Avec du temps et des efforts, le site historique peut être remplacé par une expérience mobile-first, adaptive et “future-friendly”

Pour

  • Risque réduit - La plupart des organisations constatent encore une part minoritaire de leur trafic en provenance des mobiles. Lancer un site mobile responsif leur permet de tremper leurs doigts de pieds dans les eaux responsives sans tout miser sur le responsif.
  • Apprentissage de la flexibilité - Les designers peuvent apprendre l'approche fluide, les développeurs se former à toutes les spécificités des anciens devices Android, le management apprendre à lâcher prise de la perfection au pixel. Un site "m." séparé peut servir de terrain d'entraînement pour le responsif.
  • Infrastructure - Les équipes peuvent apprendre à gérer de nouveaux problèmes comme la direction artistique des images.
  • Éliminer le gras - Cette approche donne l'opportunité aux équipes de demander “pourquoi faisons-nous cela”, et de se focaliser sur la performance. Pourquoi ? Parce qu'elles sont concentrées sur la réalisation d'une expérience mobile avant tout.
  • Un futur mobile-first - Même s'ils sont au départ inférieurs à leur grand frère, avec le temps ces sites mobiles peuvent les remplacer.

Contre

  • C'est toujours un site "m." - Responsif ou pas, cette approche hérite de tous les défauts des sites "m.": problèmes de redirection d'URL, problèmes de gestion, de parité de contenu, SEO, et bien d'autres.
  • Pansement - De nombreux sites mobiles sont créés pour stopper l'hémorragie, beaucoup pour répondre à l'augmentation du trafic en provenance des devices mobiles. Ces solutions peuvent certainement répondre à des besoins présents mais cela ne se traduit pas toujours en stratégie à long-terme.
  • Dépérissement - Parfois une organisation investira dans un tel projet, le mènera à un certain degé de développement puis le laissera tomber une fois voté le budget de l'exercice suivant.
  • Design sur petit écran - En raison de la focalisation initiale sur les petits écrans, passer à l'échelle pour s'adapter aux grands écrans peut s'avérer un vrai défi.

Design responsif Mobile-first

représentation schématique du passage d'un site adapté aux mobiles à un site sur desktop

Le design responsif mobile-first crée une interface qui répond aux contraintes du mobile (écran réduit, faible bande passante, etc.) puis améliore progressivement l'expérience utilisateur en fonction des caractéristiques supérieures disponibles sur les devices moins contraints.

Pour

  • Un nouveau départ - Tout projet mobile-first part d'une base propre. Les designers sont excités de se concentrer sur les objectifs utilisateurs et business essentiels, les développeurs sur un balisage cool. En jetant à la poubelle une base de code, les équipes peuvent s'attaquer à la réalité multi-device sans avoir à se préoccuper de l'historique.
  • Meilleure compatibilité - En partant d'une base mobile-first, les développeurs ont de meilleures solution pour répondre aux problèmes de compatibilité, en particulier avec les anciens devices qui ne supportent pas les media-queries.
  • Performance - La performance d'un site dépend avant tout de sa mise en oeuvre, un projet mobile-first permet aux développeurs de traiter cette question dès le départ.
  • Considérations globales - D'une manière plus générale, un redesign mobile-first, malgré son nom, tend à prendre en compte l'ensemble du spectre des devices, sans mettre l'accent sur aucun en particulier.
  • Future friendly - L'expérience mobile-first donne une opportunité supplémentaire de créer une base solide et à l'épreuve du temps, pouvant servir de plateforme pour des développements futurs.

Contre

  • Temps - Soyons réalistes : un redesign mobile-first n'est pas un raccourci. Construire depuis les fondations prend beaucoup de temps.
  • Changement de mode de pensée - Demander aux équipes et aux organisations de penser différemment est un vrai défi. La mentalité mobile-first renverse tout, et remet en question des conventions auxquelles les gens ont été habitués depuis des années. Il faut bien argumenter (heureusement il y a un livre pour ça) et revenir à la charge pour éviter que les gens ne reviennent vite à leurs anciennes manières de penser.
  • Difficultés organisationnelles - Un grand redesign se fait souvent au milieu de toutes sortes de tracasseries liées à l'organisation. Le Pdg veut avoir son mot à dire sur le design, bien que n'ayant participé à aucune des réunions préliminaires... L'ambition, la politique peuvent nuire gravement à la création d'une bonne expérience utilisateur.
  • Inconnu - Pour l'utilisateur, tout redesign paraîtra d'abord étrange et inconnu, il faut prendre soin de conserver un bon degré de familiarité avec l'interface, surtout après un remaniement majeur.

Fragmentation

La fragmentation est une stratégie responsive consistant à diviser le processus de redesign à grande échelle en sous-parties. Comme dans le cas du rétro-ajustement (ces stratégies ne sont pas exclusives l'une de l'autre) le cas de figure est celui d'une impossibilité de se lancer dans un redesign massif. C'est pourquoi certaines organisations avancent pas à pas. Il y a plusieurs façons de procéder :

Page par page

Le redesign page par page procède par sous-ensembles de pages. Des compagnies comme Microsoft ont déployé des pages d'accueil responsives, tout en conservant la majorité des pages intérieures en desktop-only.

Pour

  • Extrêmement visible - Déployer une version responsive des pages les plus visitées (comme la page d'accueil) place l'effort là où les utilisateurs ont le plus de chance de voir le nouveau design.
  • Apprendre la flexibilité - Les organisations utilisent souvent ces projets comme des pilotes pour des initiatives plus larges. En se concentrant sur quelques pages cruciales, elles apprennent ce qu'est une interface responsive et utilisent ce savoir-faire pour l'appliquer au reste du site.
  • De meilleures chances de lancement - Se concentrer sur une page ou une caractéristique est une bonne manière de s'assurer que les choses soient faites. Se lancer dans un redesign massif pourrait avoir pour conséquence que le site ne voie jamais le jour.

Contre

  • Continuité - L'utilisateur passe en quelques clics d'une expérience brillante, flambant neuve, à un contenu vieillot. C'est très mauvais du point de vue de la cohérence, car les utilisateurs voient la compagnie comme une marque unique, pas comme un salmigondis de départements et de priorités.
  • Courte-vue - Beaucoup de redesigns basés sur les pages sont fixés sur le “lancement au 3e trimestre”, souvent il n'y a même pas de stratégie à long terme de déploiement du site entier.
  • Dépérissement - Il faut démarrer avec une stratégie à long terme, ou sinon vous risquez de vivre en permanence à Frankensteinland.

Composant par composant

J'ai travaillé avec plusieurs organisations qui ont entrepris une approche intéressante du design responsif. Au lieu de s'occuper d'abord de la page d'accueil, puis de passer aux pages intérieures, elles rendent certains composants-clés (comme le header et le footer) responsifs, puis progressivement les autres composants. Lorsque toute l'interface est responsive, elles incluent la balise meta viewport et se retrouvent avec une expérience responsive.

Pour

  • Intro graduelle à la nouvelle interface - Plutôt que de bouleverser les utilisateurs avec une Expérience Extraordinaire et 100% Nouvelle, cette approche fragmentée introduit l'interface petit à petit. Les changements ne sont pas extrêmes au point d'irriter les utilisateurs, mais ils font évoluer le design dans la bonne direction.
  • Diviser les problèmes - Les équipes apprennent à résoudre les problèmes au niveau modulaire, atomique, plutôt que sur la page entière.
  • Jauger le niveau d'effort - La division du projet en modules donne une meilleure idée de son étendue.

Contre

  • 50 nuances d'incomplétude - Cette approche peut donner des résultats bizarres et des interfaces monstrueuses, mélangeant le vieux et le neuf.
  • Dépérissement - Ce genre de projets doit comporter des objectifs finaux clairs, sinon ils risquent de se retrouver au purgatoire.
  • Co-existence technologique - Qu'est-ce qui se passe quand un module qui utilise les dernières technologies doit s'accorder avec un vieux module miteux ? Cette approche comporte de nombreux défis d'architecture technique.

Bien sûr, chaque organisation est unique et le chemin à suivre dépend de facteurs multiples. Le temps, le budget, l'étendue, la structure organisationnelle, les compétences influencent la stratégie responsive à employer. Mais plus le temps passe, plus il est évident que les organisations doivent répondre au défi d'un monde multi-devices.


Intéressé par le Webdesign responsif ? Sur la Cascade, retrouvez des articles et ressources.

Tous les articles sur le Responsive Web Design parus dans La Cascade.


original paru le dans le blog de Brad Frost.

Sur l’auteur : Brad Frost est designer web, auteur, consultant, musicien, artiste à Pittsburgh, PA. Vous pouvez lire ses réflexions sur son site personnel et sur Twitter.

Autre article de Brad Frost sur la Cascade : Design atomique.

Traduit avec l'aimable permission de Brad Frost.
Copyright Brad Frost © 2014.