3246 sujets

Critiques de vos sites: code et design

Futur portofolio [résolu]

Bonjour à tous,

Je viens souvent pour voir les réalisations et les astuces d'AlsaCréations et je me suis finalement lancé ... Actuellement, j'ai un devoir en Techno du Web et j'ai réalisé un site. On a pris comme thème le classement de films, manga et séries (prenez pas compte du contenu .... svp on a fait du copier-coller en grande partie sur les sites citer en référence dans la pge à propos ...)

Ce que je voudrais, c'est votre avis sur le design ... bref ce que vous savez bien faire ^^. Parce que je voudrais le transformer en Porto-folio une fois que le prof soit passé dessus ...

Clliquez ici pour voir le futur design de mon portofolio

Les pages qui marchent sont :
- l'accueil
- film
- manga
- serie
- a propos
- et le permier de chaque classement
- le reste des liens mènent à une page 404 personnalisée ...

désolé que le site soit pas complet ... on était limité en nombre de page ....

Merci d'avance ....

PS: désolé pour certains qui tomberons sur une page de pub jaune de temps en temps ... j'utilise un serveur gratuit .... Smiley biggol
Modifié par Craft (25 Nov 2006 - 08:21)
Idem, joli boulot.
C'est juste dommage que la section en cours ne soit pas identifié sur les onglets aussi (comme le dit Eldebaran).

Peut-être en laissant le lien en status :hover ? et en supprimant le lien.
Salut,

J'aime bien, sobre et efficace, le système de couleur sur chaque page est pas mal. Très agréable de surfer dessus.

Je reproche le manque de lisibilité et de contraste des liens si on a pas la souris dessus. Cela force l'utilisateur à bouger sa souris pour retrouver le bon. Et je suis sur PC, je parle même pas du contraste encore pire sur mac...
Je suis partisan moi aussi de marquer la page en cours.

Concernant les couleurs, je trouve que la couleur du fond gris et de la barre grise est un peu trop présente, et terne. L'ombrage très marqué de la barre en haut renforce encore ce trop fort contraste. Je pense qu'il faudrait un gris déja plus clair, ou dégradé vers le noir, si possible un gris légèrement teinté, tirant vers un bleu, un orange ou un rouge (à choisir selon tes goûts). Cela supprimerait cet effet neutre trop neutre et austère de ce fond.

En général je suis pas fan des liens qui bougent quand on passe la souris dessus, et çà se confirme... Quand je place mon curseur de souris tout au début d'un lien, celui ci se déplace en position hover, mais comme ma souris n'est plus dessus il revient en position link, du coup si je bouge pas mon curseur, ca provoque un clignottement très désagréable (je ne connais pas les éventuelles conséquences pour un épileptique...).

Si on désactive les images, le texte devient très peu lisible sur ce fond gris. Il faudrait rajouter une couleur de fond au conteneur central aussi claire que le blanc actuel de manière à ce que le texte reste lisible.

Je ne suis pas convaincu de la nécessité de doubler ton menu. Le fait que le menu vertical soit traité en image ne t'oblige pas à le remettre en texte si celui en image est bien renseigné au niveau des alts. La redondance n'est jamais très bonne. Ceci dit les liens sont les mêmes et ne provoquent pas de confusion, et ils semblent toujours rester accessibles dans une forme ou dans l'autre (avec ou sans css, images désactivées).

	<a href="index.html" class="menu-h_rouge">
			Accueil
	</a> . <a href="film.html" class="menu-h_rouge">
			Films
	</a> . <a href="manga.html" class="menu-h_rouge">
			Manga
	</a> . <a href="serie.html" class="menu-h_rouge">
			Séries
	</a> . <a href="404.html" class="menu-h_rouge">
			Forum
	</a> . <a href="about.html" class="menu-h_rouge">
			A propos
	</a>

Pourquoi ne pas modifier cela pour alléger ton code


<ul class="menu-h_rouge">
<li><a href="index.html">Accueil</a></li> . 
<li><a href="film.html">Films</a></li> . 
<li><a href="manga.html">Manga</a></li> .
<li><a href="serie.html">Séries</a></li> .
etc.
</ul>


en spécifiant dans la css
ul.menu-h_rouge a {
la même chose que spécifié pour ta classe menu-h_rouge actuelle
}


Pour du fignolage, j'alignerai les liens "hauts de pages" ou la date sur la droite du paragraphe et non sur la droite du filet. Ca donne une impression de décalage légèrement perturbant pour l'oeil.
Merci beaucoup pour cette réponse ô tant détaillée ^^ ça fait toujoursplaisir d'avoir l'avis d'une personne habituée dans le domaine ^^

En effet, le thème général du site étant de plonger l'internaute dans un ambiance simpliste .. où il est devant un cahier/classeur.

Maintenant que tu (j'espère que je peux te tutoyer) me fais la remarque c'est vrai qu'il fait un peu terne mon gris .. je vais le changer en un gris bleuté peut être ^^

Pour les liens qui clognotent ... j'avais pas vue ce petit détail assez génant .. je vais de ce pas l'enlever .. ou remplacer le margin par un padding ... et ajouter une couleur blanche derrière le div générale des écritures ...

Merci encore ... pour l'idée d'alléger mon code ... j'aurais jamais penser à faire comme ça ...

d'autre critiques ? Allez-y vous gêner pas vous pouver me charcuter ...
Modifié par Craft (17 Nov 2006 - 19:36)
a écrit :

Pourquoi ne pas modifier cela pour alléger ton code

<ul class="menu-h_rouge">

<li><a href="index.html">Accueil</a></li> .

<li><a href="film.html">Films</a></li> .

<li><a href="manga.html">Manga</a></li> .

<li><a href="serie.html">Séries</a></li> .

etc.

</ul>



Quand j'essaie de faire ça .. le code ne passe plus la validation ... parce qu'on me dis que je n'ai pas le droit d'inscrire quoique ce soit en des balise li ... sinon bah je les enlève ... c'est pas si grave ... c'était juste à titre de remarque ... (désolé pour le double-post).
Salut,

Désolé j'étais pas super réveillé hier matin je crois... Mets les points à l'intérieur des <li> comme ci-dessous, ca devrait marcher.
<ul class="menu-h_rouge">
<li><a href="index.html">Accueil</a> . </li>
<li><a href="film.html">Films</a> . </li>
<li><a href="manga.html">Manga</a> . </li>
<li><a href="serie.html">Séries</a> . </li>
etc.
</ul>
Merci beaucoup ... je viens de régler tout ce que vous avez dit en haut ... enfin je crois) .. il reste plus que le gris à changer .. je verrais ça plus tard ....

L'adresse est toujours la même ...

d'autres suggestions ?
Modifié par Craft (19 Nov 2006 - 16:13)
Modérateur
Salut,

Comme les autres, je trouve ton site plutôt propre et bien conçu dans l'ensemble.

Je regrette néanmoins le manque de contraste sur tes onglets ainsi que sur le menu haut, comme l'a précisé Mikachu.

Une autre chose : Je retravaillerais les entêtes... La police de droite est un peu trop fine ou... "chétive" comparée à celle employée pour Best-of. Je ne suis pas sûr qu'elle soit la plus adaptée.

J'ai aussi une impression de vide lorsque je regarde ces entêtes... Personnellement, j'aurais tendance à déporter les écritures un peu plus à gauche et j'intégrerais un nouvel élément sur le côté droit... si possible en rapport avec la section traitée et utilisant la couleur dominante de celle-ci... (ex: une pellicule pour la partie film, un visage pour la partie manga, etc...) ou en jouant d'effets accompagnant la photo du coin haut droit.
Modifié par koala64 (19 Nov 2006 - 21:19)
Sympa ton site, dommage que le contraste entre le texte des onglets et le fond de chacun de ces derniers soit si faible.
Si certaines personnes ont un quelconque handicap visuel, la lecture est loin d'être facilitée. Smiley biggol

Sinon sur le reste je n'ai rien à dire de particulier
Merci à tous ...

Je crois que je vais tout recommancer ^^ pour les couleur .. je vais garder à peu près lemême système de navigation mais les emplacements et les couleurs vont changer ...

merci encore ...

Je considère ce post comme résolu ...

@ prochaine
Bonjour,
Apparemment des efforts ont été fait pour que le site soit visible avec tout les navigateurs. Alors pourquoi ne parler que de firefox et internet explorer ? je pense notamment à cette page. il en existe plein d'autre : Opera, Safari, Konqueror, Kameleon, Netscape... . Autant dire qu'il est accessible à tous les navigateurs, il me semble que c'est le but et comme ça personne n'est brimé Smiley bawling .

Ce n'est que mon avis bien sûr.
bonjour et bon week end ...

a écrit :
Alors pourquoi ne parler que de firefox et internet explorer ?


parce que je n'ai pas encore tester pour les autres naviguateurs ... merci de me dire que çamarche quasiement partout ^^ ça m'évite de tout installer (ou émuler) ...
Modifié par Craft (02 Dec 2006 - 06:20)
Sujet clos
Aller à