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.
