[michelthiers.com] Mon site

Bonjour à tous,

J'ai 25 ans et après quelques expériences en SSII/Cabinet de conseil, j'ai décidé de quitter le monde de l'entreprise pour faire ce qui me plaît vraiment : webdesigner/developpeur front-end indépendant sur Bordeaux.

J'ai donc créé mon site : michelthiers.com et je le soumets à vos critiques.

Quelques petites infos en plus :
-c'est un wordpress, j'ai construit un thème basé sur Toolbox (thème HTML5).
- le site charge mootools et jquery, je ferai en sorte de n'utiliser qu'une des 2 librairies très bientôt.
- pour l'instant il n'y a pas de contenu, donc je souhaiterai avoir des opinions sur le design.
- le site n'est pas compatible avec IE6, par contre il est "responsive" (adaptable aux tablettes et smartphones).

Voilà, merci d'avance pour vos retours (positifs ou négatifs) !

Hello,

Sur ton formulaire de contact, il y a un bug lors de l'envoi de données erronées : un cadre rouge vide positionné en absolu apparaît en plein milieu du formulaire. Mauvais paramétrage de ton plugin de formulaire ? A ce sujet d'ailleurs, il me semble que contact form 7 possède une option permettant d'utiliser des labels associés aux champs de formulaires

a écrit :
le site n'est pas compatible avec IE6

Alors pourquoi avoir des commentaires conditionnels pour IE6 dans ce cas ? J'imagine que c'est un reste du thème-framework que tu as utilisé mais tu peux l'enlever. Par ailleurs, je ne suis pas convaincu qu'il aurait été vraiment très difficile de rendre le site compatible avec IE6-7 vu la structuration des éléments de la page, mais là c'est toi qui vois.

Sinon, il faudrait externaliser les styles et scripts, diminuer le nombre de fichiers appelés (et le faire sur une seule librairie comme tu l'as dit) et les appeler en fin de document.

Enfin, il faudrait supprimer les éléments inutilement insérés par WordPress dans l'entête des pages via la fonction wp_head(). Voici le code à utiliser dans ton fichier functions.php :

<?php
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'start_post_rel_link');
remove_action('wp_head', 'index_rel_link');
remove_action('wp_head', 'adjacent_posts_rel_link');
?>

Modifié par audrasjb (10 Oct 2011 - 17:41)

Merci pour cette réponse rapide ! Je vais prendre en compte tous ces conseils

Je vais supprimer les éléments wordpress inutiles comme tu le suggère.

Je travaille actuellement sur la diminution du nombre de fichiers aussi !

Pour l'instant, je crois que le site n'est pas trop moche sur IE7. Je m'occuperai vraisemblablement de la compatibilité avec IE6 quand tout sera en place!

N'hésite pas à me dire ce que tu penses du design au sens "esthétique" du terme

Bonjour,
Niveau design moi j'aime bien, pas grand chose à dire...
Ah si, le bouton "envoyer" du formulaire de contact fait un peu "tâche"

Bonjour,

Quelques remarques, un problème systématique pour tes images c'est de les placer en CSS et de venir mettre du contenu alternatif en mettant un text-indent -9999px. Si ces images sont porteuses de sens, alors elles doivent être impérativement placé dans l'HTML, le contenu alternatif sera mentionné par l'attribut alt. Ça c'est la bonne pratique pour ce genre d'images. Ici quand je désactive les images sur ton site je ne vois plus rien casi. Un problème d'accessibilité en somme.

Ton logo est agrémenté d'un attribut title qui répète exactement la même chose, l'information est redondante et n'a donc pas lieu d'être.

Niveau design je n'accroche pas trop, on dirait ce que l'ont fait en ce moment mais en moins bien. Ça c'est mon avis subjectif. Plus objectivement je pense qu'il manque vraiment une grille derrière tout ça, on dirait vraiment que certains éléments et été positionné plus ou moins arbitrairement (je pense notamment au « Suivez-moi »).

Un autre problème au niveau du design c'est l'utilisation massive de typo qui n'ont rien avoir les plus avec les autres, les polices exotiques c'est bien mais avec parcimonie.

Entre le logo en linéal (une espèce de verdana en plus souple), le header/footer en script, le text courant en serif (georgia chez moi), le texte d'introduction en lobster (ouai grâve à la mode ), et le bouton « En savoir plus » qui est encore dans une police différente on ne sait plus où donner de l’œil !

Tu devrais choisir un style et aller à fond dedans au lieu de te disperser ainsi.

Tu as un div vide dans ta navigation juste pour mettre la deuxieme partie de ton logo. Un div vide c'est une erreur de sémantique selon moi. A éviter. Surtout pour combler ce genre de rustine, il y a moyen de faire beaucoup plus simple sans devoir couper l'image. Inspire toi sur d'autre site.

Voili voilou,

En espérant t'avoir fourni quelques pistes.

à bientôt
Modifié par Gili (10 Oct 2011 - 20:54)

Bonjour,

Visuellement, j'ai un problème avec le nombre de polices utilisées. Si j'ai bien compté, il y en a 6, c'est beaucoup trop.

Sinon, pas vraiment d'originalité dans le thème, c'est déjà très vu et revu.

C'est marrant, sous FF, hier soir, j'étais sûre qu'il y avait un effet de survol sur les liens. Sous IE8, pas... C'est pas bloquant, mais c'est dommage.


Pour le code :
* Beaucoup, beaucoup trop de fichiers JS dans le head (et aussi en fin de doc). Il faut regrouper ces fichiers en aussi peu que possible (idéalement : 1) et les placer, de préférence, en fin de document.

* C'est un peu bête d'avoir des styles directement dans la page HTML alors que tu appelle un fichier CSS.

* Comme signalé par Gili, attention au title sur les liens, il est bien souvent inutile (et gênant).

* Ta hiérarchie des titres est incorrecte : passage de h1 à h3 directement. Utilisation de h1 sur des textes qui ne sont pas des titres (j'ai un scoop, ça n'améliorera pas ton référencement / positionnement).

Merci Gili et Laurie-Anne pour vos critiques qui sont je trouve assez pertinentes et qui vont beaucoup m'aider.

Quelques remarques :

- Sur le nombre de polices, je suis d'accord il y en a trop si on les compte pragmatiquement. Après je me suis amusé à me concentré sur 2 ou 3 polices seulement, mais le résultat est systématiquement moins convaincant visuellement (selon mon point de vue subjectif). Alors que faire : supprimer des polices en acceptant de n'être pas totalement convaincu ? ou alors laisser comme ça mais avec une impression de surcharge en terme de police pour un oeil avisé ?

- Sur l'absence de grille : en fait, il y a une grille, et le bloc "Suivez-moi" est situé au centre dans de la page. Mais visuellement je suis d'accord, il y a un déséquilibre, je devrais donc décaler un peu ce bloc

- Sur le nombre de fichier JS et leur positionnement (debut ou fin de doc): je suis d'accord, il y a encore un vrai travail d'optimisation à effectuer.

- Sur la critique "c'est déjà du vu et revu", ou "ça ressemble à ce qu'on fait en ce moment". Contrairement à vos autres critiques, je trouve ces critiques peu pertinentes. Je pense qu'effectivement, mon site ressemble à beaucoup d'autres sites, de part sa structure, ses couleurs, et son organisation. Oui mais voilà, est-ce vraiment un défaut ? Personnellement, je ne pense pas. On le sait, il y a des règles ergonomiques qui font qu'on se retrouve facilement ou pas sur un site internet. A vouloir faire trop original, on prend un risque considérable : celui de se planter (site trop complexe ou trop vide, navigation peu évidente). Alors oui, je l'assume, ce genre de design c'est du vu et revu, mais c'était aussi le but, rester simple et classique, tout en étant suffisamment beau, agréable et élégant. Ce que j'espère, c'est que ces impressions ressortent.

Re-bonjour,

J'ai travaillé sur le problème des polices que vous avez soulevé. La nouvelle version ne contient plus que 3 polices (au lieu de 6 effectivement) :

- Lobster (en version italic pour le logo, le texte d'intro et le footer, en version normal pour le header, les titres de blogs, les labels du formulaire de contact)
- Georgia serif (pour le menu, le footer, le bouton "Suivez-moi"
- Helvetica sans-serif pour le texte courant (articles de blogs, champs de formulaires...)

Est-ce mieux ?
Modifié par MichelT (11 Oct 2011 - 13:28)

Effectivement on ressent plus la cohérence graphique ainsi.

Malheureusement tu as laissé tes images porteuses de sens en css, pour moi c'est la vrais problématique. D'autant plus que pour ton h1 de la section home, tu aurais très bien pu te service de font-face (lobster étant libre de droit en plus). Stylisé le texte comme tu l'as fais est très facile en css, c'est dommage de recourir à une image pour une chose si trivial (mon avis).

En ce qui concerne l'originalité du design c'est tout a fait judicieux de vouloir planché sur la cohérence externe (misé sur ce que l'utilisateur connais déjà de part sa visite sur d'autre site). Ca je suis tout à fait d'accord.

Mais ça c'est peut être plus une question de structure de l'information que de design. Quand je dis que ça ressemble à ce que l'ont fait maintenant je parle par exemple du big footer très en vogue en ce moment, alors que le tien n'a pas lieu d'être aussi grand pour le peu d'information qu'il contient. D'ailleurs on peut voir que tu as augmenté pas mal l'espace interligne pour combler ce vide (cela dit en passant sémantiquement parlant j'aurai plutôt opté pour une liste).

Les images qui défilent dans l'écran du mac, c'est du vu et revu, on aime ou on aime pas, mais dans tout les cas ce n'est pas (plus ?) original. L'utilisation de Lobster, j'ai rien contre cette typo elle est jolie et très fraiche, mais encore une fois c'est du vu et revu (sur ce point je suis sur que tu es d'accord avec moi ^^). Tout dépends de l'utilisation de ton site en fait, si c'est pour te faire plaisir ok tout à fait d'accord, mais si le but est de te démarquer des autres c'est plutôt bof quoi.

C'est sur qu'il ne faut trop s'écarter des sentiers battu et miser sur ce que l'utilisateur connais déjà, mais cette remarque visait plutôt la présentation de l'information plutôt que la structure.

Tant que j'y suis, deux choses qui me chiffonne que j'avais oublié de mentionner. Regarde comme ton footer respire énormément, et regarde le dessus de ta page, comme la typo de ton header est casi collé au menu et comme le contenu est aussi très proche du menu. Je sais pas si je m'exprime bien, mais en somme le footer respire beaucoup (trop?) et le dessus du site pas du tout.

Autre chose dérangeante, ton menu est pas mal car il respect la lois de fitts qui préconise d'augmenter la surface cliquable d'un élément, en effet c'est plus facile de cliquer sur une zone que sur un texte (surtout si il est petit). Mais ici ça peut également posé quelque soucis quand c'est mal utilisé.

Je m'explique ; quand on clique sur le mot c'est ok, quand on clique a côté du mot, vu que la surface cliquable est agrandie c'est aussi ok. Mais l'intersection des deux surfaces cliquables entre deux liens peut poser parfois des soucis, dans le sens où si je veux cliquer par exemple sur blog et que je clique un peut sur le côté du bouton par habitute boum je clique sur contact par inadvertance. Pourquoi, parce qu'il n'y a pas de zone de séparation entre les deux surfaces cliquables.

En somme mettre un petit margin-right sur tes li pour avoir un espace neutre entre les différents items serait le bien venu.

En espérant t'avoir fourni quelques pistes ^^

Bonne continuation

Bonjour,

Visuellement, ce qui me saute au yeux, c'est ton menu du haut avec accueil, work, contact, etc...la typo+l'ombre c'est trop.
Tu devrais justement utilisé le helvetica ici, et en uppercase surement.
Aussi un autre moyen de signaler la page actuelle, parceque l'ombre, çà fait un peu débutant.

Dans la page work, je trouve qu'il y a trop d'espace blanc autour des travaux. Je ne comprend pas l'interêt de mettre des commentaires sur tes travaux...Pour le blog, ok, mais les travaux on peut s'en passer non ?

Dans la page travaux, la date qui sort du cadre n'a pas d'interêt non plus, pour le blog oui, mais pour les travaux, tu devrais plus détaillé les logiciels utilisés, l'adresse eventuel, les logiciels, etc...

"Mes réalisations" est en retrait par rapport à "Anyfilm.tv", qui est en retrait par rapport au visuel, çà fait trop cascade, essaie juste d'aligner tout ton cadre blanc (titre+visu+explication)

C'est vrai que le bouton envoyé fait tâche...

Pour la question du deja vu, on peut retourner l'argument et dire que les visiteurs qui ont l'habitude de ce genre de site savent aussi repérer les défauts plus vite, parcequ'il y a dejà eu mieux ailleurs.
Après tout quand on est créatif, on fait des choses originales,
Quand un design est déjà vu, çà fait toujours "un cran en dessous" ou "un peu en retard"...
Modifié par Oziris (11 Oct 2011 - 15:41)

Oziris a écrit :
Tu devrais justement utilisé le helvetica ici, et en uppercase surement.

Tout à fait d'accord !

Bonjour,

Merci encore pour ces nouvelles pistes d'améliorations. Gili, merci d'avoir précisé ta pensée sur "c'est du déjà vu". Voici mes remarques :

- Par rapport aux images : le fait que j'utilise des background et non des balises img s'explique par le fait que j'ai choisi d'utiliser un sprite pour optimiser le chargement des images (moins d'images à charger, moins de requetes vers le serveur).

- Pour les titres, la raison pour laquelle j'utilise des images au lieu du texte directement est double : d'abord je trouve que le rendu de la police est bien meilleur avec une image que sans image ensuite parce que ça m'obligerait à charger plus de polices et que ça deviendrait trop lourd.

- La police Lobster : oui je sais c'est très à la mode (moi j'aime beaucoup ^^). J'avoue volontiers qu'une police plus "rare" serait plus originale, néanmoins, je n'en ai pas trouver de satisfaisante à mon goût. Lobster est vraiment une très jolie police, très efficace et très passe-partout (c'est sans doute pour ça qu'elle est si populaire).

- Pour le slideshow sur le mac, je l'admet, c'est du vu et revu. Moi je suis mac addict, donc j'aime. Mais clairement, ça manque de créativité. Il y a sans doute moyen de faire un slideshow un peu plus original.

- Pour le menu, vous avez totalement raison. Helvetica en uppercase passe mieux (j'ai fait la modif). J'ai aussi rajouter une petite margin pour améliorer l'ergonomie comme suggéré très justement par Gili.

- Pour Work, j'ai supprimé la date qui était effectivement inutile. J'ai également un peu enlevé cet effet cascade dont tu parles Osiris. Cependant, je pense que le design des articles de blog reste encore à améliorer.

Voilà voilà, je continue d'améliorer tout ça. Merci pour tous vos retours, et n'hésitez pas à m'en faire d'autres !

MichelT a écrit :
- Par rapport aux images : le fait que j'utilise des background et non des balises img s'explique par le fait que j'ai choisi d'utiliser un sprite pour optimiser le chargement des images (moins d'images à charger, moins de requetes vers le serveur).

Optimisation négligeable, surtout si tu à moins d'1M de visites par jour. Par contre cela entraine des problèmes considérables : si une image ne peut pas être chargée (problème de connexion ou de serveur) ou vue (lecteur d'écran, bloquage des images) tu n'as plus de contenu.

MichelT a écrit :
- Pour les titres, la raison pour laquelle j'utilise des images au lieu du texte directement est double : d'abord je trouve que le rendu de la police est bien meilleur avec une image que sans image ensuite parce que ça m'obligerait à charger plus de polices et que ça deviendrait trop lourd.

Idem, optimisation négligeable, problème considérable. @font-face, c'est magique...

Les excuses, c'est bien, mais il faut qu'elles soient bonnes.

Les sprites doivent être réservés aux images purement décoratives.

Laurie-Anne a écrit :

Idem, optimisation négligeable, problème considérable. @font-face, c'est magique...

Ok pour les sprites, c'est plus ou moins négligeable (encore que...). Il ne s'agit pas uniquement de réduire les requêtes au serveur (et encore c'est important) mais aussi d'afficher les images simultanément sur une page pour une connexion lente, donc d'avoir un chargement beaucoup plus agréable. Mais bon selon les points de vus, je considère qu'on peut considérer cette optimisation "négligeable".

Par contre pas du tout d'accord avec "@font-face c'est magique". @font-face, c'est plusieurs secondes de perdues au chargement de la page, et ça prend beaucoup d'espace en cache après. Une image prend beaucoup beaucoup moins de temps à charger.

Et la qualité du rendu n'est quand même pas "négligeable", elle est primordiale.

Il faut faire très attention avec @font-face et l'utiliser avec parcimonie.
Modifié par MichelT (12 Oct 2011 - 09:18)

Faire des optimisations comme tu fais pour ce genre de site, c'est à dire un portfolio tout petit, c'est inutile tout simplement.

On parle d'optimisations quand il y a un grand nombre de visiteurs et beaucoup de contenu.

La je suis bien d'accord.

D'ailleurs ce ne sont pas optimisations en performance qui m'intéressent, mais les optimisation en qualité de rendu (d'où l'utilisation d'images à la place de @font-face pour les titres).

Dans ce cas, place tes images dans le code HTML. Tout simplement.