[pro] Cas-p.net / Graphiste illustrateur coloriste et webdesigner

Bonjour tout le monde
j'ai refait mon site dernièrement, et la nouvelle version est déjà en ligne bien que tout le contenu ne soit pas là (seul la rubrique graphisme à un peu de contenu pour le moment)
www.cas-p.net

Je me suis lancé dans l'html5 et le css3 avec des succès et des echecs...
Malgré PIE et compagnie je n'ai pas reussis à faire fonctionner le css3 sur IE7 par contre avec IE8 j'ai reussis en couplant à la fois PIE et IE9.JS ...
Bref j'aurai bien aimé que ca passe mieux sous IE7 mais tans pis.. (si quelqun à une solution je suis preneur )

A noté que je n'ai pas réussis à tout faire dans IE .. donc si vous voulez le voir au top de sa forme je recommande firefox, safari ou chrome.

Bref je vous soumet mon site histoire d'avoir quelques critiques au niveau du code je suis pas trop susceptible allez y franchement tant que c'est constructif ^^...

Cordialement.
casp.
Modifié par casp (18 Oct 2010 - 01:01)

Hello,

Graphiquement, c'est sympa

Une pratique assez énervante, que je pensais disparue, c'est la désactivation du clic droit (sous XP). Je ne sais pas quel script fait ça, mais c'est vraiment un truc à oublier : 1/ Tu charge du JS pour rien car 2/ C'est parfaitement inutile : tout ce qui est faisable en faisant clic droit > ... est faisable autrement

A part ça, au niveau du code :
- les perfs du site sont un peu négligées : tous ces fichiers JS doivent être réunis, les codes en ligne doivent être externalisés et les feuilles de style également réunies. Les appels de scripts gagneraient à être faits en fin de document, juste avant </body>

- la valeur de l'attribut content de la meta description devraient être utilisée pour le contenu d'une balise <title>, absente de ton document. Le contenu de la meta description correspond à la petite phrase affichée sous le titre du site dans l'index des moteurs de recherche : en gros, il faut un <title> puis une meta description un peu plus fournie [edit : sur la version anglaise, c'est un peu mieux, sauf que le contenu des deux éléments sont les mêmes]

- souci de sémantique sur tes différents menus de navigation : un menu étant une liste de liens hypertexte, on utilise logiquement une liste non-ordonnée pour la décrire (valable pour le menu principal, celui pour changer de langues ainsi que pour le menu situé dans le pied de document)
[edit] En fait tu utilise bien une liste pour ton menu ! seul problème, les liens sont situés en dehors de la liste Pourquoi avoir séparé les deux ? Dans tous les cas prévoir un title sur les liens pour préciser la page sur laquelle tu pointes

- le menu de navigation principal est sympathique, mais inaccessible (désactive les styles css ou les images afin de le voir)

- la navigation sur ce site est impossible au clavier : il faut laisser tomber les reset css de la propriété outline ! dans tous les cas, utiliser la pseudo classe :focus conjointement à :hover est à faire sytématiquement, comme ça pas de souci

- tant qu'à utiliser la spec html5, ce serait cool d'utiliser la gestion des rôles de chaque élément de ta page (attribut role sur les différents éléments structurant ta page)

- quelques retours chariots de mise en forme se sont glissés dans tes pages

- plusieurs divisons sont inutiles car directement imbriquées (notamment celles qui sont dans l'élément <article>

- tu utilises des attributs qui n'existent pas dans les specs, comme "tips"

Dernière chose, les liens vers les outils de validation html et css ne servent pas à grand chose (peut-être faire croire que le site est valide ?). Je te recommande de les retirer, d'autant que la vraie validation se fait en affichant le code source de la page

Bonjour,

Première remarque, le "mystery meat navigation menu" c'est pas forcément une bonne idée... Un menu doit être clair et facile à utiliser ; ce n'est pas le cas.

La suppression de l’outline sur les liens lors du focus empêche toute navigation au clavier... Il faut absolument le rétablir. De plus, toujours dans le domaine de la navigation au clavier, ton menu « mystery meat » ne se déroule pas au focus...

Si tu travaille à la fois sur Bruxelles et Paris, tu devrais savoir que le drapeau français peut être gênant... Le français n'étant pas parlé qu'en France (idem pour le drapeau anglais). Il est préférable d'utiliser les noms de langues plutôt qu'une de leurs régions.

Ton site est un full image ou tu à mis un script (débile) pour empêcher la sélection de texte ? Dans les deux cas, c'est une erreur. Bloquer le clic droit, c'est encore plus idiot (et en plus ça complique la vie de ceux qui veulent t'aider ici) et ça n'apporte strictement rien...

Ton site supporte très mal l'agrandissement du texte (pas de site, mais de texte seul), il est préférable de ne pas fixer la hauteur des éléments.

Les "+" à cliquer sont beaucoup trop petits, pourquoi ne pas mettre le lien sur le titre de la section ?

À quoi sert bouton « + » sous ton numéro de téléphone ?

Pour ce qui est du code :
* Tu as deux erreurs dans ton code. À corriger.

* Le body qui commence à la ligne 145, ce n’est jamais bon signe...

* Les scripts devraient être externalisés, regroupés en aussi peu de fichiers qui possible et, de préférence, placés en fin de document (sauf cas particuliers).

* Le titre de ta page est trop long (il ne s’affichage d’ailleurs pas en entier, ni dans les navigateurs, ni dans les moteurs de recherche). Le titre de la page ne doit pas servir à placer des mots clés, mais à situer la page dans le site et décrire rapidement son contenu.

* La description de la page ne doit pas non plus servir à placer des mots clés (ça n’apporte de toute façon rien en terme de référencement), elle doit donne une description du contenu de la page et donner envie au visiteur potentiel de visiter le site (pour rappel, la meta description n’est réellement utilisée que pour afficher une description de la page dans les résultats des moteurs de recherche).

* La meta generator ne sert strictement à rien.

* Les CSS devraient tous être externalisé (et regroupés en aussi peu de fichiers que possible).

* Le sens de navigation des liens (retour page d’accueil, page « qui ») n’est pas le même dans le code et visuellement, cela risque d’être un peu gênant pour les utilisateurs qui naviguent au clavier (on, ok sans l’outline, ils auront déjà quitté ton site, mais quand même).

* Le alt d’une image doit reprendre le même contenu que celui porté par l’image en question. Le alt « Cas-P cr&eacute;atif freelance &agrave; Bruxelles. » sur ton logo (qui porte un contenu totalement indéchiffrable) n’est absolument pas adapté. Là encore, tu essaye de placer des mots clés qui n’ont rien à faire ici. « Cas-P », avec éventuellement un « retour à l’accueil », serait le texte alternatif le plus approprié pour cette image.

* De plus, l’image évoquée ci-dessus n’est certainement pas un h2.

* En règle générale, un élément vide est un élément inutile. Quand cet élément est un lien, il y a un problème ; et un gros. Les images porteuse de contenu ou support de lien DOIVENT TOUJOURS se trouver dans le code HTML de la page et non pas dans les styles CSS. Les effets de roll-over se gèreront alors en JS (vu le nombre de scripts utilisés, ce n’est pas un de plus qui va déranger).

* Le grand nombre de styles in-line dans ton code rend celui-ci un peu fouillis, il serait préférable d’utiliser à 100% tes feuilles de styles externes.

* Le paragraphe qui commencer par « Bienvenue sur mon portfolio » n’est pas un h2, c’est un paragraphe.

* Pour baliser des listes à puces, il est préférable d’utiliser l’élément ul/li...

* Pourquoi placer des nofollow sur les liens internes de ton site ?

En bref : beaucoup d’erreurs de code, des « choses » qui ressemble à des tentatives d’optimisation de référencement (ratées), de gros problèmes d’accessibilité. Il y a beaucoup à corriger dans le code, mais également au niveau ergonomie.

Ouche alors euh... je vais corriger et essayer de répondre:

-Ok je supprime le script qui bloc les clics droits, effectivement ca sert pas à grand chose.

-Alors je vais regrouper un peu les styles pour ceux que je peux, mais ca va être difficile étant donné qu'une partie sont appelé par SPIP en dehors de mon contrôle.
Pour les scripts, selon l'ordre dans lequel ils ont placé certains deconne dans IE, ou pas.. bref ... c'est un peu la croix et la bannière pour les faire tous fonctionné. Et ils ne peuvent hélas pas tous être externe étant donné qu'une partie sont généré par des boucle SPIP (les scripts lié au menu)

- Pour la balise <title> il me semble pourtant en avoir une ainsi que la description.. Je vois mal comment faire plus clair ou plus long ma description.

- Pour mon menu he bien j'ai du séparer en deux ma liste pour obtenir l'effet caché du menu. sinon cela bug avec les z-index sous certain navigateur.

- Comment peut on désactivr les image sous firefox pour voir que le menu est inaccessible ? Pour ce qui est des style il me paraît accessible même si celui ci est désactivé non ?

- Je n'ai pas compris le truc du :focus et :hover pour la navigation clavier. j'ai supprimé ma ligne outline:0 du reset , est ce que cela suffit ?

- pour les rôles .. je ne sais pas bien comment les exploiter... Si c'est pour dire: <nav role="navigation"> je vois pas trop l'intérêt ??

- Pourquoi les retour chariot sont ils néfastes ?

- Au niveau des div imbriqué <article> je ne peux pas en supprimer sous peine de ne pas pouvoir réalisé ce style graphique. A un moment j'avais sréduit un div en mettant le style sur le <p> mais alors j'utilisais des br pour n'avoir qu'un seul P .. Vue que vous n'avez pas l'air d'iamé les br meiux vaux que je reste avec mes 3 div ?

- l'attribut "tips" oui .. c'est à cause de la shadowbox. Elle permet d'associer une légende à une image. Mais de base elle met cette légende en fonction de l'attribut "title". or celui ci génère une infobulle dans les navigateurs ce qui est problématique car je voulais avoir une légende avec un titre. Vu que je n'ia pas trouvé comment désactivé cette infobulle ... he bien j'ai crée le tips ^^. Car voir du code html dans une infobulle c'est pas beau. Donc he bien j'ai ajouté mon propre attribut. est ce que cela peux géner l'accessibilité ? Sachant que la légende complète est remis proprement dans le alt.

Qu'est ce que tu entend par:" d'autant que la vraie validation se fait en affichant le code source de la page cligne ".. bon je vais réflechri .. j'hésite à les supprimer je trouve ca mignon tout plein ces ptites images en bas

je vais réflechir pour les drapaux, j'hésite car même si ta remarque est juste, c'est aussi devenu un code graphique qui permet une compréhension plus rapide du rôle du lien, qu'un lien écrit. (Puis pourquoi Français et pas suisse roman alors par exemple )

je vais essayer de coriger quand je peux la hauteur des élements. j'imagine ut pense surtout aux titres. mais alors je vais devoir utiliser min-height pour ne pas que le fond image soit rogné. Est ce que cela ne risque pas de poser problème dans certains navigateur le min-height.

Le bouton « + » sous le numéro de téléphone affiche normalement un paragraphe au clic. Cela ne fonctionne pas chez toi ?

Pour la taille des plus je vais voir, mon but est que seul les personnes réellement avide d'informations clic dessus. je préfère qu'ils aillent voir les réalisations d'abord. Mettre un lien supplémentaire sur le titre est peu être une bonne idée.

A propos de ma liste et de mon menu,
Tout les rollover sont bien géré par JS. Les liens qui sont vide le sont parceque les rubriques n'ont pas encore de titre. Mais en réalité la difficulté vient de mon menu caché. Que je compte garder je pense malgré tout ^^.. Qui m'oblige à séparé la partie "clic" de la partie "contenu"
Le graphisme avec la typo devant passé en dessous d'un cache et les fleches devant être audessus. le tout devant être réactif au passage de la souris sans bug de Z-index. je me retrouve donc avec 2 listes disant la même chose
J'ai fait le choix d'en mettre une <ul><li> e l'autre sans pour justement faire la distinction sémantiquement. les balise <a> pourrait être laissé vide vu que leur texte n'apparait nul part.. mais comme tu dis ca fait un peu bizzare j'ai donc mis le titre de la rubrique entre les balise a pour remplir mais je ne sais pas si c'est une bonne idée.

Les styles in-line sont généré à partir de l'admin du site je ne peux, ou ne sais, hélas pas les faire s'intégrer dans mon css et obtenir le même résultat

* Pourquoi placer des nofollow sur les liens internes de ton site ?
Parceque ces liens sont déjà présent à un autre endroit du site est ce une bonne raison ?

Bref merci beaucoup déjà en tout cas pour toutes ces réponses, je vais essayer d'amélioré, même si pour beaucoup de problème cela me paraît insoluble

casp a écrit :

- Comment peut on désactiver les image sous firefox pour voir que le menu est inaccessible ? Pour ce qui est des style il me paraît accessible même si celui ci est désactivé non ?

Tu peux installer l'extension Web Developer pour Firefox.

merci

A et bonne nouvelle j'ai trouvé comment utiliser mon code SPIP dans un javascript externe, je vais donc pouvoir les regrouper.
par contre j'ai fait comme recommandé après le body.. ce n'est pas top conclusion on vois d'abord les fenêtres déplié avant qu'elles ne se referment.

En quoi le script dans le head est il un problème ?

Il me semble que cela ralenti la vitesse d'affichage de la page.

En plaçant le script a la fin e la page les utilisateurs peuvent lire ton contenu pendant que celui-ci charge...

De toute façon les script ne se lance qu'une fois la page chargé complètement.

casp a écrit :
merci

A et bonne nouvelle j'ai trouvé comment utiliser mon code SPIP dans un javascript externe, je vais donc pouvoir les regrouper.
par contre j'ai fait comme recommandé après le body.. ce n'est pas top conclusion on vois d'abord les fenêtres déplié avant qu'elles ne se referment.

J'ai eu des retours semblables en rapport avec un BBCode de spoiler. Quand j'en avais parlé à quelqu'un qui avait posté son code (qui en réalité venait d'une autre personne, mais il n'avait pas indiqué l'auteur), il disait que s'il plaçait la ligne de script à la fin, ça causait un effet de "jump" désagréable en plus du risque que celui qui lit le message risque d'avoir le temps de lire le contenu caché (imaginez celui qui vient à peine de commencer de lire Harry Potter et le prince de sang-mêlé qui tombe sur le texte "Rogue a tué Dumbledore", chose qui m'est vraiment arrivée).

Je pense qu'il serait bon de lancer un fil pour en discuter de ces cas de figure.