La plupart des sites Web utilisant responsive conception l'utilisent de manière incorrecte, ce qui entraîne des problèmes. L'approche générale de responsive la conception est paresseuse, et si vous adoptez cette approche, certains de vos responsive les sites fonctionneront parfaitement, et beaucoup d'entre eux ne le feront pas. Pour ceux qui fonctionnent parfaitement, ce sera probablement une question de chance.
La notion de responsive le design est simple, mais c'est sa simplicité même qui pousse les gens à faire des erreurs si facilement. Les designers avec des années d'expérience se sont habitués à concevoir pour le desktop, et donc ils planifieront généralement une conception basée sur un desktop mise en page.
Desktop les mises en page diffèrent des mises en page de tablette et des mises en page mobiles car elles sont normalement multi-colonnes, incluent normalement d'énormes quantités d'espace blanc, et tout est juste "grand", faute d'un meilleur mot. Si responsive techniques de conception sont utilisées, cette mise en page multi-colonnes est censée se décomposer en une seule colonne.
Si c'est tout votre responsive design fait réellement lorsqu'il est visualisé sur un appareil mobile, vous pouvez avoir un problème. L'ampleur d'un problème dépend de votre attitude, mais les bons designers se soucient d'une bonne UX. Ils se soucient encore plus des mauvaises 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 designer comprendra qu'il s'agit d'un problème à résoudre, et ce que font les designers, c'est trouver des solutions aux problèmes. C'est donc le travail idéal pour vous de trouver le meilleur moyen de fournir le contenu principal du site sans transformer l'expérience utilisateur en une fête de défilement frustrante. Voici quelques-unes des choses à considérer lors de la décomposition d'un desktop design dans un design mobile :
1. «Mobile First» est idiot
Désolé, mais ça l'est. Tout le monde répète cela, mais en tant que concept, ce n'est pas très utile, car si vous concevez vraiment le "mobile d'abord", il sera cauchemardesque d'essayer de le redimensionner à un desktop design à moins que vous ne vous en teniez à une disposition purement à une seule colonne tout en 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:
- Énorme Desktop
- Ordinaire Desktop
- 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 desktop la conception comprend l'un de ces énormes pieds de page volumineux avec des tonnes de liens internes ? Génial, ce sera probablement très pratique sur un desktop. Sur un mobile, cela a l'air ridicule et c'est plus qu'une simple touche ennuyeuse. 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 « punisse » les utilisateurs mobiles, mais c'est un peu une notion absurde. La réalité est que vous cachez le contenu parce qu'il est là pour améliorer la desktop expérience, mais ne contribue pas suffisamment au message central 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 lorsqu'il s'agit d'un client de conception Web. Les clients savent rarement ce qui leur convient le mieux, et il est important de s'affirmer en tant que concepteur Web qui sait fournir le bon résultat pour le client. Autrewise 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 responsive satellite
Toutes les images doivent être responsive dès 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 afin que l'utilisateur puisse afficher une version agrandie de l'image séparée du contenu. La manière normale de le faire est via une boîte de dialogue modale.
image d'en-tête avec la permission de
Mobile d'abord signifie simplement que dans la base de code, le css "par défaut" est pour mobile et que vous créez des modifications pour une plus large formats à partir de là. Je ne comprends vraiment pas votre premier point