Webdesign réactif est devenu un terme fourre-tout pour faire fonctionner votre site Web à de faibles résolutions.
Les smartphones ont révolutionné le Web mobile, et les tablettes jettent une nouvelle impulsion dans leur popularité croissante. Tout compte fait, un site Web pourrait être utilisé sur un smartphone basse résolution, une tablette de résolution moyenne ou un ordinateur de bureau ou portable haute résolution. Lorsque vous lancez des écrans de rétine dans le mix, le nombre de tailles d'écran potentielles est vertigineux. Idéalement, votre site Web aura l’aspect et fonctionnera avec élégance sur tous les points ci-dessus, quelle que soit la résolution.
Webdesign réactif est en soi le processus consistant à faire fonctionner un site Web sur de très petits écrans, de très grands écrans et à n'importe quelle résolution intermédiaire.
Au cours des dernières années, l'industrie a collectivement élaboré une liste restreinte de meilleures pratiques communes. Un grand nombre de ces pratiques se concentrent sur la mise à niveau des sites Web destinés à une résolution élevée à des tailles inférieures. D'autres démarrent sur mobile et évoluent vers les grandes fenêtres, optimisant au besoin. Toutes ces pratiques peuvent généralement être classées comme des configurations réactives ou adaptatives.
Les mises en page réactives donnent généralement de meilleurs résultats que les mises en page adaptatives, mais dans certains cas (applications Web complexes, par exemple), une approche adaptative pourrait mieux servir les utilisateurs. Quoi qu’il en soit, le but est de faire en sorte que votre site Web soit toujours à la hauteur de la résolution souhaitée.
Pour ce faire, la plupart des gens choisissent d'utiliser les requêtes médias, ils sont solides sauf si vous avez besoin de support pour IE8 ou inférieur. Pour ceux d’entre nous qui ont encore un public dans IE6 - 8, Scott Jehl a créé un JavaScript polyfill appelé Respond.js cela fera fonctionner les choses.
Auparavant, de nombreux concepteurs Web n’avaient qu’une communication minimale avec les développeurs jusqu’au transfert. Maintenant, les concepteurs et les développeurs doivent travailler ensemble pendant le processus de conception et de développement pour que tout se passe bien. De l'analyse de l'utilisateur à ce qui peut ou ne peut pas être réorganisé lorsque les concepteurs de fenêtres et les développeurs sont plus proches que jamais, sinon la même personne. Si vous êtes à la recherche d’inspiration pour savoir à quoi ressemblent les configurations réactives ou adaptatives, MediaQueri.es est une galerie de webdesign populaire qui affiche quatre fenêtres d'un site Web.
Lorsque l'idée de responsive webdesign a commencé à prendre forme, les techniques d'adaptation ont dominé pendant un moment. Il est plus facile de passer à la conception et au développement pour ces mises en page, même si elles nécessitent plus de travail que leurs partenaires réactifs. C’est également la voie que beaucoup de personnes empruntent lors de la rénovation d’un site Web existant pour être mobile. En raison de la nature des mises en page adaptatives, elles permettent de mieux contrôler la conception du site Web. Vous ne devez concevoir que pour des fenêtres spécifiques, et les navigateurs affichent uniquement le plus haut qui puisse tenir dans sa largeur. Ces mises en page sont celles qui "s'alignent" lors de l'ajustement lorsque vous redimensionnez la fenêtre de votre navigateur. En fait, si vous redimensionnez votre fenêtre à moins de 1024 pixels, vous verrez ce changement soudain dont je parle.
Lors de la conception d'une approche de développement adaptatif, le travail est relativement facile. Avant que responsive webdesign devienne une chose, vous avez simplement conçu une mise en page et l'avez ensuite développée. Maintenant, vous allez concevoir pour plusieurs fenêtres et les développer. En général, il est plus facile de démarrer dans des fenêtres de basse résolution et de progresser. Si vous commencez avec des affichages haute résolution et descendez, les choses pourraient finir un peu ... compactes. Et au moment où vous atteignez mobile, encombré.
Le nombre de fenêtres que vous concevez dépend entièrement de vous et du développeur, élaborez un plan de bataille basé sur vos utilisateurs. Si les analyses actuelles du site montrent aux utilisateurs la plupart du temps en utilisant des fenêtres de faible et moyenne résolution, prévoyez celles-ci. Vous voulez au moins trois: une pour les fenêtres basse résolution (smartphones), les fenêtres de moyenne résolution (tablettes) et une pour les fenêtres haute résolution (ordinateurs de bureau et portables). Idéalement, la planification pour six est la norme, avec une disposition haute et basse résolution pour chacune des trois fenêtres listées ci-dessus. Cependant, en avoir trop en plus rendra le développement et la maintenance trop difficiles à gérer, alors méfiez-vous.
Développer une mise en page adaptative est aussi très simple. En supposant que vous ayez travaillé avec le concepteur (ou êtes le concepteur) dès le départ, cela revient à développer un site Web traditionnel. Vous allez commencer par développer le site dans une fenêtre mobile basse résolution. Une fois cela fait, nous utiliserons des requêtes multimédia pour développer la mise en page pour des fenêtres de plus haute résolution. Vous trouverez ci-dessous des requêtes de médias de résolution basse, moyenne et haute résolution:
/* Mobile low and high resolution viewports */ @media (min-width: 320px) { ... } @media (min-width: 480px) { ... }/* Tablet low and high resolution viewports */ @media (min-width: 768px) { ... } @media (min-width: 1024px) { ... }/* Desktop low and high resolution viewports */ @media (min-width: 1080px) { ... } @media (min-width: 1440px) { ... }C'est là que vient le "snap" dans l'approche adaptative. Étant donné que nous ciblons plusieurs résolutions de fenêtres courantes, le passage de l'une à l'autre lors du redimensionnement de la fenêtre peut entraîner un saut de la mise en page. Comme je l'ai déjà mentionné, la conception et le développement adaptatifs ne sont utiles que pour la conversion ou les applications Web complexes. Concevoir et développer pour cela de nombreuses configurations de fenêtres indépendantes est beaucoup plus compliqué si cela n’est pas nécessaire.
À l'heure actuelle, la conception et le développement réactifs constituent l'approche de facto à utiliser. Bien qu'il offre moins de contrôle sur la mise en page par rapport à une approche adaptative, la mise en œuvre et la maintenance sont beaucoup moins nombreuses, car vous ne disposez techniquement que d'une seule mise en page. Il est également plus personnalisé pour le site Web, et c'est le principal argument de vente. Vous serez en mesure de créer vos propres points de rupture en fonction du moment où votre conception se brise ou ne se présente pas comme prévu.
Les mises en page réactives incluent également des dispositions fluides. Avant que le webdesign réactif ne devienne réalité, les systèmes de fluides étaient populaires - les mises en page utilisant des pourcentages pour les largeurs. Bien qu'ils aient certainement bien fonctionné dans la plupart des cas, c'était avant que nous ayons des smartphones et des tablettes. Désormais, la plupart des mises en page fluides sont complétées par des requêtes média à très basse et très haute résolution. Sinon, vous pourriez vous retrouver avec des mises en page extrêmement compactes ou immenses.
Bien que vous ayez un guide très simple à suivre avec un design adaptatif, le design réactif n'est pas si clair. Il y a un débat animé sur le fait que la conception dans le navigateur est la meilleure façon de la concevoir et de la développer en même temps. Comme vous allez essentiellement prendre en compte toutes les fenêtres lors de la conception, il y a plus de travail à faire du côté de la conception. Idéalement, nous voulons garder à l’esprit les fenêtres, mais pas les concevoir en particulier. Si possible, essayez de vous rencontrer à un niveau intermédiaire. Concentrez-vous sur les fenêtres de moyenne résolution tout en gardant à l’esprit que la mise en page devra être adaptée aux résolutions inférieures et supérieures par la suite.
Il est extrêmement important d'utiliser les analyses d'utilisateurs existantes si vous en avez. Si votre site dispose déjà d'analyses démontrant que votre public lit principalement à partir de fenêtres d'affichage basse résolution, créez des solutions ciblées. Ciblez votre public , même si cela signifie ignorer certaines des meilleures pratiques existantes. Au bout du compte, votre site Web les servira, pas les personnes qui regroupent ces «meilleures» pratiques.
Une fois la phase de conception terminée, le développement commence là où le vrai plaisir commence. Comme mentionné précédemment, si vous avez des données analytiques de votre public typique, commencez par là. Une fois que vous avez développé votre mise en page, vous allez utiliser les requêtes multimédia pour le rendre réactif. Au lieu de définir des fenêtres de jeu définies, vous redimensionnez manuellement votre navigateur jusqu'à ce que la présentation se brise. Lorsque cela se produit, il s'agit de la largeur de votre point d'arrêt: ajoutez une requête multimédia pour résoudre le problème de la conception et continuez à le redimensionner. Idéalement, vous le ferez à partir d’un appareil haute résolution pour que vous puissiez voir toutes les fenêtres. Une fois que vous vous êtes assuré de la prise en charge des fenêtres de haute et basse résolution, passez aux tests.
Rarement, vous pouvez rencontrer un site Web qui utilise une solution personnalisée, telle que {$lang_domain} . De manière générale, la majorité du Web appartient aux groupes réactifs ou adaptatifs décrits ci-dessus, mais parfois, les gens font preuve de créativité et font leur propre solution. {$lang_domain} Pour ce faire, il faut commencer par les points d'arrêt standard faible, moyen et élevé, puis les compléter au besoin entre les mises en page. En plus de cela, la mise en page est également de nature fluide jusqu'à une résolution maximale définie. Dans cet esprit, soyez créatif et construisez quelque chose qui casse la norme!
Malheureusement, il n'y a pas vraiment de bonne solution pour tester ces mises en page. Le meilleur moyen d'effectuer des tests est de le faire manuellement: en chargeant la page sur votre téléphone, votre tablette, votre ordinateur portable et tout ce qui peut vous intéresser. Vous pouvez également utiliser un viewport spoofer dans votre navigateur s'il prend en charge une telle extension. Émulateur d'ondulation est une extension que j'utilise en chrome pour tester certaines fenêtres de basse résolution. Bien que le test manuel sur des appareils ne soit pas pratique, cela donne une impression plus précise de la fonctionnalité de votre site. L'interface utilisateur qui semble correcte sur un émulateur peut en fait donner de mauvais résultats sur un périphérique réel.
Aussi vaste que cet article est, il s'agit simplement d'une introduction sur le sujet des types de mise en page. Il existe de nombreuses informations sur les méthodes de conception Web réactives non incluses dans cet article; L'optimisation des éléments de l'interface utilisateur et de la typographie, des images et des supports réactifs, des taux de pixels des périphériques et bien plus encore n'est pas expliquée ici. Cependant, il existe de nombreuses sources pour de telles connaissances, dans des formes beaucoup plus nombreuses d'informations. Depuis que l'idée de webdesign réactif est née, nous avons contribué à une très grande richesse de connaissances sur le sujet. J'espère qu'en expliquant la différence entre les types de mise en page, vous pourrez mieux comprendre l'idée d'un site Web réactif ... sans vous perdre dans le trou du lapin.
La communauté crée constamment de nouvelles techniques et élabore des solutions créatives aux problèmes que nous commençons à peine à rencontrer. Ainsi, bien qu'il existe une grande quantité d'informations disponibles sur la conception de sites Web réactifs, c'est un concept encore à ses balbutiements. Bien que les meilleures pratiques et les cas d'utilisation courants soient faciles à appliquer, être créatif et préparer votre propre solution est toujours encouragé. Si vous avez des conseils ou des suggestions pour ceux d'entre nous qui souhaitent simplement entrer ou approfondir notre connaissance de la conception et du développement Web réactifs, lancez une discussion ci-dessous!
Image / vignette en vedette, utilisations image réactive via Shutterstock.