Pages :
Bonjour !

Je ne savais pas trop si je devais mettre Smiley pro devant le titre, mais voilà, je suis un intégrateur web en début de carrière.

Le site est en ligne depuis quelques mois déjà, mais je voulais fignoler quelques trucs avant de le présenter ici; histoire d'avoir un truc pas trop brouillon à montrer ! Et comme j'étais en semaine de congé, j'en ai profiter pour réviser le tout.

Je suis évidemment preneur de tout avis, design (faudra que j'y repense, là je le trouve pas terrible), code, accessibilité, etc.

Voilà la bête: http://www.simonboudrias.com


Merci d'avance,
Salut,

Très rapidement :
* la méta keywords est inutile,
* à l'instar des autres appels de script, tu pourrais bien mettre le script Google Analytics en fin de document,
* les listes de tes connaissances et compétences gagneraient à être structurées sous forme de listes (ul / li), voire de listes de définition (dl, avec dt pour le nom de la compétence et dd pour la note),
* pour les notes, au lieu d'utiliser des astérisques colorés en CSS (si je désactive les CSS ou suis un malvoyant utilisant un lecteur d'écran, je risque de croire que tu as 5 / 5 partout), j'emploierais des images ayant pour alternative textuelle la note (alt="Note : 3 sur 5", par exemple).
Bonjour,

Visuellement, le tout est très sombre, trop sombre même. Le bloc twitter fait du coup mal aux yeux avec son blanc.

Je viens juste de remarquer qu’il y a avait ton nom en haut du site... Le contraste est vraiment trop faible.

La différence de couleurs entre tes astérisques (partie connaissances) est tellement faible qu’il est quasi impossible de savoir quel est « ton niveau ».

C’est dommage de masquer les éléments de navigation rapide (« aller au menu » et « aller au contenu ») leur utilisation peut être bénéfique à tous, donc autant les afficher.

Dommage que ton blog n’ai pas le même design que ton portfolio, le changement de look surprend quand on ne s’attend pas à quitter le site.

Le lien vers le formulaire de contact est bien trop peu visible, il serait préférable de placer un lien dans le menu.

Il manque quelques espaces dans tes textes : entre 22 et ans, avant les points-virgules...

Pour le code :
* Le titre de ta page est un peu long et bien trop truffé de mots clés. Le titre de la page n’est pas utilisé pour le référencement, par contre c’est la première chose qu’un visiteur potentiel voit de ton site dans les résultats d’un moteur de recherche. Je pense que la partie « création de sites internet, développeur frontend; » pourrait être supprimée. Attention également aux « :: » qui sont assez rébarbatif pour les utilisateurs de lecteur d’écran.

* La meta keyword ne sert à rien (à part aider Google à se faire encore plus d’argent), inutile donc de se fatiguer à la remplir et de monopoliser des octets pour elle.

* Les tabindex ne sont pas utiles sur tes liens. Ils doivent uniquement être présents si l’ordre de tabulation normal est différent de l’ordre visuel des éléments.

* Attention à bien baliser les changements de langue ! L’anglais prononcé avec une voix française c’est super marrant, mais totalement incompréhensible ^^ ;

* Attention à bien développer les acronymes et abréviations, au minimum lors de leur première occurrence dans la page.

* Le target=_blank c’est le mal ; en plus ça fait fuir tes visiteurs (et les empêche d’utiliser la touche « retour » de leur navigateur).

* Les titles des liens vers Facebook, linkedin et twitter sont redondant avec les alt des images. Et pas forcément nécessaires, non plus.
Bonjour à vous deux, et merci pour vos commentaires. (Et notamment à Laurie-Anne de qui j’espérais une critique suite au dépôt de mon premier projet web ici même l’année passée; ça m’avait beaucoup aidé à progresser !)

a écrit :
* les listes de tes connaissances et compétences gagneraient à être structurées sous forme de listes (ul / li), voire de listes de définition (dl, avec dt pour le nom de la compétence et dd pour la note),
* pour les notes, au lieu d'utiliser des astérisques colorés en CSS (si je désactive les CSS ou suis un malvoyant utilisant un lecteur d'écran, je risque de croire que tu as 5 / 5 partout), j'emploierais des images ayant pour alternative textuelle la note (alt="Note : 3 sur 5", par exemple).

En effet, niveau accessibilité ce n’est pas le top; j’attendais de trouver la meilleure solution pour cette section. Je pensais peut-être à utiliser les barres de niveaux HTML 5; mais ça posera problème d’accessibilité aussi puisque ça ne sera pas rendu sur les anciens navigateurs (et donc pas disponible dans le rendu accessibilité lu par les lecteurs d’écran ?).

Quelqu’un voit une solution différente que de recourir à des images ?

a écrit :
* la méta keywords est inutile,

a écrit :
* La meta keyword ne sert à rien (à part aider Google à se faire encore plus d’argent), inutile donc de se fatiguer à la remplir et de monopoliser des octets pour elle.

J’ai récemment lu un article d’une agence de référencement naturelle qui a fait un test sur la méta keyword. Leur conclusion était que la méta était lu sans l’ombre d’un doute par google lorsqu’il voulait afficher des publicité Adsense; et alors, est-il possible qu’elle soit lue pour le référencement naturel ?

À ma connaissance, personne ne connait l’algorithme de Google; et au final, on s’en tient à des suppositions ou à des résultats de test plus au moins précis.

Ce faisant, bien que j’accorde le fait que cette balise soit peu utile en SEO, sa présence ne nuit pas, et les efforts pour la mettre en place étant quasi nul (on cible déjà des mots clés lors d’une préparation SEO), je me dis qu’au final, pour quelques octets on peut bien la garder. (Surtout qu’on dit qu’elle est prise en compte par Bing et Yahoo)

a écrit :
Il manque quelques espaces dans tes textes : entre 22 et ans, avant les points-virgules...

À ce niveau… Je ne suis pas d’accord. S’il est admis qu’à l’écrit on doit suivre des règles d’espacement du texte, cela ne se rend pas correctement à l’écran; notamment, les espaces insécable n’empêchent pas le retour à la ligne, ce qui peut séparer le signe de ponctuation de sa phrase…

D’ailleurs, fvsch a posté un article à ce sujet sur son blog http://covertprestige.net/2011/espaces/ Smiley langue

Mais bon, j’ai encore de la difficulté à laisser tomber l’habitude de mettre un espace entre un ? ou un !

a écrit :
* Attention à bien baliser les changements de langue ! L’anglais prononcé avec une voix française c’est super marrant, mais totalement incompréhensible ^^ ;


Oh ! Peux-tu m’indiquer où l’erreur se produit en question ? Je pensais que la langue de mes pages avait été correctement indiquée.

a écrit :
* Attention à bien développer les acronymes et abréviations, au minimum lors de leur première occurrence dans la page.


Bonne idée merci !

a écrit :
* Le target=_blank c’est le mal ; en plus ça fait fuir tes visiteurs (et les empêche d’utiliser la touche « retour » de leur navigateur).


Y-a-t’il une autre raison qu’un jugement arbitraire sur les goûts de navigation à cette « règle » ?

Personnellement, je déteste quand un site externe s’affiche dans la même page. C’est d’ailleurs la seule chose je crois que je n’aime pas du site d’Alsa !

Habituellement quand je clique sur des liens externes; notamment dans des blogs ou ici sur alsacréations, c’est pour les garder en onglet et aller lire le contenu après avoir lu le premier article. Ou alors, ce sera pour comparer ce qui est dit du site externe et ce même site de visu dans un autre onglet (ce qui est notamment le cas dans la section critique du forum).

De fait, je préfère naviguer ouvertement sur le site externe fournit, et fermer l’onglet pour revenir à la page où j’étais, que de devoir me taper 5 ou 10 fois le bouton précédent du navigateur.

Disons que j’aimerais un argument un peu plus développé à ce sujet pour me convaincre !

a écrit :
* Les titles des liens vers Facebook, linkedin et twitter sont redondant avec les alt des images. Et pas forcément nécessaires, non plus.


Alt et title n’ont pas la même fonction. De fait, je ne comprends pas la redondance puisque (sauf sous IE) alt ne s’affiche pas au survol de l’image.

Le title a été intégré suite à ma lecture du livre « Ergonomie Web » d’Amélie Boucher qui suggérait de mettre une explication textuelle aux icônes puisque celles-ci pouvaient porter à conclusion. Bon, évidemment la majorité connaissent ces médias sociaux, mais ça ne gène pas ceux qui les connaissent, et ça peut aider un internaute qui ne connait pas.

Niveau accessibilité, les titles ne sont pas lus par la grande majorité des lecteurs d’écran, et ceux qui les lisent demandent parfois le choix entre la lecture de alt ou de title, ou alors nécessite de l’activé dans les options. Tout compte fait, Denis Boudreau (expert en accessibilité, et un québécois lui aussi !!) en venait à la conclusion de ne pas compter sur title pour toutes questions d’accessibilité, et qu’en pratique cet attribut n’était pas rendu par le lecteur d’écran.


J’espère que vous prendrez mes réponses pour une participation au débat et non comme une défense forcenée d’un créateur protégeant sa créa !

Et heu, niveau design vous auriez des suggestions pour l’améliorer légèrement en attendant une refonte complète ? Ce n’est vraiment pas ma force Smiley decu
Modifié par Vaxilart (11 Mar 2011 - 01:59)
Vaxilart a écrit :
Quelqu’un voit une solution différente que de recourir à des images ?
À part détourner acronym ou abbr de leur fonction, ou utiliser JS pour créer une infobule (moins bien), non pas vraiment d'autre solution efficace et accessible.

Vaxilart a écrit :
J’ai récemment lu un article d’une agence de référencement naturelle qui a fait un test sur la méta keyword. Leur conclusion était que la méta était lu sans l’ombre d’un doute par google lorsqu’il voulait afficher des publicité Adsense; et alors, est-il possible qu’elle soit lue pour le référencement naturel ?
Oui, apparement google utilise la meta pour adsence (donc pour se faire des thunes), sinon, non aucun intérêt pour le positionnement (pas assez fiable). Je doute que bing et yahoo utilisent réellement cette méta (ou alors ça expliquerait que leur résultats ne soient pas toujours très pertinents).

Vaxilart a écrit :
À ce niveau… Je ne suis pas d’accord. S’il est admis qu’à l’écrit on doit suivre des règles d’espacement du texte, cela ne se rend pas correctement à l’écran; notamment, les espaces insécable n’empêchent pas le retour à la ligne, ce qui peut séparer le signe de ponctuation de sa phrase…
Dans ce cas, écris en anglais, tu ne sera plus embêté... Sérieusement, sur un site perso, que tu ne respectes pas les règles de typographie, OK, sur un portfolio, ça risque de moins bien passé (tu ne peux pas t’attendre à ce que tous tes futurs employeurs/clients soient des fans de Florent).

Vaxilart a écrit :
Oh ! Peux-tu m’indiquer où l’erreur se produit en question ? Je pensais que la langue de mes pages avait été correctement indiquée.
Je parles des changement de langue dans la page.

Vaxilart a écrit :
Y-a-t’il une autre raison qu’un jugement arbitraire sur les goûts de navigation à cette « règle » ?
Entre autres raisons :
* Tu force le comportement du navigateur contre le gré de l’utilisateur et c’est mal.
* Tu peux être sûr qu’un bonne partie des visiteurs fermera la fenêtre/l’onglet du site d’origine (donc le tiens) et ne sera plus capable d’utiliser le bouton retour pour y retourner.
* Pour les gens qui souhaitent ouvrir un nouvel ongle / une nouvelle fenêtre, c’est possible avec tout types de liens. Par contre impossible d’empêcher les liens en target blank de s’ouvrir dans un nouvel ongle / fenêtre.

En gros, laisse tes visiteurs naviguer comme ils le souhaitent (le clic molette c’est pas la mort) !

Vaxilart a écrit :
Alt et title n’ont pas la même fonction. De fait, je ne comprends pas la redondance puisque (sauf sous IE) alt ne s’affiche pas au survol de l’image.
Alt et title peuvent être lu tous les deux par les lecteurs d’écran (et autres aides techniques), d’où redondance (pour rappel, à quoi sert alt ?). Title ne doit être utilisé QUE s’il apporte une information supplémentaire à l’intitulé du lien (dans le cas des images liens, à l’alt de l’image) ET nécessaire à la navigation du visiteur. C’est réellement le seul cas d’utilisation de title. Pour les icones oui, c’est utile ; mais pour ces icones là, non ça ne l’est pas.
Modérateur
Bonjour,

Vaxilart a écrit :

Personnellement, je déteste quand un site externe s’affiche dans la même page. C’est d’ailleurs la seule chose je crois que je n’aime pas du site d’Alsa !


Je ne pense pas te l'apprendre, mais tu es libre d'ouvrir les liens comme tu le souhaites sur n'importe quel site :

- Bouton droit de la souris sur le lien > Nouvelle fenêtre ou nouvel onglet
- Clic avec la molette de la souris sur le lien
- CTRL + bouton gauche de la souris sur le lien

Le problème avec le target _blank et autres comportements forcés comme ça est que l'utilisateur ne peut plus choisir comment le lien s'ouvrira, à moins de configurer son navigateur en conséquence.
Bonjour,

J'ai bien lu tous vos commentaire, et j'y répondrai dès que possible; tout comme je retravaillerai sur les points à modifier.

Mais je déménage cette fin de semaine; je ne vous oublie pas toutefois Smiley cligne
Bonjour !

J'ai refait le design de mon site il y a environ un mois (en même temps j'ai changé quelques points qui choquaient ici et là selon vos commentaires). Et j'ai terminé cette semaine d'intégrer le blog au design du site comme Laurie-Anne me l'avait proposé (j'ai enlevé les _blank aussi Smiley langue ).

C'est donc un nouveau design beaucoup plus clair. Ce n'est pas encore parfait; notamment je trouve que l'organisation du contenu en tant que tel mérite d'être retravaillée.

J'ai utilisé beaucoup de CSS3 et de transition (autant tester des choses quand on travaille sur des projets perso !) en essayant toutefois de ne pas léser les visiteurs sous IE (évidemment). Sous IETester, ça ne semble pas si mal sous IE6-7; mais je n'ai pas moyen de tester sur les vrais configs.

Également, j'ai refais la navigation sous Ajax; j'espère l'avoir bien fait, mais il y a peut-être à améliorer au niveau de l'accessibilité / expérience utilisateur ?

Et également, une version avec media querie pour mobile.

Voilà, merci beaucoup à vous !

[Modération : inutile de reposter le lien, il se trouve en haut de la page]
Modifié par Laurie-Anne (03 Jun 2011 - 09:14)
Bonjour Simon,

J'ai deux commentaires :

1- La tête qui monte et descend, est-ce vraiment nécessaire ? Perso, cela m'a agacé.
2- Le choix de la typographie pour les titres est à mon avis discutable. Elle manque de professionnalisme. Remarque je ne sais pas quel est ton but pour ce portfolio mais si tu cherches de sérieux clients potentiels, j'y penserais. C'est comme les liens vers Facebook, Twitter, etc. Imagine un client qui va sur ton site pour un devis professionnel et qui part vers ta page facebook... Mais bon, c'est mon avis perso.

Mes salutations de Vaudreuil Smiley cligne
Wow, la tête de zombi énorme est ultra flippante ! Smiley eek
Pas vendeur pour un sou, repoussant même, tu peux la retirer d'urgence je pense, ça va plus te desservir qu'autre chose... Smiley biggrin
STPo a écrit :
Wow, la tête de zombi énorme est ultra flippante ! Smiley eek
Pas vendeur pour un sou, repoussant même, tu peux la retirer d'urgence je pense, ça va plus te desservir qu'autre chose... Smiley biggrin


Pour une fois je suis 100% d'accord avec STPo Smiley ravi

Et pour la police des titres je trouve qu'elle colle pas du tout avec le thème.
Modifié par jb_gfx (03 Jun 2011 - 15:28)
Arf... moi qui avait prévu y baser ma campagne présidentielle Smiley decu

"mabelle" a écrit :
Mes salutations de Vaudreuil


Oh, on se connait !? (j'habite plus à Vaudreuil depuis quelques mois cela dit)



Donc, le look ça colle pas trop. Et niveau code et accessibilité, il y a aussi des choses à corriger ?
Vaxilart a écrit :
Oh, on se connait !? (j'habite plus à Vaudreuil depuis quelques mois cela dit)
Non, on se connait pas mais j'ai vu que tu habitais dans le coin.
Bonjour,
et désolé, mais le "coucou / caché", ça fait rigolo, dans tous les sens du terme Smiley cligne
Retour sur la ponctuation : le texte étant un écrit, il respecte les règles de l'écrit : une règle simple : 2 signes (2 points, points d'interrogation, d'exclamation) = 2 espaces, c'est à dire 1 devant, 1 derrière ; 1 signe = 1 espace, derrière (comme pour la virgule, le point, etc)
Salut salut,

Franchement je ne suis pas un as du webdesign (enfin je crois Smiley lol ), mais là je trouve ton site particulièrement disgracieux.

Et comme dit plus haut, rho mon dieu la tête, si tu veux vraiment garder cet effet change l'image au moins ou alors garde l'image, mais enlèves tout ces filtres qui la désserve plus qu'autre chose.

Déjà cet espèce de biseautage/estampage ne valorise pas du tout la photo, mais alors le détourage des cheveux sa me fais saigner des yeux (oui j'aime exagéré Smiley ravi )

Le footer est totalement collé au contenu, pourquoi ne pas le laissé respirer un peu ?

Le portfolio lui n'ont plus n'est pas en reste, en fait on dirait que tu as fait l'impasse sur la gestion des margin/padding car le CV aussi est de la même trempe.

Sinon à chaque chargement de page, j'ai un loader qui s'affiche, je comprend pas trop son intérêt juste pour du texte...

Enfin voilà mon avis, je veux pas paraître trop dur, mais je suppose que tu acceptes les critiques, sinon tu n'aurais point posté dans cette section.
Oh non, ça va. Je retravaille un nouveau look en ce moment, je trouvais celui-là amusant; mais je suis d'accord quant au fait qu'il ne fait pas très professionnel.

@Macpom: oui oui, je comprend très bien ça. Mais le web ne gère pas les espaces insécable, ce qui est beaucoup plus gênant que l'absence d'un espace avant un signe de ponctuation... Qui plus est, je ne sais pas ce qu'il en est en France, mais par chez moi, j'ai beau regarder et tous les sites semblent adopter cette absence d'espace entre les signes de ponctuation; et notamment les sites de presse ! Alors, je suis plutôt confortable avec le choix d'omettre ces espaces.

@Gili: Le loader apparaît car les pages sont chargés en Ajax. Le site étant relativement réactif sur ordinateur de bureau, le loader n'apparait que furtivement (quand il apparait). À ce niveau, il n'y a pas un intérêt énorme.

Cela dit, ce loader devient important si le serveur rame et met du temps à répondre (ainsi le visiteur sait que le lien sur lequel il a cliqué ne mène pas à une page blanche), mais surtout pour la navigation mobile qui dispose d'une connexion beaucoup moins rapide. On laisse donc savoir - puisqu'il y a un chargement en ajax - que la prochaine page arrive; tout ça sans reloader l'interface.
Vaxilart a écrit :
Mais le web ne gère pas les espaces insécable


L'espace insécable se fait par l'entité HTML  
Pages :