Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Design web responsive

by
Length:LongLanguages:
This post is part of a series called Design School for Developers.
Video in Web Design
Design School for Developers: It's a Wrap!

French (Français) translation by Henri Lotin (you can also view the original English article)

À moins que vous soyez totalement nouveau dans l’industrie, ou avez vécu sous un rocher dans des terres lointaines d’une autre planète, vous aurez entendu parler du design web responsive. Même si vous ne le comprenez pas complètement, c'est quelque chose que vous avez rencontré ou avec laquelle vous avez interagi d’une manière ou d’une autre.

En bref, le design web responsive est l’art de designer des sites web pour une multitude d’écrans et de périphériques, de telle sorte qu’il y ait une expérience optimale pour chaque utilisateur à toutes les tailles possibles.

Le design web responsive est à son meilleur lorsqu’il est indépendant du périphérique ; où vous ne visez pas à designer pour des résolutions ou tailles particulières, telles que pour les tailles iPhone ou iPad uniquement. Au lieu de cela, vous devriez viser à concevoir avec le contenu et le design à l’esprit et comment ce contenu s’écoule et s’adapte dans les différents environnements dans lesquels ils peuvent être vus ou utilisés.


Designer pour un web responsive

Ça a été le cas pour accéder à internet, vous aviez à essayer via un ordinateur (habituellement très grand), avec les bruits familiers de la sonnerie du modem lorsque vous vous connectez. Maintenant, vous pouvez accéder à internet grâce à des ordinateurs, ordinateurs portables, téléphones mobiles, smartphones, tablettes, téléviseurs, consoles de jeux - la liste en devient presque sans fin.

Responsive Web Design, written by Ethan Marcotte and published by A Book Apart, is a brilliant introduction to the principles of Responsive Web Design.
Responsive Web Design, écrit par Ethan Marcotte et publié par A Book Apart, est une brillante introduction aux principes du Responsive Web Design.

Maintenant, d’une part c’est une excellente nouvelle. Plus que jamais auparavant, nous pouvons être connectés à internet à tout moment et de l’endroit que nous pourrions vouloir. Tout cela est pris pour acquis, pour beaucoup c'est également nécessaire. Et avec la nécessité et l’accès, nous sommes aussi face à l'impatience et la nécessité des choses de fonctionner et de fonctionner vite.

En raison du fait que les sites responsive deviennent beaucoup plus grand public, même le grand public (donc tout le monde en dehors du web et les industries créatives) s'attend presque à ça quand il navigue sur le web. Ainsi, dans l’ensemble, le responsive web design est certainement une grande chose.

Les défis qu'apporte le design web responsive

Travailler avec le design web responsive n’est pas sans défis. Tout d’abord, il y a une telle multitude de dispositifs et de tailles d’écran que nous devons prendre en charge. Des écrans extra large aux grands écrans, du plus petit au moyen (et tout le reste), il y a beaucoup de choses auxquelles penser. Et, comme je suis sûr que vous savez déjà en tant que développeur, travailler avec le design responsive du côté technique des choses peut également tourner au cauchemar et devenir extrêmement difficile à gérer.

The mediaqueri.es website offers lots of inspiration for some top-notch responsive web designs.
Le site mediaqueri.es offre beaucoup d’inspiration pour certains modèles haut de gamme de design web responsive.

Comme avec n’importe quel projet, les principales choses auxquelles vous devez penser avec le design de sites web responsive sont le contenu du site web, comment ce contenu s’inscrit dans le design et comment le contenu s’écoule d’une page à l’autre. Vous devrez regarder comment les différents éléments de design que vous avez fonctionnent ensemble, et faire en sorte que tout semble cohérent et uniforme.

La différence avec le design web responsive est que vous devez également penser à comment tout cela fonctionne, d’un côté à l’autre, que ce soit sur la base de largeur ou de hauteur. Vous devez réfléchir à la façon dont tout cela se traduit sur un écran plus petit ou plus grand et comment tout vos éléments de design, votre flux de contenu et tout le reste fonctionnent​. Vous devez garder l’expérience cohérente, peu importe la taille du site.


Travailler avec les clients et gérer les attentes

Nous, en tant que designers et développeurs dans un secteur aussi rapide, sommes assez chanceux. Nous travaillons sur quelques projets étonnants et nous réussissons généralement toujours à travailler à la pointe des technologies nouvelles et émergentes. Travailler​ avec le design web respo'sive n’est qu’une de ces choses passionnantes que nous arrivons à faire, mais avec ça, est livré un prix.

The Greenbelt Festival is a great example of responsive web design. Screenshots provided courtesy of mediaqueri.es.
Le Greenbelt Festival est un excellent exemple de design de site web responsive. Captures d’écran, courtoisie de mediaqueri.es.

Repensez à l’article sur les tendances et pensez à la conclusion que vous pourriez avoir tirée vous-même qu’elles soient bonnes ou mauvaises. Pensez aussi aux buzzwords ; ces mots que vous voyez flasher sur des sites d’ affaires ou de nouvelles, au sujet des nouvelles et excitantes technologies. Maintenant, certains clients que vous rencontrez peuvent être un peu renseignés sur le web et le comprendre. Ils peuvent même eux-mêmes travailler dans le web et ont besoin d’un peu d’aide supplémentaire. Certains de vos clients, cependant, ne peuvent pas être éduqués aussi bien sur le web et peuvent voir ces mots à la mode comme un élément essentiel, quoi qu’il arrive. Je vais brièvement parler de ce genre de clients dans cette section.

Établir ce qu’un client souhaite

Au début de tout projet de design vous devriez essayer d’établir exactement ce que votre client attend du projet et ce qu’il attend comme résultats. Gérer les attentes de votre client peut être une chose difficile à faire, mais il est important que vous compreniez que vos clients comprennent votre processus entièrement.

A beautiful example of responsive web design in action can be seen on the Modern Green Home website. Screenshot courtesy of mediaqueri.es.
Un bel exemple du responsive web design en action est visible sur le site Modern Green Home. Captures d’écran, courtoisie de mediaqueri.es.

Quand il s’agit de design de sites web responsive, et surtout s'ils viennent à votre connaissance avec l’un de ces buzzwords, vous devez essayer d’aider à éduquer vos clients. Très souvent, ces buzzwords ont été entendus au passage, ou ont été représentés à tort, et c’est à vous de vous assurer que votre client a une bonne compréhension du sujet.

Par exemple, parfois vous pourriez même avoir des clients potentiels venir vous voir pour vous dire qu’ils veulent un site web qui fonctionne sur « iPhone et iPad ». Dans ce cas, je dirais « Eh bien, c’est parfait - mais ce qui serait génial, c’est que nous puissions plutôt nous concentrer sur la création d’un site web parfaitement responsive qui fonctionne sur n’importe quel appareil et pas seulement nous limiter à ces deux là. » C’est un excellent brise-glace sur le sujet et c’est quelque chose qui vous laisse une ouverture pour expliquer plus loin dans les étapes de planification.

Si votre client comprend correctement le design responsive, alors j’imagine qu’ils sera plus heureux avec le projet.

The Stuff & Nonsense website is a great example of responsive web design, also introducing different illustrations at different screen sizes. Screenshots provided courtesy of mediaqueri.es.
Le site de Stuff & Nonsense est un excellent exemple de responsive web design, présentant également des illustrations différentes à différentes tailles d’écran. Captures d’écran, courtoisie de mediaqueri.es.

Si vous prenez le temps d’éduquer correctement le client, cela ne peut fonctionner qu’en votre faveur. Par exemple, dans mon propre travail, j’essaie toujours de faire en sorte que mes clients sentent que je travaille avec eux, plutôt que simplement pour eux. Ça contribue à faciliter le processus de travail avec vos clients lors du design web responsive.


Conseils et techniques pour le RWD

C’est bien beau quand je parle de pourquoi il est important d’éduquer les clients et vous dis des choses que vous savez déjà sur le design web responsive. Place aux choses sérieuses, où je vais vous parler des meilleures façons de designer des sites web responsive.

The Great Discontent are well known for their interviews - and their website is a great example of magazine design on the web, as well as being a brilliant example of responsive web design. Screenshots provided courtesy of mediaqueri.es.
The Great Discontent sont bien connus pour leurs interviews, et leur site web est un excellent exemple du design de magazine sur le web, ainsi qu’un brillant exemple du responsive web design. Captures d’écran, courtoisie de mediaqueri.es.

Et la réponse ? Eh bien, malheureusement il n’y en a pas vraiment de correcte ! Je suis désolé si ce n’est pas ce que vous cherchez, mais comme vous l’aurez probablement compris avec votre développement et codage, les processus de tout le monde sont différents et personne ne semble fonctionner de la même manière. Cela, à sa manière, est super car cela signifie que nous pouvons toujours trouver de nouvelles façons de travailler.

Toutefois, ne vous inquiétez pas, je vais vous donner quelques conseils pour le design de sites web responsive, que vous devriez être en mesure de mettre en œuvre assez facilement. N’hésitez pas à choisir parmi tout cela, ainsi que les combiner où vous pensez que ça pourrait être approprié. Aussi expérimentez ! Essayez les différentes façons de concevoir les sites web responsive et voyez ce qui vous convient le mieux.

Maquettes

Créer une maquette pour un site à largeur statique dans Photoshop (ou tout autre logiciel de graphisme) était la manière dont la plupart des gens concevaient des sites web, et pour certains, c’est toujours le cas. C’est absolument parfait ! Si vous êtes à l’aise avec l’utilisation d’une application graphique pour designer l’apparence de votre site web, alors c’est bien.

The UX London 2013 website is a beautiful example of design that scales from small to large gracefully. Screenshots provided courtesy of mediaqueri.es.
Le site web UX London 2013 est un bel exemple de design qui peut évoluer de petit à grand gracieusement. Captures d’écran, courtoisie de mediaqueri.es.

Mais n’allez pas essayer de designer une maquette pour chaque résolution unique ou largeur ; vous deviendriez fou et serez là pour très longtemps. Au lieu de cela, pensez à l’article sur le wireframing. Réfléchissez à comment nous avons étudié le flux de contenu pour ces wireframes et comment nous avons décidé de comment tout devrait s'emboîter ensemble. Essayez de traduire ceci dans vos créations et réfléchissez à comment ces éléments vont couler et se déplacer lorsque la taille de l’écran change.

Certains de ces changements seront importants, et pour ceux-là alors il peut être approprié de créer une petite maquette pour montrer cela, mais pour toutes les autres modifications, telles que l’adaptation de texte, alors je m’en tiendrais à regarder ces sortes de choses dans le navigateur une fois que vous commencez à coder des prototypes. Si vous préférez designer une maquette pour chaque étape importante de votre design alors par tous les moyens, avancez, soyez juste conscient du temps que cela va ajouter à votre projet.

Design dans le navigateur

Maintenant, un peu de controverse. Vous avez peut-être entendu tout le débat au sujet du design dans le navigateur qui a été la principale discussion depuis quelques mois, voire même plus longtemps que ça.

The WWF website is a gorgeous example of web design that works brilliantly responsively as well. Screenshots provided courtesy of mediaqueri.es.
Le site web du WWF est un magnifique exemple de design web qui fonctionne en responsive avec brio. Captures d’écran, courtoisie de mediaqueri.es.

Designer dans le navigateur c'est lorsque vous passez d’une étape de wireframe (si vous avez fait cela) directement dans le navigateur pour démarrer la phase de design, plutôt que de travailler avec n’importe quel logiciel graphique. Si vous utilisez un tas d'outils en ligne pour vous aider à créer les différents éléments de votre structure de design (par exemple pour créer des grilles ou affiner votre typographie) alors cela peut fonctionner vraiment bien.

Cependant, beaucoup de designers peuvent avoir l'impression d'être mal à l'aise de concevoir dans le navigateur, surtout s’ils sont plus designer que codeur. La raison de ceci est parce qu’ils sentent que ça restreint leur créativité un peu plus, rendant plus difficile pour eux de se sentir comme s'ils pouvaient venir avec des idées créatives, uniques et visuellement excitantes.

The Next Web manages to display content in a way that is easy to digest and follow, even down to small screens. Screenshots provided courtesy of mediaqueri.es.
The Next Web gère l'affichage du contenu d’une manière qui est facile à digérer et à suivre, jusque dans les petits écrans. Captures d’écran, courtoisie de mediaqueri.es.

Mais en tant que développeur, vous serez très probablement extrêmement confortable à utiliser du code, et donc ça pourrait être une bonne idée de vous à amuser à essayer de designer dans le navigateur et voir quels résultats vous obtenez.

« Décider » dans le navigateur

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 de comment fonctionne un design jusqu'à ce qu’il soit dans le navigateur lui-même. La typographie rendra toujours différemment dans les applications graphiques et dans le navigateur, et il est beaucoup plus facile de créer des prototypes et de itérer rapidement dans le stade de design lorsque vous êtes dans le navigateur (bien que tout ceci pourrait être sur le point de changer avec l’introduction d’applications telles que Macaw).

The Microsoft website cleverly makes use of moving content and cropping images depending on the size of the viewport. Screenshots provided courtesy of mediaqueri.es.
Le site web de Microsoft fait habilement usage du déplacement de contenus et du recadrage des images selon la taille de la fenêtre d’affichage. Captures d’écran, courtoisie de mediaqueri.es.

Travailler à la fois avec un mélange de maquettes et de travail basé sur un navigateur signifie que vous pouvez donner une grande flexibilité à votre design et aux décisions que vous devez prendre. La clé de ce terme « décider dans le navigateur » est cependant, le premier mot. Bien que beaucoup de grandes décisions créatives sont possibles dans le logiciel graphique, le navigateur est où votre choix final peut être réalisé.

Quand je travaille de cette façon, je me retrouve souvent à la fin avec un mélange de maquettes, bibliothèques de motifs (logiciels graphiques et HTML & CSS) et prototypes de HTML & CSS complets. Un mélange est bien et il montre l’évolution du site depuis le début à ce qui, nous l’espérons, commence à devenir un site complet.

Content-first, mobile-first ou desktop-down ?

Premièrement, si vous ne l’avez pas déjà appris de mes articles dans la section « Avant de commencer » - toujours, toujours, toujours commencer à travailler sur vos designs content-first. Tous ceci a pour objectif de s’assurer que vous travaillez avec le contenu réel et le contenu qui est destiné à être utilisé sur le site web que vous créez.

Philip House is a great example of how you can shift and move layouts when working with responsive web designs. Screenshots provided courtesy of mediaqueri.es.
Philip House est un excellent exemple de comment vous pouvez pousser et déplacer des mises en page lorsque vous travaillez avec des designs web responsive. Captures d’écran, courtoisie de mediaqueri.es.

Deuxièmement, que vous travailliez mobile-first (en commençant par les plus petites mises en page), ou desktop-down (en commençant par les mises en page pleine largeur) dépend totalement de vous. Il y a beaucoup de débats à ce sujet en ligne, mais vraiment c’est à vous de prendre votre propre décision. Si vous vous sentez plus créatif en allant d’une taille supérieure vers une taille inférieure, même si vous le construisez dans le sens inverse, c’est bien. Tout comme faire le contraire et aller des petites aux grandes !


Outils pour vous aider à designer de manière responsive

Nous allons conclure avec quelques ressources utiles. Il y a tellement d’outils qui peuvent vous aider lorsque vous créez des sites responsive, jetez un coup d’oeil :

Grilles

Typographie

Directives de style & bibliothèques de motif

Études de cas

Divers

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.