Share
À moins que vous ne connaissiez totalement l'industrie, ou que vous viviez sous un rocher dans les contrées lointaines d'une autre planète, vous avez entendu parler de la conception réactive. Même si vous ne le comprenez pas complètement, il s'agira forcément d'une chose que vous aurez rencontrée ou avec laquelle vous aurez interagi d'une manière ou d'une autre..
En bref, la conception Web réactive est l’art de concevoir des sites Web pour une multitude de tailles d’écrans et d’appareils, de manière à offrir une expérience optimale à chaque utilisateur, quelle que soit sa taille..
La conception Web réactive est à son meilleur lorsqu'elle est agnostique à l'appareil. où vous ne visez pas à concevoir des résolutions ou des tailles particulières, telles que celles destinées à un iPhone ou un iPad uniquement. Au lieu de cela, vous devriez viser à concevoir avec le contenu et la conception à l’esprit et comment ce contenu circule et s’adapte aux divers environnements dans lesquels il peut être vu ou utilisé..
Auparavant, pour accéder à Internet, il fallait essayer avec un ordinateur (généralement très grand), les sons familiers du modem résonnant pendant la connexion. Maintenant, cependant, vous pouvez accéder à Internet via des ordinateurs, des ordinateurs portables, des téléphones portables, des smartphones, des tablettes, des téléviseurs, des consoles de jeux - la liste semble presque infinie.
Responsive Web Design, écrit par Ethan Marcotte et publié par A Book Apart, est une introduction brillante aux principes de Responsive Web Design.. Maintenant, d’une part, c’est une bonne nouvelle. Plus que jamais, nous pouvons être connectés à Internet à tout moment et à tout endroit de notre choix. Bien que cela soit pris pour acquis, pour beaucoup, cela est également nécessaire. Et avec la nécessité et l’accès, nous sommes souvent confrontés à l’impatience et à la nécessité de faire fonctionner les choses rapidement..
Étant donné que les sites Web réactifs sont de plus en plus utilisés, même le grand public (donc tout le monde en dehors du Web et des industries créatives) s’attend presque à le voir quand il navigue sur le Web. Donc, dans l’ensemble, la conception de sites Web réactifs est vraiment une chose importante.
Travailler avec un design réactif n'est pas sans défis. Tout d'abord, il existe une telle multitude de périphériques et de tailles d'écran que nous devons prendre en charge. Du très grand au grand écran, du petit au moyen (et de tous les autres), il y a beaucoup à penser. Et, comme vous le savez sûrement déjà, travailler avec une conception réactive du point de vue technique peut également devenir un cauchemar et être extrêmement difficile à gérer..
Le site web mediaqueri.es offre beaucoup d'inspiration pour certaines conceptions Web réactives de premier plan. Comme pour tout projet, la conception de sites Web réactifs doit tenir compte du contenu du site Web, de l'intégration de ce contenu dans la conception et de la manière dont le contenu circule de page en page. Vous devez voir comment les différents éléments de conception que vous avez combinés fonctionnent ensemble et vous assurer que tout semble cohérent et cohérent..
La différence avec la conception Web réactive, c'est que vous devez également réfléchir à la manière dont tout cela fonctionne d'une taille à l'autre, que ce soit en fonction de la largeur ou de la hauteur. Vous devez réfléchir à la manière dont tout cela se traduit en un écran plus petit ou plus grand et à la manière dont tous vos éléments de conception, votre flux de contenu et tout le reste fonctionnent. Vous devez garder l'expérience cohérente, quelle que soit la taille du site..
En tant que concepteurs et développeurs dans un secteur aussi dynamique, nous avons de la chance. Nous travaillons sur des projets incroyables et nous travaillons toujours à la pointe des nouvelles technologies. Travailler avec un design Web réactif n’est que l’une de ces choses passionnantes que nous devons faire, mais cela a un prix.
Le Festival de la ceinture de verdure est un excellent exemple de conception Web réactive. Captures d'écran fournies avec l'aimable autorisation de mediaqueri.es. Repense à
Au début de tout projet de conception, vous devez essayer d’établir exactement ce que votre client souhaite retirer du projet et ce qu’il attend des résultats. Il peut être difficile de gérer les attentes de vos clients, mais il est important que vous vous y teniez pour que vos clients comprennent parfaitement votre processus..
Un bel exemple de conception Web réactive en action peut être vu sur le site Web Modern Green Home. Captures d'écran fournies avec l'aimable autorisation de mediaqueri.es. Pour ce qui est de la conception Web réactive, et en particulier s’ils vous ont adressé l’un de ces mots à la mode, vous devez essayer d’aider à éduquer vos clients. Assez souvent, ces mots à la mode ont été entendus en passant ou ont été mal représentés, et il vous appartient de vous assurer que votre client comprend bien le sujet..
Par exemple, vous pouvez même parfois avoir des clients potentiels qui viennent vous dire qu'ils veulent un site Web qui fonctionne sur «iPhone et iPad». Dans ce cas, je dirais: «C’est parfait, mais ce qui serait formidable, c’est que nous pouvons nous concentrer sur la création d’un site Web parfaitement réactif qui fonctionnera correctement. tout l’appareil et pas seulement être limité à ces deux-là. »C’est un excellent brise-glace sur le sujet et c’est quelque chose qui vous laisse tout à fait ouvert pour que vous expliquiez plus loin dans les étapes de planification.
Si votre client comprend bien le design réactif, j'imagine qu'il sera plus satisfait du projet..
Le site Web Stuff & Nonsense est un excellent exemple de conception de site Web adaptatif, présentant également différentes illustrations dans différentes tailles d'écran. Captures d'écran fournies avec l'aimable autorisation de mediaqueri.es. Si vous prenez le temps de bien éduquer le client, cela ne peut que jouer en votre faveur. Par exemple, dans mon propre travail, j'essaie toujours de faire en sorte que mes clients se sentent comme si je travaillais avec eux, plutôt que simplement pour leur. Cela facilite le processus de travail avec vos clients lors de la conception pour le Web réactif..
C'est bien beau de dire pourquoi il est important d'éduquer les clients et de vous dire des choses que vous connaissez peut-être déjà sur la conception Web réactive. Passons maintenant aux choses sérieuses, où je peux vous expliquer les meilleurs moyens de concevoir des sites Web réactifs..
The Great Discontent est bien connu pour ses interviews et son site Web est un excellent exemple de la conception de magazines sur le Web, ainsi qu'un brillant exemple de conception de site Web responsive. Captures d'écran fournies avec l'aimable autorisation de mediaqueri.es. Et la réponse? Eh bien, malheureusement, il n'y en a pas vraiment une correcte! Je suis désolé si ce n'est pas ce que vous recherchiez, mais comme vous comprendrez probablement avec votre développement et votre codage, les processus de chacun sont différents et personne ne semble fonctionner de la même manière. C’est formidable, à sa manière, car cela signifie que nous pouvons toujours trouver de nouvelles façons de travailler..
Cependant, ne vous inquiétez pas, je vais vous donner quelques conseils utiles pour la conception de sites Web réactifs que vous devriez pouvoir mettre en œuvre assez facilement. N'hésitez pas à choisir parmi tous ceux-ci, ainsi qu'à les combiner là où vous le jugez utile. Également expérience! Essayez différentes façons de concevoir des sites Web réactifs et voyez ce qui convient vous meilleur.
La création d'une maquette pour un site de largeur statique dans Photoshop (ou pour tout autre logiciel graphique) était la manière dont la plupart des gens ont conçu les sites Web et, pour certains, cela l'est toujours. C'est absolument bien! Si vous êtes à l'aise avec l'utilisation d'une application graphique pour concevoir l'apparence de votre site Web, tout va bien..
Le site Web UX London 2013 est un bel exemple de conception évoluant gracieusement de petite à grande taille. Captures d'écran fournies avec l'aimable autorisation de mediaqueri.es. Mais n'essayez pas de concevoir une maquette pour chaque résolution ou largeur; vous deviendriez fou et resteriez là très longtemps. Au lieu de cela, repensez à l'article de wireframing. Réfléchissez à la façon dont nous avons examiné le flux de contenu pour ces structures filaires et à la manière dont nous avons décidé que tout devrait s'emboîter. Essayez de traduire cela dans vos conceptions et réfléchissez à la manière dont ces éléments vont s’écouler et se déplacer lorsque la taille de l’écran change..
Certains de ces changements seront majeurs, et pour ceux-là, il conviendra peut-être de créer une petite maquette pour le montrer, mais pour tout autre changement, tel que l’adaptation du texte, je me contenterais alors d’examiner ce genre de choses. navigateur une fois que vous commencez à coder des prototypes. Si vous préférez concevoir une maquette pour chaque étape majeure de votre conception, n'hésitez pas à le faire, sachez à quel moment cela ajoutera à votre projet..
Maintenant, pour un peu de controverse. Vous avez peut-être entendu parler de l'ensemble
Le site Web du WWF est un exemple magnifique de conception de sites Web qui fonctionne également avec une réactivité remarquable. Captures d'écran fournies avec l'aimable autorisation de mediaqueri.es. La conception dans le navigateur consiste à passer directement d'une phase filaire (si vous l'avez déjà fait) directement au navigateur pour démarrer la phase de conception, plutôt que de travailler avec un logiciel graphique. Si vous utilisez de nombreux outils en ligne pour vous aider à créer différents éléments de votre structure de conception (pour créer des grilles ou affiner votre typographie, par exemple), alors cela fonctionne très bien..
Cependant, de nombreux concepteurs peuvent avoir l’impression qu’ils ont du mal à concevoir dans le navigateur, en particulier s’ils sont davantage un concepteur que un codeur. La raison en est qu’ils estiment que cela restreint un peu plus leur créativité, ce qui les empêche de se sentir plus à même de proposer des idées créatives, uniques et visuellement stimulantes..
Next Web parvient à afficher le contenu de manière facile à digérer et à suivre, même sur de petits écrans. Captures d'écran fournies avec l'aimable autorisation de mediaqueri.es. Mais en tant que développeur, vous serez probablement très à l'aise avec le code. Ce serait donc une bonne idée d'essayer de concevoir dans le navigateur et de voir les résultats que vous obtenez..
C'est probablement mon préféré. Décider dans le navigateur signifie que vous devez faire un peu de travail dans les logiciels graphiques et un peu dans le navigateur. Personnellement, je pense que vous ne pouvez pas obtenir un meilleur résultat sur la façon dont une conception fonctionnera tant qu'elle ne se trouvera pas dans le navigateur. La typographie sera toujours rendue différemment dans les applications graphiques que dans le navigateur. Il est beaucoup plus facile de créer des prototypes et de parcourir rapidement les étapes de conception lorsque vous êtes dans le navigateur (même si tout cela pourrait changer avec l'introduction d'applications telles
Le site Web de Microsoft utilise intelligemment le contenu en mouvement et le recadrage des images en fonction de la taille de la fenêtre. Captures d'écran fournies avec l'aimable autorisation de mediaqueri.es. Travailler avec un mélange de maquettes et de travail sur navigateur signifie que vous pouvez donner beaucoup de flexibilité à votre conception et aux décisions que vous devez prendre. La clé de ce terme "décider dans le navigateur" est cependant avec le premier mot. Bien que de nombreuses décisions créatives majeures puissent être prises dans le logiciel graphique, le navigateur est l'endroit où votre choix final peut être effectué..
Lorsque je travaille de cette manière, je constate que je finis souvent avec un mélange de maquettes, de bibliothèques de motifs conçus (dans les logiciels de graphisme et en HTML et CSS) et de prototypes complets HTML et CSS. Un mélange, c'est bien et cela montre l'évolution du site web du début à la fin, en ce qui, espérons-le, commence à devenir un site web complet.
Tout d’abord, si vous n’avez pas déjà appris de mes articles dans la section «Avant de commencer», commencez toujours, commencez toujours par travailler sur le contenu de vos conceptions. Tout ce que cela signifie, c'est de vous assurer que vous travaillez avec du contenu réel et que le contenu est destiné à être utilisé sur le site Web que vous concevez..
Philip House est un excellent exemple de la manière dont vous pouvez changer de présentation lorsque vous travaillez avec des conceptions Web réactives. Captures d'écran fournies avec l'aimable autorisation de mediaqueri.es. Deuxièmement, que vous travailliez d'abord avec mobile (en commençant par des dispositions plus petites) ou avec le bureau en bas (en commençant par des dispositions de bureau pleine largeur) est à vous de choisir. Il y a beaucoup de débats à ce sujet en ligne, mais c'est vraiment votre propre décision à prendre. Si vous vous sentez plus créatif en passant d'une taille plus grande à une taille plus petite, même si vous le construisez dans le sens contraire, tout va bien. Comme on fait le contraire et aller de petit à grand!
Terminons avec des ressources utiles. Il y a tellement d'outils qui peuvent vous aider lorsque vous concevez des sites Web réactifs, jetez un oeil:
Accentsconagua