Adaptabilité du site sur un maximum de résolution (encore ^^ )

Bonjour à toutes et à tous,

D'après ce que je lis ici et là il serait préférable d'utiliser des valeurs en % plutôt que px pour définir les dimensions des divs et autres balises amusantes.
Un de mes sites s'affichent vraiment mal sur les écrans de grande taille, et il s'en vend beaucoup aujourd'hui.
Ma question est, est ce que l'utilisation de % à la place de px apporte vraiment un mieux au niveau de l'affichage?
Comment "se repérer " pour transformer mes valeurs afin que mon site est toujours la même apparence ?

Je ne sais pas si ma question est clair ou pertinente ?
Merci d'avance

Bonjour,

Sujet difficile.

Il faut penser au fait que les résolutions pour ordinateur de bureau ou ordinateur portable (en incluant les netbooks) vont de 800px de large à au moins le double (1600), et plus encore (dans les 2000px). Il faut aussi prendre en compte le fait que, sur les plus grandes résolutions, l'utilisateur peut donner à la fenêtre du navigateur une taille plus réduite que celle de la fenêtre (une fenêtre de navigateur en 1600px de large, c'est rarement utile).

Bref, en laissant de côté les mobiles, pour l'affichage sur ordinateur portable ou de bureau il faut viser une adaptabilité entre du 800 et du 1600. Dans certains cas, on optera dès le départ pour une mise en page qui nécessite au moins 1000px de largeur d'affichage (notamment pour les sites ayant un contenu très dense).

Aujourd'hui, un site en largeur fixe 750px (pour tenir dans du 800x...) aura sans doute l'air étriqué sur des écrans 19, 20, ou même 24 pouces. (À moins que son design ne soit très simple et justifie ce choix.)

Le problème des pourcentages, c'est que si tu définis ton conteneur principal comme faisant 80% de la largeur de la zone de visualisation du navigateur (viewport), la largeur réelle d'un écran à l'autre va osciller entre 640px et 1280px par exemple. Ça risque d'être trop étroit dans un cas, et dans l'autre tu peux obtenir des blocs de texte avec des lignes interminables, ce qui est très mauvais pour le confort de lecture.

Les largeurs en pourcentages sont intéressantes, mais il ne faut pas les utiliser aveuglément. Parmi les solutions possibles:
- utiliser une largeur maximale en EM (par exemple 70em pour un design sur deux colonnes) sur le conteneur principal;
- prévoir deux dispositions différentes du contenu (deux colonnes et trois colonnes par exemple) suivant que la largeur disponible est en-dessous ou au-dessus d'un certain seuil (cela pourra être géré en JavaScript et/ou via les Media Queries).

Merci beaucoup pour ta réponse. Je vais essayer de faire au mieux.
Entre les différents navigateurs et les différentes config il est vrai que cela n'est pas facile de rendre l'affichage homogène pour tous.
Merci encore !

On peut aussi fixer des limites de tailles (avec correctif IE en conditionnels)

#monsite  {
	margin: 0 auto;
	width: 92%;
	min-width: 770px;
	max-width: 1100px;
	}

Cette série d'instructions demande au navigateur de placer le contenu centré et à 92% de la largeur disponible. Elle précise que si jamais ces 92% sont supérieurs à 1100 pixels c'est pas la peine d'agrandir plus (on limite ainsi les aberrations d'affichage) et si ils sont inférieurs à 770 pixels il ne faut pas descendre en dessous, ce qui empêchera un utilisateur de 800x600 ayant réduit sa fenêtre de se retrouver avec un timbre-poste.

a écrit :
il est vrai que cela n'est pas facile de rendre l'affichage homogène pour tous.

C'est pas le but. Le but c'est de rendre l'affichage agréable et utilisable au mieux par tous. Qu'il soit identique ou pas selon les plateformes/outils n'a aucune importance. Si des arbitrages sont à faire entre cohérence/homogénéité/disposition et utilisabilité/ergonomie/fonctionnel, toujours les opérer pour ces derniers.
Modifié par Arsene (06 Apr 2009 - 13:05)