Bonjour !

J'ai développé il y a peu mon portfolio et j'aimerais avoir des avis et critiques dessus.

De formation Communication à la base, je suis fraîchement sorti d'une troisième année de spécialisation dans le Multimédia. Du coup, je suis encore débutant et j'ai énormément à apprendre.

Il est à mon avis difficile de pouvoir juger sois même de ses créations, j'implore donc votre aide Smiley smile

Je suis plutôt orienté vers le développement (AS2\AS3 et PHP), ne vous étonnez donc pas si le graphisme est un peu... particulier.

Voici l'adresse :

http://www.cneude-createur-web.fr/
Salut,

Voici mes remarques.

Lorsque je désactive les images tout en gardant les CSS chargées, ton logo, les drapeaux et les captures d'écran de tes derniers travaux disparaissent. Or, on a affaire à des images de contenu : elles doivent donc être insérées en dur dans le code HTML, avec l'attribut alt renseigné en bonne et due forme. Il en est de même pour les captures d'écran sur les pages sites Internet et animations Flash.

La langue de chaque page n'est pas indiquée dans le code HTML : ajoute dans la balise ouvrante <html> les attributs xml:lang="fr" et lang="fr" ("en" pour les pages en anglais).

Pour les liens permettant de passer d'une langue à l'autre, j'éviterais d'utiliser des drapeaux : n'oublie pas qu'il y a des francophones et des anglophones qui ne sont ni Français ni Britanniques. Smiley cligne

L'élément meta keywords est inutile, puisqu'il n'est plus pris en compte par les moteurs de recherche dans leur algorithme.

Dans l'encart montrant tes derniers travaux, il y a une incohérence : tantôt les liens s'ouvrent sur une nouvelle fenêtre (ou un nouvel onglet, c'est selon), tantôt non. Soit dit en passant, si un lien s'ouvre sur une nouvelle fenêtre, il est de bon ton de prévenir l'utilisateur ; mais, le mieux est de n'ouvrir aucun lien sur une nouvelle fenêtre : ce genre d'ouverture peut gêner l'utilisateur, qui aura l'impression qu'on lui impose une façon de naviguer qui n'est pas toujours la sienne.

Tu emploies des titres de section et c'est bien. Cela dit, sur la page d'accueil, le h2 sur « ...qui souligne vos meilleures idées ! » n'est pas pertinent, ce texte figurant mieux dans le titre de section « Webmaster et développeur : pour une communication... ». Quant à la hiérarchie des titres, pour la page d'accueil, je la verrais comme suit :
* h1 le logo,
* h2 « Webmaster et développeur : pour une communication qui souligne vos meilleures idées ! »,
* h2 « Compétences techniques mises en œuvre »,
* h3 « Réalisation »,
* h3 « Animation »,
* h3 « Communication »,
* h3 « Logiciels et langages »,
* h2 « Derniers travaux ».

L'énumération de tes compétences doit être structurée avec des listes (ul / li) plutôt qu'avec de simples paragraphes.

Le menu de navigation du bas est redondant. Je n'y garderais que le lien vers les mentions légales (et éventuellement le lien contact), ainsi que les liens Facebook, Viadeo et consorts. En outre, le picto Twitter, le picto MSN et le picto Skype pointent vers ta page contact : ils sont donc à supprimer (sauf si tu crées un lien vers ton compte Twitter, évidemment). De plus, évite d'afficher en clair ton adresse mail (à moins que tu n'adores te faire spammer Smiley langue ).

Ton formulaire de contact est codé avec un tableau de mise en forme, ce qui est parfaitement inutile, même pour aligner les champs de saisie. De plus, tu n'utilises pas l'élément label pour associer les étiquettes de champ à leur champ respectif ; or, l'utiliser rendra ton formulaire plus accessible, ne serait-ce que pour les utilisateurs qui aiment bien cliquer sur l'étiquette de champ pour remplir un champ ou cocher une case. Les liens situés à côté de ton formulaire de contact gagneraient mieux à être structurés sous forme de listes (ul / li), plutôt qu'avec strong + br. Une fois de plus, même s'il agit de tes identifiants MSN ou Skype, évite de les indiquer en clair : même la messagerie instantanée n'est pas à l'abri du spam.

La page liens est inutile et est même à la limite de l'amateurisme, ou plutôt du webmaster découvrant le référencement. Que tu inscrives ton site sur des annuaires Web pour obtenir les premiers liens retours, c'est ton droit ; mais, tu peux très bien éviter de mettre des liens vers les annuaires sur lesquels ton site est inscrit. Et si les annuaires en question t'obligent à apposer un lien vers eux, oublie-les. De plus, vu que la page en question ne comporte que des liens vers des annuaires, Google peut la considérer comme une page de vente de liens et pénaliser ton site. Cela dit, vu que tu soumets ton site à la critique sur ce forum et que, dans ton message, tu fournis un lien qui y mène, sache que les robots des moteurs de recherche ont de fortes chances de suivre ce lien et d'indexer ton site ; comme quoi les annuaires Web ne sont pas indispensables pour le référencement. Smiley cligne
Tout d'abord, merci pour toutes ces corrections ! C'est vraiment sympa et ça va me permettre de progresser.

J'ai d'ailleurs tout corrigé... Smiley smile

La plupart de tes corrections me semblent évidente maintenant, et pourtant le nez dans mon site je n'ai pas vu ces erreurs.

J'aimerais revenir sur les titres de sections : j'ai carrément tout changé, le logo est à présent un h1 sur toutes mes pages et mes titres de "rubriques" sont des h2 (les sous titres des h3).
Cependant, que doit désigner le h1 exactement ? Le contenu de la page ? Il doit représenter le site en lui même ?

La seule chose que je n'ai pas corrigé, c'est mes adresses mails et de messageries diverses qui sont renseignés directement sur le site. Certes, c'est un appel au spam, mais je cherche activement des clients et je pense que mettre seulement un formulaire de contact peut rebuter l'utilisateur. Personnellement, j'aime mieux utiliser mon bon vieux Thunderbird avec tous mes outils de mise en page, et je suppose que je ne suis pas le seul.

Autrement je suis d'accord avec toutes les remarques, et j'ai appris pas mal de truc en même temps : l'importance des listes, les images porteuses de contenu qui doivent être inscrites en dur dans le HTML...

C'est fou ce que l'école ne nous apprend pas Smiley langue je vais de ce pas (re)lire les recommandation du W3C.

Autrement, des avis sur le design, la typographie, la mise en page ? N'hésitez pas, même si ce n'est pour dire que du mal.
Modifié par Thanatosss (12 Jan 2011 - 11:49)
Thanatosss a écrit :
Cependant, que doit désigner le h1 exactement ? Le contenu de la page ? Il doit représenter le site en lui même ?

Le h1 représente un titre de section de niveau 1, donc le niveau le plus élevé dans la hiérarchie des titres. Il peut y en avoir plusieurs ; en tout cas, il doit en avoir un dans la page Web.

Comme les h2 à h6, il doit décrire la section qu'il introduit. Pour mieux appréhender la manière d'implémenter les titres de section et mieux choisir le niveau adéquat, considère les h1 à h6 comme autant d'entrées dans une table des matières. D'ailleurs, les logiciels de lecture d'écran, voire le navigateur Opera, offrent la possibilité de parcourir une page Web titre de section par titre de section, au moyen d'un raccourci clavier ; ainsi, une bonne hiérarchie des titres de section constitue un point précieux en matière d'accessibilité.