La conception réactive est notre meilleure solution actuelle au phénomène du Web omniprésent. Les utilisateurs du monde entier accèdent à Internet sur d'innombrables appareils extrêmement variés et les pages réactives offrent un moyen simple et fonctionnel de prendre en compte ces différences.
Aujourd'hui, nous allons prendre du recul par rapport aux discussions sur les requêtes des médias et au jargon technique et nous concentrer sur les aspects fondamentaux de la manière dont les techniques réactives affectent votre processus de conception. Quels points principaux devez-vous garder à l'esprit lorsque vous abordez un projet de conception de site Web réactif? Continuez à lire pour le découvrir.
Le design, c'est plus que du CSS
Récemment, il y a eu beaucoup de discussions sur les techniques impliquées dans la conception réactive d'un point de vue technique: requêtes de médias, pourcentages de largeur basés sur, etc. Cependant, une fois que vous maîtrisez les astuces CSS pour l'implémentation d'une conception réactive, plus grand obstacle: la conception réelle.
"Il est déjà assez difficile de concevoir un design professionnel lorsque vous vous préoccupez d'un seul format, à quel point sera-t-il plus difficile pour un design réactif?"Cela semble être une tâche ardue, n'est-ce pas? Vous êtes sur le point de créer une expérience cohérente et cohérente qui convient parfaitement à toutes les tailles d'écran. Il est déjà assez difficile de concevoir un design professionnel lorsque vous vous préoccupez d'un seul format. À quel point sera-t-il plus difficile pour un design réactif?
C'est l'une des principales raisons qui incitent de nombreux concepteurs à hésiter à adopter le design réactif comme pratique par défaut. L'objection la plus fréquente à la fois des concepteurs et de leurs clients est que la conception réactive semble être une entreprise qui prend beaucoup de temps. Les concepteurs sont forcés de tenter de justifier une hausse de prix ou de perdre du temps au nom de la qualité de leur travail.
Heureusement, du point de vue des CSS, des projets tels que Skeleton ont considérablement réduit les délais de codage. Cela ne signifie toutefois pas que vous êtes débranché, en tant que concepteur, vous devrez toujours vous concentrer sur la création d'une expérience solide pour chaque utilisateur. Cela signifie donc que vous devez réfléchir sérieusement à la manière dont le processus de conception évolue à la lumière de cette nouvelle méthodologie. . Examinons quelques-unes des principales considérations à prendre en compte.
Photoshop ne le coupera pas
Avec le responsive design, concevoir dans le navigateur n’est plus une lubie, c’est une nécessité. Vous pouvez certainement spécifier des idées dans Photoshop sur la façon dont le site doit apparaître selon différentes largeurs. Cela pourrait même fournir des résultats finaux plus riches, mais la vérité est que Photoshop ne peut pas reproduire le type d'effet dynamique qui indique une réactivité. conception.
«Concevoir dans le navigateur n’est plus une lubie, c’est une nécessité».Lorsque vous parlez d'une conception unique qui évolue avec la taille de la fenêtre du navigateur, la meilleure façon de le planifier consiste à lancer les pneus et à le voir en action dans le navigateur.
Ne considérez pas cela comme une tempête contre Photoshop, vous n’avez ni ne devez abandonner l’utilisation d’images, de textures, etc. construites dans Photoshop, Fireworks ou d’autres logiciels graphiques. Cependant, leur mise en place dans une maquette rapide sera probablement mieux réalisée par la mise en œuvre de navigateur en direct plutôt que par des vignettes statiques.
Gardez à l'esprit que vos maquettes peuvent toujours être des produits à faible fidélité. Que vous souhaitiez commencer avec une structure filaire de base ou une conception d'aspect assez fini est à vous. La clé ici est que vous avez quelque chose en direct qui vous permet de tester les différentes évolutions afin que vous puissiez résoudre les problèmes au fur et à mesure, plutôt que de perdre de précieuses heures sur une idée fondamentalement viciée.
Dramatiquement différent
Parfois, réduire un dessin est aussi simple que de refondre les éléments de plusieurs colonnes en une seule colonne empilée. Si votre conception est scindée en petits morceaux agréables, c'est peut-être la voie à suivre.
Cependant, rappelez-vous que des appareils très différents peuvent faire appel à des conceptions radicalement différentes. Il arrive souvent qu'une solution réellement meilleure puisse être apportée en modifiant considérablement le fonctionnement de la page. Pour voir ce que je veux dire, considérons le dessin El Sendero del Cacao ci-dessous.
Comme vous pouvez le constater, les versions grandes et petites du design diffèrent un peu. La clé ici est qu'ils ressemblent toujours à deux versions du même site, ce qui signifie que la cohérence de la marque est restée inchangée. Le concepteur a simplement décidé que la version mobile fonctionnait mieux avec beaucoup moins de flair visuel que la version complète.
Gardez à l'esprit que «différent» ne signifie pas toujours un dénudage complet et total. Votre version mobile ne doit pas forcément être ennuyeuse et prévisible. L’important ici n’est pas de tout supprimer, mais d’examiner de manière critique les différentes tailles de clé que vous ciblez et la manière dont vous pourriez améliorer l’expérience de chacune en repensant les principes fondamentaux de la conception.
Qu'est-ce qui est absolument essentiel?
L'une des principales composantes de la transition de votre conception à travers différentes phases consiste à cibler les composants absolument vitaux de la conception et à leur donner la priorité la plus élevée.
Comme nous l'avons vu dans l'exemple précédent, votre version compatible avec les appareils mobiles ne contiendra certainement pas toujours tout ce que votre ordinateur de bureau grandeur nature pourra contenir. L'astuce consiste alors à prendre en compte tout ce que vous et votre client envisagez d'inclure et à créer une hiérarchie d'importance afin de pouvoir réduire l'inutile pour les versions plus petites.
Nous voyons ce principe à l'œuvre dans le site de Stephen Carver ci-dessous.
Notez que le design a non seulement été refondu, mais également réduit pour la version mobile. Une partie du contenu a été considérée comme essentielle, tandis que d’autres sont plutôt «agréables à avoir» lorsque l’espace disponible sur l’écran est suffisant.
L'exemple le plus évident est celui de la zone de navigation.Notez que la version plus grande de la conception contient de petits sous-en-têtes pour chaque élément de navigation. Cela aide l'utilisateur à mieux comprendre le schéma de navigation. Sur la petite version cependant, ceux-ci ont été supprimés pour économiser de la place.
Lors de l'analyse de votre conception pour les éléments essentiels, l'expérimentation est la clé. Essayez de supprimer divers composants pour déterminer si la facilité d'utilisation en souffre ou non. Notez que ces décisions doivent être prises à chaque intervalle, pas seulement le plus petit et le plus grand.
Toucher ? Cliquez sur
Un autre point important à retenir lors de la conception est que l’état actuel de l’informatique est divisé en deux catégories: les périphériques de saisie tactiles et ceux qui utilisent un curseur. L’hypothèse la plus sûre, bien sûr (pour l’instant), est que les grandes tailles de fenêtres de navigateur tendent à correspondre aux ordinateurs de bureau ou portables, tandis que les petites tailles de fenêtres de navigateur indiquent généralement une interface tactile.
Ce sont des animaux très différents et vous ferez bien de vous souvenir que, tout en structurant vos dessins, car l'orientation que ces connaissances vous donnent peut-être un peu contre-intuitif.
Par exemple, même si nous avons tendance à considérer le site mobile comme une version réduite du site de bureau, il arrive souvent que la taille des éléments augmente en raison de la différence entre toucher et cliquer. Un élément de navigation qui semble parfaitement accessible avec une souris et un curseur peut s'avérer presque impossible à cibler avec précision avec le grand périphérique de saisie grossier qu'est l'index humain.
La chose importante à retenir ici est de tester comme un fou. Il est trop facile de concevoir sur un bureau, puis de redimensionner la fenêtre du navigateur pour jeter un coup d’œil à cette version mobile. Cela ne vous dit tout simplement pas toute l'histoire. Vous devez mettre la main sur le motif à une taille plus petite avant de le qualifier de bon.
Tout est dans l'intervalle
Une chose cruciale à prendre en compte en ce qui concerne la conception réactive est qu’il ne s’agit pas que de la taille de l’écran, mais de la taille de la fenêtre du navigateur. Ce n’est pas parce que quelqu'un possède un MacBook 13 pouces que sa fenêtre de navigateur est de cette taille. Il arrive souvent que les utilisateurs ouvrent et utilisent des fenêtres de navigateur bien moins qu’en plein écran.
La conclusion est que vous n'êtes pas débranché après avoir testé quelques tailles de fenêtres prédéfinies. Redimensionnez la fenêtre du navigateur et observez la réponse du dessin à chaque petite étape. L'argument standard est que les utilisateurs non-concepteurs n'effectuent jamais cette action, ce qui est correct, mais ils utiliseront les fenêtres de leur navigateur dans un nombre infini de tailles imprévisibles et la beauté du design réactif réside dans le fait que vous pouvez vous assurer assez facilement que votre design aura l'air parfait dans chacun d'eux.
Pensez au premier itinéraire mobile
En fin de compte, c'est à vous de décider comment planifier vos conceptions réactives. Cependant, il existe de nombreux arguments solides en faveur de l'adhésion à la foule axée sur le mobile.
Commencer par la version mobile vous aide à ne pas simplement servir une version désobligeante et sans intérêt de votre conception originale à vos utilisateurs mobiles. Cela garantit également que vous réfléchissez vraiment aux détails de chaque petit contenu.
Ci-dessus, nous avons indiqué que vous devez passer au crible votre conception et cibler les éléments absolument essentiels. Il s'agit d'un processus beaucoup plus simple si vous ne commencez que par l'essentiel. Avec cette technique, vous pouvez ajouter de manière proactive à votre conception lorsque la taille de la page augmente, par opposition à la découpe lorsque la taille de la page diminue. Ceci suit le concept d'amélioration progressive, qui commence par une base fonctionnelle solide et offre une amélioration dans la mesure du possible.
Un autre avantage du mobile first est que vous pouvez souvent éviter le chargement d'éléments inutiles sur des appareils plus petits qui ne les utilisent pas. Des projets tels que 320 et plus ont pour but de vous aider à minimiser les ressources chargées par la petite version de votre conception.
Conclusion
Le but de cet article était de vous faire cesser de penser à la partie dorsale de la conception réactive suffisamment longtemps pour prendre en compte les ramifications de cette technique sur ce que l'utilisateur voit. Le résultat final de l'évolution de votre conception d'un point de vue visuel et fonctionnel pour répondre aux besoins de l'utilisateur est bien plus important que la syntaxe de requête multimédia.
N'oubliez pas que vous devez faire évoluer activement votre conception dans le navigateur, pas seulement dans une application de conception statique. Vous devez également établir une hiérarchie concrète des éléments les plus importants de la conception pour vous assurer que ces pièces du puzzle sont présentes et fonctionnent parfaitement pour toutes les tailles de fenêtres. Enfin, rappelez-vous que la conception Web mobile est bien plus qu'une simple réduction des pages Web de bureau. Envisagez de prendre un premier itinéraire mobile pour vous assurer que tous les utilisateurs profitent d'une expérience sans faille.
Crédits d'image: Claudia Regina