Lorsque nous parlons de conception de sites Web en 2017, nous parlons vraiment de conception Web réactive . En un peu plus de six ans, le terme «réactif» est devenu une norme industrielle omniprésente.
La conception Web réactive est le processus de conception d'un site ou d'une application Web, de sorte que son contenu s'ajuste de manière appropriée en fonction du périphérique sur lequel il est affiché. Il y a quelques années, j'ai assisté à une excellente conférence d'Ethan Marcotte-qui inventé le terme «Web Design réactif» - dans lequel il a comparé des sites réactifs à l'arbre Pando de l'Utah; un organisme unique avec une structure racinaire connectée, qui émerge du sol à différents endroits, dans différents contextes, à différentes tailles, mais tous portant la même génétique de base.
C'est sans doute l'adoption d'un design réactif qui a permis la croissance du Web mobile; sans cela, le coût de développement d'un site mobile en parallèle avec une version de bureau aurait signifié que de nombreuses entreprises s'en tiennent à cette dernière.
les relations conçues pour le mobile sont fréquemment transposées dans des fenêtres beaucoup plus grandes
Mais le design réactif ne va pas sans problèmes. Par définition, les conceptions réactives «répondent» à la taille de la fenêtre d'affichage, et non au contenu. Les variantes basées sur les conteneurs sur les requêtes de médias CSS ont été présentées comme une solution, mais ne sont pour l’instant qu’un post-it sur le tableau blanc de quelqu'un.
La conception concerne largement les relations entre les éléments et ces relations sont restreintes sur un petit écran. De plus, comme notre balisage est structuré sémantiquement, les relations conçues pour le mobile sont fréquemment transposées dans des fenêtres beaucoup plus grandes.
Le nombre croissant de menus de hamburgers utilisés sur les ordinateurs de bureau est l’une des décisions les plus souvent critiquées au cours de l’année écoulée. Cependant, peu d'attention a été accordée aux mises en page mobiles, c'est-à-dire aux bandes horizontales de contenu divisées en une grille de 12 colonnes, qui sont mises à l'échelle au bureau.
La question de savoir si la conception Web réactive tue la créativité est probablement injuste. cela suppose que la diversité et l'innovation sont la pierre angulaire d'un processus de conception. Elle blâme également un concept, s'il y a des reproches à faire, cela repose sûrement sur la mise en œuvre. En fait, le design s'épanouit souvent sous les restrictions les plus strictes. Je connais un designer qui ajoute ses propres contraintes aux mémoires des clients, car il estime que son travail est plus fort lorsqu'il est défié.
s'il y a des reproches à faire, c'est sûrement avec la mise en œuvre
Le design réactif fonctionne incroyablement bien avec le branding, mais il est loin d'être idéal pour la mise en page. Il se peut que la meilleure façon de mettre en œuvre une conception réactive consiste à créer des conceptions distinctes pour différentes classes de fenêtres et à utiliser des techniques réactives uniquement pour des écrans similaires. Nous ne connaissons peut-être pas les dimensions exactes de chaque écran, mais nous savons qu'un téléphone doit tenir dans une poche, nous savons qu'un ordinateur portable ne peut pas être plus étroit que son clavier.
Le design réactif peut simplement être une idée plus avancée que celle que nous réalisons, et une fois que des outils tels que les variables CSS et les requêtes de conteneur sont implémentés, la conception sur le Web sera de nouveau diversifiée.
L'image sélectionnée, Image de Pando par Tony Frates via Flickr