Discussion :

[JeanMi66]

Bonjour,

je cherche à savoir ce que les créateurs de sites actuels utilisent comme largeur de page de code ?

Prévoyez-vous une taille personnalisée, une largeur de 800 pixels ou encore du 1024 pixels ?

Merci d'avance.

[KiLVaiDeN]

Personnellement, je pense que l'idéal est de viser du 800*600, tout en offrant la possibilité aux cadres et autres informations du site de s'étendre si l'espace d'affichage est plus grand ( donc avoir une taille "proportionnelle" ). Il est dommage d'avoir un design figé à une taille, alors que l'écran peut être mieux exploité.

De plus, il est interessant de gérer l'affichage sur des PDA, grâce à la selection de style via l'attribut @media:handheld des CSS ( recherche sur google )

[Perceval]

+1

Je code pour que ceux qui naviguent en 800x600 puissent naviguer sans problème. Et ensuite, je m'arange pour que mes blocs soit extensibles en fonction de la résolution d'écran.

[Death83]

Avant j'avais opté pour le 800 * 600 mais ca restreignait pas mal la taille et donc le contenu que l'on pouvit mettre. Je suis passé en 1024 car maintenant le pourcentage d'utilisateurs en 800 * 600 ou moin a beaucoup diminué (et tant a disparaitre).

SInon je n'aime pas trop les élargissement automatique car souvent le design s'en retrouve assez amoché. Je suis en 1600 et les site "extensible" m'apparaisse souvent trop étiré et trop spacieux. Je préfére avoir un site centré qui ne fait que 800 en largeur.

Mais bon c'est mon avis personnel.

[KiLVaiDeN]

En fait le but n'est pas de satisfaire les gens qui sont en 1600 ( qui rarement d'ailleurs mettent leur navigateur en plein écran ) mais plutot d'utiliser l'espace alloué le plus efficacement possible, en 1024 ou en 1152. Comme dit Percival, si la navigation est satisfaisante en 800*600 et que le design est extensible, il y a de fortes chances que ça marche aussi bien en 1024 et en 1152, même si en 1600 ça risque de ressembler plus à un format ligne

[Death83]

Oui mais la je parle au niveau design. Je trouve les site non extensible plutot joli lorsqu'il ne sont pas extensible. (meme un site en 800 pour un écran 1600).

Apres c'est une question de gout.

[Perceval]

En fait, tout est relatif..... Par exemple, actuellement je bosse sur des sites intranet consultés par des postes avec des résolutions allant de 800x600 à 1280x1024. Je t'avoue que les 1600.... y'en a pas du tout, du coup, je n'ai pas à m'en soucier. Par contre la proportion de 800x600 est encore importante. Donc impossible de passer outre cette résolution.

Après, l'option centrer le tout avec une dimension fixe de 800, je le fait aussi, mais là encore, ca dépend du site....

Mais, il est vrai qu'en général, chez les particulier, la résolution 800x600 tend à disparaître pour devenir plutot du 1024x768.

[JeanMi66]

Merci à tous pour vos conseils !

A+

[Defrancesco]

Bonjour à tous,
Je me permets de relancer le débat, le dernier post it date de plus d'une année.
Je suis entrain de créer un nouveau site. Jusqu'à maintenant, j'ai défini la résolution de mes sites par 800 x 600.
Je me pose la question si ce n'est pas le moment de passer à une résolution supérieure.
Merci de vos avis.

[mathieu]

Je me permets de relancer le débat, le dernier post it date de plus d'une année.

d'après les statistiques là, les 640 x 480 ont disparus mais les 800 x 600 sont encore très présents parmis le grand public
http://www.w3schools.com/browsers/browsers_stats.asp

Par contre si tu ne vises pas le grand public tu peux peut-être te permettre de ne pas tenir compte des 800 x 600

[Defrancesco]

Merci de la réponse.
Je vais encore faire ce site en 800.
En effet, personnellement je trouve préférable un design de 800 x 600 dans un écran de 1280 que le contraire.

[MasterOfChakhaL]

A mon avis, la vrai problèmatique n'est pas quelle taille choisir mais plutôt comment s'affranchir de la taille de l'écran pour réaliser un design.

Il me semble que le CSS apporte déjà un certain nombre de solutions efficaces même si ce n'est pas forcément parfait et totalement abouti.

Le temps où la navigation sur internet ne concernait que les ordinateurs est maintenant révolu (pda, téléphones portables, écran de télé...)

[Linaa]

En fait la largeur doit faire moins de 800 puisqu'il faut tenir compte de la barre de défilement verticale aussi.
J'prefère un site fixe, plutôt qu'adaptable, vu qu'on ne sait pas ce que ça va donner, il faudra tester sur toutes les résolutions !

[Candygirl]

Perso je mise sur un design élastique (qui s'adapte à la taille des caractères). Mon critère est que le site soit agréable à visiter => pas de lignes de texte trop long.

Après, tout dépend de la composition du site; genre un menu à gauche et du texte à droite, une largeur équivalente à environ 760px sera amplement suffisante. Pour un site qui a du contenu sur 3 colonnes, la largeur optimum sera peut-être un peu plus importante, mais tout en restant consultable sans scrollbarre sur un 800-600.

Pour moi, le but n'est pas de remplir l'espace pour le remplir comme le fait un design extensible mal pensé. Un texte est agréable à lire lorsqu'il comporte entre 10 et 15mots par ligne, plus cela fatigue intuilement de devoir passer d'une ligne à l'autre. Donc utiliser l'espace, pourquoi pas, mais de manière intelligente (rajouter une colonne), pas en étendant simplement la longueur des lignes au détriment de la lisibilité.

[clb56]

En fait la largeur doit faire moins de 800 puisqu'il faut tenir compte de la barre de défilement verticale aussi.
J'prefère un site fixe, plutôt qu'adaptable, vu qu'on ne sait pas ce que ça va donner, il faudra tester sur toutes les résolutions !

Mmmm non pas vraiment,

En fait le vrai avantage des design fluides c'est de permettre une adaptation du rendu pour les faibles résolutions d'écrans en controlant et limitant le résultat sur les très grandes résolutions. Or ceci est très aisément réalisable, si on place l'ensemble du code html compris dans le body dans un <div> global :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<body>
<div id="global">
... tout le contenu balisé du document...
</div>
</body>

Alors avec un stylage css tel que :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
body {
margin-left:5%; 
margin-right:5%; 
}
div#global {
margin-left:auto;
margin-right:auto;
max-width:1000px;
}

Le résultat est acquis pour firefox, Opera et IE7



Qu'en est il des versions d'IE inférieures à IE7 qui elles n'implémentent pas les propriétés max/min width/height ?

Et bien il se trouve qu'il existe une solution pour émuler cela. A placer dans un commentaire conditionnel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<!--[if lt IE 7]>
<style type="text/css">
div#global {
width:expression(document.body.clientWidth > 1000? "1000px": "auto" );
}
</style>
<![endif]-->

Comme on le voit cela constitue un solution javascript propre à IE.
On peut encore ajouter une petite chose pour le cas IE less than IE7 et javascript inactif en modifiant le code précédent comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<!--[if lt IE 7]>
<style type="text/css">
div#global {
width:750px;
width:expression(document.body.clientWidth > 1000? "1000px": "auto" );
}
</style>
<![endif]-->

Auquel cas si js est inactif on aura un banal design fixe de 750px en raison du premier width, et le second width ne sera pas interprété.

Et si js est actif la seconde déclaration du width écrasera la première.

[devshot]

Effectivement, aujourd'hui il reste encore pas mal d'utilisateurs en 800x600. Mais comme il est déjà dit, il n'est pas utile de s'interresser réellement à la dimension d'un écran pour developper son site.

A mon avis, il est nécéssaire de s'affranchir des résolutions d'écrans, mais surtout de se pencher sur les dimensions du document ! Et non de l'écran. Et la encore, en fonction du navigateur (et de la configuration de son aspect, ses plugins, ... etc), on n'obtient pas ces informations de la même manière...

Dans le cas ou l'on souhaite travailler avec des éléments html de taille fixe et d'autres de taille variable, le soucis sera de gérer les dites proportions variables en fonction de leur emplacement dans la page. Pour la largeur, aucun soucis, mais pour la hauteur... Aïe !!! En fouillant un peu parmis les ressources en ligne, on fini toujours par trouver des solutions plus ou moins valables. Reste à devoir tester chaque navigateur... et à voir si les standards seront respectés

[Menhir]

Je pense qu'un catégorie d'utilisateurs a été oublié de cette discution : les mal-voyants.

Il y a des personnes qui, pour pouvoir lire leur écran, utilisent des résolutions 800x600 (voir même 640x480), même avec de grands écrans (19" ou plus).

N'oubliez pas non plus qu'il y a aussi des aveugles qui utilisent le web (mais si) et peuvent lire les contenus à l'aide d'interface vocale (là, ça ne pose pas de problème) ou bien de règle braille, outil limité à 60 caractères.

Essayez aussi de penser à toutes ces personnes lorsque vous développez vos sites en haute résolution avev pleins de graphiques sans "alt". Evirez de participer à leur exclusion du net.

Merci pour eux.

[jump-jack]

j'en ajoute une couche concernant les mal voyants

google récompense les sites utilisant la balise ALT sur les visuels
bien sur, il ne controle pas la qualité, mais déjà au moins la présence

Comment et pourquoi ?

Lors du dernier anniversaire de la naissance de M. Braille (son centenaire de mémoire), Google a changé toutes les pages d'accueil de ses sites en l'honneur de Braille.

Le message est clair at appuie differents posts sur les blog et autres : la balise ALT doit être utilisées pour commenter le visuel et la page hostant le dit visuel. Ceux qui utilisent ALT auront une prime en pertinence dans l'index.

remplir adéquatement ALT dans vos pages appuiera votre positionnement dans l'index.

J'ai testé - il y a un petit plus entre avec et sans. C'est indiscutable et non négligeable.

[S-Kayp]

De mon côté, j'ai décidé d'adapter mon design pour du 1024.

Il existe encore des PC en 800 par 600 mais ils se font rares. A moins que ce soit quelqu'un qui n'ai pas une très bonne vue et donc qui met du 800 x 600 pour avoir un affichage en "gros", le reste correspondrait à des vieux PC dont la carte graphique ne peut pas avoir une résolution au delà de 800 x 600.
Maintenant, tous les PC depuis au moins 13 ans ont au moins une résolution de 1024 x 768 (ou du moins peuvent l'avoir).

Je sais que beaucoup de site internet s'adaptent encore à du 800, qui, en plus, apparait en entier lorsque le navigateur est affiché en mode "réduit". Mais, dans une page, on perd énormément de place. Surtout que mon design a 1 menu à gauche et 1 menu à droite.

La question est surtout de savoir "combien mettre en largeur pour le design ?" ; or il n'y a pas de dimension standard. Il faut décompter l'assenceur verticale du navigateur internet ainsi que la bordure du navigateur (à gauche) - 21 pixels en tout pour Internet Explorer normalement - qui n'est pas la même selon le navigateur utilisé.

Donc avoir un design qui occupe toute la page pour une résolution de 1024 x 768 n'est pas possible. Si maintenant on permet l'extention du design selon la résolution de l'internaute, pour ceux qui ont une grande résolution, ca ne fait pas très jolie car il y aurait trop d'espace entre les différentes parties du design.

Moi, j'ai donc choisi une largeur de 994 soit 30 pixels de moins pour une résolution de 1024. 30 pixels sont suffisant pour prendre en compte l'assenceur verticale du navigateur internet ainsi que la bordure du navigateur (à gauche). Ainsi, ca me permet d'avoir une bonne largeur pour ma partie centrale (entre mes 2 menus).

[persanbleue]

aujourd'hui les grand standards tournent autour du 1024*768 mais cette notion même de format de page a à mon sens peu de sens dans le cadre d'une interface web de qualité. La programmation des pages web se doit de s'adapter à des formats d'écrans de taille variable. Les interfaces modernes, sont donc censés être resizables en construisant le gabarit du site en % et non avec des variables fixes. La partie fixe du site pour ma part, je l'intégrerais dans une architecture 1024*768