Comment la conception Web réactive a changé le monde

L'année où Apple a lancé le premier iPad , l'ancienne approche consistant à coder un site «de bureau» et un site «mobile» devenait de plus en plus intenable. Avec de plus en plus d'appareils en ligne, la conception Web réclamait une nouvelle stratégie audacieuse.

Il est arrivé sous la forme d'un article de Ethan Marcotte sur A List Apart. Il s'est inspiré de l'article de John Allsopp, Un Dao de conception Web , et a examiné les principes architecturaux pour expliquer comment nous pourrions créer des mises en page qui s'adaptent de manière transparente à différents environnements d'écran, tout en conservant les meilleurs principes de conception d'impression.

Le reste appartient à l'histoire. Son essai, intitulé Site Web adaptatif , a introduit une nouvelle approche qui était si simple, élégante et efficace qu'elle a été rapidement adoptée par l'industrie comme méthode standard de conception d'un site, et le reste aujourd'hui.

Marcotte a suivi avec un livre du même titre en 2011. Mashable a qualifié 2013 «Année de la conception Web réactive». Et aujourd'hui, de Bangkok à Boston, de São Paulo à Sydney, chaque fois que quelqu'un commence à travailler sur une conception Web, il est plus que probable que ce soit réactif.

Ethan Marcotte a littéralement écrit le livre sur le Responsive Web Design, ainsi que l

Ethan Marcotte a littéralement écrit le livre sur le Responsive Web Design, ainsi que l'article original

Il est donc juste de dire que Marcotte a le droit de se sentir un peu satisfait de lui-même. Mais il est incroyablement modeste sur tout cela. «Cela me surprend encore que le design réactif ait pris son envol», se dit-il. «Je le dis en toute sincérité: j'ai respecté une date limite de publication. J'ai écrit un article. Et quand je l'ai remis, j'ai pensé que ça allait être la fin. La façon dont elle a explosé a été terrifiante et humiliante.

Il ajoute que, bien qu'il ait peut-être été le premier à rassembler toutes les pièces, le design réactif était à certains égards inévitable. `` La façon dont l'idée de base a tellement résonné chez les gens suggère que si je ne l'avais pas proposée, quelqu'un d'autre l'aurait fait. Parce que notre façon de concevoir n'était tout simplement pas durable.

Toujours en train de le comprendre

Alors que Marcotte continue aujourd'hui de gérer le @rwd Compte Twitter, sur lequel il partage des liens vers des articles utiles et des refontes intéressantes, il n'a certainement pas l'impression de `` posséder '' le responsive design, ou devrait en être considéré comme un arbitre.

«Certaines années plus tard, je pense que certaines personnes me considèrent comme si j'avais des réponses à certains des défis que nous avons là-bas», dit-il. `` Mais je fais vraiment partie d'une conversation que beaucoup de gens ont en ce moment. Je ne me considère donc pas comme un propriétaire du design réactif, en aucune façon. J'essaie de comprendre comment concevoir de manière réactive dans ma propre pratique au quotidien.

Ethan parle de la Turquie avec une autre légende du design Web, Jeffrey Zeldman

Ethan parle de la Turquie avec une autre légende du design Web, Jeffrey Zeldman

Il est toujours prêt à partager son point de vue, bien sûr. «Certaines personnes m'ont gentiment demandé de contribuer aux avant-propos de leurs livres, car j'ai parlé de certains des sujets qui les intéressent», dit-il. «Et d'autres ont eu la gentillesse de m'envoyer des articles ou des remaniements qui, à leur avis, méritent un public plus large; Je suis heureux de vous aider. Mais je n'ai certainement pas l'impression de pouvoir contrôler le design réactif, ou que c'est mon truc.

Et il n'est pas non plus militant quant à l'idée que la conception Web réactive est toujours la `` bonne voie et véridique '' pour créer les meilleures expériences numériques.

«Il y a une tendance dans notre industrie à opposer les idées les unes aux autres», dit-il. «Vous pouvez le voir avec une conception réactive par rapport à des expériences spécifiques à un appareil, une conception réactive ou une conception adaptative. Même quelque chose d'aussi large que natif contre Web, ou mobile contre ordinateur de bureau. Nous avons tendance à penser les choses en ces termes binaires. Comme c'est soit ceci, soit c'est ceci, jusqu'à ce que quelque chose de mieux arrive.

Cela n'a cependant jamais été l'expérience de Marcotte sur le Web. «Dans mon travail, il n'y a jamais eu une seule meilleure façon de concevoir ou de résoudre un problème. Il s'agit en fin de compte de ce qui nous aide à résoudre les problèmes de nos clients et de nos parties prenantes de la manière la plus efficace, compte tenu des contraintes auxquelles nous sommes confrontés.

Cela dit, c'est généralement une conception réactive. «Je travaille avec des clients qui font du travail natif tout le temps», dit-il. «Mais quand je leur parle de stratégie, c'est vraiment une question de savoir ce qui va les aider à toucher le plus large public possible. Et invariablement, c'est le Web et la création d'une expérience réactive pour une conception Web.

«Cela ne veut pas dire que je ne vais pas les inciter à rechercher des solutions natives intéressantes s'ils ont un problème», dit-il. `` Mais d'une manière générale, investir dans une belle mise en page réactive indépendante de l'appareil sera la meilleure façon de commencer. Et cela pourrait conduire à des approches intéressantes sur les bords.

Nouveaux défis

Mais le monde du Web évolue rapidement. La conception indépendante des appareils peut fonctionner lorsque nous parlons uniquement de smartphones, de tablettes et d'ordinateurs de bureau. Mais le responsive design survivra-t-il au tsunami de nouveaux appareils à venir?

«J'ai l'impression que c'est une conversation qui est en cours en ce moment», répond Marcotte. `` Par exemple, j'ai travaillé avec un client qui a lancé une belle refonte réactive, puis quelques mois plus tard, nous avons commencé à obtenir des captures d'écran de Google Glass. Ce n'était pas un appareil qui n'avait même pas été inventé lorsque nous avons lancé le site. Et ce n'était peut-être pas la meilleure façon de découvrir le design ou le contenu… mais c'était toujours accessible.

Après avoir écrit le livre sur RWD, Ethan a écrit plus tard le livre sur les modèles de conception réactifs

Après avoir écrit le livre sur RWD, Ethan a écrit plus tard le livre sur les modèles de conception réactifs

Et la morale est? `` Penser d'abord au Web comme un support de conception flexible signifie que lorsque ces cas de bord intéressants apparaissent, parce que vous l'avez conçu aussi correctement que possible, cela vous libère à l'avenir pour dire: `` D'accord, alors voici un appareil qui va une vraie traction avec notre public, quelle sorte de solution voulons-nous explorer pour cela? S'agit-il de peaufiner notre approche réactive, est-ce que nous l'adaptons à ce contexte? Ou peut-être que c'est quelque chose de plus personnalisé et discret? ''

Pour un exemple, il pointe vers les smartwatches. 'Que va-t-il arriver au Web quand il est sur un écran aussi petit?' il demande. 'Qui sait: encore une fois, on se sent tôt, et Apple Watch n'est pas vraiment une expérience Web pour le moment.'

Mais si vous allez sur YouTube, vous pouvez trouver de nombreuses vidéos intéressantes de personnes naviguant à travers des designs réactifs sur des appareils Android Wear. Ce n'est peut-être pas idéal, peut ne pas être populaire. Mais en mettant en place cette conception flexible et indépendante des appareils, nous avons au moins rendu quelque chose accessible à ce public.

Rester ancré

Tout au long de notre conversation, Marcotte ramène constamment tout au travail du client. Et il est clair que c'est aussi important pour lui que de parler lors de conférences, rédiger des articles pour son blog , et des livres comme ses derniers travaux, Conception réactive: modèles et principes .

«J'ai beaucoup voyagé, ce qui est génial, mais il faut que ce soit un mélange entre parler de travail et faire du travail», dit-il. «Parce que je pense que l'un informe l'autre. Il y a des choses que j'ai apprises en parlant à des gens lors de conférences que je ramène dans ma pratique, et des choses que je conçois pour des clients qui me passionnent vraiment et que je veux partager avec un public plus large.

Cependant, il essaie toujours de comprendre l'équilibre. «Les voyages prennent beaucoup à une personne», note-t-il. «Donc cette année, je me suis vraiment concentré sur le travail client. J'ai augmenté de nombreux discours et j'ai vraiment essayé de me concentrer sur une conception pratique et de travailler avec de bonnes personnes.

Fait intéressant, au cours d'une année dominée par les `` fausses nouvelles '', ces bonnes personnes ont inclus deux organisations médiatiques innovantes, Source's OpenNews projet et la rédaction indépendante à but non lucratif ProPublica .

Marcotte a travaillé avec Source et ProPublica, une paire d

Marcotte a travaillé avec Source et ProPublica, une paire d'organisations médiatiques innovantes

«Source aide les concepteurs et les développeurs qui travaillent dans les rédactions à travers la planète à raconter des histoires sur la façon dont ils produisent leur travail», explique Marcotte. «Par exemple, ils ont rassemblé deux ans de données et de visualisations interactives de différentes organisations de presse sur la violence armée aux États-Unis.

«C'est un référentiel de tout le travail qui a été fait autour de ce problème très difficile, mais cela aide également à promouvoir tous les outils, cadres ou processus qui auraient pu découler de la création de ces histoires. Pour les rendre plus accessibles aux gens, afin qu'ils puissent également produire ce travail, le cas échéant.

Marcotte s'est impliqué dans un sprint de conception d'un mois pour Source, travaillant en étroite collaboration avec l'équipe pour obtenir une refonte opérationnelle. 'Ils l'avaient planifié depuis un bon moment et avaient fait des montagnes de recherches avant que je ne me présente pour mon sprint, alors ils ont fait la plupart des gros travaux', se souvient-il. «Les délais étaient serrés, mais ils ont finalement été un client formidable.

Tout comme ProPublica. «Ils se concentrent vraiment sur des problèmes vraiment difficiles et charnus, comme la corruption et les histoires axées sur les consommateurs», dit-il. «C'était donc agréable d'avoir l'occasion de les aider d'une manière ou d'une autre. C'est une salle de rédaction très rapide, donc c'était agréable de simplement s'asseoir et de les regarder faire leur travail.

Et bien qu'il soit si doué pour la réflexion stratégique, Marcotte aime toujours se familiariser avec le code. «Je me trouve généralement assez impliqué dans certains aspects de la conception et du travail frontal», dit-il.

«Et même si je ne suis pas directement impliqué dans la mise en œuvre d'une mise en page moi-même, j'essaie généralement de m'assurer que nous adhérons à de bons principes. S'assurer que nous ne prenons aucune décision susceptible de compromettre l'accessibilité, ce qui compromettra la création d'un design rapide, beau et réactif.

Cet article a été initialement publié dans le numéro 300 de rapporter , le magazine le plus vendu au monde pour les concepteurs et développeurs Web. Acheter le numéro 300 ou abonnez-vous ici .

Articles Liés: