11548 sujets

JavaScript, DOM et API Web HTML5

Une mise en page css qui s'adapte vraiment à la résolution du client

Pages :
Bonjour à tous,


Voilà quelques jours que j’écume les forums du net à la recherche de d’un moyen d’adapter une mise en page css à la résolution du client, et ce avec un but précis : faire qu’une page soit vue exactement de la même façon quelque soit la résolution de l'écran de celui qui la regarde.

Aujourd’hui j’ai en grande partie résolu ce problème, mais je voudrais faire part de mon étonnement face aux réactions de nombreuses personnes sur les forums, qui s’empressent de donner les liens de quelques tutoriaux (en disant : « c’est la seule façon… ») qui expliquent comment réaliser des mises en page fluides ou encore élastiques, qui ne sont en fin de compte que des solutions à défaut de mieux, du bricolage et qui, dans certaines conditions se comportent de façon très peu satisfaisante… par exemple, si on réduit la taille de la fenêtre du navigateur sur une page fluide c’est la catastrophe, et en plus on ne peut même pas bloquer une taille minimale puisque les propriétés min-width et min-height n’ont pas encore été implémentées dans la plupart des navigateurs.

Bref je ne comprend pas ces réactions, peut être est-ce la honte de développeurs expérimentés de dire « je ne sais pas comment faire », ou bien certains n’ont il pas bien assimilé le concept de résolution… je ne sais pas mais ce que j’espère, c’est que mon post ne sera pas mal accueillie sur ce forum, je désire simplement trouver une solution efficace à ce problème qui m’intéresse et s’emble-t-il intéresse de nombreuses autres personnes.

Ultime précision avant de rentrer dans les explications, cette méthode utilise du javascript ; bien sûr javascript peut être désactivé mais il est actif sur la très grande majorité des navigateurs modernes, à défaut il faudra utiliser une mise en page classique.


Donc voilà comment je m’y prends pour réaliser une mise en page CSS avec des tailles bloquées qui s’adapte quelque soit la résolution du client :

On commence par récupérer la résolution du client avec les fonctions javascript :

screen.width
screen.height

(Il existe une autre fonction qui permet de récupérer la résolution moins la taille des barres de menu et d’état : screen.availWidth screen.availHeigth).

Pour obtenir la taille réelle de la fenêtre du navigateur lorsqu’elle est maximisée avec le panneau historique fermé :
Pour IE :
-21 px de width
-182 px heigh
Soit pour 1024*768 = 1003*586


Pour modifier le style css d’un élément en javascript :

document.getElementById('id de l’élément').style.width = …

Donc nous savons comment récupérer la résolution de l’espace affichable et commet modifier le style en javascript, il nous reste à déterminer comment convertir la taille des éléments en fonction de la résolution :


Personnellement je fais comme suit :

Je fais ma mise en page fixe en px (pour certains sous éléments en % la mise en page restera fixe) sous ma résolution et lorsque le résultat me convient je fais une règle de trois et je l’applique à tout les éléments avec une fonction javascript qui est chargée avec Onload dans la balise body

Exemple :

document.getElementById('main').style.width = (765 * doc_width ) / 1003 +'px'

doc_widht est une variable dans laquelle j’ai mis la largeur affichable.


Le résultat est parfait, j’ai testé sous toutes les résolutions, et même sur un téléphone portable
Le principal problème réside dans la taille des polices, pour le moment je les définis en « em » et je leur applique la même règle de calcule mais elles ne s’affiche pas exactement de la même façon alors si quelqu’un à une idée pour ce point, je suis preneur, en attendant je continu à chercher.

Voilà si quelqu’un a des questions ou des critiques qu’ils n’hésite pas
Modifié par wyst (29 Jul 2006 - 08:07)
Bonjour,

wyst a écrit :
avec un but précis : faire qu'une page soit vue exactement de la même façon quelque soit la résolution de l'écran de celui qui la regarde.


Une page Web n'est pas une page imprimée traditionnelle. Le Web (sous sa forme (X)HTML) est au contraire un ensemble de media où le document s'adapte aux capacités, aux particularités, aux besoins et aux contraintes de l'utilisateur. C'est une nécessité pour permettre aux contenus d'être réutilisables sur les différents médias et pleinement accessibles.

La généralisation des mises en pages CSS permet justement de rendre à l'utilisateur le contrôle nécessaire sur le rendu, et de laisser le côté client réaliser les adaptations éventuellement nécessaires (les dispositifs de fit-to-width généralisés sur les navigateurs mobiles, utilisés par Opera en media screen et print, et bientôt par IE pour print uniquement, par exemple).

Bref, une page HTML-CSS ne sera jamais vue de la même manière par tous les utilisateurs, et vouloir aller ce sens en essayant de "contrôler" au lieu de favoriser l'adaptation est une tentation compréhensible. De plus en plus de gens se mettant aux CSS (ce qui est une très bonne chose), on peut s'attendre à ce que cette tentation revienne d'autant plus en force. Malheureusement, elle est illusoire et produit des résultats "obstructifs" pour les utilisateurs.

wyst a écrit :
comment réaliser des mises en page fluides ou encore élastiques, qui ne sont en fin de compte que des solutions à défaut de mieux, du bricolage et qui, dans certaines conditions se comportent de façon très peu satisfaisante…


Tous les exemples donnés ici et là ne sont pas forcément satisfaisants, en effet, et certains pourraient être améliorés.

D'autre part, la 'fluidité", même lorsque la CSS a été conçue de manière optimale, a d'évidentes limites en effet. Il y a effectivement des raisons liées aux implémentations, mais aussi des limites inhérentes aux capacités de CSS2.1. CSS3 donnera davantage d'outils pour repousser ces limites, mais d'autres dispositifs seront nécesaires et sont en cours de développement, pour permettre une véritable négociation entre client et serveur où le premier pourra déclarer ses différentes capacités et particularités.

A l'heure actuelle, une mise en page fluide a pour objectif de donner un rendu accessible (pas identique) dans la plus grande étendue possible de conditions de résolution, de tailles de caractères, etc.

Enfin, pour ce qui des méthodes javascript telle que tu souhaites l'utiliser: outre les erreurs de conception fréquentes dans ces scripts, ils conduisent à réaliser justement des mises en page fixes... au résultat médiocre, voire non accessible, dès que le script ne produit pas le résultat attendu car les conditions utilisateurs diffèrent de ce qui était prévisible.

C'est un investissement peu rentable, voire à perte.

En conclusion, je t'encourage plutôt à proposer dans ce forum une page sur laquelle tu rencontres des difficultés pour obtenir un résultat fluide, afin de voir ce qui peut être fait pour l'améliorer.
Modifié par Laurent Denis (29 Jul 2006 - 20:15)
bonjour,

Merci pour tes explications, critiques et conseils, qui sont tous très pertinents.
En effet la solution que je développe est très restrictive et pleine de défauts, mais en fait, je dois concevoir un site de vente et le propriétaire souhaiterait justement que l’apparence su site soit la plus contrôlée possible car cela signifie le contrôle du message commercial qui est envoyé au client.
Ensuite il est vrai que mon script contient beaucoup d’erreurs, je suis donc ouvert à toutes les remarques et a l’aide de ceux qui voudraient m’aider à développer cette solution alternative à celles qui existent déjà et qui tout comme elle ont leur avantages et leurs faiblesses.

Encore merci.
Une remarque amusée, en passant : il y a quelques années, lorsque la notion de "standard" XHTML CSS a commencé à être connue, il fallait constamment expliquer l'inutilité et l'inefficacité des scripts de détection de navigateurs (clients ou serveurs) tels qu'on les pratiquait alors massivement. Il va sans doute en être de même à présent avec ces scripts de détection de la résolution Smiley cligne
wyst a écrit :
le propriétaire souhaiterait justement que l’apparence su site soit la plus contrôlée possible car cela signifie le contrôle du message commercial qui est envoyé au client.


C'est en effet un éccueil fréquent, mais la solution n'est pas technique. Elle réside en fait dans le conseil à donner au client afin de lui permettre de mieux comprendre la spécificité de la communication sur le Web. Le couple accessibilité/qualité est souvent un excellent levier à cet égard, car un audit d'accessibilité et un audit qualité offrent une grille de lecture globale qui remet souvent en cause, incidemment, beaucoup d'idées reçues dans des domaines variés. En fait, c'est même une quasi-constante dans les différents audits que je suis, pour ma part, amené à réaliser en ce moment.

wyst a écrit :

Ensuite il est vrai que mon script contient beaucoup d’erreurs, je suis donc ouvert à toutes les remarques et a l’aide de ceux qui voudraient m’aider à développer cette solution alternative à celles qui existent déjà et qui tout comme elle ont leur avantages et leurs faiblesses.


Là encore, un exemple concret permettra aux personnes intéressées de te conseiller sur les techniques et les limites de ton script.
Modifié par Laurent Denis (29 Jul 2006 - 08:48)
Je comprends que l’on puisse être hostile à ce type au javascript, mais le problème reste entier : comment concevoir une mise en page avec des tailles fixes, et qui s’adapte à la résolution du client ? si quelqu’un connaît une autres solution qu’il se manifeste.
En réponse à ton précédant post :

Oui je suis globalement d’accord avec ton analyse, mais le problème est selon moi, est que la très grande majorité des acheteurs sur le net ne sont pas des informaticiens et ont des idées préconçues qu’ils tiennent du fait qu’ils soient plus habitués au support papier, dans ces conditions, la façon de présenter et de transmettre l’information sur Internet, qui pourrait paraître optimale en théorie, ou à un informaticien, ne concorde pas le plus souvent avec les attentes de ces personnes et avec leur conception de l’ergonomie.
wyst a écrit :
Je comprends que l’on puisse être hostile à ce type au javascript


Je n'y suis pas hostile Smiley cligne

En revanche, à l'usage, ces scripts:
- ne font rien que ne fait pas une mise en page privilégiant le dimensionnement en unités relatives et le placement des blocs en flux et en flottants (par opposition aux mises en pages dimensionnées principalement en pixels et/ou positionnées en absolues, car les deux vont souvent de pair).
- le font souvent beaucoup moins bien en raison de modes de détermination ou de calcul impropres des dimensions
- le font également moins bien en raison de l'imprévisibilité des conditions de rendu
- le font de manière non accessible en raison de la dépendance à javascript
- alourdissent au bout du compte inutilement le traitement de la page.

wyst a écrit :

comment concevoir une mise en page avec des tailles fixes, et qui s’adapte à la résolution du client ?


L'impossibilité est contenue dans la question elle-même.


L'adaptation d'une mise en page "fixe" n'est pas anticipable de manière utile via des scripts. C'est pour cela que le développement actuel des navigateurs tend à les doter nativement des moyens nécessaires à cette adaptation (le fit-to-width que je citais, ERA, etc.).

Et puisque tu mentionnais le rendu sur les navigateurs mobiles dans ton premier post: c'est également en raison de cette impossibilité qu'a été développé le module CSS3 media Queries, qui permet d'adresser aux navigateurs (mobiles, pda et web-tv en particulier, mais aussi desktop) de choisir en fonction de la résolution une feuille de style différente parmi celles qui lui sont proposées, chacune correspondant à une "plage" de largeurs et de hauteur de la fenêtre d'affichage. Ceci permet notamment de "traiter" les mises en pages fixes qui abondent malheureusement sur le Web.

Bref, il est acquis que la voie "script" est une impasse.
Modifié par Laurent Denis (29 Jul 2006 - 09:20)
wyst a écrit :
le problème est selon moi, est que la très grande majorité des acheteurs sur le net ne sont pas des informaticiens


C'est bien pourquoi ce n'est pas au "technicien", ni même à l'ergonome au sens strict d'aborder ce problème avec les acheteurs : cela relève d'une démarche (et d'une expérience) toutes autres (celle du qualiticien, en fait).
wyst a écrit :
voici une exemple très simplifier : 6 lignes de code javascript...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<style type="text/css" media="screen">

#pseudo_body {

height: 596px;
width: 1003px;
margin:0;

}

#contain {

background:white;
height:50em;
width:40em;
margin-left:auto;
margin-right:auto;
text-align:center;
}

#main {
position: relative;
background:red;
height:30em;
width:25em;
float:right;

}
#header {
position:relative;
background:yellow;
height:10em;
width:40em;

}
#left_menu {

background:blue;
height:30em;
width:15em;
float:left;

}

#footer {
position:relative;
background:green;
height:10em;
width:40em;
float:left;
}


</style>
<script language="JavaScript" type="text/javascript">


var doc_width = 0;
var doc_height = 0;

function reSize(){

//on récupére la résolution de l'espace affichable pour IE dans cet exemple

var doc_width = screen.width-21;
var doc_height = screen.height-182;


// taille de la page

document.getElementById('pseudo_body').style.width = doc_width +'px';
document.getElementById('pseudo_body').style.Height = doc_height +'px';

}

</script>
<title>Test</title>
</head>
<body id="pseudo_body" onLoad="reSize();">

<div id="contain">
<div id="header"><h1> Title 1 </h1></div>
<div id="main"><h1> Title 2</h1></div>
<div id="left_menu"><h1> Title 3</h1></div>
<div id="footer"><h1> Title 4</h1></div>
</div>
</body>
</html>


toute remarque est la bienvenue.
merci
petit bug : dans document.getElementById('pseudo_body').style.Height = doc_height +'px'; le 'h' de height doit etre en miniscule pour que cela fonctionne sous FF notamment, ultraédit me le met automatiquement en majuscule, je ne sais pourquoi....
Tu as sans doute commis une erreur en simplifiant ton script pour l'exemple: le résultat n'a rien à voir avec une quelconque adaptation à la résolution.

(Remarque: les positions relatives sont inutiles ici et n'auront aucun effet. Et le dimensionnement en em n'a rien à faire dans une mise en page supposée "fixe" Smiley cligne )
Modifié par Laurent Denis (29 Jul 2006 - 10:08)
pourtant je viens de testé à l'instant lorsque l'on change la résolution de l'ecran la taille du pseudo_body change et tout ce qui se trouve à l'interieur étant en valeurs relative s'adapte, il faut biensur rafrechir la page pour que la fonction Resize() soit rechargée. en plus la mise en page s'adapte même au changement de la taille des polices par le navigateur, les mesures étants définnies en em.
Ah, je n'avais pas regardé le script Smiley cligne

screen.width retourne la largeur de l'écran, pas celle de la fenêtre d'affichage du navigateur.

Ce n'est pas du tout comme cela qu'on procède pour réaliser ces scripts.

Je déplace dans le salon "DOM, JavaScript, ECMAScript" où tu pourras poser les questions nécessaires pour aller plus loin.
Modifié par Laurent Denis (29 Jul 2006 - 11:02)
je ne comprend pas pourquoi, mais mon sujet semble avoir été effacé,

quoi qu'il en soit j'avais effectivement posté la movaise source, que je m'en suis rendu compte, mon internet était coupé ce qui explique pourquoi je ne pouvais par reposter la bonne. 





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<style type="text/css" media="screen">
	
	#pseudo_body {
	
		height: 596px;
		width: 1003px;
		margin:0;
	
	}
	
	#contain {
	
		background:white;
		height:50em;
		width:40em;
		margin-left:auto;
		margin-right:auto;
		text-align:center;
	}	
	
	#main {
		position: relative;
		background:red;
		height:30em;
		width:25em;
		float:right;
		
	}
		#header {
		position:relative;
		background:yellow;
		height:10em;
		width:40em;
		
	}
		#left_menu {

		background:blue;
		height:30em;
		width:15em;
		float:left;

	}
		
	#footer {
		position:relative;
		background:green;
		height:10em;
		width:40em;
		float:left;
	}
	

</style>
<script language="JavaScript" type="text/javascript">
	

	var doc_width = 0;
	var doc_height = 0;

function reSize(){
	
		//on récupére la résolution de l'espace affichable pour IE dans cet exemple
	
		var doc_width = screen.width-21;
		var doc_height = screen.height-182;
	
	
        	 // taille de la page 
  	
    		document.getElementById('pseudo_body').style.width = doc_width +'px';
		document.getElementById('pseudo_body').style.height = doc_height +'px';
		
				// taille du contain
 	
		document.getElementById('contain').style.width =  (40 * doc_width ) / 1003  +'em';
		document.getElementById('contain').style.height =  (50 * doc_height ) / 586  +'em';
			
				// taille du main
 	
		document.getElementById('main').style.width =  (25 * doc_width ) / 1003  +'em';
		document.getElementById('main').style.height =  (30 * doc_height ) / 586  +'em';
				
				// taille du header
 	
		document.getElementById('header').style.width =  (40 * doc_width ) / 1003  +'em';
		document.getElementById('header').style.height =  (10 * doc_height ) / 586  +'em';

			// taille du left_menu
			
		document.getElementById('left_menu').style.width =  (15 * doc_width ) / 1003  +'em';
		document.getElementById('left_menu').style.height =  (30 * doc_height ) / 586  +'em';

			// taille du footer
 	
		document.getElementById('footer').style.width =  (40 * doc_width ) / 1003  +'em';
		document.getElementById('footer').style.height =  (10 * doc_height ) / 586  +'em';
}

</script>
<title>Test</title>
</head>
<body id="pseudo_body" onLoad="reSize();">
</body>
<div id="contain">
<div id="header" onLoad="printf(document.getElementById('header').style.width);"><h1> Title 1 </h1><br /></div>
<div id="main"><h1> Title 2</h1></div>
<div id="left_menu"><h1> Title 3</h1></div>
<div id="footer"><h1> Title 4</h1></div>
</div>
</html>
Laurent Denis a écrit :
Ah, je n'avais pas regardé le script Smiley cligne

screen.width retourne la largeur de l'écran, pas celle de la fenêtre d'affichage du navigateur.

Ce n'est pas du tout comme cela qu'on procède pour réaliser ces scripts.




pourtant je sais bien ce que je fais, je veux pas mettre ma mise en page a la taille de la fenetre, mais l'afficher pour la fenetre du navigateur maximisée.
ah oui tu na pas vue que j'enlevais l'espace occupé par les menus et autres :

pour IE : var doc_width = screen.width-21;
var doc_height = screen.height-182;
je cherche à savoir si il est possible de trouver la taille maximale de la fenetre du navigateur, et ce meme lorsque celui-ci n'est pas maximisé?
Bonjour,

Ton sujet n'a pas été effacé, mais déplacé dans un salon plus approprié.

Quel est l'intérêt de redimensionner les éléments d'après la taille de l'écran ? Cela n'a aucun sens :
- Le scroll horizontal est inévitable dans tous les très nombreux cas où la zone d'affichage du navigateur ne s'étend pas à l'écran (moins les pixels que tu enlèves) : barre latérale, fenêtre non maximisée, etc.
- le débordement vertical du texte est tout aussi inévitable puisque tu le fais tenir arbitrairement dans des blocs d'une hauteur figée sans rapport avec la quantité de contenu.

As-tu essayé de mettre du vrai contenu dans ta page ? D'afficher dans différentes configuration du navigateur (barres d'outils, panneaux latéraux, etc) ?

Encore une fois, cela n'a rien à voir avec les essais de redimensionnement via javascript. Le point de départ serait déja d'utiliser les dimensions de la zone d'affichage en largeur, et de laisser les hauteurs vivre leur vie Smiley rolleyes
oui j'ai fait une vraie page avec cette méthode, mais je dois préciser que je sais ce que je fais en prenant la resolution du screen, je le fais volontairement, le but n'est pas que le site s'adapte a la taille disponible mais a la résolution de l'écran en subissant une sorte de transformation d'echelle,
sinon la mise en page qui déborde verticalement est un choix délibéré, le tout est quelle ne doit pas déborder horizontalement lorsque la fenetre est maximisée c'est tout, encore une fois ce que je met en avant dans mon exemple est la methode, les choix de mise en page me sont personnels.
Modifié par wyst (29 Jul 2006 - 17:59)
Pages :
Sujet clos
Aller à