..: www.gorgodzn.com :..

Voici mon site, nouvellement mis en ligne!
http://www.gorgodzn.com

Le welcoming critique,
de ceux qui voudront y prendre temps !

mercimerci
Modifié par gorgo (23 Feb 2010 - 00:15)

Bonjour aussi...

Merci de bien vouloir afficher le nom de ton site dans le titre du sujet, comme cela est demandé dans le message d'annonce de ce forum : "A lire avant de poster : Ergonomie, Design et demandes de critiques", sinon 99% des sujets de ce salon auraient le même titre évasif

ah ba ! Évidemment ! ... c'est pas idiot !
Si j'avais lu aussi !

sorrysorry!
Modifié par gorgo (23 Feb 2010 - 00:15)

Salut,

Bon ben j'aime bien, ces teintes sont assez atypiques sur le net, ca change un peu, c'est agréable. Il manquerait une petite couleur chaude de contraste, un petit jaune vert acidulé ou un jaune un peu orangé, utilisée avec parcimonie.

Par contre, le favicon animé est absolument useless en plus d'être énervant et d'attirer l'attention là ou il faut pas.

Ton site a un énorme défaut concernant sa largeur. Il déborde du cadre devenu quasi standard de la résolution 1024x768, alors qu'il n'y a pas lieu de déborder.
Il y a du coup une barre de défilement horizontale des plus fâcheuse, c'est plutôt gênant.
De plus, ton bandeau en biais "call me gorgami !" (à quoi sert-t-il réellement d'ailleurs ?) passe devant le menu.
Le lien cliquable de l'adresse mail disparait carrément à gauche hors du cadre du navigateur.
Bref, quand je vois ton design, je me dis qu'il serait même possible de le faire extensible, donc je trouve dommage que même à une résolution devenue minimale, il y ait perte de mise en forme et même d'information !

J'aime bien l'aspect général de la page "design", que je trouve très classe, mais j'ai peur que la lisibilité ne soit pas optimale. Surtout pour les textes en minuscule en gris, mais aussi pour évènementiel et publicité (d'ailleurs il manque le C à publicité).

Je trouve dommage que la page illustration ne soit pas plus dans la même veine, avec des vignettes de la même taille et un titrage et une légende identiques ou du moins similaires.

Niveau lisibilité, ton formulaire dans la page contact est complètement à revoir. les intitulés des champs sont à peine lisible, les champs eux même quasi invisible, mais pire rien ne montre le focus sur le champ actif !

Le "82" en filigrane de la page intro est assez moche, car il apparait un crénelage disgracieux. Et il se voit bien plus que les infos qui sont dessus.

Sur la page d'intro (la première en arrivant sur la racine du nom de domaine), pourquoi le bandeau ne comporte-t-il pas la même information que sur les autres pages (Gorgo design • graphic designer - Nantes) ? Pourquoi barrer ton nom et prénom ?

Donc au final une mise en forme sympa, mais qui mérite d'être un peu plus finalisée.

Bonjour,

Graphiquement c'est une catastrophe sous IE6 (j'ai d'ailleurs cru que ma connexion était ralentie ne voyant rien entre le menu et le fold).

Pour le code :
* 20 erreurs à corriger

* Tu ne déclare pas la langue du contenu dans la balise html

* Le titre de ta page est trop long (il ne s'affichera pas en entier) et ressemble plus à une liste de mots clés qu'à un titre de document.

* Ta balise meta description mériterais une description un peu plus sexy (là elle ne donne pas plus envie de visiter ton site qu'un autre).

* La balise meta keyword est totalement inutile, et inutilisée par les principaux moteurs de recherche, elle peut être supprimée.

* Les balises revisit-after, URL, author, Classification et copyright ne sont pas utilisée par les moteurs de recherche (même sort que keyword)

* Ta balise meta robot ayant ses valeurs par défaut, elle est également inutile.

* Il est préférable d'insérer les scripts JavaScript en fin de document et, autant que possible, dans des fichiers externes.

* Il est préférable d'appeler les images purement décoratives dans le CSS ; si ce type d'image est placé dans le code HTML, il ne faut pas remplir l'attribut alt (l'attribut alt servant à retranscrire le contenu porté par l'image) :

<img src="img/deco.png" alt="motifs"/>

* Dans la même idée, les images qui elle portent du contenu doivent offrir le même contenu dans leur alt :

<img src="img/construction.png" alt="gorgami" class="construction" />

Cette image porte le contenu "Call me Gorgami", le alt doit le refléter entièrement (et avec l'indication de changement de langue).

* target=_self ne sert absolument à rien (puisque c'est le comportement par défaut des liens

* target=_blank n'est pas vraiment recommandé. Oui, ça permet de garder les visiteurs sur la page tout en leur permettant d'en visiter une autre, blabla ; sauf que ça les embête plus qu'autre chose... Le visiteur sait très bien ouvrir une page dans un nouvel onglet/fenêtre s'il le souhaite, il sait aussi très bien se servir du bouton "Retour".

* Sur IE6, je ne sais pas trop pourquoi, mais je n'ai aucun indicateur que "Enter the ink laboratory" est un lien (pas de changement de couleur comme prévu dans la CSS, pas de modification du pointeur non plus), c'est à investiguer ^^;

* L'utilisation de title sur les liens sert à apporter une information supplémentaire et nécessaire à la bonne navigation du visiteur sur le site. Si le title paraphrase ou répète simplement l'intitulé du lien, il est non seulement inutile mais redondant (et donc potentiellement gênant).

<li class="current"><a href="#" style="color:#BA768D" title="index">Intro</a></li>
<li><a href="design.html" title="design graphique" target="_self">Design</a></li>
<li><a href="illustr.html" title="illustration" target="_self">illustration</a></li>
<li><a href="labo.html" title="laboratoire" target="_self">Laboratoire</a></li>
<li><a href="contact.html" target="_self" title="contact">contactMe</a></li>

Ici, clairement les titles sont inutiles et peuvent (devraient, même) donc être supprimés.

* Tes listes de compétences ne sont pas balisées comme elles le devraient :

<ul id="web">
    <li style="margin-bottom:10px; color: #333;">compétences :</li>
    <li style="color: #333;">Webdesign</li>
    <li class="ad">Langage(X)HTML</li>
    <li class="ad">Intégration CSS 3.0</li>
    <li class="ad">Programmation web</li>
    <li class="ad">Ergonomie</li>
    <li class="ad">Accessibilité</li>
    <li class="ad">Référencement naturel</li>
</ul>
<ul id="pao">
    <li style="color: #333;">Print </li>
    <li class="ad">Suite Créative CS4</li>
    <li class="ad">Profils colorimétriques</li>
    <li class="ad">Code typograhique</li>
</ul>

Ici, "compétences" est un titre de section regroupant les deux listes ; et "Webdesign" et "Print" (dont il faut baliser le changement de langue) sont les sous titres de la section "compétence" annonçant chacun le reste des éléments de la liste. Visuellement, la distinction est faite entre tous ces éléments ; cette distinction devrait également se faire dans le code.

* Le 82 qui se balade dans le code apporte t'il une information ? J'ai peur que non, et qu'au contraire il perturbe le visiteur (du moins celui qui utilise un lecteur d'écran ou un navigateur non graphique). Ce 82 devrait plutôt être une image de fond.

* Mettre une adresse en clair dans un mailto c'est appeler au spam ^^; Pour la santé de ta boite mail, je recommande plutôt l'utilisation d'un petit formulaire avec un captcha inversé (champs caché au visiteur ne devant pas être rempli mais que les robots ont tendance à remplir).

* Je l'ai cité au milieu d'autre remarque, mais : pense à baliser les changements de langue.

Bon courage

Mikachu

" Merci d'avoir tout ce temps! "

On va commencer par corriger les fautes d'orthographe!

Pour ce qui est de la taille je suis grand écran alors forcement !

- pour le background j'ai travailler mon général en moins de 1000 px;
le scroll vient sans doute du bouton contact callé à gauche !
dans la mesure où il ya doublon avec la barre de menu que je comptais également doublé près des mentions légales, j'me suis dis " ca va meubler pour ceux qui sont en king size"!

- Le " call me " meublait bien aussi ... c'était à la base mon bandeau construction et j'me suis dit " ben tiens dis don' et si j'le gardais "!
allé en float right, j'le pensais pas passer sur la barre de menu... donc bon effectivement.

- oki pour l'intituler dans le header de l'intro. un oubli merci.

- ok pour favicon je change !!!!!!

- la page design est à mon avis à revoir intégralement entre le texte en patte de mouche et le manque de projet! on est je pense pas bien nourrit.

- mon manque de contraste est effectivement un peu problèmatique ! et j'dois y penser car on perds beaucoup d'information.
- pour 82 j'ai mis une opacity alors chez moi il est quasi inexistant ...
sur quel navigateur es-tu?
- le focus sur le champ actif ? un petite barre d'écriture tu veux dire?
( Sais-tu comment cela se programme ? )

Voila pour avoir fait le tour de tes remarques !
Merci du temps accordé
Modifié par gorgo (23 Feb 2010 - 09:38)

Salut,

Je suis sur firefox 3.6, voilà un petit screen de ce que je vois pour le 82 :


Pour le champ actif, c'est avoir une démarcation visuelle sur le champ dans lequel le visiteur s'apprête à taper, soit dans lequel il a cliqué grâce à sa souris, soit dans lequel il est arrivé à force de tabuler dans la page. Cela se fait à l'aide de la pseudo classe :focus sur les <input> utilisés par ton formulaire. Mettre une bordure grise, même légère autour de ces mêmes <input> les rendraient déja plus visibles.

C'est ouf ce 82 !
'c'est du texte pourtant !!!! j'vais l'passer comme dis laurie-anne en image

Ca doit venir de l'opicity :0.5 ....
J'viens juste de découvrir ce style Css alors whaouh démentiel j'en ai mis partout!
Une vulgaire erreur non ?

oki pour formulaire j'fais ca dés ce soir !

J'ai pas optimisé pour IE6 mais à priori pas pour firefox 3.6 non plus !
Et ça c'est pas classe du tout !

gorgo a écrit :
* Il est préférable d'insérer les scripts JavaScript en fin de document et, autant que possible, dans des fichiers externes.
- J'vois pas tout à fait ce que tu dis... aurais -tu un article par exemple à me soumettre sur la question ?

Il s'agit tout simplement de mettre ce code tout à la fin de ton code html, au lieu de le mettre dans le <head> où il sera lu avant le contenu du site. Cela permet de privilégier l'affichage du site, et ensuite les effets voulus par les scripts se mettront en place en plus. Mais l'information sera directement accessible.

Normalement pas besoin d'optimisation pour Firefox 3.6, étant la dernière version, il doit être plus standard que les autres. IE6 par contre, c'est une autre histoire, mais les commentaires conditionnels sont là pour améliorer les choses spécifiquement sur ce navigateur.
Modifié par Mikachu (23 Feb 2010 - 10:20)

Bonjour,
J'aime bien le design ))
En revanche en visitant ton site je me suis mis sans faire exprès à la place de l'internaute ordinaire, avec ses réflexes spontanés, sa manière de lire les pages web... et l'internaute ordinaire aurait un peu de mal à déceler le lien d'entrée sur la première page (splash screen). Perso je suis peut-être idiot mais j'ai mis 30 secondes à trouver où c'était l'entrée.

Niveau ergonomie le faible contraste entre le texte gris clair le fond blanc peut fatiguer à la longue.
Étant sous Firefox 3.5, je ne peux pas cliquer sur "contactme" car masqué par le PNG "call me gorgami!". Par ailleurs l'onglet laboratoire est aussi en partie masqué (visuellement l'onglet est visible, mais le PNG transparent déborde un peu par dessus)

Dernière petite question (pas très utile) : le php/mysql fait-il partie de tes compétences ?
Modifié par darkstar2023 (23 Feb 2010 - 18:20)

Meri pour ces critiques! j'vois que vous montrez tous du doigt les mêmes problèmes!
Donc pas de surprises!
Si ce n'est ce bandeau à droite que j'vais tout bonnement virer !!!!
et deux astuces à planifier !

quelle est ta taille écran au juste ?

Sinon pour ta question !
Pour les langages de programmation!
J'me suis arraché les cheveux à faire un formulaire de contact il y a quelques mois avec le soutien d'alsa** !!
Du coup j'le rentabilise tout va tout vient !

Néanmoins j'ai mes édtions Eyrolles et la bible Php5 à mon chevet ! et espére la faire fleurir !

Du coup, j'suis allé voir ton site !
Tu te balades un peu !! ya de bonnes choses et j'te tire mon chapeau !

Désolé pour la réponse tardive.

Je suis en 1024*768 (et je vois une barre horizontale)
Pour l'histoire du menu masqué je pense qu'il suffirait juste de décaler le menu vers la gauche : le bandeau s'intègre bien comme cela et fait sans doute partie de ta charte graphique.
Et je posais la question car le terme webdesign est parfois utilisé abusivement alors qu'il désigne l'aspect graphique ET l'aspect technique.
Et bon courage pour ton apprentissage du php !

PS. Merci pour ton compliment !
Modifié par darkstar2023 (28 Feb 2010 - 03:25)

darkstar2023 a écrit :
Et je posais la question car le terme webdesign est parfois utilisé abusivement alors qu'il désigne l'aspect technique ET l'aspect graphique.

En anglais, oui. Mais comme on est sur un forum français, non : webdesign ne concerne que l'aspect graphique.

Miam j'aime les débats !

Alors ma grande Question !
Laurie-Anne, après lecture de ta " base line"
... offre moi une raison de défendre IE6.
Puisse-t-il y avoir bienfait lorsqu'on y voit que contrainte ?
J'en suis amèrement curieuse... "<li>" même pas le png j'veux dire ! c'est balo !
Modifié par gorgo (24 Feb 2010 - 02:23)

Alors, pour faire simple : IE6 est encore utilisé par 10~12% d'internautes dans le monde. La grande majorité de ces internautes n'ont pas le choix du navigateur qu'ils utilisent car ils ne possèdent pas la machine sur laquel il est installé. Les exclure de tes visiteurs doit être une décision réfléchie qui prend en compte la perte contre le gain.

Perdre 10% de visiteurs potentiels, ou
Gagner 1-2h de développement (il faut rarement plus quand on sait ce qui risque de poser problème).

merci,

j'ai effectué une bonne partie des corretions.
Par contre cchez mon Ie beugu' pas mal alors je ne sais pas si c'est moi.
Mais il semblerait que mon appel ie6 ne fonctionne pas !

    <!--[if lte IE 6]><link rel="stylesheet" media="screen" type="text/css" href="css/ie.css"/><![endif]-->

j'l'ai juste tester sur :

http://www.gorgodzn.com/intro.html

afin de remplacer le png de l'arrière plan par un gif et de faire sauter mon bandeau de droite!

en tout ccas je ne vois aucun changement !

Puissiez-vous en avoir réponse !
Modifié par gorgo (24 Feb 2010 - 13:36)

La feuille corrective pour IE6 doit être appelée après les feuilles de style "standard".

Salut,

2 points importants concernant la feuille de style spécifique IE6 :
* il est inutile de reprendre toutes les déclarations : il suffit d'écraser les précédentes par celles... spécifiques à IE6.
* pour pouvoir écraser les déclarations précédentes il faut que ces déclarations viennent après les précédentes et donc ce chargement de css doit être fait après celui de la feuille de style générique dans le code HTML.

Par ailleurs il faudrait corriger tes erreurs de validation.
Modifié par Heyoan (24 Feb 2010 - 13:50)