Quelle est la meilleure largeur pour un site Internet
by Thierry | septembre 11, 2012 | on Outils / Astuces
Cette question n’est pas existentielle pour une personne utilisant un blog wordpress ou autre, mais pourra répondre aux autres utilisant le html.
Le html s’utilise encore très souvent dans le ces d’une page de vente par exemple, qui a un meilleur rendu final qu’une page de blog.
Plus le temps passe, et plus les écrans d’ordinateur ont tendance à s’élargir. Cette question n’était pas d’actualité il y a quelques années, mais avec les résolutions qu’ont certains nouveaux écrans, la question peut se poser.
Alors pour répondre à la question « quelle est la largeur idéale pour un site internet », il faut d’abord savoir quel type de site vous allez produire.
- Si vous créez une page de vente, la résolution idéale doit se trouver aux alentours de 700 pixels de large. 750 serait un maximum. Mais je vous conseille de rester en dessous.
Vous n’aurez ni de navigation à droite, ni à gauche. Alors créer des pages trop larges ennuierait vos visiteurs et ils auraient du mal à se concentrer sur votre texte.
Et un visiteur qui s’ennuie est un visiteur perdu.
- Si vous créez un site de contenu avec des menus gauche et droite, choisissez une résolution entre 900 et 1000 pixels maximum.
Ne dépassez pas cette résolution.
Beaucoup de personnes possèdent encore un vieil écran d’ordinateur. Et choisir une résolution trop élevée obligerait le visiteur à faire défiler l’écran horizontalement pour avoir accès à tout le contenu.
La deuxième raison est que le contenu sur un écran d’ordinateur doit rester aéré.
Un écran large rempli de texte fatigue les yeux et n’est vraiment pas attrayant. Le seul exemple de sites s’affichant systématiquement sur tout l’écran de l’ordinateur quelle que soit la résolution est wikipedia.
Mais mon avis personnel (qui n’est que le mien), est que des pages telles que celles ci-dessus sont très pénibles à lire.
Les ligne sont interminables et cela fatigue énormément.
Twitter utilise une résolution de 750 pixels de large.
E-bay utilise une résolution de 930 pixels de large.
Yahoo utilise une résolution de 994 pixels de large.
Comme vous pouvez le voir, bien souvent la résolution reste inférieure à 1000 pixels.
Si vous voulez tester votre site avec différentes résolutions avant de choisir celle que vous adopterez au final, voici un outil en ligne qui pourra vous venir en aide.
Il existe également une extension pour google chrome si vous utilisez ce navigateur.
Vous voilà armés d’outils qui vous permettront de tester et d’adapter la résolution de votre site pour tous les utilisateurs du net, quel que soit leur écran.
Bonjour Thierry,
Tu as raison, il est important de faire attention à la largeur de ses pages et sites.
Je mettrais juste 1 léger bémol pour les sites qui ont des barres latérales gauche et droite.
Je ne remets pas en cause ton argumentation qui est en effet justifiée vis-à-vis des anciens écrans qui sont encore présents en nombre.
Simplement, je pense qu’il faut faire également attention à la largeur de ces fameuses barres latérales, car dans certains cas, elles ne laissent plus beaucoup de place au contenu.
Dans ce cas-là, il y a 2 solutions:
1- réduire la largeur des barres latérales
2- si vous devez conserver la largeur des barres latérales, vous pouvez légèrement augmenter la largeur du site, mais il faudra cependant mettre les informations les moins importantes dans la side-barre de droite, de manière à limiter le scrolling latéral.
Qu’en penses-tu Thierry?
Bonjour Bruno et bienvenue
Je pense aussi que dans le cas de deux sidebars, il vaut mieux qu’elles soient assez discrètes et donc pas très larges.
Voir n’en mettre qu’une seule, ce qui est déjà bien suffisant.
C’est le contenu principal qui doit primer sur le reste, et pas le contraire.
Pour ce qui est du scrolling latéral, il ne doit même pas y en avoir du tout. C’est une des premières choses qui me fait quitter un site quand ça m’arrive. Je trouve ça désagréable.
Bonjour et merci pour cet article.
En effet, il faut savoir que la plupart des personnes utilisent les fenêtres de façon « maximisées », quelles que soient la résolution et taille de leur écran.
Soit le plus grand possible.
Et ce qui est difficile dans la lecture, ce n’est pas la longueur, tout bon écrivain ou copywriter le sait ; c’est la LARGEUR.
Cet article serait cependant incomplet si l’on n’y aborde pas la largeur physique de l’espace d’affichage, et non seulement le nombre de pixels.
Car avec les écrans d’aujourd’hui, non-cathodiques, la résolution (nombre de points par cm) a augmenté, et la largeur d’un rectangle de 750 pixels est désormais plus basse que sur les CRT d’il y a 10 ans…
Ce qui importe, c’est le confort de lecture, et que le regard ne s’éloigne pas de votre texte. Surtout pour une vente.
Alors n’oubliez pas non plus (même en HTML on peut utiliser des CSS « responsive ») de prévoir un affichage pour écran étroit… Ils sont de plus en plus nombreux. 10% des utilisateurs FB sont uniquement sur Mobile!
Et vos prospects ?
Merci Thierry pour cet article !
M.
Bonjour Mark et bienvenue
Merci pour le complément d’information. Je n’utilise pas de thème responsive mais un plugin favorisant l’affichage pour les appareils portables.
Et j’ai environ 15% de prospects qui me suivent sur portable. Nombre en progression.
Thierry
Bonjour Thierry,
Entièrement d’accord avec toi. Effectivement la première question à se poser est le nombre de colonnes. La zone accueillant le contenu doit en réalité être adaptée pour faire des lignes d’environs 60 caractères (ce qui est parait il la longueur optimale pour ne pas se perdre). C’est pour cela qu’elle ne doit pas faire l’intégralité de la page. Cette règles des 60 caractères me semble peu personnellement…
Les webdesigner aiment bien travailler avec des grilles et les sites de 960px en 12 colonnes sont assez à la mode : 4 colonnes pour la sidebare (320px) et 8 colonnes pour le contenu (640px).
Le tiens ne fais pas exception (à quelques pixel près)… Par contre on est plus sur du 110 caractères par ligne. Mais comme tes paragraphes sont très espacés, ça ne pose pas de problème…
Une bonne adresse pour ceux qui veulent construire leur page sur ce modèle : http://960.gs/
Bonjour Julie et bienvenue
Merci pour le complément d’analyse et pour le ressource dans le commentaire.
Thierry
La résolution la plus commune est généralement 960 ou 980px.
Je parle plus du côte web design là (ce que je connais)
Après il y a de plus en plus de site responsive design (qui s’adapte à la résolution) notamment pour l’Affichage sur mobile et tablette.
Je préfère voir la largeur en parlant du nombre de signes par ligne.
Bonjour Florian
Le responsive peut être une solution, effectivement.
Pour la largeur d’une page, tu as raison de voir cela en caractères par ligne, mais le plus grand nombre de personnes comprendra mieux en pixels. Voilà pourquoi j’ai privilégier ce mode.