Aujourd'hui je me livre à une petite réflexion sur les techniques de mise en page pour un site web.
Je me rend compte de la vraie difficultés que cela représente. Je prend mon cas personnel.
Le site dont je m'occupe, dans sa première version, est mis en page par tableaux, les décalages sont réalisés par une image transparente de 1x1 pixel, bref, que des techniques obsolètes.
Ce n'est pas bien, mais lorsque je l'ai fais, je n'étais pas sensibilisé aux problèmes d'accessibilité. Je testais le site sur IE (je n'étais pas non plus un linuxien, quelle époque !!!). L'avantage des tableaux, c'est qu'il n'y a pas de surprise quand au résultat : identique sur tous les navigateurs graphique.
Dans sa seconde version (en cours de finalisation), j'ai voulu faire un peu plus attention, j'ai choisi xHTML + CSS. J'ai donc commencé par faire les pages sans utiliser de feuilles de styles. Ensuite, j'ai commencé à coder les CSS.
C'est là que les embûches sont apparus. Faut il fixer la mise en page (largeur du body etc...) ou faire quelque chose de fluide ?
J'ai tout d'abord opté pour la seconde solution. J'ai spécifié toutes les dimensions en pourcents. Pas évident car la taille des polices ne varie pas avec la largeur de la fenêtre, ce qui donne des résultats assez surprenant parfois.
Je me dis que la solution est toute simple, à la place des pourcentages, je vais utiliser l'unité em. Avec ça, la taille des éléments suivra la taille de la police. Nouveau problème, comment bien jauger la largeur du body : 100% = ?? em. Pas vraiment pratique.
Finalement, j'en suis revenu à fixer la largeur des éléments. Le body fait 770px de large, comme ça, pas de surprise sur les résolutions 800x600px (le 640x480 est marginal selon les statistiques).
Ce n'est pas la meilleure solution, mais je n'en vois pas d'autre. Chez moi (1280x1024) un tiers de l'écran est vide, c'est un peu dommage...
Et vous, qu'en pensez vous, comment faites vous ?
Journal La difficultés à faire des pages Internet vraiment accessible
30
juil.
2005
# min/max-truc
Posté par nicodache . Évalué à 6.
genre
body {
width: 70%;
max-width: 1200px;
min-width: 600px;
}
ca devrait donner une largeur de page qui varie entre 600 et 1200px de large, avec une préférence pour occuper 70% de la largeur de la page.
ca règle un peu tes problèmes ?
si tu veux, sur yoyodesign*, t'as la traduc en francais des spécifications officielles du w3c concernant les CSS2 :)
* http://www.yoyodesign.org/doc/w3c/css2/cover.html(...)
[^] # Re: min/max-truc
Posté par Jérémie . Évalué à 2.
Par exemple celui-ci, http://www.svendtofte.com/code/max_width_in_ie/(...) ... je ne l'ai pas testé, mais il y a des retours sur C² : http://cybercodeur.net/weblog/commentaires/detailsCarnet.php?idmess(...)
++
Jérémie
[^] # Re: min/max-truc
Posté par spongurex . Évalué à 0.
Un texte qui prend toute la largeur l'écran est horrible à lire. C'est aussi cela qui fait que prendre tout l'écran n'est pas génial.
[1] Pourquoi sur mon clavier, je peux pas faire le symbole carré. Quand j'utilise la touche (au dessus de TAB), ça donne ½. Je suis sous Ubuntu Hoary.
[^] # Re: min/max-truc
Posté par Mildred (site web personnel) . Évalué à 2.
Change dans les prefs clavier de Gnome
Perso, j'utilise ScrollLock pour changer de keymap (entre francais et francais alternatif) justement pour avoir ce ½ qui manque ...
[^] # Re: min/max-truc
Posté par ondex . Évalué à 2.
[^] # Re: min/max-truc
Posté par ccomb (site web personnel) . Évalué à 2.
Un site à largeur variable sur lequel j'ai pas mal galéré. Et il reste encore un petit bug sous Safari. Quand à Opera et IE5 j'ai définitivement abandonné... :
http://chevallier-leguillou.fr/accueil.php3(...)
En tout cas ça montre qu'on peut faire des trucs intéressants même sans Flash™.
[^] # Re: min/max-truc
Posté par lolop (site web personnel) . Évalué à 2.
Ton texte ne prend pas tout l'écran, il prend éventuellement toute la fenêtre.
Si ta page se redimensionne suivant la largeur de la fenêtre, c'est l'utilisateur qui choisira ce qu'il veut... et qui réduira éventuellement cette largeur s'il trouve que c'est illisible...
Python 3 - Apprendre à programmer dans l'écosystème Python → https://www.dunod.com/EAN/9782100809141
# Mises en page fluide et élastique
Posté par Jérémie . Évalué à 5.
Pour se faire une idée des différentes techniques possibles pour fluidifier son "design", rien de mieux que de se balader sur le web et de regarder les sources des pages qu'on trouve jolies. :)
Pour la mise en page fluide, un billet tout chaud sur egologie.net donne quelques pistes : http://egologie.net/index.php/2005/07/28/18-mise-en-page-fluide(...) (le site lui même utilise une mise en page liquide/fluide). Une autre technique chez pompage : http://pompage.net/pompe/margesnegatives/(...) .
Pour la mise en page élastique (la page s'élargit avec l'augmentation de la taille de la police), un joli exemple détaillé ici : http://www.htmldog.com/articles/elasticdesign/demo/(...) .
Petite pub, mais c'est un site vraiment très bien pour se former aux standards du web, avec pleins de tutoriels et un forum sympa et actif : http://css.alsacreations.com/(...) et http://forum.alsacreations.com/(...)
Bonne chance :)
Jérémie.
# Une idée toute bête
Posté par ondex . Évalué à 1.
Il suffit de fixer (ouh, pas beau !) la taille de la police et ensuite on peut facilement faire quelque chose de variable.
body {
font-size: 12px;
width: 64em; /* 64 * 12px = 768px */
}
Dans ce cas, si on redimensionne la taille de la police, tout les éléments suivent, et pourtant on peut caler son site au pixel près.
Mais ce n'est pas parfais car il faut fixer la taille de la police, et sous IE, impossible de la redimensionner (la police), ce qui pose problème aux personnes malvoyantes.
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.