Le design réactif est un terme relativement nouveau dans la conception de sites Web. Il a été inventé il y a seulement trois ans en mai 2010, lorsque le concepteur Web Ethan Marcotte a utilisé le terme dans son article pour une liste à part.
Aujourd'hui, il y a même un mini débat sur la question de savoir si le design réactif est là pour rester ou s'il ne s'agit que d'un éclair dans la casserole. Seul le temps le dira, mais pour le moment, il est clair que le design réactif s'efforce de rendre l'expérience utilisateur aussi confortable que possible.
Le design réactif est une philosophie de conception Web axée sur la création de sites offrant aux utilisateurs une expérience de visualisation améliorée. Cela inclut des fonctionnalités telles que la navigation et la lecture sans effort et un minimum de redimensionnement, de défilement et de panoramique du navigateur. Tout cela se déroule sur différents appareils, des ordinateurs de bureau aux smartphones.
Étant donné que cette approche de conception de sites Web est encore à un stade naissant, vous ne savez peut-être pas exactement en quoi consiste la conception adaptative. S'agit-il davantage d'afficher de manière transparente du contenu sur plusieurs plates-formes ou s'agit-il principalement d'aider les entreprises à créer des sites plus attractifs pour augmenter leurs ventes grâce à une meilleure expérience utilisateur?
Mashable est déjà sorti et appelé 2013 l'année du design réactif. Bien que cela reste à voir, certains aspects fondamentaux du design réactif sont des normes qui ne disparaîtront jamais. Voici les principaux éléments de conception réactifs avec lesquels vous devez vous familiariser.
Vous serez pardonné de penser que le design réactif et le design mobile ne font qu'un - mais ce n’est pas le cas. Bien sûr, la conception réactive crée des sites Web qui répondent à la fois à la taille du navigateur et sont compatibles avec les appareils mobiles, mais la conception réactive est une conception entièrement Web. Le problème de la référence à cette approche de conception Web en tant que conception mobile est qu’elle est intrinsèquement limitative, ce qui nuit à l’approche elle-même.
Les sites Web réactifs les plus efficaces peuvent être vus comme ils étaient censés être, dans toute une gamme de résolutions. Cela inclut tout, des 1024 × 768 pixels habituels aux écrans 1920 × 1080 et tout le reste. Des sites comme ceux-ci sont également splendides sur les tablettes (rétine et écrans standard), ainsi que sur les smartphones. Si un concepteur Web considère le design réactif uniquement dans le contexte du mobile, il risque de manquer une expérience utilisateur plus large.
Dans le même temps, le mobile est un point de départ vraiment opportun pour toute la discussion sur le design réactif. Il a été la norme de commencer par un schéma mobile, puis d’étendre cette conception à des tailles supplémentaires à mesure qu’un site Web réactif est développé. Beaucoup de concepteurs pensent qu'il est plus simple de développer des visuels plutôt que de les minimiser.
S'il existe une règle que les concepteurs de sites Web doivent suivre, la qualité de l'image est beaucoup plus importante que le nombre réel d'images. La raison en est qu’une image de mauvaise qualité n’est pas attrayante, quelle que soit la taille. Le temps nécessaire à un site pour charger une image est presque aussi important que sa taille. Les utilisateurs mobiles seront d'accord avec cela, car ils ont une bande passante limitée.
Qu'est-ce qu'un web designer à faire? Il suffit d'atteindre un équilibre intelligent entre le temps de chargement et la qualité. Cela comprend la mise à l'échelle des images avec les propriétés de hauteur et de largeur CSS, évitant de charger des images en taille réelle et optimisant les images pour Internet. Avant le téléchargement, il est fortement conseillé de recadrer toutes les images et d'enregistrer chaque image à la plus petite taille possible, à condition qu'elle conserve une qualité visuelle nette.
Check-out Le site de Sony USA . Notez que toutes les images sont d'une qualité irréprochable, quelle que soit leur taille. Une fois que vous visitez le site ou actualisez la page d'accueil, notez également la vitesse de chargement des images. Il n'est pas nécessaire d'attendre plus d'une seconde pour que tout soit extrêmement clair.
Les concepteurs ont beaucoup de choix en incorporant des images dans un cadre réactif. Ils ne peuvent utiliser que quelques images; réduire l'utilisation des images dans les systèmes de taille mobile; permettre aux images de se masquer dans un environnement mobile; ou utiliser différentes tailles et versions de fichiers. Ces choix fonctionneront efficacement, bien que certains développeurs s'opposent à la dissimulation d'images, car l'utilisateur devra toujours charger les images même si elles sont invisibles.
Le type ne doit pas être unique. Un type de police qui semble attrayant pour votre bureau peut être horrible sur votre smartphone. La typographie doit suivre les mêmes règles que les autres aspects du design réactif.
L'aspect le plus important de la typographie sensible est la longueur de la ligne. Pour une lisibilité en douceur, le type doit être optimisé en fonction de la largeur de l'écran. En règle générale, pour les sites Web de bureau, entre 50 et 75 caractères, une ligne est idéale; pour les appareils mobiles, entre 35 et 50 caractères est idéal.
Le type doit également être facilement lisible verticalement. De nombreux sites utilisent un espace de ligne pouvant atteindre 140% de la taille des points de l'écran pour des blocs de texte plus volumineux. Si l'écran est plus petit, plus d'espace devrait être ajouté.
Même la police de caractères spécifique utilisée est significative. Les polices de caractères sophistiquées et les caractères de nouveauté ont la capacité de paraître visuellement attrayants sur des écrans plus grands, mais ils sont difficiles à lire si la taille des points est petite. Ces types de polices doivent avoir beaucoup d'espace entre elles. Lorsque vous travaillez avec des tailles plus petites, il est plus facile d'utiliser des styles sans serif normaux et même des traits.
Sur Le site Web de Web Design , vous pouvez voir beaucoup de ces principes suivis, ce qui permet une bonne réactivité. Notez que sa longueur de ligne de texte sur un bureau - bien qu'en moyenne supérieure à la recommandation idéale de 50 à 75 caractères - se compose d'une police de caractères propre et facile à lire. En outre, l'interligne est également supérieur à la taille de la police. Sur les appareils mobiles, la réactivité du site est encore meilleure: sur un écran de l'iPhone 5, le nombre de caractères par ligne était d'environ 67, soit un peu plus que la règle idéale de 35 à 50 caractères.
En ce qui concerne l'expérience utilisateur - qui est l'un des facteurs les plus importants à prendre en compte par les concepteurs Web -, la navigation est une priorité absolue. La navigation doit être fluide et efficace pour garantir une expérience utilisateur confortable.
Une conception efficace et réactive doit en assurer une attention particulière en accordant une attention particulière à la largeur spécifique d'un navigateur donné. Un site qui utilise bien la conception réactive disposera de la navigation de son site dans différentes zones, toutes dépendant de la largeur du navigateur. L'un des meilleurs exemples de ceci est Sens de la nourriture La navigation sur le site.
Ce serait une erreur que le design réactif redimensionne la navigation du site dans des proportions plus importantes sur les appareils dotés d’écrans plus grands.
Alors maintenant, lorsque vous entendez des concepteurs Web parler de design réactif, vous saurez qu'il ne s'agit pas seulement de donner à un site Web une apparence soignée et une exécution fluide sur des écrans mobiles plus petits. Vous savez que cette approche de conception repose sur le principe selon lequel les sites Web de toutes tailles fournissent l'expérience la plus optimale à l'utilisateur - peu importe ce qu'ils utilisent pour visualiser le site.
Le design réactif reste un concept relativement nouveau, du moins pour la plupart des gens qui ne consultent que des sites Internet. C'est pourquoi tant de gens ne peuvent toujours pas se mettre d'accord sur ce qui fait du design réactif un design réactif. Est-ce à propos de tout voir correctement sur les écrans mobiles? Est-ce juste une question de temps de chargement et d'images de haute qualité qui plairont aux yeux? S'agit-il d'un design épuré et de polices faciles à lire?
C'est tout ça et plus encore. Ce ne sont là que les principes fondamentaux de cette approche de conception de sites Web, mais la conception adaptative évolue encore et change. Il est donc probable que des éléments supplémentaires seront également pris en compte. En fin de compte, il s'agit d'améliorer l'expérience utilisateur, car personne ne veut gérer un site Web lent, flou, difficile à lire, encombré ou difficile à naviguer.
Le design réactif est-il juste une tendance? Quels sont les aspects clés du design réactif? Faites-nous savoir vos pensées dans les commentaires.