[semi-Pro+]http://www.rocksane.com/

allez, je me lance dans l'arène, sous les feux de la critique....

je viens de refaire le site du Rocksane à Bergerac, salle de concert orientée musiques actuelles.

Le Rocksane

je vous écoute

Lionel

Le design est agréable et les couleurs jolies, même si la lecture est fatigante à la longue et le contraste n'est pas au top, mais pas loin (d'après Juicy Studio). Un background blanc pour la div #rightActu et les div .dashed serait peut-être le bienvenu. En outre, une troisième tonalité (le jaune ?) pourrait aussi aérer l'ensemble.

Sinon, la structure des titres est mal conçue (plusieurs titres de niveaux 3, puis le titre de niveau 1, puis des 3, des 2…). Sans doute le design du site y est pour quelque chose (tous les titres avant le 1 sont placés dans le bandeau de gauche). Mais votre float left sur #div leftnav sert justement à éviter ça !

De plus, vous pourriez gagner de la vitesse en optimisant les images.

Enfin… je suis un peu dubitatif devant ce genre de code :

<li>
	<a href="javascript:;">
		<img src="images/clock.png" />
		<h3>Stage de Jazz</h3>
		<span>05-06 mai 2012</span>
	</a>
</li>

Merci pour le retour...

en effet, j'ai fait une grosse erreur dans les titres h1 h2 h3 etc, je ne m'en étais pas aperçu, il faut que je corrige ça...

le code 'dubitatif' en fait il vient d'un slider que j'ai téléchargé, ce n'est pas moi qui l'ai codé....
pourquoi? il poserait problème dans quel sens??

Pour les images, c'est un choix.... et mes images sont justement optimisées.... mais d'abord dans le sens visuel.... , j'ai vu pire sur des blogs avec des images de 2 ou 3Mo qui s'affichent en 300x200 ou plus petit.


Merci beaucoup Muchos pour le retour et pour m'avoir dévoilé ma grossière erreur sur les titres....

Hello,

pour les images, gagner 40 octets n'est effectivement pas intéressant, cependant, http://www.rocksane.com/images/gradient-1.jpg pèse 45 Ko, cependant tu pourrais faire passer cette image sans problème à 2-3 ko en diminuant la largeur inutile, voir fair un gradient css avec une couleur par défaut pour les vieux navigateurs.

Pour le texte, Il est de manière générale horrible à lire. Je n'ai rien lu car je ne souhaite pas attraper un mal de tête… Le clair sur foncé est déjà problématique s'il n'est pas bien géré, mais le fatiguant du rouge cela devient insupportable. Comme dit précédemment, moins de fond rouge allègerais la page grandement. Le textes justifié sur les colonnes de gauches donne des espaces horribles et rend le tout moins lisible.

Sur la page programmation, le haut de la dernière ligne de texte est coupé, c'est vraiment pas terrible.

Dernière question, c'est quoi cette mode des visuels rock français pour les bandes de couleur ton sur ton, parallèles ou en soleil? ça peux valoir la peine de ne pas refaire ce que les autres acteurs du marché ont déjà tous fait 20000 fois.

lionel_css3 a écrit :
le fichier gradient-1.jpg je ne tiens pas trop à le compresser car par expérience je sais que les dégradés et les tons de rouge se compressent très mal en jpeg, mais je ferai quand même un autre tentative.

Il fait 500px de large, 1px suffirait pour faire drastiquement réduire la taille, sans avoir un moche artefact jpg.

lionel_css3 a écrit :
Le texte horrible, tu y vas peut être un peut fort non....? depuis hier j'ai eu plein de réactions positives et on ne m'a jamais parlé de texte horrible..

Je maintient que c'est horrible à lire. Non pas horrible visuellement. Demande aux gens de lire vraiment toute une page et les réactions seront plus mitigées.

lionel_css3 a écrit :
le texte justifié des colonnes de gauche se verra ajouté des césures ­ pour équilibrer le texte.

Comment comptes-tu ajouter des césures, il n'existe actuellement pas de très bonne technique. Les navigateurs prennent mal en charge la césure, le faire manuellement à l'aide de -<br /> est une très mauvaise idée, cela risque de donner n'importe quoi selon la taille du texte. Au final il reste des techniques js telles que hyphenator qui fonctionne plus ou moins. C'est un peu lourd et ne le gère pas très bien.

lionel_css3 a écrit :
[…] et si j'ajuste dans un navigateur la hauteur initiale, ça va pas dans un autre, alors je vais changer le système.

C'est que c'est un problème qui dépend de la taille de la police, de la police elle-même, tout cela pouvant varier d'une config à une autre.

lionel_css3 a écrit :
après, le visuel , il ne dépend pas de moi....

Ce qui règle le problème. De toute façon ma remarque était assez subjective.
Modifié par kustolovic (25 Apr 2012 - 10:39)

Je rejoins l'avis du texte dur à lire..

Personnellement je ne peux pas le lire car le contraste me fait mal au yeux ^^

Le reste est bien mais il faut changer cela

pour rajouter des césures il existe le meta caractère &shy; que tu insères là où tu veux (dans le code) et si le navigateur peut faire entrer la partie du mot avant ce caractère en fin de la ligne, il le fait.
D'ailleurs je viens d'en mettre mais c'est pas encore en ligne, là je suis en train de corriger ma 'connerie' des titres H soulevée par Muchos... (merci à lui)

les dégradés d'un pixel de large qui se répètent, j'ai déjà essayé, c'est jamais convaincant.
Sur les écrans bas de gamme et entrée de gamme ça fait affreux...
mais j'ai quand même l'intention de jeter un nouveau coup d'oeil à ce fichier.

Personnellement je suis partisan pour assombrir le fond rouge et gagner du contraste, après réflexion, mais quand même je continue à trouver ton mot 'horrible' un peu excessif

encore merci pour les retours

Fabious a écrit :
Je rejoins l'avis du texte dur à lire..

Personnellement je ne peux pas le lire car le contraste me fait mal au yeux ^^

Le reste est bien mais il faut changer cela

ok, je vais assombrir le rouge

(edit) par exemple dans la page programme le fond du texte est plus foncé, qu'en pensez vous??
Modifié par lionel_css3 (25 Apr 2012 - 10:53)

C'est léger la différence, je pense c'est le gris sur fond rouge qui fait mal au yeux

Fabious a écrit :
C'est léger la différence, je pense c'est le gris sur fond rouge qui fait mal au yeux

tu me conseillerais du texte blanc par exemple?

Bonjour,

Moi qui as les yeux sensibles, Le contraste du texte sur le fond rouge me fait mal aux yeux, je n'ai pas pu lire jusqu'en bas de la page (serieux)

Donald a écrit :
Bonjour,

Moi qui as les yeux sensibles, Le contraste du texte sur le fond rouge me fait mal aux yeux, je n'ai pas pu lire jusqu'en bas de la page (serieux)

oui, lol, tapez plus sur la bête..... j'ai compris...
(edit) alors effectivement sur mon bureau j'ai 3 écrans et sur l'écran de moins bonne qualité, ça fait un peu mal aux yeux...

vous feriez quoi ? , en gardant le fond rouge ...

MODIF: suite au problème soulevé par Muchos, j'ai corrigé l'oubli de la hiérarchie des titres en précédant le contenu du #leftnav avec un h1 et en suivant avec h2 - h3 et non plus h3 - h4
j'ai réparé ma 'connerie' au mieux....
Modifié par lionel_css3 (25 Apr 2012 - 11:45)

Le texte en clair sur fond foncé pose des problèmes de lisibilité, ainsi que les couleurs trop saturées. La meilleure solution serait d'abandonner le fond rouge sur le texte principal. Autrement:

- Un rouge plus foncé (330000) ou moins saturé (553333) donne de meilleurs résultat. (valeurs indicatives et pas forcément esthétiques… )
- Le clair sur foncé fait un effet "gras" naturel, on peut éventuellement le contrer en utilisant une police light, ou/et en augmentant un peu l'interlettrage (letter-spacing: 0.03em)

Pour &shy; je ne trouve pas que c'est une solution: avoir du code qui ressemble à cela : « je tra&shy;duit len&shy;te&shy;ment ». De plus ça nécessite d'installer de lourds dictionnaires sur le serveur.

Pour les dégradés, l'écran n'a rien à voir. (Enfin si, un écran pourri rendra un dégradé pourri quelque soit la largeur). Cependant quelques vieux ie peuvent poser des problèmes. Mais 10 pixels suffisent pour y remédier, pas besoin de 500 Oo.

J'imaginais quelque chose comme ça (désolé pour la comp de porc ^^)
http://tilde3.franceserv.com/images/rocksane.jpg

Sinon, il serait bon de minifier les css. Par exemple, changer ça :

a, a img, object   {  border:none; 	 outline:none;	  }

a 	 {
	text-decoration: none;
	color:#aaa; 
	}
a:hover		{
	
}

en ça :

a, a img, object {border: none; outline: none;	}

a {text-decoration: none; color: #aaa;}

Modifié par Muchos (27 Apr 2012 - 00:27)

kustolovic a écrit :


Sur la page programmation, le haut de la dernière ligne de texte est coupé, c'est vraiment pas terrible.

ça y est j'ai corrigé ça, c'était prévu en fait

pour la couleur et le contraste, je leur en parlerai, ils sont tous en vacance, là...

merci pour tous vos retours.

C'est en effet une solution simple et efficace.

Pour l'image du dessus, que je n'avais pas vue auparavant, c'est en effet une solution. À l’œil, comme ça, je dirais qu'il va probablement falloir augmenter un peu le padding, afin que le texte n'ait pas l'air trop «coincé» dans le bloc de texte. Mais il faut voir ça sur la bête, pas sur un jpeg ultracompressé ^^.

a écrit :
pour la couleur et le contraste, je leur en parlerai, ils sont tous en vacance, là...

Ah ces saltimbanques, tous des traine-savates!

kustolovic a écrit :
C'est en effet une solution simple et efficace.

Pour l'image du dessus, que je n'avais pas vue auparavant, c'est en effet une solution. À l’œil, comme ça, je dirais qu'il va probablement falloir augmenter un peu le padding, afin que le texte n'ait pas l'air trop «coincé» dans le bloc de texte. Mais il faut voir ça sur la bête, pas sur un jpeg ultracompressé ^^.

excuse moi, tu parles de quelle image de dessus??? pas compris lol

je parlais de celle postée par… muchos, du coup je croyais que c'était une proposition de ta part, et je me suis trompé.