Une conception Web réactive nécessite une manière très différente de concevoir une mise en page à la fois stimulante et passionnante. L'art de la mise en page était déjà suffisamment complexe pour les siècles pour être défini par des éléments fixes. Désormais, la situation devient de plus en plus complexe, à mesure que la mise en page devient de plus en plus adaptative.
Pour vous aider à reprogrammer votre cerveau afin qu'il envisage les mises en page de manière nouvelle, nous allons examiner quelques modèles de conception réactifs intéressants mis en œuvre par des concepteurs talentueux sur le Web.
Commencer petit
L’un des moyens les plus répandus selon lequel la conception réactive est implémentée consiste simplement à attribuer une largeur fluide aux colonnes de contenu de la page, qui devient de plus en plus étroite au fur et à mesure que la largeur de la page diminue, jusqu’à ce que l’un des principaux saute à la présentation mobile à une colonne. . Nous pouvons voir cette technique à l'œuvre sur le site Web de l'hôtel de luxe 137 Pillars House.
Comme vous pouvez le constater, la disposition ne subit en réalité qu'une seule transformation majeure. Le reste de l'adaptation est très graduel et consiste simplement en un rétrécissement du tracé initial.
Cela semble être le nombre de concepteurs qui collent leurs orteils pour tester les eaux d'un design réactif. C'est un excellent point de départ car il peut nécessiter beaucoup moins de temps et d'efforts que de multiples transformations majeures tout en offrant l'avantage de servir une page Web qui a fière allure dans n'importe quelle taille de fenêtre d'affichage.
Plutôt que de simplement flirter avec réactivité bien que je veuille vous encourager à franchir le pas et explorer les vastes possibilités qui s’offrent maintenant à vous en termes de mise en page. Ne vous méprenez pas, il n’ya rien de mal à l’approche ci-dessus, mais c’est toujours une bonne idée de pousser vos compétences un peu plus loin et d’étirer ce que vous estimez être capable de réussir.
Mondrian
Notre premier modèle de conception Web réactif aurait été apprécié par Piet Mondrian. Il utilise trois zones de contenu simples et larges séparées par des lignes épaisses. L’état initial lui-même est très polyvalent et peut résister à une réduction de largeur assez intense.
Une fois que cela devient trop étroit pour l’état initial, la disposition écran large s’adapte et devient verticale. Ceci est accompli en prenant les deux plus petites boîtes sur la droite et en les déplaçant sous la grande boîte en vedette. Cette présentation se décompose ensuite en notre vue mobile standard à colonne unique où chaque élément de contenu est simplement empilé sous le dernier.
Dans la nature
Nous trouvons ce modèle utilisé sur le site Web du cabinet d'architecture Andersson-Wise. Nous pouvons voir que c'est parfait pour afficher de grandes et belles photos. Pour compléter le focus principal, la photo, les deux cases sur le côté sont simples et remplies d’une couleur unie échantillonnée à partir de l’image. Le type est fort et propre, donnant au site une sensation très sophistiquée.
Etant donné que la mise en page est tellement axée sur les cases, c'est un motif réactif assez simple pour vous envelopper. Si vous avez une quantité minimale de contenu à utiliser, vous devriez essayer.
Galerie de base
Les galeries de vignettes sont un modèle de conception populaire qui existe depuis presque aussi longtemps que le Web. De nos jours, les concepteurs les gardent généralement très minimes: de simples rectangles disposés uniformément sur un fond solide. Ce format est très facile à rediffuser à mesure que la fenêtre d'affichage change. Vous devez simplement réduire le nombre de colonnes plusieurs fois.
Nous avons examiné ce processus en détail dans notre article sur la création d'une galerie de vignettes réactive. Assurez-vous donc de vérifier si vous cherchez un guide étape par étape du processus.
Dans la nature
Pour voir ce modèle sur un site réel, consultez le portfolio de Brad Sawicki. Sur sa page d’accueil, il commence par une simple galerie de trois colonnes qui se réduit en une présentation en double et finalement en une colonne. L'avantage ici est que les tailles des images de prévisualisation du travail tirent le meilleur parti de la fenêtre disponible afin que le spectateur puisse toujours les voir dans un format agréable et de grande taille.
Articles en vedette
Celui-ci ressemble beaucoup à la disposition de la galerie, sauf qu'il est plus adapté à la mise en évidence de quelques éléments que de plusieurs. L'exemple ci-dessous utilise quatre éléments en vedette, mais il est tout aussi populaire, voire plus important, de voir trois éléments à la place.
Comme vous pouvez le constater, la disposition commence par les quatre éléments présentés côte à côte avec le contenu introductif ci-dessus. Il suit ensuite le chemin de la galerie en descendant à deux colonnes et finalement à une. Notez que le contenu introductif s’adapte également: la navigation va du côté droit au fond à gauche sous le titre principal ou le logo.
Dans la nature
La société de développement Web Splendid utilise parfaitement ce modèle sur son site. Ils animent même les transitions, ce qui est fait dans l’intérêt des nerds du design qui redimensionnent leur navigateur juste pour observer la transformation.
Ce site particulier est une très bonne implémentation de la conception Web réactive. Il ne se sent jamais légèrement, mais gère toutes les tailles de fenêtres que vous pouvez lancer avec une finesse parfaite.
Column Flip
C'est l'un des motifs les plus compliqués à ce jour. La partie supérieure de la mise en page présente des éléments très volumineux qui attirent votre attention et présentent le site. La partie suivante est divisée en trois colonnes, mais à mesure que vous réduisez la taille du navigateur, la première colonne se retourne sur son côté et devient une ligne située au-dessus des deux autres colonnes.
C'est une transformation assez compliquée mais assez efficace. Vous pouvez facilement le retirer simplement en ajoutant une requête multimédia qui fait flotter les éléments de cette colonne à gauche, puis en effaçant le flottant afin que les deux autres colonnes restent intactes.
La dernière étape consiste bien sûr à refondre le tout dans une colonne large. Cela peut faire beaucoup de défilement, mais tant que vous ne surchargez pas la page de contenu, ce n'est pas si mal.
Dans la nature
L'inspiration pour cette mise en page provient de Palantir, une autre société de développement. Notez que les développeurs Web expérimentent d'abord la conception réactive sur leurs propres sites, ce qui peut constituer à la fois une expérience d'apprentissage enrichissante et un exemple pour les clients.
Palantir est un exemple éloquent de la façon dont vos transformations dans la conception Web réactive peuvent être radicales. Cela va au-delà d'une simple réduction de la largeur d'une colonne ou de son élimination complète: cela représente une refonte majeure du contenu de la page afin d'optimiser en permanence la largeur disponible.
Shuffle caractéristique
Ce dernier modèle est une interprétation différente de l’idée des objets présentés. Je l’aime vraiment beaucoup, car il présente une légère courbe lors de la première refusion. Au lieu de simplement déposer sur deux colonnes et de flotter à gauche, il crée une disposition en deux colonnes échelonnées dans laquelle les sections sont placées de chaque côté.
Pour la mise en page à colonne unique, les images miniatures sont supprimées pour permettre de mettre davantage l'accent sur le contenu du texte. Ceci est facultatif bien sûr, l’un des formats précédents à une seule colonne pourrait tout aussi bien être implémenté.
Dans la nature
Orestis utilise ce modèle sur son site. Les trois éléments présentés sont les services qu’ils offrent, chacun étant représenté par une illustration colorée.
Lorsque vous redimensionnez le navigateur, les services sont empilés et les images sont flottées à gauche ou à droite. C’est un site amusant et original que vous devez vérifier vous-même pour vraiment avoir une idée de la façon dont tout cela fonctionne.
Plus de motifs
Lors de mes recherches pour cette pièce, je suis tombé sur un article existant de Luke Wroblewski sur le même sujet. Plutôt que de regarder des schémas très spécifiques comme je l’ai fait ici, Luke fait un travail incroyable en décomposant les mises en page courantes en leurs idées les plus élémentaires et en vous montrant comment elles fonctionnent. C'est une très bonne pièce et j'aime beaucoup la façon dont il montre le fonctionnement de la mise en page à l'intérieur et à l'extérieur de la toile.
Conclusion
J'espère que votre esprit est maintenant dans l'overdrive en pensant aux dispositions réactives. La communauté des concepteurs de sites Web a passé beaucoup de temps à discuter des aspects techniques de la manière dont le CSS réactif est réalisé par le biais de requêtes de médias. Il est certainement temps que nous commencions à réfléchir aux aspects de la conception de cette nouvelle frontière.
Laissez un commentaire ci-dessous et dites-nous ce que vous pensez de ces modèles de conception réactifs. En utiliseriez-vous dans votre propre travail? Pourquoi ou pourquoi pas?