Salut,

Un petit lifting de printemps (il pleut des cordes au moment où j'écris !).

Il reste encore quelques détails à peaufiner.
Le plus dur étant de savoir quand s'arrêter, et faut-il déjà en avoir envie !

Les yeux neufs et les âmes pleines de recule sont les bienvenus...

Merci, Smiley smile

Sam

(redirection faite pour les stats et Googleuuuu... merci de votre compréhension)

ha... et je mets "intermédiaire" vu que je sais avoir encore pas mal de progrès à faire...
Modifié par Samiaule (08 Apr 2010 - 09:47)
Bonjour,

Avant toute chose pourrais-tu éditer ton message pour ajouter le nom de ton site ou son URL dans le titre ?



Graphiquement, Le logo est extrêmement dur à lire (d'ailleurs sans le titre de la page (qui est bien trop long) je n'aurais pas pu décoder. Les éléments du menu sont un peu "invisibles", je ne sais pas si c'est du au logo, imposant, ou juste à un manque de contraste, ou les deux. Le footer manque, lui, clairement de contraste.

Pour le code :
* Comme dit le titre de la page est bien trop long, d'autant que son "nom" apparait tout au bout (pour la première page ce n'est pas génial). Le <title> n'est pas fait pour inclure des mots clés !

* Pourquoi 18 lignes vides avant le doctype ? O_o

* Pourquoi spécifier "en" dans la meta Content-Language, la page n'est pas bilingue.

* La meta keyword n'est plus utilisée par les moteurs, elle peut donc être supprimée.

* La meta description, elle, est utilisée par les moteurs, mais pas pour le référencement. Elle sert à afficher une description du site sous le nom de la page dans les pages de résultats. La description doit donc être orienté vers le visiteur potentiel (pour lui donner de cliquer, ce qui n'est pas totalement le cas actuellement) plutôt que vers les robots (mot clés).

* Les meta Author, category, revisit-after, Robots (valeur par défaut), Publisher et Copyright ne servent absolument à rien et prennent de la place pour rien.

* Ceci :
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Est une bêtise ! Pourquoi vouloir qu'IE8 (et supérieurs) interprètent ta page, presque, comme si elle était vue par IE7 ?

* 4 feuilles de styles c'est beaucoup d'appel serveur, ne serait-il pas possible de les fusionner ?

* Les liens vides c'est magique ! C'est totalement inaccessible mais ça conforte les gens dans leur idée que les images doivent se trouver dans le CSS (pis "les aveugles on s'en fout", ils utilisent pas d'ordinateur, ce n’est pas Quentin qui me contredira Smiley rolleyes ). Une image porteuse de contenu (typiquement qui a du texte écrit dessus) ou support de lien doit TOUJOURS se trouver dans le code HTML avec un attribut alt correctement rempli (la présence de title bourré de mots clés est par contre totalement déconseillée). Dans l'état actuel de ton site, si les images ne sont pas chargées (problème serveur, problème de connexion, dépassement de quota...) ou vue (lecteur d'écran, navigateur texte only...) ton site n'a pas de nom.

* Title PEUT être utiliser sur les liens pour apporter une information supplémentaire à l'intitulé du lien et nécessaire à la bonne navigation du visiteur. Ce n'est pas le cas de ceux appliqué sur les liens vides vers l'index. Inclure des mots clés dedans n'améliorera en rien ton référencement et risque de perturber le visiteur.

* Ton utilisation des titres de section hn est tout simplement n'importequoiesque. Les éléments Hn servent à baliser, comme leur intitulé l'indique, des titres de section ; pas des paragraphes !

* L'attribut alt d'une image peut être vide, quand l'image est purement décorative :
<img src="images/Question-Web130x130.jpg" width="130" height="130" alt="Question Tarifs site internet voiron" />
Tu trouves le texte alternatif intelligible ?


Sans vouloir t'offenser, le design de ton site est sympa, mais il faut absolument que tu revoies ton code : tu as clairement voulu optimiser ton référencement à grand coup de mots clés et de mise en titres, du coup ton site ne respecte aucune sémantique et en pâti niveau accessibilité.
Salut Laurie-Anne et merci pour tes observations.

Laurie-Anne a écrit :

Graphiquement, Le logo est extrêmement dur à lire (d'ailleurs sans le titre de la page (qui est bien trop long) je n'aurais pas pu décoder. Les éléments du menu sont un peu "invisibles", je ne sais pas si c'est du au logo, imposant, ou juste à un manque de contraste, ou les deux. Le footer manque, lui, clairement de contraste.

Le logo, trop "new-school" pour certains ne se dévoile pas au premier coup d'œil j'en conviens et j'assume car c'est mon "style". On à le droit de ne pas aimer...

Laurie-Anne a écrit :

Pour le code :
* Comme dit le titre de la page est bien trop long, d'autant que son "nom" apparait tout au bout (pour la première page ce n'est pas génial). Le <title> n'est pas fait pour inclure des mots clés !

Ok, j'ai raccourci, mais stratégiquement le <title> à ses intérêts et certains sont d'avis que le
nom du site est plus à sa place en fin de ligne...

Laurie-Anne a écrit :

* Pourquoi 18 lignes vides avant le doctype ? O_o
* Pourquoi spécifier "en" dans la meta Content-Language, la page n'est pas bilingue.

* Si si... le site est partiellement bilingue et en devenir de l'être totalement... donc 18 lignes générées par ça probablement.
Je planche pour élucider...
<?php
require("lang/decide-lang.php");
?>


Laurie-Anne a écrit :

* Les meta Author, category, revisit-after, Robots (valeur par défaut), Publisher et Copyright ne servent absolument à rien et prennent de la place pour rien.
* Ceci :
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Est une bêtise ! Pourquoi vouloir qu'IE8 (et supérieurs) interprètent ta page, presque, comme si elle était vue par IE7 ?


Bah... de vieilles habitudes... je prends bonne note et m'en vais nettoyer ! Smiley smile


Laurie-Anne a écrit :

* Les liens vides c'est magique ! C'est totalement inaccessible mais ça conforte les gens dans leur idée que les images doivent se trouver dans le CSS (pis "les aveugles on s'en fout", ils utilisent pas d'ordinateur, ce n’est pas Quentin qui me contredira Smiley rolleyes ).


Non, les aveugles on s'en fout pas mais on a parfois des choix à faire en fonction d'un aspect visuel plutôt qu'un autre... On ne peut non plus arrêter de construire des escaliers sous prétexte que des gens sont en fauteuil. J'ai choisi une typo graphique pour mon menu et titré comme suit : title="Création Web" pour le lien vers la page éponyme... :\
Ok çà peut choquer les puristes des l'accessibilité... désolé (?)

Quoi qu'il en soit je fais tout mon possible pour améliorer çà...

Laurie-Anne a écrit :

* Ton utilisation des titres de section hn est tout simplement n'importequoiesque.


Mouais je dirais même scan-da-leuse (!!!). Mais c'est sûr que çà doit pouvoir s'améliorer avec des <p> et de simples "class" çà serait quand-même plus "propre"...

Laurie-Anne a écrit :

Sans vouloir t'offenser, le design de ton site est sympa, mais il faut absolument que tu revoies ton code : tu as clairement voulu optimiser ton référencement à grand coup de mots clés et de mise en titres, du coup ton site ne respecte aucune sémantique et en pâti niveau accessibilité.


Au boulot donc...
@+
Samiaule a écrit :
Le logo, trop "new-school" pour certains ne se dévoile pas au premier coup d'œil j'en conviens et j'assume car c'est mon "style". On à le droit de ne pas aimer...
Bah, en fait, ce n'est pas un problème d'aimer ou pas, c'est juste que je n'arrive pas à lire (je ne parlais pas du logo à gauche mais de celui (apparemment ce n'est pas le logo à proprement parer) à gauche. Le logo de droite est vraiment sympa.

Samiaule a écrit :
Ok, j'ai raccourci, mais stratégiquement le <title> à ses intérêts et certains sont d'avis que le nom du site est plus à sa place en fin de ligne...
Tout à fait d'accord... pour les pages autre que l'accueil. Sur la page d'accueil, je considère que le plus important c'est le nom du site (j'arrive donc je veux savoir où je suis). Sur les autres pages effectivement indiquer le thème de la page en premier est une meilleure pratique (pour moi).

Samiaule a écrit :
Si si... le site est partiellement bilingue et en devenir de l'être totalement...
Le site, oui, pas la page ! La meta sert à définir les informations de la page en cours et non du site entier.

Samiaule a écrit :
Non, les aveugles on s'en fout pas mais on a parfois des choix à faire en fonction d'un aspect visuel plutôt qu'un autre... On ne peut non plus arrêter de construire des escaliers sous prétexte que des gens sont en fauteuil. J'ai choisi une typo graphique pour mon menu et titré comme suit : title="Création Web" pour le lien vers la page éponyme... :\
Ok çà peut choquer les puristes des l'accessibilité... désolé (?)
Le problème c'est que là tu as la possibilité de mettre un ascenseur et qu'à la place tu met une échelle en bois vermoulu ^^; (de toute façon qu'il soit question d'escalier ou autre, une image porteuse de contenu doit toujours être insérée dans le code HTML, si tu veux pouvoir accéder à ton deuxième étage, un escalier peint sur le mur ne suffit pas ^^; ).
Les images de ton logo et du nom du site devraient être codées :
<a><img src="" alt="Samstudio"></a>
Le fait de mettre title, ça n'apporte rien en terme d'accessibilité, au contraire, l'information qu'il porte n'étant pas la même que celle des images, cela perturbe à la lecture du code.
Bon, je viens de tester la navigation clavier avec Lynx et en effet je pense que je vais renoncer à mon menu 100% image/css et repasser en mode texte... Smiley biggol

Et heu... j'adore ta relance métaphorique sur les modes de déplacements verticaux !!
Smiley cligne
Samiaule a écrit :
Bon, je viens de tester la navigation clavier avec Lynx et en effet je pense que je vais renoncer à mon menu 100% image/css et repasser en mode texte... Smiley biggol
Non, pas forcément, ce qu'il faut c'est que les images ait un texte alternatif correct !
Les rollovers css (beethoven) se font sur une seule image en background avec des <li>... donc pas de "alt" mais en bossant dessus je trouve que, au final, avec une bonne fonte, la différence graphique est assez minime.

Par contre si je suis un raisonnement axé "accessibilité" et navigation clavier, je vais devoir repasser mon menu en haut de code...
Samiaule a écrit :
Les rollovers css (beethoven) se font sur une seule image en background avec des <li>... donc pas de "alt" mais en bossant dessus je trouve que, au final, avec une bonne fonte, la différence graphique est assez minime.
Il est tout à fait possible de faire des effet de roll-over en JavaScript (c'est même relativement conseillé).

Samiaule a écrit :
Par contre si je suis un raisonnement axé "accessibilité" et navigation clavier, je vais devoir repasser mon menu en haut de code...
Effectivement, ça peut être bien.
Laurie-Anne a écrit :
Il est tout à fait possible de faire des effet de roll-over en JavaScript (c'est même relativement conseillé).

Est-ce bien raisonnable ?

Sinon j'ai commencé à "nettoyer" ça va pas mal.
IE 6, 7, 8 on l'air de pas le prendre trop de travers... Smiley murf
Samiaule a écrit :
Est-ce bien raisonnable ?
Totalement, à partir du moment où c'est implémenté correctement. Au pire l'effet de roll-over ne se fait pas, le menu restant parfaitement fonctionnel.