Le temps où l’on créait un site web uniquement pour les ordinateurs est belle est bien révolu. Les nouvelles technologies et le développement des sites mobiles forcent les graphistes à repenser la manière dont leurs designs apparaissent sur différents formats d’écrans. Pensez-y un instant : combien passez-vous de temps à surfer le web sur votre téléphone versus sur votre ordinateur ? Bienvenue dans le monde de la conception de sites web adaptatifs.

Qu’est-ce que la conception de sites web adaptatifs ?

Pour faire simple, les designs adaptatifs sont conçus de manière à ce que l’apparence et le code d’un site web changent en fonction de la taille de l’écran de l’utilisateur. Ce qui veut dire que l’expérience que l’on fait d’un site web donné est toujours optimale, quel que soit l’appareil que l’on utilise, qu’il s’agisse d’un appareil Android, d’un iPad, ou d’un écran Home Cinema.

Faites la comparaison avec notre site et regardez comment il est présenté dans sa version statique et dans sa version adaptative :

responsive vs static website design comparison

Les meilleurs sites adaptatifs sont essentiellement conçus avec des grilles fluides, des images flexibles et du CSS pour altérer le design du site et l’adapter à la largeur du navigateur utilisé. Les graphistes devraient tous avoir comme but ultime de concevoir des expériences UI et UX identiques quel que soit l’appareil et les plateformes utilisés.

Pourquoi la conception de sites web adaptatifs est-elle si importante ?

S’il fallait concevoir et développer plusieurs versions d’un même site web, pour chacune des utilisations possibles en fonction des appareils, le processus serait non seulement très long et peu pratique, mais aussi très cher ! Il serait également très difficile de faire évoluer les versions au fur et à mesure que les nouvelles technologies apparaissent. Le design adaptatif est une excellente solution pour s’assurer d’avoir un site qui pourra évoluer avec son temps.

internet usage desktop vs mobile

Pour créer un site web adaptatif de bonne qualité, il est essentiel de connaître son audience et les appareils qu’elle utilise. Votre trafic provient-il principalement d’une utilisation sur ordinateur, sur tablette, ou sur smartphone ? Aux États-Unis, environ 56% du trafic se passe sur téléphone mobile. Il y a environ 2.6 milliards d’utilisateurs de smartphones dans le monde, et ce nombre devrait tripler d’ici 2020 pour atteindre 6 milliards. Savoir concevoir un site web pour une utilisation mobile n’a jamais été aussi important.

Il est absolument essentiel de créer son site web pour qu’il puisse être utilisé sur des appareils différents, mais cela devient encore plus compliqué lorsque l’on prend également en compte tous les navigateurs qui existent. Chaque navigateur a sa propre façon de s’adapter à une utilisation mobile, et donc sa propre façon de présenter les sites web. Pire encore, tout le monde ne met pas à jour son navigateur… Il est donc essentiel que votre design fonctionne et s’adapte à toutes ces versions différentes.

La panique vous prend à l’idée de concevoir un site web ? Ne vous inquiétez pas, tout le monde se trouve dans la même situation et la bataille est constante. La meilleure chose à faire est tout simplement de tester son site web sur autant d’appareils que possible, vieux comme récents (et d’engager un dieu du développement web !).

À quelles dimensions dois-je concevoir mon site web ?

Il n’y a pas de format “standard” de site web. Il existe des centaines d’appareils : les modèles, la qualité et le format des écrans changent en permanence. Et chaque site internet attire des visiteurs sur les différents appareils. Par exemple, il y a plus de chance que vous regardiez une recette de cuisine sur votre téléphone mobile que sur votre ordinateur, mais ce serait au contraire tout l’inverse s’il s’agissait d’un tutoriel pour Photoshop.

Il est possible de déterminer quels sont les navigateurs et les formats de pages les plus populaires pour votre site web en regardant les données de Google Analytics. Mais avec toutes ces combinaisons de navigateurs, de formats et de versions, comment faire pour créer un design adaptatif sans y laisser sa santé mentale ?

Essayez de concevoir au moins 3 versions

Un design de site web adaptatif doit avoir au moins 3 versions différentes en fonction de la largeur des navigateurs. Les nombres spécifiques que nous nommons ici sont ceux que nous utilisons actuellement chez 99designs, mais vous pouvez très bien faire différemment !

  • Petite : moins de 600px, format pour la plupart des smartphones
  • Moyenne : 600px – 900px, format pour la plupart des tablettes, les gros téléphones, et les petits ordinateurs
  • Large : plus de 900px, format pour la plupart des ordinateurs

Chacun de ces formats doit pouvoir contenir le même texte et les mêmes éléments graphiques, mais chacun d’entre eux doit être conçu pour présenter tout ce contenu de manière optimale, quel que soit le type d’appareil utilisé. Réduire la page pour que cela tienne dans un format d’écran plus petit rendra le texte illisible, mais vous pouvez peut-être réduire le texte proportionnellement et passer à une seule colonne, par exemple.

Exemple de conception de sites web adaptatifs avec notre page de création de logodata-track-click data-track-hover > sur trois appareils différents.

Quelques points à prendre en compte

  • L’expérience utilisateur est essentielle : un design adaptatif doit faire bien plus que d’adapter un site à une taille d’écran. Il doit également prendre en compte l’expérience utilisateur, la manière dont ces derniers interagissent avec le site, et le contenu qu’ils regardent vraiment.
  • Ne créez pas un design pour le dernier modèle de smartphone seulement, créez votre site en fonction de votre contenu. Comment la mise en page et les différents éléments peuvent être agencés pour s’adapter à chaque format d’écran ?
interactive map example
Design réalisé par Karol Ortyl
  • L’engagement : la hiérarchie de la mise ne page est très importante, surtout pour les versions mobile : il est toujours mieux de faire simple et de rester sobre. L’expérience mobile, en comparaison à celle sur ordinateur, est toujours beaucoup plus concentrée puisqu’il y a moins de place. Le sens de lecture doit donc être très clair de façon à ce que les messages soient immédiatement compréhensibles. Pensez également à l’action principale de la page : si le but est de faire en sorte que les gens cliquent un maximum sur le bouton “contactez-nous”, faites en sorte que ce bouton saute aux yeux… Concevez votre plateforme en fonction de votre contenu et de l’expérience que vous voulez créer.
  • Les images flexibles sont cruciales pour créer un site web adaptatif. Pensez à la manière dont les images s’adapteront aux différents formats d’écrans (très grandes sur un ordinateur, mais toutes petites sur un téléphone, etc.). En ce qui concerne le développement de la plateforme, le code doit permettre aux images de changer d’échelle (en pourcentage) en fonction de la largeur du navigateur.
  • La navigation est importante sur smartphone. Il existe plusieurs méthodes pour positionner les gros menus ainsi que le contenu. Le menu hamburger par exemple, ou un simple menu déroulant, ou encore différents onglets présentés horizontalement, comme c’est le cas sur YouTube.
responsive design menu examples
Designs réalisés par UI Garage
  • Les différents gestes ouvrent tout un tas de possibilités pour le design. Les gens adorent lire “avec leurs mains” et interagir avec le contenu. Cela donne l’impression d’avoir le contrôle. Sur les mobiles et les tablettes, les utilisateurs peuvent zoomer et dé-zoomer, ou encore faire défiler les images, etc. Ces interactions affectent généralement le design. Par exemple, si vous avez une galerie d’images, évitez d’utiliser des petits points pour sélectionner une image individuellement, et laissez aux utilisateurs la possibilité de faire glisser l’écran d’une image à l’autre. Pensez à la taille des doigts des utilisateurs et faites en sorte de créer une bonne expérience UI. Selon Apple : la taille minimale confortable pour les éléments UI cliquables est de  44 x 44 px. Cette limite est peu respectée et ces éléments sont généralement à 25px environ. Les designs complexes que l’on voit sur les interface ‘desktop’ doivent être adaptés pour créer une UI intuitive sur smartphone. Gardez cela en tête lorsque vous créez vos différentes versions. Discutez des différentes options possibles avec votre développeur pour trouver les meilleures solutions.
  • Créez au moins trois versions pour les différentes largeurs de navigateurs. Nous avons une version à moins de 600px, une autre à 600px-900px, et une troisième à plus de 900px. Entre ces dimensions, le contenu peut s’adapter librement ou au contraire rester fixe. Avoir trois (ou plus) mises en page fixes et ajouter des marges aux endroits où c’est nécessaire est souvent un moyen simple de créer et d’implémenter une mise à l’échelle. Cependant, avoir des versions adaptatives fonctionnera mieux sur un plus grand nombre d’appareils.

Outils et ressources

  • Votre navigateur web peut être un outil qui tombe sous le sens, mais il s’agit malgré tout de l’un des outils les plus efficaces pour avoir un aperçu de vos designs une fois sur la toile. Installez différents navigateurs pour voir comment votre site apparaîtra sur chacun d’eux. Recadrez ensuite la taille des fenêtres du navigateur.
  • Votre téléphone mobile est aussi l’un des outils les plus évidents : très utile pour voir votre site sur un petit écran et tester l’UI/UX.
  • Les grilles fluides permettent de baser votre mise en page en fonction d’un pourcentage au lieu de pixels. Par exemple, si la largeur du contenu sur l’écran d’un ordinateur est de 930px, mais que vous voulez que ce chiffre passe à 320px sur un mobile : 320/930 = 34.4%. Lorsque vous utiliserez ce pourcentage, les éléments de votre design garderont leur taille proportionnelle les uns par rapport aux autres. Nous aimons particulièrement la One% CSS Grid.
UI responsive interaction example
Design réalisé par Anton Aheichanka
  • Google Resizer est un bon outil pour visualiser son site sur différentes tailles d’écran.
  • Media Queries est un type de code qui sera implémenté dans votre site au moment de sa construction. Il est important pour votre code, car il établit les conditions nécessaires pour que votre site s’adapte comme par magie aux différentes tailles d’écran. Par exemple : “si la taille de l’écran est inférieure ou égale à 480px, changez le design au format tablette”. Essayez tout de suite cet outil en réduisant la taille de la fenêtre de votre navigateur (depuis un ordinateur). Vous verrez que le contenu change d’échelle automatiquement pour s’adapter à ces nouvelles dimensions.

Vous savez maintenant tout sur la conception de sites web adaptatifs (ou presque) !

Pas de panique, la conception de sites web adaptatifs est un challenge pour tout le monde dans la profession. Le mieux que vous puissiez faire est de rester au fait des tendances UI/UX et de design, de vous assurer que vos images sont flexibles, de ne jamais oublier que les navigateurs sont tous différents, et de ne jamais oublier que l’expérience utilisateur est reine.

Quelles sont vos meilleures astuces en conception de sites web adaptatifs ?

Besoin d'un site web adaptatif pour votre entreprise ?
Notre communauté internationale de designers est là pour vous aider !