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

La plupart des sites Web utilisant un design réactif ne l'utilisent pas correctement, ce qui entraîne des problèmes. L'approche générale de la conception réactive est paresseuse, et si vous adoptez cette approche, certains de vos sites réactifs fonctionneront parfaitement, et beaucoup d'entre eux ne le feront pas. Pour ceux qui fonctionnent parfaitement, ce sera probablement une question de chance.

Le concept de responsive design est simple, mais sa simplicité même est ce qui conduit les gens à faire des erreurs si facilement. Les concepteurs avec des années d'expérience se sont habitués à la conception pour le bureau et planifieront donc généralement une conception basée sur une disposition de bureau.

Les mises en page de bureau diffèrent des mises en page de tablette et des mises en page mobiles parce qu'elles sont normalement multi-colonnes, incluent normalement d'énormes quantités d'espace blanc, et tout est simplement «grand», faute d'un meilleur mot. Si des techniques de conception réactive sont utilisées, cette disposition à plusieurs colonnes est censée se décomposer en une seule colonne.

Si c'est tout ce que fait réellement votre design réactif lorsqu'il est affiché sur un appareil mobile, vous pouvez avoir un problème. L'ampleur du problème dépend de votre attitude, mais les bons designers se soucient d'une bonne UX. Ils se soucient encore plus de la mauvaise UX. Si votre site a une mauvaise UX et que vous voulez être un bon concepteur, vous devez le réparer.

Ce problème avec la réduction d'une mise en page à plusieurs colonnes en une seule colonne est qu'il ne fonctionne pas sur une base proportionnelle. Si vous devez réduire quelque chose horizontalement et que vous n'apportez aucun autre changement, il va évidemment s'agrandir verticalement.

Versez l'eau d'un petit verre gras dans un grand verre mince, 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, nous avons besoin du volume pour changer. Ce n'est normalement pas une bonne idée de changer la forme mais de conserver 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 ce que les concepteurs font réellement, c'est trouver des solutions aux problèmes. Par conséquent, c'est le travail parfait pour vous de trouver le meilleur moyen de fournir le contenu principal du site sans transformer l'expérience utilisateur en un défilement frustrant. Voici quelques éléments à prendre en compte lors de la décomposition d'une conception de bureau en une conception mobile:

1. «Mobile First» est idiot

Désolé, mais ça l'est. Tout le monde le perroquet, mais en tant que concept, ce n'est pas très utile, car si vous concevez vraiment «mobile d'abord», il sera cauchemardesque d'essayer de le redimensionner en une conception de bureau à moins que vous ne vous en teniez à une disposition à colonne unique. vers le haut.

La meilleure approche consiste à concevoir physiquement au moins trois (et jusqu'à 11) mises en page différentes. Les minimums que vous pouvez envisager 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 paresseuse «taille unique» est si tentante, mais il est également évident pourquoi il y a tant de façons de la ruiner.

2. Apprivoisez ce pied de page tentaculaire

La conception du bureau comprend l'un de ces énormes pieds de page volumineux avec des tas de liens internes? Génial, ce sera probablement très pratique sur un bureau. Sur un mobile, cela a l'air ridicule et est plus qu'un simple contact ennuyeux. Vous pouvez concevoir des pieds de page complètement différents pour chaque point d'arrêt de périphérique. Rendez simplement ces liens de pied de page disponibles dans une boîte de dialogue modale et tout le monde y gagne.

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

Si un appareil particulier n'est pas commun, ce n'est pas si grave s'il y a quelques bizarreries dans la conception qui n'apparaissent que lors de la visualisation sur cet appareil. Plus un appareil est populaire, plus vous devrez travailler pour vous débarrasser de toutes les bizarreries qui y apparaissent.

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 afficher la publicité, choisissez le message. Google est plus susceptible de vous considérer comme persona non grata si vous masquez le contenu principal et diffusez ensuite un tas 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 «punit» les utilisateurs mobiles, mais c'est une notion un peu absurde. La réalité est que vous cachez le contenu parce qu'il est là pour améliorer l'expérience de bureau, mais ne contribue pas suffisamment au message principal du site pour que cela soit nécessaire

5. Vous pouvez utiliser des fonds alternatifs

Récemment, on m'a confié une mission ridicule où le propriétaire du site avait payé pour un fond particulier et voulait que tout le contenu soit adapté à ce contexte. Les éléments à puces devaient être un nombre très exact de caractères, le nombre total de lignes devait être exact, et ainsi de suite.

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

Le contenu est l'élément vital d'un site Web, et le modifier ou le restreindre en fonction des contraintes d'une mise en page est un signe clair d'amateurisme de la part du propriétaire du site, et un signe que la mise en page a été mal conçue au départ endroit. Tenez-vous en à vos principes, car ce client sera un problème si vous acceptez.

Le client a toujours raison, sauf lorsque ce client est un client de conception Web. Les clients savent rarement ce qui est le mieux pour eux et il est important de vous affirmer en tant que concepteur de sites Web qui sait comment fournir 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 afin qu'ils se réduisent 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 tourner. Vous devez également éviter 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éplacé vers le haut ou le bas, 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 meilleures) pour des tailles d'affichage particulières. Vous pouvez trouver la taille d'affichage avec les requêtes multimédias CSS, puis vous modifiez la taille de la police ou le visage de la police pour qu'elle corresponde à des valeurs qui afficheraient le contenu au maximum sur le type d'appareil que vous ciblez.

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

Toutes les images doivent être réactives dans la mesure du possible. Cela implique que parfois le détail d'une image peut être perdu si elle est trop réduite. Une solution à ce problème consiste à rendre l'image cliquable afin que l'utilisateur puisse afficher une version agrandie de l'image distincte du contenu. La manière normale de faire ceci est via une boîte de dialogue modale.

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

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.

Commentaires Réponse 1

  1. Mobile first signifie simplement que dans la base de code, le css "par défaut" est pour mobile et que vous générez des modifications pour des formats plus larges à partir de là. Je ne comprends vraiment pas votre premier point

Laissez un commentaire

Votre adresse email n'apparaîtra pas. Les champs obligatoires sont marqués *

Classement *

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..

Devenir un expert en commerce électronique

Entrez votre email pour que la fête commence