Quelles dimensions pour vos maquettes ?

Prenez de bonnes résolutions

Aujourd’hui, plus que jamais votre site web se doit d’être utilisable sur de nombreuses résolutions et appareils différents. Les maquettes déterminent le rendu final de votre interface, c’est pourquoi il faut choisir au mieux leurs dimensions avant même de commencer.

Sur quels critères choisir ?

Le choix des dimensions de vos maquettes dépend de trois critères :
Tout d’abord, il faut connaître vos utilisateurs et leurs résolutions d’écran.
Ensuite, il faut définir les points de rupture (breakpoints) avec vos développeurs.
Enfin, il faut déterminer le nombre de maquettes que vous pouvez vous permettre de réaliser pour un projet donné.

Étape 1 : les résolutions de vos utilisateurs

Si vous avez déjà ces données, il faut les prendre en compte. Si ce n’est pas le cas, le site statcounter vous offre des statistiques générales qu’il est possible de filtrer en fonction des appareils et des lieux géographiques.

Les écrans d’ordinateurs

À l’heure où j’écris ces lignes, les résolutions les plus utilisées en France sont 1920×1080 et 1366×768. Il y a de nombreuses autres résolutions très utilisées à prendre en compte comme 1440×900, 1280×720, 1600×900 et 1024×768.

Les tablettes

La résolution 1024×768 est de loin la plus répandue. Il faut la prendre en compte en mode portrait comme paysage. La résolution la plus grande à prendre en compte est 1280×800. Tandis qu’il existe beaucoup de résolutions plus petites comme 601×962, 810×1080, 834×1112 ou 600×1024.

Les téléphones intelligents

Il existe de nombreuses résolutions smartphone différentes. La résolution la plus répandue sous Android est 360×640. Chez apple la largeur des dernières générations est de 375px ou 414px. Il faut retenir que la plus petite résolution à prendre en compte a une largeur de 320px.

Étape 2 : les points de rupture

Un point de rupture, breakpoint en anglais, est la dimension en largeur à partir de laquelle on passe d’une version d’un design à une autre sur un site web. On définit généralement au moins deux breakpoints. Ils sont schématisés comme le passage entre la version téléphone et tablette, puis tablette et ordinateurs. Mais il n’est pas rare d’en avoir d’autres. C’est à définir en fonction du projet.

Vous l’avez peut-être remarqué, certaines largeurs d’écrans sont communes entre tablette et ordinateur ou entre téléphone et tablette. Ainsi, il est courant de ranger les écrans d’ordinateurs de 1024px de largeur avec les écrans tablettes. À l’inverse les tablettes de 1280px de large se voient souvent afficher la même version du site que les ordinateurs portables et de bureau.

Étape 3 : le nombre de maquettes

En théorie, on pourrait réaliser une maquette pour chaque résolution trouvée à l’étape une. Pour éviter ce travail long et fastidieux, nous nous contentons généralement de deux maquettes. Il est alors judicieux de réaliser une maquette ordinateur et une maquette téléphone.

Pour des projets plus ambitieux, on peut également réaliser une version tablette et une version grands écrans d’ordinateur (1600px, 1920px, etc…). Enfin, il est tout à fait possible de multiplier le nombre de versions seulement pour certains écrans.

Quelle dimension pour mes plans de travail ?

Vous l’avez compris, il n y a pas de réponse générique. Comme souvent, cela dépend du budget, de la complexité du projet et de l’équipe impliquée.

Personnellement, je m’assure que mes maquettes fonctionnent pour l’ensemble des résolutions citées plus haut. Mais la plus part du temps je conçois seulement deux versions en maquette.

J’opte pour une version téléphone de 360px.
Avec l’expérience, j’arrive à anticiper les contraintes et m’assurer que tout fonctionne également sur les téléphones de largeur 320px. Je crée ma maquette sur une plus grosse résolution par simple esthétisme. En effet, j’ai remarqué que mes clients avaient plus de mal à se projeter sur une résolution de 320px.

Pour les mêmes raisons, mes maquettes pour ordinateurs fonctionnent dès les résolutions de largeur 1280px, mais je fournis une maquette en 1440px.

Je réalise souvent en plus une version tablette et une version grand écran d’ordinateur. Mais seulement pour une page. Celle-ci sert de référence pour l’ensemble du site web.

  • j'aime
  • partager
  • scroll
Achille
Achille Delobbel
Designer spécialisé en conception de site et application web. Co-fondateur de l'agence bigbump. J'essaie de vous apporter mon aide pour améliorer vos interfaces. N'hésitez pas à me suivre sur twitter pour plus d'astuces et conseils.

Faites vous aider pour votre projet

Découvrez bigbump l’agence web qui réconcilie créativité et pragmatisme au service de vos projets.
En savoir plus