Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

format d'ecran choisir ?

0 views
Skip to first unread message

Desilu

unread,
Apr 5, 2009, 9:16:49 AM4/5/09
to
Lorsqu'on cree un site avec un logiciel basique tel seamonkey, comment savoir quelle sera la
meilleure mise en page et comment va t elle apparaitre sur divers formats d'ecrans ? Existe t il la
possibilité d'avoir un affichage proportionnel à la taille de l'ecran de lecteur ?

docanski

unread,
Apr 5, 2009, 11:02:52 AM4/5/09
to
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
Desilu ecrit ce qui suit en ce 05/04/2009 15:16 :

Cela se contrôle d'abord en respectant les normes du W3C : il existe un
validateur en ligne.
Pour le reste, celui-ci se limitant pratiquement à Internet Exploseur,
il suffit d'afficher le résultat au moyen des différents navigateurs et
d'agir en conséquence.
Pour l'affichage proportionnel, l'unité de mesure en % est la plus logique.
Mais ce n'est pas toujours compatible avec la mise en page ...

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/

Patrick 'Zener' Brunet

unread,
Apr 5, 2009, 1:59:57 PM4/5/09
to
Bonsoir.

"Desilu" <robt....@free.fr> a écrit dans le message
de news 49d8af40$0$15322$426a...@news.free.fr

Amha il n'y a pas de "bonne" taille d'écran. Ca dépend des visiteurs et
aussi du moniteur dont-ils disposent:

* Les graphistes et autres amateurs de belles images auront volontiers des
résolutions (restons sur les largeurs) en 2048px ou plus, avec des textes
microscopiques.

* Les gens +/- normaux à notre époque seront dans la gamme des 1024px, s'ils
disposent d'un moniteur 19 pouces.

* Moi je suis développeur et donc je fais plutôt du code dans la journée.
Comme je tiens à mes yeux, mon écran perso (19") est en 1024px, et au boulot
où on a des 17" je mets du 800px.

* Il faut penser aussi aux malvoyants qui utiliseront des polices fortement
grossies (48pt minimum).

Et en plus, de nos jours, il y a des écrans aux proportions de 4/3 et 16/9,
donc il faut tenir compte aussi de la hauteur pour que ça reste utilisable.
Il faut aussi penser aux diverses "barres" qui peuvent modifier l'espace
disponible, et bien sûr aussi que la fenêtre n'est pas forcément maximisée
(si on veut travailler en parallèle sur une autre par exemple).

Imposer une largeur d'écran permet de se faciliter la vie en tant que
graphiste: on fait une belle image de fond et on colle les textes
par-dessus.
A priori personne ne modifie sa résolution préférée pour aller visiter un
site Web particulier, alors quand un site impose une largeur fixe, soit on
scrolle horizontalement pour le lire, soit on a le truc ridicule genre
bandeau vertical avec 25% de marge de part et d'autre. A priori ça devient
vite dissuasif.

Le design dit "élastique" me paraît donc une solution incontournable.

Moi je code plutôt à la main, mais j'imagine que votre singe de mer permet
de choisir les unités.

Il y a 3 catégories d'unités, qui correspondent à 3 types d'éléments avec
leurs contraintes.
Si on les utilise bien, ça permet de faire du design élastique subtil:

* Les pixels (px) sont à utiliser pour tout ce qui est
positionné/dimensionné par rapport à des images, ainsi que pour certaines
marges/dimensions très fines.

* Les pourcents (%) sont à utiliser pour la division globale de l'espace,
lorsque les proportions sont importantes et qu'un certain flottement par
rapport aux textes est possible (par exemple: une division globale en 2
colonnes se fera en %, alors qu'un menu latéral à faibles marges se
dimensionnera plutôt en ex ou em).

* Les unités proportionnelles au texte (ex et em) sont à utiliser pour tout
ce qui est associé aux textes: cadres, marges, etc.

Si toutes les polices sont dimensionnées en %, l'ensemble du site est alors
élastique et, si on a prévu un peu de mou, placé les &nbsp; et directives
word-wrap à bon escient, etc. alors dans une bonne plage de variation, les
textes coulent proprement dans leurs espaces et les images imbriquées
suivent. La mise en page est *globalement* respectée.

C'est ce que j'essaie de faire sur mes sites. Après, pour le résultat, il
faut tester... La résolution est tout de même le paramètre le plus facile à
simuler.

Ensuite il y a le problème des images: on ne peut pas vraiment servir les
mêmes sur un écran en 800px et en 2048px ou plus. C'est encore plus critique
si l'image occupe une zone bien délimitée, avec des contraintes par rapport
au texte (logo dans un bandeau par exemple).
Moi j'essaie de détecter et remonter la largeur d'écran, et le serveur peut
sélectionner l'image parmi une gamme de tailles stratégiquement choisies...
Mais c'est un peu lourdingue de décliner ainsi les images. J'aimerais bien
trouver un outil graphique capable d'automatiser ça (ainsi que la conversion
en divers contrastes pour les malvoyants).

Le truc le plus nul amha, c'est l'usine à gaz qu'il faut monter pour avoir
du proportionnel (%) sur l'axe vertical sans imposer les dimensions du
conteneur (donc en laissant le texte libre de couler). Surtout avec IE, vous
l'aviez deviné.
Gros manque aussi: le concept de ratio pour un cadre, permettant de le
dimensionner horizontalement en asservissant la hauteur. A priori il n'y a
qu'avec une image invisible ayant le bon ratio qu'on puisse y parvenir dans
certains cas... Mais là on entre dans des trucs très sophistiqués...

Conclusion:
Amha on peut assez facilement faire une mise en page qui reste potable de
800 à 4000+ pixels de large, et donc éliminer la question.

--
Cordialement.

* Patrick BRUNET www.ipzb.fr www.ipzb-pro.com
* E-mail: lien sur http://zener131.eu/ContactMe

Desilu

unread,
Apr 5, 2009, 3:52:22 PM4/5/09
to

merci

donc , si je resume, je fais bien ma mise en page pleine largeur sur mon 17" "large" et j'aurais la
barre en bas de page pour aller voir à droite sur les 15"

- j'ai effectivement fait une mise en page sur 17" avec colonne reduite à 90% parce qu'on m'avait
deconseillé d'obliger mes lecteurs sur 15" d' utiliser la barre du bas

Mais du coup en 15" ça donne des colonnes assez moches et rebarbatives.

Donc je remet pleine largeur d'ecran à 17", et en 15" il faudra scroller...

Mais et alors comment ca se passe maintenant avec les ultra portables en 12" !!!!?????

Est-ce qu'il n'y a pas un autre parametre qui rentre : la resolution d'ecran, qui fait qu'on est
"proportionnel ?

r

Patrick 'Zener' Brunet a écrit :

Olivier Miakinen

unread,
Apr 5, 2009, 5:51:16 PM4/5/09
to

Je reformate pour que ce soit plus lisible :
> Lorsqu'on crée un site avec un logiciel basique tel seamonkey,

> comment savoir quelle sera la meilleure mise en page et comment

> va-t-elle apparaitre sur divers formats d'ecrans ? Existe-t-il la

> possibilité d'avoir un affichage proportionnel à la taille de l'ecran
> de lecteur ?

Comme il t'a déjà été répondu, l'idéal est un « design élastique » qui
s'adapte automatiquement, non pas à la largeur de l'écran du visiteur,
mais à la largeur de ses fenêtres. Par exemple j'ai un écran de 1680
pixels de large, sur lequel je visualise couramment deux fenêtres de
800 pixels de large côte à côte.

Au passage, note que pour la configuration de son nouvelleur il est
conseillé de limiter la taille des lignes nouvelles à 72 caractères,
alors que tu as dû configurer ton Thunderbird à 100 caractères. Tu ne
dois pas faire la différence vu que tu utilises le format flowed, mais
ce serait sympa de changer pour les autres :
Outils > Options > Rédaction > Général > Reformater les messages
textes en lignes de [ 72 ] caractères.
Merci !

Gerald

unread,
Apr 6, 2009, 1:07:46 AM4/6/09
to
Olivier Miakinen <om+...@miakinen.net> wrote:

> Comme il t'a déjà été répondu, l'idéal est un « design élastique » qui
> s'adapte automatiquement, non pas à la largeur de l'écran du visiteur,
> mais à la largeur de ses fenêtres.

Je plussoie en ajoutant une perspective historique : le html ne date que
d'une quinzaine d'années et on a pourtant bien oublié la logique qui a
présidé à sa création ! Pouvoir visualiser du texte et des images mises
en page quelle que soit la configuration ou l'environnement informatique
dont on dispose. Il y avait là dedans une notion de *diversité* dont
l'exact opposé n'est autre que l'hégémonie crossoftienne, et dont le
cancer n'est autre que l'irruption du fric et du commerce dérégulé dans
l'espace web.

Le design élastique n'est pas un choix, c'est avant tout un problème de
respect de son interlocuteur. Toute la question restant de savoir si on
veut le respecter, ou plutôt si on se contente de ne le respecter que
"statistiquement", en jettant au panier, au choix, tous ceux qui ne
peuvent pas bénéficier des images (aveugles), tous ceux qui n'ont pas un
écran d'une taille minimum, d'un nombre de couleurs minimum, tous ceux
qui ne sont pas sous le dernier système windows avec la dernière bouse
de navigateur non standard etc.

Pour mémoire : la première page web jamais réalisée ressemblait à ça :
<http://www.slac.stanford.edu/history/earlyweb/firstpages.shtml>
pour en savoir plus sur le créateur du html (avec plein de liens utiles)
<http://www.w3.org/People/Berners-Lee/>
sur l'histoire du www
<http://www.w3.org/History.html>

Et qui se souvient de son premier navigateur web ? Mosaic ?

hth,


--
Gérald

Desilu

unread,
Apr 6, 2009, 2:13:05 AM4/6/09
to
Bonjour

on va voir si c mieux , mais je n'ai pas de reponse quant à la lecture
sur les ultra portable 12 pouces, comment un site fait en 17" apparait a
l'ecran ? Il y a bien un reformatage qui se fait d'un moyen ou un autre ?
merci pour le conseil 72 caracteres, mon caractere me pousserait a
mettre 73 ou 75 ... avant que "monsieur l'Etat c moi" n'y mette bon
ordre et me contraigne à le faire...

Desilu

unread,
Apr 6, 2009, 2:17:10 AM4/6/09
to

ne marche pas bien qu'ayant trifouillé mon thunderbird pour 72 caracteres

c bon sur mon ecran mais pas à la publication sur le ng

Desilu a écrit :

Eric Demeester

unread,
Apr 6, 2009, 5:05:58 AM4/6/09
to
dans (in) fr.comp.infosystemes.www.auteurs, Desilu <robt....@free.fr>
ecrivait (wrote) :

Bonjour,

> ne marche pas bien qu'ayant trifouillé mon thunderbird pour 72 caracteres
> c bon sur mon ecran mais pas à la publication sur le ng

Essaye de trouver l'option d'affichage et de décocher :

format=flowed

--
Eric

docanski

unread,
Apr 6, 2009, 5:55:59 AM4/6/09
to
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
Desilu ecrit ce qui suit en ce 06/04/2009 08:13 :
> Bonjour

Bonjour,

> ... mais je n'ai pas de reponse quant à la lecture

> sur les ultra portable 12 pouces,

Les 8,9 ' ont une résolution native de 800 pixels de largeur, en général.
Les 10 ' ont déjà une résolution native de 1280 pixels de largeur.
Perso, le mien est réglé sur 800 px pour une lecture plus confortable.
Et ainsi de suite.
Note, qu'il te suffisait de faire une petite recherche sur le Web pour
le savoir ...
Mébon, sachant cela, le principe est le même : créer des pages
"élastiques" dans la mesure du possible. Si ce n'est pas possible pour
des raisons de mise en page, l'idéal est d'utiliser une largeur fixe ne
dépassant pas 800 pixels.
Mais cela ne garantit toutefois pas que *ta* mise en page sera alors
respectée puisque tout navigateur qui se respecte est capable d'agrandir
le texte si l'utilisateur a du mal à le lire.
C'est un choix arbitraire ... mais qui peut se concevoir, donnant
satisfaction dans la plupart des cas.

> comment un site fait en 17" apparait a l'ecran ?
> Il y a bien un reformatage qui se fait d'un moyen ou un autre ?

Reformatage ? Il ne s'agit pas de dimensions de l'écran mais de
*dimensions des fenêtres* affichées par l'utilisateur, comme te l'a dit
Olivier. Comme lui, d'ailleurs, ayant un écran d'une résolution de 1680
px de largeur, j'affiche simultanément 2 fenêtres de 800 px environ,
parfois même 3 ou 4, selon les besoins.

> merci pour le conseil 72 caracteres, mon caractere me pousserait a
> mettre 73 ou 75 ... avant que "monsieur l'Etat c moi" n'y mette bon
> ordre et me contraigne à le faire...

"monsieur l'Etat c moi" ?

Desilu

unread,
Apr 6, 2009, 1:09:00 PM4/6/09
to
docanski a écrit :


oui le petit monsieur avec une grosse montre

Olivier Miakinen

unread,
Apr 6, 2009, 4:39:51 PM4/6/09
to
Le 06/04/2009 07:07, Gerald a écrit :
>
> [ diatribe anti-hégémonie crossoftienne à laquelle je souscris volontiers ]

>
> Pour mémoire : la première page web jamais réalisée ressemblait à ça :
> <http://www.slac.stanford.edu/history/earlyweb/firstpages.shtml>

;-)

Noter que cette page demande, pour être pleinement fonctionnelle, que le
navigateur ait un comportement hérité d'Internet Explorer et à la limite
du bug... et même plus qu'à la limite : qu'il affiche le contenu de
l'attribut « alt » d'une image alors même qu'il a déjà affiché l'image !

Olivier Miakinen

unread,
Apr 6, 2009, 4:45:37 PM4/6/09
to
Le 06/04/2009 08:13, Desilu a écrit :
>
> on va voir si c mieux ,

Pour le formatage à 72 caractères ? Oui, c'est parfait.

> mais je n'ai pas de reponse quant à la lecture
> sur les ultra portable 12 pouces, comment un site fait en 17" apparait a
> l'ecran ? Il y a bien un reformatage qui se fait d'un moyen ou un autre ?

La réponse c'est qu'un site ne doit pas être « fait en 17" ». Le
reformatage, il se fait exactement comme ton texte dans les news
quand tu utilises le format flowed à la lecture.

> merci pour le conseil 72 caracteres, mon caractere me pousserait a
> mettre 73 ou 75 ...

Oh, tu peux bien mettre 60 ou 76 si tu préfères. L'idée, c'est de ne pas
trop dépasser les 80 caractères après un petit nombre de citations, pour
ceux qui refusent d'utiliser le format flowed (et ceux dont le logiciel
ne le permet pas de toute manière).

Olivier Miakinen

unread,
Apr 6, 2009, 4:52:28 PM4/6/09
to
Le 06/04/2009 11:05, Eric Demeester répondait à Desilu :

>
>> ne marche pas bien qu'ayant trifouillé mon thunderbird pour 72 caracteres
>> c bon sur mon ecran mais pas à la publication sur le ng
>
> Essaye de trouver l'option d'affichage et de décocher :
>
> format=flowed

Malheureusement cette option ne fait pas partie de celles que l'on peut
décocher dans l'un des menus de Thunderbird : il faut aller bidouiller
dans le about:config ou le user.js.

pref("mailnews.send_plaintext_flowed", false);
pref("mailnews.display.disable_format_flowed_support", true);

(mais ce groupe n'est pas le meilleur pour en parler)

Patrick 'Zener' Brunet

unread,
Apr 7, 2009, 1:32:28 PM4/7/09
to
Bonsoir.

Please répondez plutôt à la suite... Je vais essayer de réordonner un peu...

"Desilu" <robt....@free.fr> a écrit dans le message

de news 49d90bf7$0$680$426a...@news.free.fr

> merci
>
> donc , si je resume, je fais bien ma mise en page pleine largeur
> sur mon 17" "large" et j'aurais la barre en bas de page pour aller
> voir à droite sur les 15"
>

Tout à fait le truc à éviter, pour résumer: le contraire de ce que je
disais.

15" c'est de plus en plus irréaliste de nos jours, mais si le design est
élastique, sur un 15" et avec des fontes normales, ça va se tasser mais ça
va rentrer, même s'il n'y a que 10 mots par ligne de texte dans le bloc
principal.

C'est pas confortable, mais ça reste possible.
Ensuite le visiteur est libre de s'acheter un écran 17" pour 20 euros dans
un cash...

> - j'ai effectivement fait une mise en page sur 17" avec colonne
> reduite à 90% parce qu'on m'avait deconseillé d'obliger mes
> lecteurs sur 15" d' utiliser la barre du bas
>

Amha la scrollbar horizontale ne devrait être utilisée que de manière très
exceptionnelle, quand on ne peut pas faire autrement: image très large avec
des détails, etc.
Sur l'axe vertical c'est différent parce que l'extension verticale du texte
selon le second axe est naturelle (faux en Chine bien sûr), et la molette de
la souris permet un scroll confortable.
Par contre scroller aller-retour pour chaque ligne, c'est zéro pointé !

> Mais du coup en 15" ça donne des colonnes assez moches et
> rebarbatives.
>

Bien sûr, mais 15" c'est un cas extrême. Ne pas assimiler laideur/inconfort
et impossibilité de lire décemment.

> Donc je remet pleine largeur d'ecran à 17", et en 15" il faudra
> scroller...
>

Si c'est un minimum élastique, non.

> Mais et alors comment ca se passe maintenant avec les ultra
> portables en 12" !!!!?????
>

C'est le nombre de points qui compte, et avec de bons yeux :o)
C'est fait pour être "pratique" au sens de la mobilité, ça se paie forcément
autrement.

Il y a les téléphones aussi... A un certain stade on doit envisager une CSS
alternative.
Mais là on parlait de Web +/- standard.

> Est-ce qu'il n'y a pas un autre parametre qui rentre : la
> resolution d'ecran, qui fait qu'on est "proportionnel ?
>

Oui bien sûr, c'est le nombre de points logiques qui compte, avec un rendu
potable et sans utiliser de loupe pour lire le texte.

Desilu

unread,
Apr 12, 2009, 5:37:33 AM4/12/09
to

> Oui bien sūr, c'est le nombre de points logiques qui compte, avec un rendu

ce qui veut dire : tailler les largeur de tableaux en pixel vaut mieux
qu'en % ou c'est pareil ?

Patrick 'Zener' Brunet

unread,
Apr 12, 2009, 9:57:22 AM4/12/09
to
Bonjour.

"Desilu" <robt....@free.fr> a écrit dans le message

de news 49e1b659$0$15324$426a...@news.free.fr
>> Oui bien sûr, c'est le nombre de points logiques qui compte,


>> avec un rendu
>
> ce qui veut dire : tailler les largeur de tableaux en pixel vaut
> mieux qu'en % ou c'est pareil ?

Euh... Vous le faites exprès là ?

On parlait des micro-écrans des appareils de poche:

> > Est-ce qu'il n'y a pas un autre parametre qui rentre : la
> > resolution d'ecran, qui fait qu'on est "proportionnel ?

Alors faisons simple: avec des points très petits, on peut avoir une haute
résolution même sur un écran minuscule.
Et on parle de points logiques parce que ça ne correspond pas directement
aux pixels réels (luminophores ou autres éléments techniques de l'écran,
ouf!), qui eux-mêmes ne sont pas forcément carrés.

Ensuite s'il faut une loupe au visiteur pour lire les textes, soit il va
trouver un moyen de grossir le texte, ce qui nous ramène au problème du
début, soit il va poser l'engin par-terre et mettre le pied dessus.

Je plaisante, en fait il va simplement boycotter le site et le citer partout
comme exemple de gâchis, et il aura bien raison, Na !
(et c'est pas forcément une bonne astuce pour être référencé).

Donc pour être lisible,
**Vous ne devez pas imposer** de dimensions en pixels, sauf celles qui sont
directement liées à des images bitmaps,
*parce que ces images ne peuvent pas* être étirées ou contractées
proprement.
Et éventuellement aussi certaines mini-marges, pour l'esthétique et sans
impact sur la lecture.

0 new messages