La chorégraphie du contenu

Les sites responsifs ou adaptifs modifient l'architecture de leur contenu afin de s'adapter aux dimensions de l'écran. Avec ces excitantes potentialités surgissent des défis tout aussi passionnants. Par Trent Walton.

Par

Les sites responsifs ou adaptifs modifient l'architecture de leur contenu afin de s'adapter aux dimensions de l'écran, et avec ces excitantes potentialités surgissent des défis tout aussi passionnants. Les designers web vont devoir dépasser le layout qu'ils ont sous les yeux et avoir une vision de la façon dont il se réorganise en fonction des dimensions de chaque écran, tout en conservant forme et hiérarchie. Les media queries peuvent faire plus que simplement réparer des layouts : à condition de bien nous organiser, nous pouvons commencer à chorégraphier le contenu pour offrir la meilleure expérience possible quelle que soit la largeur d'écran.

Depuis quelques temps, j'ai pris l'habitude d'analyser les sites responsifs sur lesquels je tombe, et de noter comment ils se réorganisent à différentes largeurs. Il arrive que toute l'architecture du site passe par la fenêtre avec la nouvelle organisation. J'ai aussi constaté que ce qui fonctionne bien avec un type de contenu ne fonctionne pas avec un autre.

Empilement de contenu

C'est inévitable. Prenez un site construit sur 4 colonnes à pleine largeur : à mesure que la fenêtre s'amenuise, les 4 colonnes deviennent 3, puis 2, puis 1. La solution la plus courante est de les empiler les unes à la suite des autres (fig. a). C'est la simplicité même, mais que se passe-t-il si la première colonne est vraiment longue ? Est-ce que le contenu de la colonne 2 est moins important que tout le contenu de la colonne 1 ? Je ne peux m'empêcher de penser que dans certains cas cette méthode se débarasse de la hiérarchie.

Les colonnes s'empilent l'une après l'autre
figure a

Une autre approche serait d'entremêler le contenu, en intégrant les éléments les uns dans les autres à mesure que la fenêtre se réduit (fig. b). Prenons un cas concret : que se passerait-il si nous avions une colonne principale constituée par une grille de vignettes représentant des produits, et si le sidebar représentait un coupon ou une promotion ? Lors de la réorganisation des colonnes, ce serait bien de faire glisser la promo entre deux rangées de produits plutôt que d'embrouiller les choses en reléguant cette information importante tout en bas de la colonne principale.

une chorégraphie plus sibtile
figure b

Contenu chamboulé

Une autre chose que j'ai remarquée, c'est que les media queries sont utilisées pour modifier le design des pages de façon significative. J'ai vu des couleurs de background changer et des informations fondamentales passer de gauche à droite. Si l'on y réfléchit bien, à tête reposée, on trouvera sans doute de bonnes raisons d'avoir fait ce choix. Mais que se passe-t-il si un utilisateur visite votre site l'après-midi sur un grand écran, y revient le soir sur une tablette et que tout a changé ? C'est juste pénible, un peu comme si quelqu'un réorganisait vos provisions dans le placard à chaque fois que vous fermez la porte. La puissance des media queries a quelque chose d'enivrant, mais rappelez-vous que ce n'est pas parce que vous le pouvez que vous le devez.

Décompartimenter le workflow

Le modèle de production d'un site, qui va du design au développement puis au lancement, n'est pas bien adapté à la réalisation de sites responsifs. Je pense que notre méthode chez Paravel, consistant à nous réunir autour d'une table et à confronter les points de vue sur chaque décision jusqu'au lancement final se prête bien au processus itératif nécessaire dans ce genre de projets. Nous avons constaté que la meilleure façon d'avancer est de mobiliser tous les membres de l'équipe pour concevoir, construire, tester puis évaluer en cycle rapides et répétés.

cycles : concevoir, construire, tester, recommencer

Bien sûr, on pourrait aussi concevoir des designs pour chaque media query, mais ce genre de raisonnement ne paraît pas très efficace et ne profite pas de l'approche device-agnostic (valable pour tout type d'écran) que le design responsif nous offre. À mon sens, il est préférable de construire quelque chose qui fonctionne pour n'importe quelle largeur ou n'importe quel device, plutôt que quelque chose qui fonctionne sur tous les devices actuellement existants.

Gérer et équilibrer toutes ces facettes du rôle de web designer peut paraître écrasant, mais c'est la nature même de notre profession et une des raisons pour lesquelles je l'aime. Peaufiner l'art de la chorégraphie du contenu nous aidera à orchestrer la meilleure expérience possible à n'importe quelle taille d'écran et n'importe quelle résolution. Avec le temps, je pense que savoir ce qui fonctionne le mieux deviendra une seconde nature pour nous - tout comme nous avons appris à concevoir des pages progressivement améliorées sans recourir aux tables ni à un markup superflu. La meilleure façon d'y parvenir ? S'entraîner !


Mise à jour du 26 juillet 2012 :
Jordan Moore a écrit un article fantastique sur l'utilisation de flexbox pour chorégraphier votre contenu. Jetez un coup d'oeil à la démo et à la démo explicative.

---

original paru le sur le blog de Trent Walton.

Sur l'auteur : est fondateur et membre de Paravel, une agence web basée au Texas. Dave Rupert, Reagan Ray et lui travaillent ensemble depuis 2002. Vous pouvez le retrouver sur Twitter, Dribbble, Facebook et Rdio.

NdT : La contribution de Trent Walton à CSS Zen Garden est superbe !

Traduit avec l'aimable permission de Trent Walton.
Copyright Trent Walton © 2011.