Vous savez déjà comment utiliser les requêtes multimédia pour créer un design réactif, mais avez-vous essayé de les utiliser pour autre chose? Est-il possible que les requêtes multimédias puissent être utilisées en mode natif pour améliorer votre flux de travail?
Suivez le cours alors que nous rompons complètement avec la tradition et détournons les requêtes des médias pour nous aider à tester et à peaufiner un dessin Vous n'avez jamais vu de requêtes des médias comme celle-ci auparavant!
Au-delà de la conception réactive
Avec l’essor des techniques de conception réactives, les requêtes des médias ont été placées sous les feux de la rampe en tant que sauveur de la conception Web moderne. Ils fournissent une méthode incroyablement simple et pratique pour créer un site qui fonctionne avec une multitude de tailles d'écran et de fenêtres de navigateur.
"En plus d'utiliser des requêtes multimédia dans mon produit final pour offrir une meilleure expérience utilisateur, je peux peut-être utiliser des requêtes multimédia dans un environnement de test local pour faciliter certaines tâches de base."Tout ça est bien, mais je voulais faire bouger les choses un peu. J'ai commencé à me poser une question intéressante: à quoi d'autre puis-je utiliser les requêtes des médias?
Cette question conduit à un brainstorming intéressant. Ici, nous avons une technologie qui me permet essentiellement de changer mon CSS de manière booléenne de base: Si la fenêtre de mon navigateur est de taille x, do y. Cela me fait immédiatement penser aux implications pour améliorer mon flux de travail. En plus d'utiliser des requêtes multimédia dans mon produit final pour offrir une meilleure expérience utilisateur, je peux peut-être utiliser des requêtes multimédia dans un environnement de test local pour faciliter certaines tâches de base.
Courant avec cette ligne de pensée, voyons ce que nous pouvons trouver!
Déboguer votre CSS et visualiser le DOM
La mise en page CSS peut être une bête délicate. Que vous soyez un tout nouveau développeur ou un ancien combattant chevronné, il arrive parfois que la position de quelque chose dans votre aperçu en direct ne corresponde pas exactement à ce que vous souhaitiez dans votre code.
Dans ces circonstances, il est vraiment utile de pouvoir visualiser ce qui se passe dans les DOM. Lorsque vous obtenez une image visuelle de la relation parent / enfant / frère avec une image décente de ce que font vos marges et votre remplissage, vous seriez surpris du nombre de problèmes auxquels vous pouvez immédiatement répondre.
Chris Page a posté une solution en 2006 qui est très utile pour un tel objectif. Il utilise le sélecteur universel pour appliquer des contours colorés à différentes couches de l'arborescence DOM afin de vous permettre de vous faire une idée de la structure du contenu:
J'ai pris cet extrait de code et l'a poussé encore plus loin en ajoutant quelques couleurs de fond utiles, puis j'ai tout enveloppé dans une requête multimédia:
Pourquoi voudriez-vous faire cela?
Je sais que cela semble fou, mais c'est en fait assez utile. Lorsque vous utilisez l'extrait de code ci-dessus pour résoudre votre problème CSS, il peut être très pénible de le commenter de manière à pouvoir afficher votre mise en page telle qu'elle est supposée l'être. Avec la requête multimédia, vous pouvez basculer rapidement et facilement entre les deux vues en modifiant la taille de la fenêtre de votre navigateur.
Voici un exemple de page tel qu'il apparaît normalement en pleine largeur dans mon navigateur:
Maintenant, lorsque je tire un peu le côté de la fenêtre du navigateur, je vois mes aides à la mise en page. Notez que plus nous nous enfonçons dans le DOM, plus la couleur de l’arrière-plan s’assombrit.
Maintenant, je peux modifier mon code lorsque je visualise les résultats en mode débogage, puis passer à ma vue normale en faisant glisser rapidement la fenêtre.
Voyez-le en action
Maintenant que nous avons vu le code, il est temps de lancer la démo. Veillez à redimensionner la fenêtre du navigateur et à regarder comment les aides au débogage apparaissent lorsque vous obtenez une largeur d'environ 1 100 pixels.
Démo: Cliquez ici pour lancer.
Doit être visualisé sur un bureau ou un ordinateur portable.
Tweak votre conception
Vous pouvez également utiliser les requêtes des médias pour prendre des décisions entre les différences subtiles d'une conception. Par exemple, disons que vous n'êtes pas assez satisfait de la hauteur de trait de votre copie et que vous souhaitez tester quelques options. Vous pouvez configurer plusieurs requêtes multimédia, chacune avec sa propre hauteur de ligne:
Désormais, lorsque vous regardez votre conception dans le navigateur, vous pouvez afficher les différentes itérations en faisant glisser la fenêtre de votre navigateur. Cela vous aidera à comparer rapidement vos options de hauteur de ligne et à choisir celle qui vous convient le mieux.
Vous pouvez utiliser cette même technique pour les couleurs d’arrière-plan, les polices de caractères et tout ce que vous pouvez penser.
Voyez-le en action
Cette fois-ci, alors que vous redimensionnez le navigateur, observez l’effet sur la hauteur de ligne. Cela constituerait un moyen décent de comparer rapidement les trois options.
Démo: Cliquez ici pour lancer.
Doit être visualisé sur un bureau ou un ordinateur portable.
Comparez la conception du navigateur avec Photoshop Mockup
Si vous construisez fréquemment des sites Web à partir de compositions Photoshop, il est utile de pouvoir comparer votre version en direct avec la maquette que vous essayez d'émuler.
Encore une fois, une requête dans les médias nous fournit un moyen simple d’échanger les deux versions. Ici, ce que j'ai fait est de régler tout mon contenu sur une opacité de 40%, puis j'ai importé ma composition d'origine comme arrière-plan du corps. Cela crée une sorte d’effet de superposition qui me permet de repérer les différences majeures.
Voyez-le en action
Pour cette dernière démonstration, un redimensionnement du navigateur supprime l'opacité de tout le contenu de la page et affiche une image d'opacité complète de la maquette Photoshop afin que vous puissiez comparer les deux.
Démo: Cliquez ici pour lancer.
Doit être visualisé sur un bureau ou un ordinateur portable.
Conclusion
Le but de cet article est plus exploratoire que pédagogique. L’intention est de lancer une discussion sur le point de savoir si les requêtes des médias ont ou non un potentiel pour des objectifs autres que la conception adaptative.
Les trois expériences ci-dessus portent toutes sur les tests de conception locaux. Nous n'avons donc pas à nous soucier de la sémantique, de la compatibilité des navigateurs et des autres problèmes liés à ce type de conversation. Il s’agit plutôt de proposer des astuces utiles qui améliorent votre flux de travail personnel.
Pouvez-vous penser à quelque chose d'amusant ou d'utile à faire avec les requêtes des médias? Faites-nous savoir vos pensées dans la section commentaire ci-dessous.