La conception Web réactive est l'un des sujets les plus en vogue parmi les concepteurs et les développeurs à l'heure actuelle. Si vous n'êtes pas certain de ce dont il s'agit, nous vous expliquerons en détail comment il fonctionne et comment les requêtes multimédia CSS doivent être intégrées dans vos propres conceptions.
Pour couronner le tout, nous en terminerons avec vingt conceptions réactives vraiment impressionnantes qui utilisent des requêtes des médias pour présenter des expériences spécifiquement conçues pour différents visiteurs.
#
Que sont les requêtes multimédia?
CSS3 a généré une tonne d'effets visuels sophistiqués tels que des ombres et des animations, mais qu'en est-il des améliorations pratiques? Existe-t-il quelque chose dans CSS3 qui améliore réellement la façon dont vous pouvez créer des sites Web du point de vue de la convivialité?
La réponse est un oui retentissant? et est due en grande partie à l'inclusion des questions des médias. Les requêtes multimédia sont extrêmement utiles car elles résolvent un problème énorme qui est apparu tout à coup dans la conception Web: la nécessité de concevoir pour des tailles d'écran très différentes.
La taille des écrans d’utilisateur a toujours différé, mais pour la plupart, cette différence était limitée à quelques centimètres et vous pouviez parier sur l’immense majorité de votre public s’adaptant à des paramètres assez faciles à définir. De nos jours, certains utilisateurs utilisent un moniteur Apple Cinema 27 "et d’autres un smartphone 3,5".
C'est une différence énorme et il y a beaucoup d'arrêts le long du chemin. Le nombre croissant d’appareils compatibles Web rend de plus en plus difficile pour les concepteurs de présenter une solution statique qui réponde aux besoins de tous.
Ce besoin a donné naissance à l'idée d'une conception Web réactive, qui va bien au-delà des largeurs de page fluides et qui modifie considérablement la mise en page d'une page à mesure que la taille de la fenêtre du navigateur ou de l'écran du périphérique change. Les requêtes multimédia sont l’un des outils les plus puissants pour atteindre cet objectif, car elles permettent au concepteur de définir des CSS spéciales en fonction de certaines règles pré-établies.
Owltastic: un excellent exemple de conception Web réactive
Les informations ci-dessus sont un peu abstraites. Voyons donc comment cela fonctionne dans le monde réel en regardant un exemple de la talentueuse concepteur et développeur Meagan Fisher. Voici à quoi ressemble son site dans la fenêtre du navigateur de mon MacBook 13 "en plein écran.
Maintenant, si j'ajuste la taille de la fenêtre, beaucoup de choses commencent à se produire. Les colonnes ajustent leur largeur, la disposition change pour être plus verticale et les éléments non essentiels disparaissent complètement. Voici une capture d’écran avec deux largeurs de page supplémentaires. Vérifiez à quel point le design s’adapte à différentes situations.
Notez que nous avons commencé avec une disposition à trois colonnes, qui s'est ensuite transformée en une disposition à deux colonnes et s'est finalement retrouvée sur une disposition à une seule colonne avec la fenêtre de mon navigateur aussi petite que possible. C’est plus qu’un concepteur qui se fait valoir, c’est une tentative sérieuse de rendre le site non seulement utilisable, mais aussi, spécifiquement optimisé pour la vaste gamme d’appareils susceptibles de le voir.
Comment ça marche
Cela peut sembler être une lourde charge de travail supplémentaire, et je mentirais si je disais que le processus est indolore, mais la bonne nouvelle est que les requêtes CSS et médiatiques font le gros du travail pour vous. Voyons un peu le code de Owltastic pour voir comment tout cela fonctionne.
Pour commencer, vous allez voir beaucoup d'utilisation experte des flottants et des pourcentages utilisés pour le dimensionnement. Remarquez dans l'extrait de code ci-dessous que Meagan a utilisé les pourcentages pour la largeur de l'élément et la marge. Elle est également méticuleuse pour vous dire d'où viennent ces pourcentages sous forme de commentaire avec quelques calculs rapides.
Cela rend certainement la mise en page un peu plus délicate, mais cela constitue une bonne base pour des largeurs de page flexibles avant même que les requêtes multimédia ne soient traitées. Cependant, les propriétés indiquées ci-dessus sont, pour la plupart, ce que vous voyez être manipulé davantage dans les requêtes de média.
Nous pouvons voir ici que Meagan a ciblé une largeur d'écran maximale de 800 pixels, puis a défini une série de styles s'appliquant directement aux périphériques répondant à cette spécification. À partir de là, les flottants, les marges, le rembourrage, l'affichage et même les images sont peaufinés pour une mise en page optimale à cette taille.
Au total, cinq requêtes de média différentes sont configurées pour différentes circonstances: largeur maximale: 960 pixels, 800 pixels, 640 pixels, 540 pixels et 480 pixels. Chacune de celles-ci est assez détaillée pour décrire des comportements spécifiques pour cette taille d'écran. Voici la section pour max-width: 480px.
Une astuce intéressante dans laquelle vous devriez porter une attention particulière est l’utilisation d’images fluides. En définissant la largeur d'une image sur 100%, celle-ci tiendra dans la largeur de son conteneur et sera redimensionnée à mesure que la fenêtre du navigateur change. Ethan Marcotte explique cette technique en profondeur sur son site Unstoppable Robot Ninja.Veillez à redimensionner la fenêtre de votre navigateur sur son site et à regarder les images d’en-tête répondre.
Plus d'exemples en direct
Le meilleur moyen d'étudier les requêtes de conception Web et de médias réactifs est de les voir en action. Voici une brève liste contenant des sites que j'ai trouvés impressionnants. Avec chaque site, ne regardez pas seulement la conception, testez-la en redimensionnant la fenêtre de votre navigateur. Explorez également le CSS pour voir comment fonctionnent les sites et réfléchissez à la manière dont vous pouvez implémenter ces techniques dans vos propres conceptions.
Une liste à part: Exemple d'article
Trent Walton
Pensez vitamine
Deren K.
Faire des conférences
About.com
Festival Sasquatch
Heure de la terre
Flux BMX
Remo - Powerstroke Pro
Les messieurs modernes
Naomi Atkinson
Converger SE
Sleepstreet
Alsacreations
Un design différent
Yiibu
Club du chapeau doux
Laufbild Werkstatt
Laps
Dmig 5
Conclusion
En résumé, la multitude d'appareils accédant au Web de nos jours oblige à créer des conceptions de sites Web adaptables à de nombreuses tailles d'écran et les requêtes de médias CSS permettent de le faire facilement.
Pour être honnête, lorsque j'ai entendu parler des médias pour la première fois, j'ai levé les yeux au ciel, pensant que cela ajouterait simplement une couche de travail supplémentaire à toutes les étapes que nous avons déjà nécessaires pour que nos conceptions soient utilisables. Cependant, plus j'apprends et expérimente avec eux, plus je suis convaincue que c'est ainsi que le web design devrait être abordé dans ce que Steve Jobs appelle «une ère post-PC».