[Fermé] Refonte graphique

Bonsoir,

Je travaille pour la refonte d'un site. Ne connaissant pas Php, j'ai simplement travaillé sur le thème en HTML/CSS, charge au développeur de l'intégrer ensuite.
J'ai donc mis en ligne mes fichiers Html sur une adresse provisoire.
Je vous présente un travail inachevé en espérant que cela ne déroge pas aux règles du forum.

Merci d'avance pour vos critiques et vos conseils avisés !
Modifié par thelma (19 Sep 2010 - 09:42)

Bonjour,

thelma a écrit :
Je vous présente un travail inachevé en espérant que cela ne déroge pas aux règles du forum.

Aucun problème



Graphiquement, c'est la pagaille sous IE6. Et, surtout, le menu est totalement inutilisable (les portions déroulante se superposent à ce qu'il y a en dessous rendant les intitulés de liens illisibles).

Je ne suis pas fan de l'image de fond "dégradé dans tous les sens". Les couleurs sont un peu trop vives (et ne se marient pas tellement bien).


Pour le code :
* Tu as une erreur de code (espace manquant) à corriger.

* Tu ne précise pas la langue du document via la meta Content-Language (qui est a utiliser quand le serveur n'envoie pas l'information).

* Il est préférable de placer les scripts JS en fin de document et de les regrouper en aussi peu de fichiers que possible (1 c'est bien).

* Attention à bien remplir les alt de tes images. Le alt doit reprendre le même contenu que l'image (donc l'image logo.png sur laquelle est écrit "Trajéco" doit avoir comme alt "Trajéco" et non "logo).

* Ta hiérarchie des titres n'est pas correcte, elle commence à h2 au lieu de h1. De plus les niveaux de titre doivent être attribué en fonction de la hiérarchie de contenu non en fonction de la taille d'affichage souhaité (les titres de ta sidebar sont plus des h2 que des h3 (ils descendent du h1 (que tu n'a pas) et non du dernier h2 de la page (rechercher un trajet)).

* Tu n'utilise pas les labels pour tous les formulaires.

* Les tableaux de présentation sont à éviter.

* Un "<h3 class="sous-titre">" ne serait pas plutôt un h4 ? (ou h3 si on met les autre en h2, comme la hiérarchie le voudrait)

* Les liens du type "lire la suite..." sont à éviter, il est préférable de leur donner un intitulé explicite.

* Les logos de validation en bas de page ne font pas très sérieux (surtout quand ils mènent vers une page indiquant que le document n'est pas valide).

Bonne continuation.

Bonjour,
> L'accessibilité au clic du menu n'est pas idéale, en générale il vaut mieux le placer plus conventionnellement sous le bandeau identitaire, cette zone étant réservés aux liens annexes, ou une barre d'outils, c-a-d des éléments dont la fréquence d'utilisation est plus faible que le menu principal.

> les courbes du logotype ne sont pas lissées, ça fait pas très propre

> niveau couleurs, aucun problème d'harmonie mais le fond flouté ne se justifie pas tellement ici, on est pas sur un site de photos
D'autre part la différence de luminosité selon les zones engendre un contraste fond/texte trop faible (Bienvenue sur Traeco...); tout le monde ne voit pas les contrastes comme tu les vois

> Le rose bonbon en quantité importantes n'est peut-être pas le meilleur choix à faire en couleur complémentaire (niveau connotations) même s'il reprends le rose du logo, conserver la même teinte mais l'assombrir un peu pourrait convenir.

> Attention à ne pas trop resserrer les interlettrages (titres en rose)

> Il manquerait un visuel photographique pour illustrer le propos et identifier plus rapidement de quoi traite le site.

> Le menu gagnerait à être travailler un peu plus (filet séparateurs, flèches...)

> Attention aux alignement horizontaux titres/textes.

> Il manque un alt "Inscrivez-vous" sur le bouton Inscrivez-vous et des espacements intérieurs de chaque côté.

EDIT

Laurie-Anne a écrit :

Je ne suis pas fan de l'image de fond "dégradé dans tous les sens". Les couleurs sont un peu trop vives (et ne se marient pas tellement bien).

C'est un point de vue subjectif mais non il n'y a aucun problème flagrant d'harmonie et les couleurs utilisées sont issues du logo
Modifié par Hermann (19 Sep 2010 - 11:39)

Merci beaucoup pour vos commentaires.

Je vais retravailler tout ça, en suivant vos conseils.

Laurie-Anne a écrit :
Graphiquement, c'est la pagaille sous IE6. Et, surtout, le menu est totalement inutilisable (les portions déroulante se superposent à ce qu'il y a en dessous rendant les intitulés de liens illisibles).

Oui, effectivement, y a comme un problème... Je vais revoir ça.

Hermann a écrit :
les courbes du logotype ne sont pas lissées, ça fait pas très propre. Il manquerait un visuel photographique pour illustrer le propos et identifier plus rapidement de quoi traite le site

Pour l'instant, nous n'avons qu'un logo sur fond noir, que j'ai détouré.

Hermann a écrit :
le fond flouté ne se justifie pas tellement ici

C'est une de mes nombreuses difficultés en fait. Je n'en suis pas complètement satisfaite - notamment pour les raisons que tu indiques (cf. lisibilité/contraste)

Laurie-Anne a écrit :
Les tableaux de présentation sont à éviter.

Laurie-Anne, quand tu parles de tableaux de présentation, tu penses aux tableaux de la page "détails" par exemple ? Je suppose qu'il faudrait les remplacer par du CSS ?

Laurie-Anne a écrit :
Les liens du type "lire la suite..." sont à éviter, il est préférable de leur donner un intitulé explicite.

Aurais-tu un exemple ? C'est sans doute une mauvaise pratique, mais je vois couramment des sites avec des liens de ce type. Quelle serait la meilleure façon d'inciter le visiteur à cliquer pour découvrir le reste de l'article ? ou alors je n'ai pas compris ta remarque...

Merci encore une fois pour votre temps et votre aide !
Modifié par thelma (18 Sep 2010 - 20:50)

Salut,

thelma a écrit :
Aurais-tu un exemple ? C'est sans doute une mauvaise pratique, mais je vois couramment des sites avec des liens de ce type. Quelle serait la meilleure façon d'inciter le visiteur à cliquer pour découvrir le reste de l'article ? ou alors je n'ai pas compris ta remarque...

Ce n'est pas parce que tu le vois partout que c'est une bonne chose. Cela provient souvent des outils CMS qui sont malheureusement fait ainsi, ne prenant pas en grande considération l'accessibilité.
Donc idéalement il faut que les intitulés de tes liens soient explicite même sans avoir lu ce qui les précède. Ainsi, au lieu de "lire la suite", on préférera un lien du genre "lire la suite de [titre de l'article]".
Cela permettra d'éviter à ceux qui naviguent à l'aide d'une synthèse vocale entre les news d'un site d'entendre plusieurs fois "lire la suite", "lire la suite", "lire la suite", ... sans pour autant savoir de quelle suite il s'agit.
Modifié par Mikachu (14 Sep 2010 - 14:45)

Merci Mikachu pour les explications. Je comprends mieux

Laurie-Anne a écrit :

* Les liens du type "lire la suite..." sont à éviter, il est préférable de leur donner un intitulé explicite.

Préférable oui mais pas forcément à éviter à tout prix, voir plus bas.

Mikachu a écrit :
Salut,
Donc idéalement il faut que les intitulés de tes liens soient explicite même sans avoir lu ce qui les précède. Ainsi, au lieu de "lire la suite", on préférera un lien du genre "lire la suite de [titre de l'article]".
Cela permettra d'éviter à ceux qui naviguent à l'aide d'une synthèse vocale entre les news d'un site d'entendre plusieurs fois "lire la suite", "lire la suite", "lire la suite", ... sans pour autant savoir de quelle suite il s'agit.

Les WCAG 2.0 ont introduit la notion de liens en contexte, les dernières versions de certains lecteurs d'écran permettant d'avoir des informations du contexte dans lequel ils sont placés.
D'autre part et même si ce critère reste d'actualité au moins pour les référrenciels RGAA et Accessiweb 2, c'est un critère niveau OR, ce n'est donc pas primordial.

@thelma
Tu peux aussi mettre un lien sur le titre de section et ajouter un title complet sur le lien lire la suite (titel="Lire la suite de...") à défaut d'un libellé de lien explicite hors contexte.
Modifié par Hermann (14 Sep 2010 - 18:07)

J'ai retravaillé ma page d'accueil (je n'ai pas eu le temps de m'occuper des autres). J'ai notamment modifié le menu en espérant qu'il s'affiche bien sous IE 6 (je testerai ça demain) et vérifié que le code soit valide. J'ai aussi mis au propre le logo et changé la place du menu et repris la hiérarchie des titres.

Enfin voilà... il me reste encore bien du travail.

EDIT : j'ai enlevé le javascript pour le menu, mais je pense, maintenant, que ce n'était pas une bonne idée...
Modifié par thelma (18 Sep 2010 - 20:51)

thelma a écrit :

EDIT : j'ai enlevé le javascript pour le menu, mais je pense, maintenant, que ce n'était pas une bonne idée...

Mauvaise idée. Si le plug-in Superfish n'apportait aucune valeur ajoutée à un menu déroulant full CSS, il n'aurait pas été développé Principaux avantages : accès aux sous menus via un clavier, une synthèse vocale ou IE6.

Le logo est bien mieux comme ça.
Ton jeux de couleur est judicieusement choisi (vert pomme pour les éléments interactif, rose pour la titraille et bleu vert et dérivé pour le reste) et plutôt sympathique, après c'est une question de dosage, contraste et luminosité pour l'essentiel.

> Il manque sur l'accueil une description de la situation géographique.

> le fond du bloc introduit par Bienvenue sur Traeco devrait être uni et plus clair pour éviter d'avoir des niveaux de contraste trop faibles.

thelma a écrit :

il manque vraiment des éléments graphiques pour remplir tout ce blanc en haut ohwell ) et repris la hiérarchie des titres. Pour les couleurs et le fond, je dois dire que je ne suis pas très inspirée.

Tu as 2 possibilités: soit eu fais appel à une personne dont c'est métier, soit tu te formes.
Modifié par Hermann (19 Sep 2010 - 11:39)

Salut,

J'ai effectué quelques modifications. Superfish est de retour et lors de mes tests, ça fonctionnait avec IE6.
J'ai aussi mis un rose plus foncé et un fond sous le contenu des articles.

Je vais voir ce que je peux faire pour la localisation géographique : c'est une très bonne remarque.

Merci beaucoup Hermann pour ton aide. C'est vraiment très sympa d'avoir pris un peu de temps pour me conseiller !
Modifié par thelma (18 Sep 2010 - 20:34)

Bonjour,
dans l'ensemble c'est mieux mais :
> pourquoi une séparation aussi importante entre le menu et ce qui le suit?
> Il te manque "Se déplacer sans compter" dans le Alt, si les images sont absentes pour une raison ou une autre, cette info sera perdue. Un des principe de base de l'accessibilité est à fournir à l'utilisateur la même information quelque soit les conditions d'utilisation (sans Javascript, sans CSS, sans images, etc) tout cela combiné ou pas
> Penser à aligner verticalement les gros blocs de contenu autant que possible.
> Le vide important qui suit le bloc principal n'est pas très heureux.
Faire descendre le fond du bloc jusqu'en bas (mais de préférence rempli) ou réorganiser le contenu de manière unique sur la home.

Salut,

Finalement, j'ai presque tout repris. Je ne sais pas si c'est mieux
Mon seul véritable doute c'est pour le background - je ne sais pas dans quelle mesure l'image est pertinente par rapport au sujet (il faudrait que je prenne un peu plus de temps pour chercher). Sinon je suis contente du reste.
Modifié par thelma (18 Sep 2010 - 20:36)

C'est dans la bonne voie mais il y a encore pas mal de chose à améliorer...
Si tu es encore prête à recevoir des critiques, je te les ferai
Modifié par Hermann (17 Sep 2010 - 21:00)

Oui bien sûr, je suis toujours partante pour les avis et les critiques !

J'ai vu aussi que les titres n'étaient plus visibles sans les images de fond (police blanche sur fond blanc )

J'aimerais aussi que le fond change au rafraîchissement de la page, mais je ne sais pas si c'est réalisable et comment faire... à voir donc.

Sinon, j'ai une troisième version en cours de réflexion ; mais les avis m'intéressent pour cette version-là également.
Merci d'avance.
Modifié par thelma (18 Sep 2010 - 20:33)

Bonsoir,

J'ai vu rapidement le premier design... qui partait sur de bonnes choses.
La nouvelle mouture fait plus pro, mais (goût personnel sans doute) les boites imbriquées donnent un aspect compliqué.
* Le menu est pas mal, mais il pourrait combler le vide blanc à droite du logo (et éventuellement déplacer le slogan "se déplacer sans compter" sous le logo). Il me semble que ceci est une pratique qui tend à se généraliser, le menu à côté du logo (mais je peux me tromper ou exagérer)
* du coup, le texte de présentation se placerait juste en dessous du logo, niveau efficacité c'est assez percutant.
* Le ciel en guise de fond serait mieux sans la prairie, et cela donnerait d'avantage de légèreté visuelle.
* la police mériterait d'être travaillée davantage : éviter le noir sur blanc, préférer un gris foncé, et réduire légèrement la taille des petits textes. Les contrastes entre les titres et les textes se jouent sur la taille et la graisse en plus de la couleur.
* pour le fond aléatoire, la meilleure solution est de le générer avec PHP.

Bonne soirée.


PS. les coins arrondis des blocs sont visibles sous Google Chrome mais pas sous FF (3.6)
Modifié par darkstar2023 (18 Sep 2010 - 01:27)

Bonjour,
la réponse du serveur est anormalement longue, la page ne se charge qu'après 1 minute environ!

Bonjour,

Je suis désolée Hermann, mais je pense que cela vient de l'hébergeur et malheureusement je ne peux rien y faire. En espérant que cela s'améliore bientôt.

Merci pour les remarques Darkstar2023. Je vais réfléchir à la disposition Logo/Menu que tu proposes.

Voilà ma troisième mouture : disparition des blocs qui surchargent et du fond qui me pose beaucoup de problème. Un style beaucoup plus épuré. J'ai enlevé le bouton "inscrivez vous", il va peut-être revenir sous une autre forme.
infosaison.toile-libre.org/traecohtml3/accueil.html
(désolée, c'est sur le même serveur mais je n'ai pas de solution alternative pour l'instant).
Modifié par Hermann (19 Sep 2010 - 11:40)

thelma a écrit :

Je suis désolée Hermann, mais je pense que cela vient de l'hébergeur et malheureusement je ne peux rien y faire. En espérant que cela s'améliore bientôt.

Si, les appeler pour leur demander une explication ou changer d"hébergeur.
Ca fait 2 fois il me semble que je rencontre ce blocage qui ne devrait pas avoir lieu.
Si le problème se produit trop souvent tu perdras des visiteurs à coup sûr!
Ce type de problème est complètement inacceptable chez un hébergeur et je te conseil de te tourner vers un autre hébergeur si ce n'était pas que provisoire.

Comme le site n'est manifestement pas encore terminé, je préfère ne plus en faire la critique et attendre que tu soumettes la version finale (avec le bandeau identitaire).
Modifié par Hermann (18 Sep 2010 - 21:17)

D'accord je te remercie. Je vais clore le sujet. Je vous remercie tous pour votre aide.
Désolée pour les problèmes de connexion au serveur.

Bonne soirée
A bientôt