Conseils et débat sur fond noir et design étendu extensible

Un truc me trotte dans la tête: je suis allé voir les zolis sites des membres du forum, et l' écrasante majorité posséde un design centré avec deux grandes marges inutilisées et une zone fixe large de 800px, donc compatible avec toutes les résolutions, on comprend.

Mais comme vous le savez on peut aussi faire un contenu étendu qui change selon la résolution, par exemple les lignes de texte seront moins longues mais plus nombreuses, etc..
Cette technique est peu utilisée ici, alors je pense qu' elle ne doit pas être optimale, mais c' est celle que j' utilise, alors avez-vous des conseils pour cette question, et quels sont les points faibles du design étendu ?
Est-ce plus compliqué, moins compatible, moins joli ou ... ?

Enfin dernière chose; tous ces designs sont à base de couleur très claire ou blanche; le noir est-il déconseillé ? Pourquoi ?

Ces réponses pourront m' aider à faire un vrai design, et j' essaie de faire un joli quelque chose en noir, mais je me demande si c' est pas plus dur que de faire ça en clair, auquel cas je vais changer complètement la tête de mon modeste site personnel, parce que j' ai pas encore le level

Merci à l' avance de vos réponses, et en espérant profiter de vos conseils
Modifié par Kaktus (29 Jun 2005 - 18:50)

Plusieurs raisons amha pour les largeurs fixes :
-Un site en largeur fixe compatible 800*600 s'affiche à peu pres bien pour les résolutions les plus courantes.
-Un site en largeur fixe est parfois plus facile à concevoir graphiquement.
-Un site à largeur variable sera parfois difficile à lire quand les lignes deviennent trop longues.

Les couleurs claires, c'est dans l'air du temps, c'est plus lisibles, moins fatiguant à lire.

Ca devient illisible en trop grand définition, certains paragraphes deviennent une seul ligne interminable. Maintenant souvent les gens en grosse définition, ne browse pas en pleine écran donc ca va

Concernant les couleurs, je pense que la majorité des internautes préfère, et de loin, un fond clair pour un confort visuel pour la lecture.

Mais si le noir te plait a ce point, rien ne t'empeche de concevoir 2 CSS, un foncé et un clair

Okay un grand merci pour vos réponses: tout le monde me dit de toute façon que le noir, c' est maaal; en attendant d' avoir une idée lumineuse (c' est le mot) pour faire passer ce noir je vais faire un CSS clair
Mais je perds pas espoir et continue de rechercher l' ultime page noire
Modifié par Kaktus (29 Jun 2005 - 14:14)

Le noir met en évidence tous les défauts graphiques. Seul un design parfait pourra être beau en noir. Il met bien en valeur les photos bien prises, donc parfait pour un site de photographe ou d'artiste (mais un vrai, pas un bidouilleur de photoshop du dimanche ).

Personnellement j'oserai utiliser du noir dans mes designs quand je sais que je serai à la hauteur de son absence totale de pitié

Quand je vois ton site (avec le noir et le vert) ça me fait immédiatement penser à un site perso chez lycos des années 90 ... et c'est pas très flatteur

Tout ça pour dire que le noir tel que tu l'utilises surtout avec le texte vert, ça dénote pas mal

Surtout dans l'air du temps où les tendances sont aux tons clairs, pastels, mises en page épurées, douces etc...

Pour quelques exemples de sites "noirs" ou plutôt dans les tons foncés :
* http://web.burza.hr/
* http://www.artypapers.com/
* http://www.quiltro.cl/
* http://www.actlike.no/
* http://www.csszengarden.com/?cssfile=/041/041.css&page=13
* http://www.schillmania.com/
* http://ilmol.com/blog/

Salut,

serais-je le seul défenseur du noir? Je trouve que c'est plus lisible, moins fatigant, plus classe!!!

http://psychology.wichita.edu/optimalweb/older_adults.htm :

a écrit :
Studied examining the reading performance of older adults have found that colored text on a colored background typically reduces their reading performance compared to reading black text on a white background (Charness & Bosman, 1990). Moreover, research has shown that dark text on light backgrounds is generally superior to light text on dark backgrounds (Tobas, 1987). However, older adults do have an increased sensitivity to glare. Thus, it is recommended that backgrounds not be pure white, but some form of off-white color (such as background presented here).

L'article concerne les seniors, mais je pense que ses conclusions sont aussi valable pour une audience plus jeune.

A lire aussi :
http://vision.arc.nasa.gov/personnel/al/papers/03vss/03vsstext.htm

a écrit :
Letter identification performance is better for negative contrast than positive contrast

Merci à Olivier et aux autres pour leur franchise; je vais donc opter pour un design plus clair, reste à savoir manier Toshop pour meubler

Et pour le design étendu Olivier d' autres remarques ?

En tout cas ça fait plaisir de voir un forum aussi dynamique, sympathique, et qui sait prends des baguettes (merki Olivier).
Tout ça me montre à quel niveau je suis et je vous en remercie

Kaktus a écrit :
Merci à Olivier et aux autres pour leur franchise; je vais donc opter pour un design plus clair, reste à savoir manier Toshop pour meubler

Et pour le design étendu Olivier d' autres remarques ?

En tout cas ça fait plaisir de voir un forum aussi dynamique, sympathique, et qui sait prends des baguettes (merki Olivier).
Tout ça me montre à quel niveau je suis et je vous en remercie

Ahh bah content que tu l'ai pas mal pris pour une fois qu'on prend ce que je dis dans le bon sens donc, tu as bien compris que c'était pas une critique négative pour le plaisir

Pour ce qui est de la "fluidité", je suis pas fan, pour plusieurs raisons :
* longueur des lignes (trop ou pas assez)
* ajout de balisage (genre <div>) pour créer des mises en page graphiques extensibles
* gout personnel

Pour la 1ere raison, il y a une solution, min/max-width en pixel genre 770 et 1024 par exemple, mais assez chiant à reproduire pour IE et encore seuleument à grand coup de JS

Pour la 2eme raison, c'est pas super grave, mais bon, après faut gérer les images et tout le toutim derrière, c'est plus par flemme qu'autre chose

Pour la dernière, ça j'y peut rien, je préfère les petites pages, j'adore le forme 350-400px de large par exemple et je suis en 1280*1024

Pour la 1ere raison, éviter aussi le 100% de largeur, c'est généralement affreux !! des valeurs du genre 80-85% sont pas mal
Enfin c'est mon avis

Okay là je suis en train de dévorer les tutos du site Alsacréations et de vos sites partenaires, je vais essayer de commencer à mettre ça en oeuvre au frais et au calme ce soir, pasque là pfiou

Et pourtant, le site d'alsa ou celui d'open web sont fluides ...

Et il n'y a pas de problème de lisibilité.

Y a t-il un secret ?

Vue que seuls les adeptes de la largeur fixe se sont exprimés ...

Vero a écrit :
Et pourtant, le site d'alsa ou celui d'open web sont fluides ...

Et il n'y a pas de problème de lisibilité.

Y a t-il un secret ?

Vue que seuls les adeptes de la largeur fixe se sont exprimés ...

Pour Alsa, il respecte les "règles" de prudence que j'ai cité plus haut, à savoir largeur < 100% arf nan, il y a pas les min/max-width, y a que sur la FAQ et du concours CSSR qu'ils y sont ^^

Pour openweb, le site date donc difficile de juger il me semble...

Par ailleurs tout ce qui a été dit comme tu le soulignes l'a été par des adeptes de la mise en page fixe, donc c'est pas forcément hyper révélateur...

kaktus > peux tu éditer ton titre de sujet s'il plait pour quelque chose de plus révélateur de la discussion, à savoir le type de mise en page et les choix de couleurs. Merci
Modifié par Olivier (29 Jun 2005 - 18:27)

Voilà grand chef

Olivier a écrit :

. . . . . . .

Pour ce qui est de la "fluidité", je suis pas fan, pour plusieurs raisons :
* longueur des lignes (trop ou pas assez)
* ajout de balisage (genre <div>) pour créer des mises en page graphiques extensibles
* gout personnel

. . . . . . . .

Pour avoir eu l'occasion de surfer un peu sur un grand écran (que je ne possède pas, je suis en 1024) j'aurais tendance à opter pour le fluide, avec homothétie de tous les éléments.

Car pas mal de sites sont difficiles à lire sur grand écran, et le redimensionnement des polices ne donne pas toujours des résultats bien réjouissants, tandis que l'on peut réduire la fenêtre du navigateur en cas de longues lignes avec du fluide.

Pour ce qui est de "l'ajout de balisage", je ne vois pas de quel ajout il s'agit car il me semble que tout est question de cotation : en absolu ou en relatif.

Il est aussi facile de spécifier 28% que de mettre 300px !

Certes le fluide pose quelques problèmes avec certains graphismes...

J'ai bricolé une page fluide il y a quelques temps, une étude que j'ai utilisée pour une application imprévue (Ajout de liens sur Planète Nature) : on peut aussi réaliser du graphisme sans images, et je trouve cela intéressant.

Cette page n'est pas optimisée, mais cela fonctionne et l'on peut redimensionner les polices sans trop de dommages (j'ai amélioré l'ensemble depuis, mais ce n'est pas en ligne).

Et cette question de redimensionnement semble être un véritable problème pour un certain nombre d'internautes à la vue détériorée.

Dès lors la question des longues lignes est relativisée : il y a des lignes longues, éventuellement, pour la majorité (70 - 80%) et des lignes correctes aux caractères plus gros pour les autres.

Mais la lisibilité est assurée, possible pour ces derniers.

jcm a écrit :

Pour ce qui est de "l'ajout de balisage", je ne vois pas de quel ajout il s'agit car il me semble que tout est question de cotation : en absolu ou en relatif.

Il est aussi facile de spécifier 28% que de mettre 300px !

Certes le fluide pose quelques problèmes avec certains graphismes...

C'est un peu plus compliqué que ça !

Va faire une mise en page avec des coins arrondis et ombragés sans ajouter de conteneur

MAJ : Pour ceux que ca interesse, j'ai fait un petit article en francais sur les fonds sombres et le contraste ici :
http://s.billard.free.fr/referencement/index.php?2005/07/03/103-contraste-et-lisibilite

Merci sebastien !!

J' ai suivi de très près le tutoriel d' Alsa Créations et j' ai changé le design de mon site; pour l' instant c' est vraiment trop fidèle à l' exemple mais j' ai fait ça intelligemment; j' ai compris la démarche et le code et apporté quelques modifications (pour le menu, j' ai utilisé un tableau et pas une liste, etc...), maintenant que j' ai les bases je vais pouvoir broder et faire quelque chose de personnalisé