Salut à tou(te)s,

Voilà après pas mal d'heures de taf, une version "bêta" du premier site web que je créé est en ligne (Et quoi de mieux que son book pour se faire la main! Smiley cligne )

Je le fais dans le cadre de ma formation en alternance de webdesigner et aussi de mon statut d'indépendant (graphiste print) et je voudrais avoir vos avis et critiques afin de l'optimiser au mieux!!

L'adresse : http://www.uncoindpixel.com/

Merci d'avance Smiley cligne
Modifié par UnCoindPixel (25 Jan 2012 - 13:25)
Salut,

Tu devrais modifier le titre de ton poste comme indiqué dans les règles du salon

Sinon il y a pas mal de chose à dire, surtout au niveau du code. Comme par exemple ton div #MEA, d'une part ça hiérarchie de titre est plus que douteuse, d'autre part tu as du contenu dans ton h1 & h2 que tu caches avec un top: -500px car tu souhaites mettre une image. Pourquoi ne pas plutôt mettre l'image dans ta balise h1 avec un alt pertinent (car de surcroit ton image porteuse de sens n'a pas d'attribut alt). Un petit article sur le bon usage des atribut alt au passage, car ce problème revient ponctuellement (comme pour te suivre sur facebook par exemple).

Au début de ta page tu commences mal avec une balise vide juste pour mettre ton image de fond (#barre). Il y a des moyens plus propre pour mettre une image décorative en css (sans devoir créer un div vide).

Tu es en XHTML et pourtant tu utilises des balises d'HTML5, tu t'es un peu emmêlé les pinceaux à ce niveau là. Tu met des name sur certain div ? pourquoi ?

Tu as pas mal de div qui ne servent à rien.

Tes titres (où tu utilises un class .titre) sont balisé par des div. Les titres en HTML se balisent avec les Hn, ça donne de la sémantique à ta page et les titres seront plus visibles dans les moteurs de recherche. De plus dans les images de tes titres bien souvent le alt ne convient pas comme par exemple pour « About » où tu as mis « Damien LEGENDRE Infographiste » comme alt, « About » aurait été plus juste.

Pourquoi utiliser un menu en anglais alors que ton site est en français ?

Ton formulaire n'a pas de label ni de placeholder, il faudrait rendre le tout plus accessible, surtout que quand on prend le focus dans un champ le texte reste là. Ça nuit à l'utilisabilité. Le texte devrait disparaître au focus.

Ton div #adresse aurait du être une liste (avis personnel).

Au niveau des meta, ta meta description est trop longue. Le meta keyword n'est plus prise en compte par google (pour les autres je ne sais pas ^^). Tu as des meta pas très utiles à mon avis comme : rating, subject, owner, copyright, robots. Il faudrait également veillez à rassembler les script js, quand c'est possible, dans un même fichier.

Bref le code est à revoir, surtout au niveau sémantique.

Au niveau du design, tu as quasi tout mis en italic, l'italic c'est sublime quand c'est utilisé avec parcimonie. De plus il n'est pas fait pour être utilisé comme ça, c'est pour plutôt mettre un mot ou un groupe de mot en exergue et pas des paragraphes entier. Ici ça nuit plus à la lisibilité qu'autre chose.

En espérant t'avoir fourni quelques pistes Smiley smile
Modifié par Gili (25 Jan 2012 - 13:28)
Ton site fait planter IE...

J'espère que ce n'est pas voulu...


En tout cas, impossible de juger de la forme, je n'ai accès qu'au code.

Sinon, 41 erreurs de code en transitionnel, c'est vraiment pas terrible Smiley ohwell Surtout quand on voir les erreurs.

Tu as des meta inutiles (et qui prennent inutilement de la place) : keywords, abstract, author, owner, rating, language, copyright, robots (valeurs par défaut). Tout peut être supprimé.

Tu as beaucoup trop de scripts externes il serait préférable de les regrouper en un seul fichier et de l'inclure en fin de document.

Ta hiérarchie des titres n'est pas correcte. Si tu ne veux pas mettre le nom de ton site en h1, alors mets le dans un <p>aragraphe. Suis ensuite l'ordre logique.

Attention aux alt sur les images ! Quand tu ne les oublies pas, il semble que tu abuses du copié/collé. Si plusieurs images consécutives ont le même contenu alternatif, il y a un problème de pertinence.

L'utilisation de plusieurs <br> consécutifs est toujours le signe qu'un nouveau paragraphe aurait du être créé.

J'ai la forte impression que tes "text2" et "text3" sont des titres de section...
Merci je vais regarder ça de très près Smiley smile

Tu as un outil qui te permet de détecter ces 41 erreurs? Ca pourrait m'aider
http://validator.w3.org/

À mettre en favoris direct ça ! ^^

Pour la conception de site web il y a deux addons indispensables disponibles pour firefox le premier s'appel firebug et le deuxieme c'est la web developer tool bar (qui te donne un raccourci pour valider ton site). Il existe des alternatives pour Chrome.
Modifié par Gili (25 Jan 2012 - 17:53)
Au niveau design, personnellement quand je regarde le site je vois un système axial c'est à dire basé sur un axe qui se trouve au centre. En gros il y a deux colonnes et tout le site est régi par cette règle, j'aime beaucoup.

Je trouve que l'agencement de la partie about est visuellement réussie, seulement dans cette partie il y a quelques petits problème. Par exemple pour le texte « CREATIF ET PASSIONNE » le texte « Damien LEGENDRE » est trop gros par rapport au reste, il prend trop presque au tant d'importance visuel que le titre, c'est une incohérence graphique à mon sens car il a moins d'importance vu que c'est une signature (une signature ne devrait pas être aussi visible qu'un titre).

12px je trouve ça définitivement trop petit, mais c'est un avis personnel. Ce qui est sur c'est que l'interligne est trop grand, ça nuit au gris typographique qui d'un coup n'est plus homogène.

Je trouve (encore un avis personnel) que tu devrais mettre une autre illustration à la place d'adobe.png, peut être garder le même principe (montré les outils que tu utilises) mais en plus illustré. Ici tu as juste mis les icones avec une ombre portée, hors tu as assez de talent en illustration (d'après ce que je vois) pour mettre une image plus visuel, plus représentative, plus original, plus personnel, plus « Un coin d'pixel » quoi Smiley ravi .

Toujours dans la partie « About », dans la catégorie « compétences » (où il manque un accent sur le e) tes titres sont à égal distance de leur contenu et du contenu du bas, résultat on ne sait pas trop quel titre appartient à quel texte. Il faudrait rapprocher les titres de leurs contenus en diminant leurs margin-bottom (créativité, technique, relationnel devrait être des h4). Je sais pas si tu me suis bien mais tu peux aller te renseigner sur la lois de Gestalt et plus particulièrement la lois de la proximité. Il faut, à mon sens, prendre compte de ce genre de chose quand on conçoit un design. Tu amélioras l'ergonomie, la lecture et le design de ton site d'un coup ^^.

J'aime beaucoup la texture de ton footer, là tu as une bonne base pour avoir un super beau footer, mais il manque encore « ce petit truc ». Par exemple le titre « Contactez-moi » devrais être sur le même plan visuel que « Un coin de pixel » (couleur, graisse et alignement).

J'aime beaucoup le visuel de MEA.png, c'est plutôt réussi à ce niveau.

Je trouve que ton slider n'est pas très bien mis en avant, mais ne me demande pas comment le mettre mieux en avant car c'est un avis totalement subjectif lol.

Le fond du site perso j'accroche pas trop. Je vois bien où tu veux nous enmener et l'idée est bonne mais pas très bien exploité (je trouve). Peut être des carré plus petit ? moins visisble ? je sais pas il faut tester.

Voilà perso mon avis sur le design mais c'est à prendre avec des pincettes car c'est un mélange entre subjectif et objectif ^^
Salut,

VOici ce que l'on obtient juste en cliquant sur envoyer dans ton formulaire
a écrit :

Merci!!
Votre message à bien été envoyé
Je vous réponds au plus vite!!.


Le tout sur une page blanche
Ce n'est pas top Smiley decu

Sinon j'aime bien le design, c'est structuré et agréable, en revanche la taille de la police des paragraphes est un peu petite, je dois zoomer sur mon Notebook

Le logo est génial, dommage de ne pas l'avoir décliné en favicon par exemple
Le 'CONTACTEZ-MOI !!' m'agresse personnellement.

Le nombre d'erreurs a été reduit Smiley smile en revanche tu utilises des balises HTML 5 comme <section> en XHTML transitional. Plusieurs fois la même id dans la même page n'est pas admis mets plutôt une class tu pourras la répéter plusieurs fois.

Le CV est sympa
Modifié par jmlapam (25 Jan 2012 - 20:51)
Yep

Pour le formulaire Php, c'est surtout que mes connaissances sont encore limités. Mais je prévois de me faire aider demain pour mettre ça en forme justement

NB: (j'ai du mettre le site en ligne en avance par rapport à la dead line car j'ai un évenement vendredi soir et je vais avoir pas mal de nouveaux contacts qui vont chercher à se connecter au site(c'est ma vie mais c'est pour expliquer le contexte))

Pour le favicon je n'y avais pas pensé Smiley biggrin Je m'y met ! Bien vu Smiley cligne Je vais regarder comment ca se créé avant quand même Smiley rolleyes (Petit néophyte que je suis Smiley lol )
Modifié par UnCoindPixel (25 Jan 2012 - 21:07)
Pas mal de modifs de faite (pas toutes encore) voila le rsultat : [Modération : le lien se trouve déjà dans le premier message]

Par contre étant débutant en codage, le script me pose vraiment pb pour le formulaire de contact... Smiley confus
Modifié par UnCoindPixel (07 Feb 2012 - 11:30)
Version finale en ligne !

J'ai juste un problème avec le formulaire de contact, comme vous le voyez, quand on envoi le formulaire on est redirigé sur mail.php et ça m'intéresse pas du tout ça Smiley langue

Si quelqu'un voit l'erreur ça m'aiderait. Smiley ravi Le Php et le js je suis pas encore au top Smiley biggol