La conception Web réactive est devenue un mot à la mode presque omniprésent sur le Web. Essayez de rechercher #rwd sur Twitter pour trouver le contenu des parties égales et le spam Twitter. C'est une phase commune dans la maturation d'une nouvelle idée. Je me souviens quand AJAX faisait fureur; le terme a été enfoncé dans le sol. Maintenant, peu de gens parlent d'AJAX, mais les bibliothèques comme jQuery sont entièrement intégrées dans le flux de travail d'un développeur.
Cela semble refléter ce qui arrive à la conception Web réactive. Le terme est partout. Un de mes amis est dans l'édition de magazine, elle est allée à une conférence récemment, et un éditeur pour un nouveau magazine bien connu a parlé des tendances à venir et a mentionné la conception Web réactive. Les éditeurs ne sont peut-être pas des professionnels du Web, mais ils connaissent les mots à la mode.
Au fur et à mesure que la conception de sites Web réactifs a pris de l'ampleur, la façon dont nous construisons les sites Web a changé. À mesure que le terme passe du mot à la mode à une partie commune de chaque projet de conception Web, la façon dont nous travaillons en tant que professionnels du Web doit changer. Dans cette optique, nous devons définir de nouvelles règles de base pour notre façon de travailler.
Quand quelqu'un vous dit de "vérifier ce site réactif", quelle est la première chose que vous faites? Vous redimensionnez probablement la fenêtre pour voir comment la disposition change. Je ne vais probablement pas l'ouvrir sur mon téléphone et ma tablette et commencer à changer d'orientations ou à lancer des tests de vitesse de page. Je redimensionne le navigateur et continue ma journée. C'est notre expérience en tant que concepteurs et développeurs, mais pas en tant qu'utilisateurs. Lorsque je visite un site en tant qu'utilisateur, je n'ai aucune patience. Je m'en fous si le site coule bien; Je veux juste ce que je veux.
"Squishy" est une mise à l'échelle linéaire d'un site Web. Le site passe-t-il de maigre à gros? Au lieu d'une mise à l'échelle linéaire, la conception Web réactive devrait se concentrer sur l'établissement d'un cœur de site et son chargement progressif en fonction des capacités. Imaginez un site qui devait être construit pour un minuscule téléphone portable exécutant IE7 sur un réseau EDGE. Cela devrait être votre site principal et ensuite évoluer en fonction de la taille de l'écran et des capacités.
Le design web réactif est compliqué. C'est comme ça. J'aimerais qu'il y ait quelque chose que je puisse vous dire pour faciliter les choses, mais il n'y en a pas. La plupart des gens ont réagi à la conception Web réactive en ajoutant quelque chose à leurs flux de travail, qu’il s’agisse d’un nouveau produit livrable ou simplement d’un rendez-vous avec un développeur, et en demandant si leur conception fonctionnera de manière réactive.
J'ai un ami qui travaille sur un site réactif pour un client. Elle construit le site dans Photoshop en taille de bureau. Après quelques maquettes sur certaines pages, elle a voulu montrer à quoi ressemblerait le site sur une tablette et un smartphone, alors elle a également réalisé ces maquettes. Après avoir présenté au client, elle a reçu des modifications créatives. Il y a environ 50 fichiers PSD pour ce site à ce stade. Il lui faut quelques jours pour revoir les dispositions.
Essayer d'ajouter de nouvelles conceptions à elles seules entraînera un processus chronophage et incohérent. Une des meilleures façons de résoudre ce problème est de prototyper vos wireframes et de les présenter à votre client. Cela vous donne un livrable pour parler directement à la mise en page du site sans parler simultanément de la conception. Fondation par ZURB est un excellent outil pour construire rapidement des prototypes.
Le simple ajout de prototypes dans votre flux de travail ne suffira pas. Pour réussir à créer des sites réactifs, vous devez vous adapter, ce qui nous amène à la règle suivante.
Lorsque j'ai commencé à créer des sites Web, j'ai utilisé deux outils, Photoshop et GoLive. Maintenant, j'ai au moins six programmes dont j'ai absolument besoin pour construire un site. J'utilise encore Photoshop pour créer des éléments graphiques, mais je dessine principalement dans le navigateur avec Sublime Text 2 et j'utilise les outils de développement de Safari pour inspecter des éléments sur mon iOS 6. J'utilise également Codekit pour compiler mes CSS et Terminal pré-traités à Git.
La conception Web réactive signifie également changer votre façon de concevoir. Au lieu d'installer une page entière dans Photoshop, j'utilise Tuiles de style de Samantha Warren articuler le design visuel. En concevant la marque visuelle et les éléments d'interface d'un site en dehors d'une mise en page réelle, vous pouvez communiquer directement avec le design et le combiner avec la présentation du prototype pour créer votre site responsive dans le navigateur.
Les préprocesseurs CSS sont également très utiles dans tout flux de travail réactif. En termes simples, les préprocesseurs peuvent être utilisés pour démêler certaines des complications liées à la construction d'un site et faciliter une grande partie de la répétition du travail dans CSS. Personnellement, je préfère le SCSS, mais le LESS est une meilleure alternative pour certains, car il a une barrière d’entrée inférieure et une meilleure documentation.
[Le Web] devrait être accessible à partir de tout type de matériel pouvant se connecter à Internet: stationnaire ou mobile, petit écran ou grand. - Tim Berners-Lee
HTML et CSS sont intrinsèquement sensibles. Dès la création de HTML, le Web devait être suffisamment flexible pour fonctionner sur tout matériel doté d'une connexion Internet. Ce n'est que lorsque les concepteurs et les développeurs ont évolué vers des configurations fixes que cela a changé. En essayant d'imposer des dimensions fixes sur les sites Web, nous avons restreint le Web aux ordinateurs de bureau.
Le Web réactif résume ce que vous avez à dire de la manière dont vous le dites. Prenez, par exemple, le récent déplacement de NPR vers un modèle de contenu piloté par une API. En passant à une API pour fournir du contenu, NPR a pu gérer sa collection d'applications et de sites de manière cohérente. La seule chose qui change est la couche de présentation.
C'est ce que devrait être le Web réactif. Déterminez ce que vous avez à dire et laissez-vous guider par cela. Le design consiste à répondre à un besoin d'une manière visuellement agréable, mais aussi à répondre aux besoins de l'utilisateur.
C'est ce que propose le Web réactif, l'utilisateur créant des sites Web qui fonctionnent pour les personnes qui les utilisent, même s'ils accèdent au contenu. Faire des sites qui peuvent se refactoriser pour de petits écrans n’est que le début.
Avez-vous déjà adopté la conception Web réactive? Quelles règles pour un design réactif souhaitez-vous ajouter? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image de taille via Shutterstock.