Quelle résolution choisir pour votre site?

Quelques Définitions.

La résolution de l’écran est théoriquement le nombre de pixels (que l’on peut représenter) par unité de surface qui est le pouce (inch)

Issu d’un compromis anglo-saxon (en 1959) le pouce est exactement égale à 2.54cm.

Quant au pixel (contraction de « picture element ») est l’unité de base de mesure de la définition d’une image.

Par abus de langage on s’est habitué à mélanger la définition de l’écran avec la résolution, la définition de l’écran est le produit entre le nombre de pixels que peut afficher un écran en horizontale et en verticale, ce qui explique le signe multiplicatif (x) qu’on met entre ses deux valeurs

Le travail du Designer.

Lors de l’étape de conception de l’interface graphique d’un site web (gabarit, template, charte graphique) le designer se pose plusieurs questions relatives tout d’abord au thème de l’interface, à la palette de couleur qui devra être en harmonie avec le sujet du site, au choix d’une bonne police d’écriture (css3 permet d’utiliser des polices « non-standard ») en suivant toute les recommandations d’accessibilité (WAI: Web Accessibility Initiative).

Le Conteneur du site (wrapper).

Lors de la conception de la maquette sur son éditeur graphique (ou lors de la réalisation simple du genre minimaliste) le designer devra choisir une largeur pour l’interface et plus précisément pour le conteneur (wrapper) des éléments du site.

c’est dans ce wrapper qu’on trouvera toute l’interface, il permet de manipuler la totalité du site en css, par exemple si on veut centrer la page du site il suffit de centrer le wrapper, si on veut qu’il soit à droite il suffit de l’aligner à droite, si on veut que le site occupe toute la largeur il suffit de lui donner une taille (width) de 100% et si on veut limiter la largeur du site il suffit encore de donner une taille (width) ou taille maximum (max-width) à ce wrapper 🙂

Un mot sur la Hauteur (height).

Dites vous que la limite en hauteur ne sert à rien, elle ne sera et ne pourra jamais être déterminée

Même si la définition verticale de l’écran est de 1200, rien ne dit quelle sera la taille réelle d’affichage du site, il y a parfois plusieurs barres qui s’ajoutent à la barre des menus de votre navigateur et qui ne laissent parfois que les 3/4 de la hauteur pour afficher le site, Bref …. le sujet et à oublier, par contre pour la largeur le choix se pose.

Résolution Optimale.

Une étude montre que la résolution de base sur laquelle tout tourne est la « 1024×768 ». Le principe et le but de cette étude et d’offrir des stastiques qui seront utilisés lors de la conception graphique et qui permette de voir quelles résolutions permettront de satisfaire un maximum de visiteurs potentiels, par exemple dans le tableau ci dessous on voit très bien qu’il serait préférable d’abandonner carrément l’idée d’un site se basant sur une résolution de 800×600 ou 640×480.

Les résolutions inférieur sont celle des équipements mobiles.

Date Supérieur 1024×768 800×600 640×480 Inférieur
Janvier 2011 85% 14% 0% 0% 1%
Janvier 2010 76% 20% 1% 0% 3%
Janvier 2009 57% 36% 4% 0% 3%
Janvier 2008 38% 48% 8% 0% 6%
Janvier 2007 26% 54% 14% 0% 6%
Janvier 2006 17% 57% 20% 0% 6%
Janvier 2005 12% 53% 30% 0% 5%
Janvier 2004 10% 47% 37% 1% 5%
Janvier 2003 6% 40% 47% 2% 5%
Janvier 2002 6% 34% 52% 3% 5%
Janvier 2001 5% 29% 55% 6% 5%
Janvier 2000 4% 25% 56% 11% 4%

Donc la largeur de base sera 1024pixels, mais attention … de nombreux personnes oublient que selon le contenu il apparait parfois des ascenseurs (scrolling) à droite ou à gauche (selon la langue) ce qui diminue cette taille optimale de 1024 à parfois 1000 pixels, de plus les attributs CSS ne sont pas interprété de la même facon d’un navigateur à un autre, du fait de leur incompatibilité (graphique et tableau d’utilisation des navigateurs) il faudra penser à laisser une dizaine voir plus (selon le nombre d’éléments div et de padding utilisé avec des widths de 100%).

Quelle est la solution?

L’utilisation d’un système de grille 🙂 mais kakosi ???

C’est simple, il s’agit d’une grille divisé en colonne, le principe est que une fois que vous aurait fini votre maquette papier du site (wireframe) qui sera transcrit sur cette grille, la maquette (qui en faite est constitué généralement de rectangle) verra chaque coté des rectangles coincidé avec une des cotés des colonnes de la grille. Le tout gère généralement la typographie, l’impression (en terme de css) et surtout la compatibilité avec tous les navigateurs.

Certaines grilles offrent des solution pour les équipements mobiles ce qui est un petit plus, d’autres rajoute dans leur package des templates pouvant être utilisés par un très grand nombre d’éditeur graphique

Le nombre de système de grille est grand, si je ne me trompe pas plus d’une trentaine,  les systèmes de grilles qui ont fait leur preuve et sont trés connus pour leur facilité d’utilisation sont par contre peut nombreux

Quelques systèmes de grille (Grid System)

960gs: dont la largeur max est de 960pixels, il est capable de faire (comme tous les autres framework css) une interface minimaliste en moins de 5 minutes (si bien sur le wireframe est prêt). il fonctionne avec 12, 16 ou 24 colonnes, une variante de 960gs permet de faire une interface fluide dont la largeur varie selon la taille de la fenêtre de votre navigateur.

blueprint: comme 960gs c’est un style minimaliste, il se base aussi sur un système de colonne, le seule soucis réside dans son padding qui est un multiple de 40px, mais bon… avec un peu d’entrainement on arrive à un résultat lus que satisfaisant.

1140px: c’est pareil, c’est un système de grille qui en plus offre une version mobile de votre maquette. En ouvrant le lien de 1140px  essayer de diminuer la taille (en largeur) de la fenêtre, vous verrez que l’interface change pour s’adapter aux équipements mobiles.

inuit.css: ce dernier supporte plusieurs périphériques mobile (résolutions différentes) et se base sur la version 5 d’HTML. inuit.css est une grille élastique qui dérive de 960gs

Je rajouterais d’ici peu un petit tutoriel pour chacun d’entre eux et pourquoi pas je rajouterais quelques mots sur les framework css que sont Less et Compass.

Advertisements

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s