[Dudu]

Salut

Sujet déja traité plusieurs fois sur le Hub (VirtuelBlue doit s'en souvenir )

Mon avis reste inchangé: le web est un média qui grossit, donc qui touche beaucoup plus de gens. À la fois des technophiles, des profanes, des personnes avec de bons yeux qui aiment quand c'est écrit en 9px de haut (moi), des personnes avec de moins bons yeux qui préfèrent quand c'est écrit gros, des qui naviguent au clavier, des qui ne touchent que leur souris pour surfer, des handicapés, des bien-portants, etc etc...

Le but est de contenter tout le monde, et figurez-vous que pour les résolution d'écran c'est assez simple, la solution tient en 4 mots:
Mise en page élastique

Alors effectivement, on va parler du problème inverse: en cas de résolution trop grande, ça dérange la lecture. Je réponds faux pour les raisons suivantes:

• Après des années passées en 1024*768 sur un écran 15', je viens de passer au 1680*1050 sur un écran 30' et j'ai gardé quelque temps l'habitude d'étirer mes fenêtres au maximum comme je le faisais avant. Sachant que je fixe les préférences de mon navigateur à des polices de 9/10px de haut, effectivement c'est long mais pas illisible. Et puis surtout, on se rend vite compte qu'il n'est pas nécessaire d'étirer sa fenêtre à fond, et ma fenêtre de navigateur est très vite revenue à la même taille que lorsque j'utilisais du 1024*768.
  
• La propriété CSS max-width est faite pour ça. À ceux qui me répondront qu'Explorer ne l'implémente pas, je recommande la lecture attentive d'un très bon billet de Loupilo sur son blog Aozeo intitulé Tendances 2007. Je cite ici le passage le plsu intéressant

  Blog Aozeo dit :

  La population d'utilisateurs qui doivent subir le léger désagrément du contenu en pleine taille est de plus restreinte : les écrans de 19" (sinon, c'est vraiment mineur) et plus avec IE6 (rappelons que Windows Update propose IE7) et le JavaScript désactivé ne sont pas légion. Et ce serait bien hâtif que d'assimiler mon propos à ceux qui déclarent ne pas vouloir rendre leurs sites accessibles pour une minorité d'handicapés : il s'agit simplement de ne pas proposer un affichage optimal à quelques réfractaires. Non, vraiment, je ne vois pas de point bloquant à l'adoption du max-width.

PS: un ascenceur horizontal EST frustrant (et cet iPhone me semble très bien mais ce n'est pas le sujet ;-))

[thick]

Dudu, le jeudi 8 février 2007, 21h26, dit :

[*]Après des années passées en 1024*768 sur un écran 15', je viens de passer au 1680*1050 sur un écran 30' et j'ai gardé quelque temps l'habitude d'étirer mes fenêtres au maximum comme je le faisais avant.

+1

Complètement vraie la remarque de Dudu. Je suis personnelement en 1920x1200 et les fenêtres sont à peu près de dimensions 1280 x1204.
D'autre part, je suis en 16/9 et je trouve cela complètement inutile pour pour usage quotidien professionel et personnel.

[f_trt]

Yazerty, le jeudi 8 février 2007, 19h09, dit :

Mui, mais les utilisateurs en 800*600 ne trouvent cette barre de scrolling un peu frustrante :-?

Oui mais il sont 14% alors faire du 800x600 pour que ces 14% n'aient pas d'ascenseur et que le restant aient un site sur
une seule moitié d'ecran c'est pas mieux non plus non ?

Qui faut-il privilégier ?
- les 14% qui ont un acenseur
- les autres ?

Maintenant le fluide faut faire mega gaffe c'est vrai avec les 16/10 qui poussent comme des champignons vu les bas prix.
Par ailleur je pense que les 14% vont fondre a grande vitesse vu les nouveaux PC sous VISTA (je parle pas des pc avec un
VISTA basique bien sur) la degringolade des prix des ecrans plats...

Donc perso 1024 OUI OUI

A+

[Yazerty]

Je ne trouve pas mon site ridiculement petit en 1024*768 alors qu'il est compatible 800*600.

De plus j'affiche en moyenne 68 caractères par ligne dans ma partie "contenu", ce qui correspond à la moyenne recommandée pour une lecture confortable d'un texte.

Et comme l'ont dit certains précédemment sur des grandes résolutions les gens ont tendance à ne pas afficher que leur browser, ou en tout cas pas en entier.

So si ya moyen de ne pas frustrer les 800*600 et de présenter un truc honnêtre aux résolutions supérieure alors pourquoi pas ...

[Leonick]

j'en tiens compte en faisant des design élastique, mai pour éviter d'avoir des colonnes de menu trop large j'utilise le max-width avec Mozilla et un hack js pour IE

	width: 25%;
max-width:20em;
width: expression(25%>20em?20em:25%);

[Wolf18]

Je n'en tiens jamais compte... Je trouve que c'est beaucoup trop petit, donc je me limite en général autour des 950px.

Maintenant c'est vrai qu'il existe encore des internautes qui naviguent avec cette résolution, mais je pense que de toute façon mes sites ne les interessent pas trop donc voila

[TheRec]

Peut-être que pour vous décider choisir le compromis entre un layout flexible et un layout à largeur fixe il faudrait attaquer le problème sous un autre angle. Du point de vue de l'usabilité il est nécessaire de maîtriser la largeur du texte d'une page, cette affirmation se base sur un étude (qui date un peu je vous l'accorde), The Effects of Line Length on Children and Adults’ Online Reading Performance (2002) et la plus récente suite de cette étude The Effects of Line Length on Reading Online News (2005) – Document en anglais, désolé je n'ai pas trouvé de traduction.

Cela vous indique qu'un design complètement flexible qui permet au texte d'une page de s'étendre au delà de 95 caractères par ligne ou en dessous de 35 cpl ne sera pas "agréable" à la lecture... c'est aussi un de facteur qui pousse beaucoup de gens à utiliser des layouts à largeur fixes qui sont compatibles avec la résolution 800x600, cela donne à peu près 775px "exploitables" (à cause des barres de défilement, bordure de fenêre, etc.) et cela correspond à environ 100 caractères par ligne (espaces compris) et on rejoint la longueur "idéal" d'un point de vue de l'usabilité.
Le problème est que, comme cela a été évoqué précédemment, le Web n'est pas un média "statique", chaque utilisateur peut obtenir des résultats différents (polices installés, taille des caractères, résolution) et donc ce calcul fonctionne dans le cas des configuration "par défaut" des navigateurs (en plein écran).

Pour travailler avec cet état de fait il y a plusieurs solution et selon moi la meilleure est de partir d'un point de référence, c'est-à-dire largeur fixe pour optimiser l'usabilité de la page et laisser la possibilité de briser cette largeur fixe par une action de l'utilisateur (c'est à dire au moyen de Javascript, soit pour présenter la page une feuille de style alternative, soit en ôtant ces largeur fixe directement, la méthode importe peu). Premier inconvénient de cette méthode est que cette fonctionnalité ne sera pas accessible aux personnes qui n'ont pas activé Javascript (volontairement ou non), le contenu restant accessible cela ne me gêne pas outre mesure. Second inconvénient c'est le temps de développement supplémentaire nécessaire, malheureusement peu de clients souhaitent investir dans ce genre de fonctionnalités ce qui me force souvent à revenir au bon vieux layout à largeur fixe et cette largeur fixe n'est pas motivée par la résolution mais par l'usabilité comme je l'ai expliqué précédemment.

[pmadfm]

Bonjour,

AMHA, l'élastique est effectivement important.

Pour le public, je dirais que la plus grande majorité peut tourner en 1024*768, toutefois si ton affichage peut ou doit être lu par des seniors, il vaut mieux envisager le 800*600.

Peu me contredirons, vers les 45-50 la vue baisse, alors la résolution doit pouvoir s'adapter.

N'est il pas, messieurs les jeunes des années 50 ...

[tankia]

Ce que je fais quand je crée une mise en page de site, je pense au 800x600 en mettant le contenu important (navigation 1ère, logo, articles 1er) dans la zone de vision du site sans besoin de scroller. Par contre, je n'hésite pas à créer le site pour une résolution de 1024x768 car c'est la résolution de la majorité des internautes. La scrollbar horizontale et verticale est là pour que les 800x600 voit le reste du contenu (secondaire) et le Ctrl + est là pour les résolutions supérieures à 1024x768 pour agrandir les textes si les internautes les trouvent trop petits.

[Loupilo]

Bon ben, je suis d'accord avec Dudu
J'ajouterai quand même que quitte à vouloir proposer une maquette fixe, le choix de ses dimensions doit alors se faire en fonction de son public... Une cible âgée, par exemple, aura tendance à utiliser des résolutions plus faibles que celles permises par leur écran, et la population de 800*600 risque de ne pas être négligeable.
Par contre, pour une cible jeune ou branchée, les 17" sont de loin les plus répandus sur les ordinateurs de bureau (et les 19" percent), et permettent une résolution de 1024*768 ; les portables sont en 17" et ceux avec avec petits écrans ont bien souvent un format 16:9, avec plus de 1200px de largeur : choisir le 1024*768 n'est pas un pari risqué.
Ça dépend vraiment des utilisateurs.

Mais les maquettes étirables restent quand même le choix le plus flexible et le plus universel

[cweben]

Je confirme que j'ai connu des personnes qui utilise leur écran en 800x600 pour uniquement des raisons de ... lisibilité.
(en effet, elles ont l'impression que les caractères sont plus gros).
Mais, très souvent, les sites ne sont pas pensés en 800x600, ce qui rend difficile la navigation.

[TheRec]

Tout cela démontre une chose, la résolution n'est pas une constante chez les visiteurs donc il n'est pas possible de ce baser sur cette mesure pour créer un site, d'où mon approche du côté de l'usabilité. La contrainte en largeur s'applique pour une question d'usabilité et laisser la possibilité aux visiteur de "casser" cette limite de largeur et rendre la largeur de la page flexible (dans les deux sens, que ce soit fenêtre agrandie, plein écran, ou de taille réduite) permet à ceux qui le souhaitent d'obtenir une mise en page qui le convient mieux (parce qu'ils on une plus grande résolution, deux écrans, etc.). Où le faire dans l'autre ordre c'est-à-dire présenter une page avec une largeur flexible et proposer une alternative avec une largeur fixe.

On ne peut pas se baser sur une expérience empirique et/ou statistique pour définir un nombre d'or dans la réalisation d'une page vu la nature du média et de la diversité des visiteurs. Ce dont je parle se base sur des études scientifiques (certes empiriques dans une certaine mesure).

Loupilo, le dimanche 11 février 2007, 12h37, dit :

Mais les maquettes étirables restent quand même le choix le plus flexible et le plus universel

Je ne suis pas d'accord, une page totalement flexible peut se dégrader et/ou nuire à l'usabilité lorsque la la taille a disposition devient plus large ou moins large que les valeur "habituelles"... c'est pour cela que je propose un compromis. Ce que propose Leonick est un début, mais le problème est que cette solution mélange la couche de présentation et la couche de comportement en incluant du Javscript dans la feuille de style (ce n'est pas un hack, c'est une fonctionnalité). C'est pour cela que je suis plutôt pour un système de changement de feuille de style qui ne pose pas ce problème de conception.

[Leonick]

TheRec, le dimanche 11 février 2007, 13h35, dit :

Ce que propose Leonick est un début, mais le problème est que cette solution mélange la couche de présentation et la couche de comportement en incluant du Javscript dans la feuille de style (ce n'est pas un hack, c'est une fonctionnalité).

En fait, le hack vient de l'appel de cette feuille de style IE

<!--[if IE]><link rel="stylesheet" type="text/css" href="/css/style-IE.css" media="screen, tv, projection" /><![endif]-->

[Loupilo]

TheRec, le dimanche 11 février 2007, 13h35, dit :

Je ne suis pas d'accord, une page totalement flexible peut se dégrader et/ou nuire à l'usabilité lorsque la la taille a disposition devient plus large ou moins large que les valeur "habituelles"... c'est pour cela que je propose un compromis. Ce que propose Leonick est un début, mais le problème est que cette solution mélange la couche de présentation et la couche de comportement en incluant du Javscript dans la feuille de style (ce n'est pas un hack, c'est une fonctionnalité). C'est pour cela que je suis plutôt pour un système de changement de feuille de style qui ne pose pas ce problème de conception.

Je parle bien entendu de flexibilité accompagnée de max-width, comme l'indique Leonick. Perso, le mélange CSS/JS ne me gène absolument pas ; et le système de changement de feuille de style, en plus d'être assez contraignant à maintenir, est loin d'être accessible niveau utilisation à un internaute lambda. Demander à un public "de base" de choisir entre 800*600 et 1024*768 me semble être assez audacieux. Enfin, c'est au site de s'adapter à ses visiteurs, et non pas l'inverse.
Mais ce n'est que mon avis

[TheRec]

Oui, le mélange de la couche de comportement de la couche de présentation est gênant dans la mesure ou cela nuit justement à facilité de la maintenance... mais c'est un choix, comme ont peut choisir de mélanger la couche du contenu et de la présentation et on se retrouve avec les mêmes problèmes Je ne vais pas trop débattre sur ce point car c'est un peu hors-sujet et je n'ai pas vraiment d'argument plus probant à t'apporter (d'ailleurs je doute qu'il y en ait besoin).

Concernant le choix pour l'utilisateur je ne propose pas de le laisser choisir en "800x600 et 1024x768" (un point technique que je n'ai même pas évoqué, car il n'est pas significatif à mon avis), mais entre un contenu extensible en largeur (dans les deux sens) et un contenu qui a une largeur fixe. Voici un exemple accompagné d'un article (en anglais, désolé pour ceux qui n'en profiteront pas) qui reflète mon point de vue : Fixed Or Liquid?
Et je ne vois pas en quoi un tel système ne serait pas accessible aux utilisateurs, du point de vue de la compréhension. Du point de vue de la maintenance et de l'évolutivité, il est clair que cela demande un peu plus de travail à la conception. Mais en admettant que, comme dans l'exemple ci-dessus, on tire avantage des feuilles de styles et qu'on ne définit que les styles qui changent d'un layout à l'autre (flexible, et largeur fixe) et que les autres styles se trouvent dans une feuille de styles commune, ces problèmes sont tout à fait surmontables.

Pour ce qui est de la mise en place du système ce n'est pas vraiment une difficulté, il existe des style switcher de plusieurs natures: Javascript seulement, PHP (ou langage interprété côté serveur) uniquement, mélange des deux. Si le site est bien conçu l'entier du code agit simplement sur l'en-tête HTML des pages (liaison des feuilles de style). Tout ceci conservant l'accessibilité au contenu et en augmentant l'usabilité des pages. Maintenant il est clair que si l'investissement que cela représente ne vaut pas selon toi le gain en usabilité c'est ton droit, j'exposais juste la manière que je préfère utiliser

[jahmasta]

Bonjour
Tu peux aussi faire ton site à 100% ça permet de gérer tous les cas de figure.
@+

[Leonick]

Non, car un texte écrit sur du 1280 cela fait des lignes trop longues.

[Loupilo]

TheRec, le dimanche 11 février 2007, 15h13, dit :

Oui, le mélange de la couche de comportement de la couche de présentation est gênant dans la mesure ou cela nuit justement à facilité de la maintenance... mais c'est un choix, comme ont peut choisir de mélanger la couche du contenu et de la présentation et on se retrouve avec les mêmes problèmes Je ne vais pas trop débattre sur ce point car c'est un peu hors-sujet et je n'ai pas vraiment d'argument plus probant à t'apporter (d'ailleurs je doute qu'il y en ait besoin).

Je suis d'accord sur le principe, mais ce JavaScript là est assimilable à la couche de présentation, donc ça ne rentre ama pas dans tes considérations de séparation

Citation

Et je ne vois pas en quoi un tel système ne serait pas accessible aux utilisateurs, du point de vue de la compréhension. Du point de vue de la maintenance et de l'évolutivité, il est clair que cela demande un peu plus de travail à la conception. Mais en admettant que, comme dans l'exemple ci-dessus, on tire avantage des feuilles de styles et qu'on ne définit que les styles qui changent d'un layout à l'autre (flexible, et largeur fixe) et que les autres styles se trouvent dans une feuille de styles commune, ces problèmes sont tout à fait surmontables.

Pourquoi pas. Mais c'est assez gadget pour la difficulté de maintenance que ça comporte... Et pour le rapport utilisateurs/utilisateurs qui s'en servent, aussi.

Citation

Pour ce qui est de la mise en place du système ce n'est pas vraiment une difficulté, il existe des style switcher de plusieurs natures: Javascript seulement, PHP (ou langage interprété côté serveur) uniquement, mélange des deux. Si le site est bien conçu l'entier du code agit simplement sur l'en-tête HTML des pages (liaison des feuilles de style).

Tout à fait d'accord.

Citation

Maintenant il est clair que si l'investissement que cela représente ne vaut pas selon toi le gain en usabilité c'est ton droit, j'exposais juste la manière que je préfère utiliser

L'idée peut-être séduisante sur le papier, mais pour moi, ça apporte plus de problèmes que ça n'en résoud... Après en effet, chacun peut l'utiliser s'il trouve que ça vaut le coup.

[TheRec]

Leonick, le dimanche 11 février 2007, 14h15, dit :

En fait, le hack vient de l'appel de cette feuille de style IE

Le code que tu proposes n'est pas réellement un hack, c'est un commentaire conditionnel et c'est une fonctionnalité du navigateur Internet Explorer depuis sa version (un hack CSS est l'utilisation d'une mauvais interprétation du parseur d'un ou de plusieurs navigateur), mais je te l'accorde ce n'est qu'une question de terminologie.

@Loupilo> Ce que je propose et que tu considères comme un gadget est une solution qui permet de ne pas se limiter à une largeur fixe ou une largeur minimum (qui ne satisfont pas mes critères d'usabilité).

Concernant la séparation des diverses couches d'une page Web, pour moi elles sont claires, elles sont motivées par le langage utilisé entre autres (je ne vais pas faire la liste de critères vu que ce paragraphe est déjà hors sujet).
La syntaxe utilisée dans ce cas est du Javascript (invoquée par la fonction CSS expression), dans une feuille de style. Pour moi, et je doute être le seul dans ce cas, cela revient exactement au même que d'utiliser l'attribut style de n'importe quel élément HTML alors que l'on souhaite faire une séparation du contenu et de la présentation. Il n'y a pas d'assimilation à faire selon moi, contrairement à ce que tu penses, si je devais faire ce que Leonick propose j'invoquerai un script écrit en Javascript au chargement de la page (et cela correspond à la couche de comportement, aussi connue sous le nom de behaviour layer).
Comme je l'ai dit, par expérience c'est ce genre d'assimilation qui mène aux problèmes de maintenance. Il est possible de faire ainsi, mais tu ne me verras jamais le conseiller.

[BigVicente]

Personnellement je dispose d'une résolution de 1280*1024 mais je surf toujours en mode fenêtre. Et celle ci fait de 750 à 1100px de large, au delà je trouve les textes fatigant à lire sur un design étiré (impression personnelle).

Du coup quand c'est possible je fais des designs élastiques pouvant être consultés en 800*600 voir moins mais aussi en 1024*768 et plus. Quand mes designs ne sont pas élastiques, ils sont compatibles 800*600 dans la mesure du possible (pour certains sites comme des sites photos par exemple c'est parfois limite). Je ne suis pas encore près à abandonner cette façon de faire, quand je veux quelque chose de large je passe presque toujours en design élastique, j'essaie de ne pas imposer une résolution minimale trop élevée...