Les roots du 49 - V2

Hello,
Voila, premiere foi que je présente un site ici pour demander des avis
ca se passe ici
Donc a titre d'information, c'est juste la version design, le codage php arrivera par la suite (enfin ca ne devrais pas géner votre jugement), C'est un site de musique ou seront regroupés les résumés de concerts, interviews de groupe etc
Ce site devrais être claire et simple, accessible, légé et je pense que c'est tout
A vous la parole

Edit: Aussi, si vous avez des commentaires a faire sur la facon dont est mise en forme ma feuille de style, je n'ai jamais su comment bien faire
Modifié par Slipki (14 Jan 2007 - 19:51)

<title>Document sans nom</title>

Booouh

Dsl oublié de le transféré sur le ftp

Gros problème de lisibilité du menu, par manque de contraste entre le texte et la couleur de fond : texte gris moyen-clair sur fond gris clair, même avec des bons yeux c'est illisible (faut surtout pas avoir la fenêtre dans le dos !). Et si on désactive les images (ou si, cas peut-être plus probables, l'image de fond du menu a eu du mal à se charger !), on se retrouve avec un gris moyen-clair sur fond blanc, ce qui est pas beaucoup plus lisible. Renforcer la couleur du texte serait une bonne chose. De même, il serait utile de remplacer les images de fond de couleur unie par la même couleur en CSS (propriété background-color). Ou bien, si on a besoin d'images, de doubler les images de fond par une couleur de fond proche de la teinte générale de l'image. Cela vaut également pour les effets de survol, d'ailleurs.

D'ailleurs, les dits effets de survol ne sont pas actifs lors de la navigation au clavier. Doubler les pseudo-classes :hover par :focus (et si besoin par :active, pour la compatibilité avec Internet Explorer) serait un plus.

Ça ne passe pas encore en 800x600, dommage. L'image du logo est trop grande (large de 800px) et déforme son conteneur (qui devrait être large de 750px). Corriger l'image devrait suffire.

Enfin, le texte est globalement minuscule. Là encore, problème de lisibilité. Qui peut se transformer en problème d'identité graphique : sur ma configuration, j'ai demandé une taille de texte minimale de 12px. Comme toutes les tailles de texte spécifiées font 12px ou moins, je me retrouve avec du 12px partout, et donc du texte lisible (c'est le but de la manoeuvre) mais désespérément uniforme...
Un article pour creuser la question : Typographie web : gérer la taille du texte avec les « em » (en passant, on y déconseille fortement l'utilisation des pixels pour dimensionner le texte...).

Dernier point, esthétique cette fois : c'est très... gris, non ? Et gris terne, avec ça.

Salut.

En jetant un coup d'oeil au code de la page, je crois qu'on peut diagnostiquer une "titrite" aïgue

Tu fais un usage abusif des balises <hn>. Elles sont censées contenir des titres, i.e. une courte description du contenu qui va suivre. Je ne crois pas que le nom du rédacteur ou la date de publication puissent correspondre à cette définition. Ils seraient plus à leur place dans un simple paragraphe.

De plus, tu commences ta hiérarchie au niveau h3 ... Où sont passés h1 et h2 ?

Sinon, il y a quelques détails graphiques à régler (testé sous Firefox 2/Win) :
- les bordures de la bannières se prolongent à droite de la zone de contenu, ça fait bizarre ;
- l'alignement du texte est curieux en plusieurs endroits (le texte "Prochain concert :" en haut de la page d'accueil, par exemple) ;
- les blocs "dernières interviews" et "derniers articles" sont décalés verticalement ;
- le contraste sur le menu non survolé est un peu léger à mon goût ;
- l'ensemble fait un peu "page blanche" ... une couleur de fond ne serait probablement pas de refus. De plus, ce serait sympa d'utiliser un peu la couleur de la bannière dans le reste du site, on dirait un peu 2 morceaux d'origines différentes, pour le moment ...

Voilà voilà. Un peu de grain à moudre

Les goûts et les couleurs, à toi de juger, mais AMHA il faut vraiment corriger la structure HTML

Edit: pas grillé, j'avais vu que Florent avait déjà posté. Mais j'ai pas écrit cette tartine pour rien, na !
Modifié par Thomas D. (14 Jan 2007 - 18:57)

Merci pour cette reponse,
Il est vrai que le menu n'est pas tres lisible, faut a la propriété Opacity, je n'arrive pas a foncer les couleurs a cause de ca, j'avais posté un sujet a ce sujet mais en vin, je vais tout de meme essayer de modifier ca,
Pour le texte, je ne m'en étais pas rendu compte et je vais de suite lire le tuto que tu m'as donné, jusqu'a présent je n'avais jamais cherché a changé ma facon de dimentionner les textes,
En ce qui concerne le design, je n'ai vrément pas d'idéen j'ai jamais étais tres bon dans ce domaine et je me creuse toujours la tete ... apparament il faut que je creuse encore plus

Ca fais plaisir de voir que vous prenez le temps d'écrire des gros pavés
Je trouve les balise <hn> utiles, c'est pas pour autant que je n'en fais pas un abus, et pour expliquer l'utilisation des balises <h3> pour commencer et non <h1>, c'est qu'il se peut que j'ai a utiliser les <h1> et <h2> plus tard ...
J'en retient que je dois revoir le menu, et le design general un peut pale ... ce que je ne conteste pas mais les idées me manques ...

Slipki a écrit :
et pour expliquer l'utilisation des balises <h3> pour commencer et non <h1>, c'est qu'il se peut que j'ai a utiliser les <h1> et <h2> plus tard ...

Hello,

Je ne suis pas sûr que ce soit la meilleure méthode : les balises <hn> s'emploient simplement pour organiser ton document de façon hiérarchique.
L'élement de titre général est représenté par <h1>. Celui-ci contient les sections <h2>, etc.

Je ne voudrais pas avoir l'air d'insister lourdement mais il vaudrait mieux travailler avec une hierarchie complète (quitte à remplir avec du lorem ipsum ...)

Ca te permettra d'avoir une vision globale de la structure de ta page, et à définir les niveaux de titres de façon logique.

Je vais vite revoir ca, pour le moment je m'attaque à la taille des textes et au menu je pense que je vais avoir du boulot !
Si vous avez d'autres commentaires n'hesitez pas, a vrai dire jusqu'a maintenant je ne m'étais jamais préoccupé de toute ces choses, je m'y met depuis que je vien sur alsacreationS avec un S je l'ai bien retenu

Alor est-ce que c'est mieu ? rappel

Pour ma part, je trouve ça beaucoup mieux, oui

Tu pourrais mettre tes titres plus en valeur, et il y a une bordure à droite un peu bizarre sur toute la hauteur de la page, mais c'est nettement plus vivant avec la colonne de droite en rouge

Slipki a écrit :
Alor est-ce que c'est mieu ? rappel

Il y a de l'amélioration. Mais je ne comprends toujours pas l'usage des images pour les fonds du menu, là où des couleurs de fond auraient suffi pour des aplats unis.

De plus, les différents items du menu ont une hauteur fixe. Si on agrandit la taille du texte, les blocs ne bougent pas, et ça déborde. Il suffirait de se passer de hauteur fixe, mais d'avoir un rendu un peu aéré grâce à du padding. Petit exemple :

#menug a {
	padding: 4px 0;
	/* On supprime l'instruction de hauteur, et l'instruction de padding-top désormais inutile */
}

Et voilà le travail.

j'utilise des images de fond pour avoir une largeur, si je met background-color: #.....; il prendra tous le div alor que moi il me faut une largeur de 150px de large,
Pour le menu, j'ai repris le code d'un tuto de alsacreations que j'ai modifié ( a la base je ne devais pas le garder mais au final et apres une crise de flemingite ... )

Ah d'accord, je n'avais pas bien vu le principe que tu as utilisé pour les couleurs de fond du menu de gauche. Ça donne :
- couleur rouge pour toute la colonne : on passe par une image pour pouvoir donner l'impression d'une colonne sur toute la hauteur (technique dite des « colonnes factices ») ;
- couleur rose sur le menu : résultante de la couleur de l'image de fond et de l'application de la propriété opacity.

Le problème étant le suivant : si jamais un navigateur n'applique pas opacity (comme c'est le cas par exemple de Konqueror, et sans doute de Safari), on aura juste juste le fond blanc. Pas un drame, mais bon c'est dommage. Alors qu'il suffirait, sans passer par la modification de l'opacité, d'utiliser la couleur #da9898 comme couleur de fond (du moins c'est celle que j'obtiens sur ta page avec l'opacité).
Modifié par Florent V. (15 Jan 2007 - 12:16)

Slipki a écrit :
j'utilise des images de fond pour avoir une largeur, si je met background-color: #.....; il prendra tous le div alor que moi il me faut une largeur de 150px de large

Avoir un div d'une largeur de 150px n'est pas si compliqué que ça, non plus...

ca m'obligerais a fais un div pour mettre a gauche du div bando, au dessous du menu et a gauche du pied ...compliqué pour si peu, j'y ai biensur deja pensé, et pareil pour le menu pour élliminer la propriété opacity
Modifié par Slipki (14 Jan 2007 - 21:13)

Slipki a écrit :
ca m'obligerais a fais un div pour mettre a gauche du div bando, au dessous du menu et a gauche du pied ...compliqué pour si peu, j'y ai biensur deja pensé, et pareil pour le menu pour élliminer la propriété opacity

Pas bien sûr de comprendre pourquoi tu aurais besoin de tous ces ajouts, mais bon... je suppose que ça ira pour un début, et qu'avec un peu plus d'expérience tu trouveras de toi-même les solutions simples et sans ajout de divs dans tous les sens à adopter.

Bonne continuation à toi, alors.

Merci, c'est vrai que j'ai encore des choses a apprendre, comme tout le monde , mais je compte sur vous pour m'y aider