Le design réactif n'est pas une lubie née d'une technique CSS géniale, c'est une solution à un problème. Rappelez-vous toujours de cela et demandez-vous constamment si vous résolvez ce problème de manière adéquate. Si vous utilisez copier et coller pour insérer vos points d'arrêt de requête multimédia, votre solution peut être défectueuse.
Discutons pourquoi les requêtes des médias existent et comment nous pouvons les exploiter pour vraiment résoudre le dilemme du Web omniprésent. Voyons pourquoi vous devriez laisser votre contenu déterminer les points d'arrêt d'une présentation, et non des tailles d'écran hypothétiques.
Cet article fait partie de notre série intitulée "Au-delà de la conception de bureau", qui vous est proposée en partenariat avec Heart Internet VPS.
L'idée derrière les requêtes multimédia
Pour entamer ce débat correctement, il est nécessaire d'expliquer pourquoi les requêtes des médias sont soudainement devenues si populaires. La réponse est bien sûr que? Responsive Design ,? un terme inventé par Ethan Marcotte, est un moyen fantastique de résoudre un problème sans cesse croissant pour les concepteurs Web.
Tandis que tout le monde parlait sans cesse de la façon dont le Web mobile? allait dépasser le traditionnel, la révolution qui a eu lieu était beaucoup plus drastique: le web est devenu omniprésent.Ce problème? C’est génial pour le monde entier, mais c’est un vrai mal de tête pour nous. Au cours des dix dernières années, le Web mondial s'est transformé en quelque chose de nouveau. Ce n'est plus lié par les murs que nous avions précédemment établis. Je l'ai déjà dit, mais ça vaut la peine de le répéter. Tandis que tout le monde parlait sans cesse de la façon dont le Web mobile? allait dépasser le traditionnel, la révolution qui a eu lieu était beaucoup plus drastique: le web est devenu omniprésent.
Pour l'instant, nous n'accédons pas au Web à partir d'un point unique. Nous n'avons pas abandonné nos ordinateurs portables au profit des smartphones en tant qu'experts? prédit. Au lieu de cela, le Web est partout où nous sommes. Ce n'est pas seulement dans nos téléphones et ordinateurs, mais aussi dans nos tablettes, iPod, systèmes de jeu, téléviseurs et même voitures.
Cette tendance ne se poursuivra que dans le temps. La conception adaptative nous amène depuis une saison de création de sites mobiles distincts et dans une ère où nous développons un site qui évolue et s'adapte au périphérique sur lequel il est visualisé. À l'aide de requêtes multimédia, nous pouvons présenter des CSS spécifiques à un nombre quelconque de tailles de fenêtres d'affichage différentes et nous assurer que tout le monde a la meilleure expérience possible.
Le problème de la conception réactive
La section ci-dessus n'est pas un discours semi-historique destiné à remplir l'espace, c'est un regard important sur les objectifs que le design réactif est censé atteindre. La question est alors de savoir si elle répond à ces objectifs. Le responsive design répond-t-il adéquatement au problème de l'ubiquité?
La réponse est compliquée, au mieux, je peux dire, "cela dépend de la façon dont vous le faites." C'est une déclaration déroutante n'est-ce pas? Responsive design est simple: utilisez les requêtes de support pour créer du CSS personnalisé dans différentes tailles de fenêtres. C'est comme ça que tout le monde l'aborde, non? Alors, comment peut-il y avoir une bonne et une mauvaise façon?
La complexité survient lorsque nous commençons à aborder un aspect crucial de cette technique: quelles requêtes de supports dois-je utiliser? Ou en d'autres termes, lesquels? Points d'arrêt? dois-je cibler pour un CSS personnalisé? La réponse populaire actuelle commence de manière prévisible avec le meilleur? Mobile? dispositifs autour: l'iPhone et l'iPad (cue commentaires d'utilisateur Android en colère). À partir de ces archétypes, nous établissons ce que l’on appelle «générique». tailles de smartphone et de tablette. Ensuite, nous nous déplaçons et abordons les ordinateurs portables, les petits ordinateurs de bureau et enfin les grands écrans. Un ensemble standard de requêtes multimédia, comme celui de CSS-Tricks, comporte généralement neuf ou dix points d'arrêt préétablis.
Et si nous nous concentrions sur les besoins d'une conception spécifique plutôt que sur un cas d'utilisation hypothétique de périphérique? Et si nous construisions des mises en page qui fonctionnaient simplement partout?Pour être juste, ce système fonctionne dans une certaine mesure. Nous avons tous vu beaucoup d'excellents sites réactifs construits à l'aide d'un ensemble similaire à celui de Coyier ci-dessus. Cependant, je ne peux pas m'empêcher de penser que cela répète en quelque sorte la même erreur que celle que nous avons commise en concevant des sites mobiles? il y a quelques années. L’accent est mis ici sur l’appareil visualisant le site. Avant même de construire le site, nous avons ces points de rupture en tête.
Mais les appareils changent. Nous avons déjà établi que le Web est connecté à peu près à tout avec un interrupteur d'alimentation, alors pourquoi mettons-nous à nouveau autant d'accent sur les tailles d'écran courantes? Y a-t-il une meilleure alternative? Et si nous nous concentrions sur les besoins d'une conception spécifique plutôt que sur un cas d'utilisation hypothétique de périphérique? Et si nous construisions des mises en page qui fonctionnaient simplement partout?
Conception sensible axée sur le contenu
Les problèmes susmentionnés liés aux requêtes préétablies dans les médias ne m’ont apparu que lorsque j’ai commencé à travailler et que j’ai vraiment commencé à produire un travail réactif de mon côté. En théorie, les suggestions standard sont excellentes, mais une fois que vous les appliquez à une conception complexe, vous découvrirez que ces points de rupture ne la couvrent pas toujours. Le problème, comme l'ont rapidement constaté les concepteurs du Boston Globe après la mise en ligne du site, est-ce que des problèmes se posent? Dans l'intervalle? (Pour mémoire, ce projet est fantastique et tous les problèmes de mise en page ont été en grande partie résolus). Les choses se gâtent lorsque la conception est d'une taille que vous n'avez pas prise en compte et que vous devez rentrer et réparer les trous après coup.
Je dis cela en tant que fan amateur d’Apple: arrêtez de concevoir des sites Web pour iPhone.
Ma question est, pourquoi ne commençons-nous pas par là? Au lieu d'entrer dans un projet avec un ensemble de périphériques, et par conséquent de requêtes de médias, gardez à l'esprit que nous ne laissons pas la conception choisir. Chaque mise en page Web comporte un point où la taille du navigateur diminue son intégrité.Notre tâche en tant que concepteurs, compte tenu du problème de l’ubiquité, devrait consister à trouver cette taille et à en tenir compte, puis à faire mousser, rincer et répéter jusqu’à ce que tous les points faibles soient pris en compte.
Je dis cela en tant que fan amateur d’Apple: arrêtez de concevoir des sites Web pour iPhone. A la place, concevez un site Web qui préserve son intégrité, car la taille de la fenêtre de visualisation est réduite à tout état réalisable. Ne gardez pas à l’esprit des dispositifs spécifiques comme guide pour votre conception (exemple: les dispositifs plus petits ont tendance à être tactiles, alors créez des liens plus grands), mais ne mettez pas vos œillères sous l’angle et ne négligez pas le tableau plus général: votre conception devrait bien paraître sur n'importe quel écran.
Un nouveau flux de travail
Alors, à quoi ressemble un flux de travaux de conception réactif axé sur le contenu? C'est plus simple que vous ne le pensez. De toute évidence, vous avez besoin d'un point de départ. Si vous voulez démarrer mobile et monter, génial. Si vous voulez commencer en grand et descendre, c'est super. Personnellement, j’ai personnellement beaucoup de difficulté à vraiment creuser dans un design et à le faire correctement si je commence au niveau mobile, mais il existe de nombreux arguments solides pour le faire de cette façon.
Quelque chose de magique se produit lorsque vous suivez ce flux de travail.Hypothétiquement, supposons que vous ayez commencé avec un grand site de 1020 pixels de large. Vérifiez-le sur le plus grand écran sur lequel vous pouvez mettre la main et assurez-vous qu'il est superbe. Maintenant, faites glisser la fenêtre et réduisez-la jusqu'à ce que le dessin devienne laid. Il y a votre premier point d'arrêt. Définissez une requête multimédia pour ce point et corrigez tout ce que vous devez adresser. Une fois que vous avez terminé, saisissez cette fenêtre et trouvez le prochain point de laideur. Répétez ces étapes jusqu'à ce que vous soyez satisfait de la plage que vous avez prise en compte.
Mais qu'en est-il de l'iPad? Qu'en est-il du Kindle Fire ou de la dernière tentative de Samsung en matière de pertinence? Quelque chose de magique se produit lorsque vous suivez ce flux de travail. Vous venez de faire en sorte que la mise en page semble bon à peu près n'importe quelle taille. Si vous avez bien fait les choses, alors quand vous les tirez sur votre téléphone ou votre tablette, ça va avoir l'air génial.
Mise en page seulement
Gardez à l'esprit que cette discussion ne concerne que les ratios de mise en page. Vous ne devez absolument pas cesser de tester les fonctionnalités sur différents navigateurs et appareils. Responsive design ne rend pas compte du fait que différents moteurs de navigateur interprètent différemment HTML, CSS et JavaScript.
Conclusion
Pour résumer, les requêtes des médias et la réactivité de la conception nous fournissent un outil incroyablement puissant pour rendre compte du fait que les sites Web sont visionnés avec toutes sortes d'écrans et de tailles de fenêtres d'affichage. Cependant, une fois que nous avons commencé à relier nos conceptions à une poignée de périphériques, nous sommes revenus à leur point de départ. Au lieu de cela, votre objectif devrait être de créer une mise en page tellement polyvalente qu’elle puisse gérer presque toutes les tailles de fenêtres.
Tout cela est beau en théorie, mais où est l'exemple? Le point de départ de cette discussion est venu d'une tentative récente de ma part de construire une galerie d'images réactive. Consultez cet article pour découvrir comment un flux de travail de conception réactive orienté contenu peut sembler sauvage.