Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

format d'ecran choisir ?

16 réponses
Avatar
Desilu
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 ?

10 réponses

1 2
Avatar
docanski
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
Desilu ecrit ce qui suit en ce 05/04/2009 15:16 :
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 ?



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/
Avatar
Patrick 'Zener' Brunet
Bonsoir.

"Desilu" a écrit dans le message
de news 49d8af40$0$15322$
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 ?



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   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
Avatar
Desilu
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 :
Bonsoir.

"Desilu" a écrit dans le message
de news 49d8af40$0$15322$
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 ?



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   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

Avatar
Olivier Miakinen
Le 05/04/2009 15:16, Desilu a écrit :
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 ?



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 !
Avatar
Gerald
Olivier Miakinen <om+ 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
Avatar
Desilu
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...
Avatar
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



Desilu a écrit :
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...

Avatar
Eric Demeester
dans (in) fr.comp.infosystemes.www.auteurs, Desilu
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
Avatar
docanski
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" ?

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/
Avatar
Desilu
docanski a écrit :


oui le petit monsieur avec une grosse montre
1 2