Quand la conception réactive se trompe (et comment y remédier)

La plupart des sites Web utilisant responsive design l'utilisent de manière incorrecte, ce qui pose problème. L'approche générale en matière de conception réactive est paresseuse et si vous adoptez cette approche, certains de vos sites réactifs fonctionneront de manière absolument parfaite, et beaucoup ne le feront pas. Pour ceux qui travaillent parfaitement, cela sera probablement une question de chance.

Le concept de responsive design est simple, mais c’est sa simplicité qui pousse les gens à commettre des erreurs aussi facilement. Les concepteurs avec des années d'expérience se sont habitués à concevoir pour le bureau et planifient donc généralement une conception basée sur une disposition de bureau.

La disposition des postes de travail diffère de celle des tablettes et des présentations mobiles car elle est généralement composée de plusieurs colonnes, comprend généralement de grands espaces, et tout est simplement «grand», faute d'un meilleur mot. Si des techniques de conception réactives sont utilisées, cette disposition multi-colonnes est supposée se décomposer en une seule colonne.

Si c'est tout ce que votre conception réactive fait réellement lorsqu'elle est visualisée sur un appareil mobile, vous pouvez avoir un problème. L’importance du problème dépend de votre attitude, mais les bons designers se soucient des bons UX. Ils se soucient encore plus du mauvais UX. Si votre site contient une mauvaise UX et que vous souhaitez être un bon concepteur, vous devez le réparer.

Ce problème avec la réduction d'une mise en page multicolonnes en une seule colonne est qu'elle ne fonctionne pas sur une base proportionnelle. Si vous devez réduire quelque chose horizontalement et que vous ne faites pas d'autres changements, cela va évidemment s'agrandir verticalement.

Versez l’eau d’un petit verre gras dans un grand verre fin et l’eau prend la forme du grand verre mince, tandis que le volume d’eau reste exactement le même. Ce que les concepteurs doivent comprendre, c’est qu’avec un site Web, il faut que le volume change. Ce n'est normalement pas une bonne idée de changer la forme mais de garder le contenu exactement le même. Quelque chose doit donner.

Quelqu'un qui a vraiment mérité le titre de concepteur comprendra que cela représente un problème à résoudre et que les concepteurs cherchent en réalité à trouver des solutions aux problèmes. C'est donc le travail idéal pour vous de trouver le meilleur moyen de diffuser le contenu de base du site sans transformer l'expérience utilisateur en défilement frustrant. Voici quelques points à considérer lors de la décomposition d'une conception de bureau en une conception mobile:

1. «Mobile First» est débile

Désolé, mais ça l'est. Tout le monde en parle, mais en tant que concept, ce n'est pas très utile, car si vous concevez véritablement «mobile first», il sera alors cauchemardesque d'essayer de l'adapter à un design de bureau, à moins de vous en tenir à une disposition à colonne unique. up.

La meilleure approche consiste à concevoir physiquement au moins trois dispositions différentes (et jusqu’à 11). Les minimum que vous pouvez considérer incluent:

  • Desktop
  • Paysage mobile
  • Portrait Mobile

Si vous voulez être un peu plus approfondie, vous devriez également considérer:

  • Tablette Paysage
  • Tablette Portrait

Et la liste complète, si vous voulez être absolument complet serait:

  • Bureau énorme
  • Bureau ordinaire
  • Tablette grand paysage
  • Tablette Grand Portrait
  • Petite tablette paysage
  • Petite tablette portrait
  • Grand paysage mobile
  • Grand Portrait Mobile
  • Mobile Paysage Petit
  • Petit portrait mobile
  • Minuscule / Portable

Avec autant de possibilités différentes, il est évident pourquoi une approche «par taille unique» paresseuse est si tentante, mais pourquoi il y a tant de façons de le gâcher.

2. Apprivoisez ce pied de page tentaculaire

La conception du bureau comprend l’un de ces énormes pieds de page avec des charges de liens internes? Génial, cela sera probablement très pratique sur un ordinateur de bureau. Sur un téléphone portable, cela semble ridicule et c'est plus qu'une simple gêne. Vous pouvez concevoir des pieds de page complètement différents pour chaque point de rupture de périphérique. Il suffit de rendre ces liens de bas de page disponibles dans un dialogue modal et tout le monde gagne.

3. Acceptez quelques bizarreries mineures sur des périphériques obscurs

Si un périphérique particulier n’est pas commun, il n’est pas si grave que quelques particularités de la conception apparaissent uniquement lorsqu’elles sont visualisées sur ce périphérique. Plus un appareil est populaire, plus vous devrez vous efforcer de supprimer les bizarreries qui apparaissent dessus.

4. Vous pouvez masquer le contenu qui ne contribue pas au message principal

La partie la plus importante d'un site est le message principal. Oui, sur certains sites, la partie la plus importante est la publicité et ils n'existent que pour diffuser cette publicité, mais si vous devez choisir entre afficher le message principal ou la publicité, choisissez le message. Google est plus susceptible de vous considérer comme persona non grata si vous masquez le contenu principal, puis diffusez une série d’annonces. C'est parce que ce contenu principal est ce sur quoi Google vous a indexé, et lorsque ce contenu n'est pas affiché, Google le considère comme trompeur.

De plus, des éléments tels que des images purement décoratives ou esthétiques, mais qui ne contribuent pas de manière significative au message central, sont des candidats à la réduction ou à la dissimulation.

Certaines personnes ont proposé que cacher du contenu "punirait" les utilisateurs mobiles, mais c'est un peu absurde. En réalité, vous cachez le contenu, car il sert à améliorer l'expérience de bureau, mais ne contribue pas suffisamment au message central du site pour qu'il soit nécessaire.

5. Vous pouvez utiliser des fonds alternatifs

Récemment, on m'a confié une tâche ridicule: le propriétaire du site avait payé pour un fond particulier et souhaitait que tout le contenu soit adapté à ce fond. Les éléments de puces devaient comporter un nombre très exact de caractères, le nombre total de lignes devait être exact, etc.

C’est définitivement une mauvaise pratique en conception Web, car vous devriez jamais contenu de conception pour s'adapter à une mise en page. La mise en page devrait toujours être conçu pour contenir le contenu. Si, pour une raison quelconque, la mise en page ne peut pas contenir le contenu, celle-ci doit être repensée, pas le contenu. Il est tout à fait possible d'utiliser différents arrière-plans pour différents périphériques. Vous êtes un designer. Utilise ton imagination.

Le contenu est l'essence même d'un site Web. Le modifier ou le restreindre en fonction des contraintes d'une présentation est un signe évident d'amateurisme de la part du propriétaire du site et un signe que la présentation a été mal conçue au début. endroit. Respectez vos principes, car ce client sera un problème si vous acquiescez.

Le client a toujours raison, sauf lorsqu'il est un client de conception Web. Les clients savent rarement ce qui leur convient le mieux. Il est donc important de s’affirmer en tant que concepteur de site Web qui sait comment obtenir le bon résultat pour le client. Sinon, vous risquez de créer un autre site Web abomination.

6. Contrôler manuellement l'ordre de réduction (ou éviter les références spatiales dans le contenu)

C'est un problème complexe. L'ordre de réduction d'un site dépend de l'ordre dans lequel les div sont empilés. Vous devez empiler vos divs dans le bon ordre pour qu’ils s’effondrent dans le bon ordre.

L'un des problèmes que posent les constructeurs de sites Web WYSIWYG à glisser-déposer est que vous ne pouvez pas dicter l'ordre dans lequel les divs sont empilés, et dans les très rares cas où vous pouvez le faire, votre travail acharné est annulé à chaque fois. vous faites la plus petite modification, et vous devrez revenir en arrière et pirater à nouveau le code source.

Si vous ne contrôlez pas l'ordre d'effondrement, cette image explique clairement ce qui peut mal se passer. Évitez également de faire des références spatiales (comme «dans la colonne de gauche»), car sur un mobile, tout ce qui se trouvait à gauche ou à droite peut être décalé au-dessus ou au-dessous, plus si vous indiquez au lecteur qu'il est assez important de faire défiler pour voir, vous devrez le faire défiler à nouveau, ce qui n'est pas cool.

7. Vous aurez peut-être besoin de différentes tailles de police pour différentes mises en page.

Il est facile de contrôler la taille de la police avec CSS et vous pouvez définir différentes tailles de police et même différentes faces de police (si elles sont plus belles) pour des tailles d'affichage particulières. Vous pouvez trouver la taille d'affichage à l'aide de requêtes de média CSS, puis modifier la taille de la police ou le caractère de la police afin que leur contenu affiche le contenu de manière optimale sur le type de périphérique que vous ciblez.

8. Il est préférable d'utiliser des images sensibles

Toutes les images doivent être réactives autant que possible. Cela implique que parfois, les détails d'une image peuvent être perdus si elle est trop réduite. Une solution à ce problème consiste à rendre l’image cliquable de sorte que l’utilisateur puisse visualiser une version agrandie de l’image séparément du contenu. La manière habituelle de procéder consiste à utiliser une boîte de dialogue modale.

image d'en-tête avec la permission de

Avatar

Bogdan Rancea

Bogdan est un membre fondateur d’Inspired Mag, ayant accumulé près de 14 années d’expérience 6 au cours de cette période. Dans ses temps libres, il aime étudier la musique classique et explorer les arts visuels. Il est également obsédé par les fixies. Il possède déjà 5.