Je navigue sur Internet tous les jours, sur plusieurs appareils. J'utilise mon Macbook Pro, iMac, PC, iPad, iPhone et même mon téléviseur. Cela me dérange donc vraiment lorsque je vois des sites Web qui ne sont pas optimisés pour des résolutions d'écran plus importantes ou qui prennent deux minutes pour être chargés sur mon appareil mobile.
Nous avons tous adopté le concept du design réactif. Très peu de gens s'y opposent. En fait, le seul repost convaincant que j'ai entendu récemment est qu'un client n'est pas disposé à payer pour le temps supplémentaire nécessaire. Mais comme pour toute nouvelle pratique, les mythes ont grandi pour la contrer.
Voyons si nous pouvons éliminer certaines de ces idées fausses ...
Oui, le Web mobile est en plein essor et oui, il est le moteur de la conception réactive, mais lorsque nous pensons à un design réactif, nous devons considérer plus que le simple mobile. Avec l'introduction des écrans rétiniens et des navigateurs de jeux vidéo, les internautes consultent désormais les sites Web sur des résolutions d'écran plus importantes et dans de nombreux contextes différents.
Essayez de prendre en compte les différents contextes utilisateur lors de la conception et du développement de sites Web réactifs. Vous devez penser à quel appareil un utilisateur utilise: l'utilisateur est-il sur un appareil mobile ou à la maison devant le téléviseur? Vous devez penser à l'emplacement de l'utilisateur: l'utilisateur est-il en ligne à l'épicerie ou à camper dans la nature? Avoir un bon contenu ne veut rien dire si votre site prend dix minutes pour charger pendant que vos utilisateurs sont assis sur la plage avec une margarita.
Le contenu est tout, mais le contexte est partout et c'est quelque chose sur lequel vous n'avez absolument aucun contrôle. C'est pourquoi, de manière réaliste, votre contenu doit évoluer vers n'importe quelle résolution, grande ou petite. Nous disposons d'un ensemble d'outils qui nous permettront de manipuler les mises en page, d'optimiser les tailles de texte et d'augmenter les performances pour tous les contextes. N'oubliez donc pas de les utiliser.
Rappelez-vous que le contexte change tout le temps, c'est pourquoi il est si important d'équilibrer la présentation visuelle, les besoins des utilisateurs et les performances à l'approche d'un design réactif. Il ne s'agit pas seulement de mobile.
J'avais l'habitude de dire que la conception Web réactive ne fonctionnerait pas pour tous les projets et que cela dépendait du cas d'utilisation. Eh bien, j'ai récemment modifié mon point de vue et je crois fermement que si nous voulons être des concepteurs et des développeurs centrés sur l'utilisateur, nous devons aborder chaque projet avec un design réactif en tête.
Les sites Web à largeur fixe peuvent limiter les résolutions d’écran de plus en plus petites. L'essentiel est que nos sites Web soient accessibles à tous, quel que soit l'appareil ou la résolution d'écran qu'ils utilisent, sans restrictions.
J'ai remarqué une tendance dans le secteur où les concepteurs et les développeurs construisent des sites Web réactifs adaptés à certaines résolutions d'appareils seulement, et j'en suis coupable. Les trois appareils les plus courants sont bien sûr les ordinateurs portables, ordinateurs de bureau, iPad et iPhone (ou autres appareils mobiles). En tant que concepteurs, nous devons réaliser que le design réactif concerne les points de rupture de la conception et rend le contenu lisible et accessible à tous, et pas seulement aux utilisateurs de certains appareils.
Cela étant dit, si vous concevez des sites Web dans un logiciel, il est important d’avoir une sorte de cadre avec lequel des points d’arrêt doivent fonctionner. Je suggère de créer le vôtre. Optimisez votre mise en page en fonction du contenu. La meilleure façon de trouver ce que les points d'arrêt fonctionnent le mieux est d'esquisser d'abord quelques wireframes pour avoir une idée, puis vous pouvez commencer à poser des pixels dans le logiciel de votre choix. Assurez-vous de travailler sur la même grille lorsque vous filmez et concevez.
Si vous êtes comme moi, codez vos wireframes et créez un prototype en direct. Cela m'a beaucoup aidé avec mon workflow réactif car je peux créer une maquette fluide et ajouter des points d'arrêt au design au fur et à mesure que la conception se brise au lieu d'essayer de créer des pixels dans Photoshop.
L'un des plus gros problèmes que j'ai remarqué sur de nombreux sites Web réactifs est que la typographie est lancée aux loups lorsque les concepteurs et les développeurs choisissent d'utiliser des points d'arrêt sur les points d'arrêt. À mon avis, choisir un appareil plutôt qu'un design montre un mépris total pour le contenu publié et pour l'utilisateur qui en consomme. Le contenu doit rester lisible jusqu'à ce qu'il soit nécessaire de l'ajuster pour conserver cette lisibilité. Le contenu sera toujours roi et l'accessibilité et la lisibilité de votre contenu devraient toujours être la priorité absolue.
L'une des façons dont j'aime gérer la lisibilité du contenu dans un design réactif consiste à utiliser des unités relatives telles que ems pour la taille de la police, le remplissage, les marges et la mise en page. Le design réactif est tout au sujet des dispositions proportionnées et, à mon avis, les ems sont un ajustement parfait.
Les Ems sont des unités relatives évolutives par rapport à la taille de la police des éléments parents. Elles peuvent vous faire gagner beaucoup de temps et vous éviter des problèmes, tout en vous permettant de conserver la structure complète de votre mise en page. Qu'est-ce que cela signifie que vous demandez? Eh bien, cela signifie que lorsque la taille de la police de base augmente ou diminue, la mise en page s’ajuste uniformément sans falsifier quoi que ce soit.
Voici un exemple, disons que nous avons trouvé deux points d'arrêt de conception, un pour un très grand écran de bureau à une super résolution et un pour une petite tablette. Disons aussi que notre taille de police de base est de 16px, ce qui équivaut à 1.0em et que nous augmentons la taille de police de base jusqu'à 22px lorsque le site est visualisé avec une résolution de 3840 x 2160 (super résolution) 14px à une résolution de 800 x 600 (petit ordinateur portable / tablette). Nous avons modifié radicalement la taille du type et la disposition de notre site Web en deux points d'arrêt désignés, un grand et un petit. Un titre à 1.4em avec une taille de police de base de 22px pour de plus grandes résolutions signifie que 1.4em est égal à 30.8px et à la taille de police inférieure de 14px, 1.4em serait égal à 19.6px. Même si notre taille de police a été considérablement augmentée à 3840 x 2160, nous n'avons pas à nous soucier de la rupture de la mise en page car elle a également été ajustée. Disons que notre élément contenant avait une largeur de 50em. À une résolution de 800 x 600, ce serait 700px mais à la résolution de 3840 x 2160 ce serait 1100px. Notre rembourrage et nos marges s’ajusteraient également. À une résolution plus large, la taille des polices et la mise en page définies dans ems ont permis à notre conception de s'adapter proportionnellement, ce qui rend notre contenu plus accessible et plus lisible.
Le design réactif a pour but de rendre votre contenu accessible à tous, même aux personnes handicapées, pour toutes les résolutions d'écran et tous les appareils. Cacher du contenu n'est jamais une bonne idée et il y a des chances que si vous devez le cacher, vous n'en avez pas besoin pour commencer. Cacher du contenu le rend illisible pour les lecteurs d'écran et vous rendez désormais votre contenu inaccessible aux personnes ayant une déficience visuelle ou cognitive. Gardez cela à l'esprit, le contenu devrait être universel sur tous les appareils, ne punissez pas vos utilisateurs en limitant ce qu'ils peuvent voir sur un appareil distinct.
Cela étant dit, je trouve encore quelques cas d'utilisation où display: none; est très pratique. La plupart des cas d'utilisation traitent d'une sorte de navigation, et j'utilise display: none; sur les éléments de navigation qui changent de forme sur différents appareils. Ce n'est jamais une bonne idée de limiter ou de cacher du contenu sur différents appareils, car vous avez probablement basé cette décision sur une hypothèse et certains utilisateurs, quelque part, auront une très mauvaise expérience.
Il y a eu un certain nombre de sites Web que j'ai vus récemment qui ont montré un manque d'empathie envers les utilisateurs ayant une faible bande passante. La majorité de ces sites ont les mêmes caractéristiques en commun, les grandes images et les grandes bibliothèques JavaScript et beaucoup de ces sites Web auraient pu être optimisés s'ils étaient conçus avec une première approche mobile.
Comme il y a encore beaucoup de discussions sur les images réactives, il est difficile pour quiconque de s'engager dans une solution unique. Je comprends le dilemme, mais attendre une solution parfaite, standard pour tous les navigateurs et tous les appareils, ne rend pas votre site Web plus facile à utiliser sur les appareils avec une bande passante limitée. Trouvez une solution qui corrige le mieux votre problème et l'exécute. Ne pas trouver de solution implique des problèmes de performance pour tout le monde, ce qui va à l'encontre de l'objectif de la conception réactive.
Les grandes bibliothèques JavaScript peuvent également causer des problèmes sur les périphériques plus petits. Essayez de trouver un moyen de les appeler conditionnellement en fonction de la résolution de l'écran ou du type d'appareil. La performance ne devrait pas être une réflexion après coup sur le design réactif.
Le Web a explosé et, avec l'avènement de la technologie mobile et des smartphones, nous pouvons accéder au contenu n'importe où et dans n'importe quel contexte. Il est important de s'assurer que nous pouvons atteindre tous nos utilisateurs et leur donner ce qu'ils veulent, quand ils le souhaitent. Le design réactif est une technique très nouvelle et à mon avis, c'est la technique idéale pour unifier notre contenu sur le Web.
Quels autres mythes sur le design réactif voudriez-vous démystifier? Y a-t-il des inconvénients à la conception adaptative? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image web réactive via Shutterstock.