[pro] Le site d'un infographiste freelance appelé Kaache

Bonjour à tous,

J'ai 21ans, je viens d'obtenir mon DUT SRC (Services et réseaux de communication) à Mulhouse. En réalisant que j'apprends beaucoup plus facilement en autodidacte, chez moi, qu'en suivant des cours dans l'éducation, j'ai décidé de me lancer depuis septembre en tant qu'auto-entrepreneur dans le domaine de la communication web, imprimé et vidéo.

Je poste ce sujet car vos avis concernant mon site internet (code, design, ergonomie etc.) m’intéressent.

Voilà mon site : http://www.kaache.fr

Merci beaucoup !
Modifié par Kaache (19 Dec 2011 - 11:50)

Vraiment....... très classe !

Rien a redire pour ma part !

Allez, comme j'aime bien embêter les gens je dirais que tes projets défilent un peu vite (peut-être stopper le défilement au survol...) mais c'est vraiment pour faire ch*** !

Très belle réa.

Bonne continuation
Modifié par _laurent (19 Dec 2011 - 08:43)

Merci pour ta réponse. Je note ta critique, c'est une bonne idée de stopper au survol.

Bonjour,

Visuellement, j'ai du mal avec le fait que le site ait besoin d'un ascenseur horizontal en 1024... Ça plus les trucs qui bougent super vite et qu'on ne peut pas arrêter, ça ne donne pas envie de rester.

Pour le code:
* 21 erreurs en transitionnel, c'est loose...

* La meta description a pour but de proposer une description sexy qui donne envie aux utilisateurs de moteurs de recherche de visiter ton site. Les fautes de typo et les mots clés, c'est tout sauf sexy. Pour rappel, le contenu de cette meta n'aide en rien le référencement ou le positionnement du site).

* 13 fichiers JS externes... C'est beaucoup trop. Il serait préférable de regrouper tous les fichiers qui peuvent l'être (ceux provenant de ton serveur) en un seul fichier.

* Cufon pour utiliser des polices spéciales, c'est pas vraiment ce qui se fait de mieux. @font-face est plus souple.

* L'avertissement pour les utilisateurs d'IE 7 et inf. c'est bien gentil, mais à part te mettre à dos ces utilisateurs et/ou montrer que tu n'es pas capable de dégrader proprement une intégration, ça n'apporte rien. Ne pas mettre de message est préférable, même si le site ne s'affiche pas bien.

* Les images porteuses de contenu et/ou support de lien DOIVENT TOUJOURS se trouver dans le code HTML avec un texte alternatif correctement fourni. Les choses du genre "<a id="logo" href="http://www.kaache.fr"></a>", c'est juste la certitude de ne plus avoir ni image, ni lien au moindre problème de connexion/serveur.

* Pour les images qui tu as placées dans le code, il serait bien de revoir les alt. Le alt doit reprendre le même contenu que celui porté par l'image. Il n'est pas question de décrire le contenu d'une image purement décorative...

* Le balisage de ton menu déroulant n'est pas idéal, puisque l'on perd la hiérarchie de la partie déroulée.

* Title, sur les liens, ne doit être utilisé que pour apporter une information supplémentaire à l'intitulé du lien ET nécessaire à la navigation. Ce genre de choses :

<a href="" title="Ci-dessous, une sélection des travaux réalisés par Kaache destinés à l&#039;impression. (demandez un devis gratuit en cliquant ici.)">Print</a>

Qui se répète 5 fois, c'est ce qu'on appelle du bruit. Ça n'apporte rien de bien et ça gêne.

* Au contraire, les liens dont l'intitulé se contente de "en savoir +" nécessitent un title expliquant sur quoi on va en savoir plus en cliquant.

Je m'arrête là, mais si tu veux faire de l'intégration (et non pas seulement du design), il faudrait te pencher sur les standards, la qualité web (opquast) et l'accessibilité.

Salut,
C'est original donc bravo déjà.


Maintenant il y a pas mal d'erreurs dans le code pour un doctype quand même assez permissif (transitional), tu as des metas qui ne sont pas fermées, des li sans ul en parent...etc.


Ensuite la molette est parfois bloquée sur ton slider parce que tu as utilisé mousewheel certainement. Les contrastes ne sont pas toujours bien gérés notamment le jaune sur blanc, c'est pas top pour l'accessibilité, d'ailleurs la navigation au clavier est très limitée.


Il y a un bug d'affichage ou une div vide :




Des améliorations possibles donc, bon courage et bonne suite

Merci pour vos réponses complètes, je vais me pencher sur les problèmes que vous avez traités.

J'avoue que mon domaine principal est le graphisme, mais heureusement je développe chaque jour mes compétences dans le domaine de la programmation et j'avais vraiment besoin de vos avis pour progresser.


Par contre j'ai pas trop compris par rapport à l'ascenseur horizontal ? Tu parles du carousel ? il ne bouge pas tout seul ?

J'ai utilisé Cufon en plus de font-face car une des deux typos ne rendait pas bien avec font-face. Peux-tu rapidement m'expliquer pourquoi cufon n'est pas conseillé ?

Encore merci pour votre aide, je ne m'attendais pas à avoir des réponses si complètes !

Laurie-Anne a écrit :


* La meta description a pour but de proposer une description sexy qui donne envie aux utilisateurs de moteurs de recherche de visiter ton site. Les fautes de typo et les mots clés, c'est tout sauf sexy. Pour rappel, le contenu de cette meta n'aide en rien le référencement ou le positionnement du site).

Je ne vois pas quelle sont les fautes de typo ?

Mon rôle est de mettre en valeur votre image, vos services, vos produits à travers des créations graphiques originales et efficaces. (logo, flyers, site web, affiche, carte de visite, photographie, animation flash, illustration, charte graphique...)

J'ai ajouté les mots entre parenthèse pour présenter rapidement mes services à l'utilisateur du moteur de recherche.

Désolé pour ces trois messages de suite mais je crois que j'ai passé le validateur html sans problème à présent, grâce à vous ! Merci pour vos conseils !

A ta place, je passerais en strict pour que cela ait vraiment une importance...
Sinon je ne sais pas si tu t'adressais à moi quand tu parlais du carousel mais en tout cas je maintiens que la molette bloque le scroll sur le diaporama.

Salut salut,

Graphiquement parlant c'est très réussi il n'y a rien à dire la dessus (même si perso je n'accroche pas trop au niveau des couleurs utilisées, mais bon les goûts et les couleurs ... ^^).

Du point de vue typographique tu as opté pour des valeurs sûr avec la magnifique Chunkfive/Bevan (Bevan car je vois que tu as les accents ce qui n'est pas le cas de Chunkfive) et Amaranth. Cependant il persiste une petite erreur dans ta déclaration :

font-family: 'AmaranthRegular',Arial,Helvetica,Sans-serif

Pour tes prochains projets sache que placer Arial avant Helvetica est un non sens, car les utilisateurs de windows n'ont que Arial (donc là ça va) mais les utilisateurs de mac ont les deux. En les plaçant dans cet ordre tu enlèves toutes possibilités à Helvetica de s'afficher. Ça reviendrait au même d'écrire la déclaration sans Helvetica. Hors c'est quand même Arial la pale copie. Donc rendons à césar ce qui est à césar et plaçons Helvetica avant Arial dans la déclaration. C'est une faute fort répandue même dans le template de base de Prestashop c'est comme ça... scandale ! ^^

Un truc tout con, pourquoi dans le slider du bas il y a des flêches gauche/droite alors que le slider monte/descend ? Ça me semble pas logique.

Une chose plus gênante selon moi est qu'aucun lien ne ressort du lot. Regarde ton footer par exemple, en le regardant sais-tu dire ce qui est cliquable et ce qui ne l'est pas ? «Mentions légales» par exemple a exactement le même rendu visuel que ce qui l'entour. Comme ton adresse mail d'ailleurs (au fait pourquoi c'est la seul de son bloc avec cette typo ?).

Pourquoi le module facebook n'est accessible que par la page de contact ? A l'heure où facebook dirige presque le monde ça serait bien de mettre ce bloc là plus en avant et pas l'enfermé dans la page de contact.

Et j'aurai voulu savoir si c'était fait expret le fait que quand on survol un lien actif (dans ton menu) celui ci devient jaune ? pourquoi ?

Sinon c'est une belle réussite dommage pour les deux sliders surtout que le premier n'apporte pas grand chose de pertinent à la page.

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

Bonjour,

Merci d'éditer ton sujet et de modifier son titre en ajoutant le nom du site ou son URL, comme cela est demandé dans les règles spécifiques de ce salon.

Dernier message de la suite, après j’arrête promis

jmlapam a écrit :


Il y a un bug d'affichage ou une div vide :

upload/39092-Sans-titre.png

Ce n'est pas un bug, c'est un choix graphique, la ligne épaisse fait partie de l'image de fond du footer.

Merci à tous.

Ok mais c'est très moyen alors... libre à toi après tout.

a écrit :
Sinon je ne sais pas si tu t'adressais à moi quand tu parlais du carousel mais en tout cas je maintiens que la molette bloque le scroll sur le diaporama.

Je ne m’adressais pas à toi jmlapam, c'était à Laurie-Anne, et je crois que j'ai compris ce qu'elle voulait dire maintenant.

@Gili :

-Merci pour l'info sur Arial et helvetica !

-Pour les liens qui ne se démarquent pas, tu as raison, je vais rectifier ça.

-Pour le module facebook, je comptais justement l'ajouter dans le footer avec le boutton G+ et twitter..

-Le lien pour les pages actives en jaune est juste un hover qui permet de voir que la souris passe dessus.

By the way, si tu veux avoir des écritures de polices correctes, ce lien est une mine:
http://cssfontstack.com

jmlapam a écrit :
By the way, si tu veux avoir des écritures de polices correctes, ce lien est une mine:
http://cssfontstack.com

Dans ce lien il place aussi Arial avant Helvetica ?

font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

Et alors?
Ah d'accord, Gili tu peux donner tes sources?
Moi j'utilise ce site tout le temps mais si c'est naze... pourtant c'est signé/approuvé par Chris Coyier quand même...
Modifié par jmlapam (19 Dec 2011 - 13:09)

jmlapam a écrit :
Ah d'accord, Gili tu peux donner tes sources?

En fait je n'ai lu ça nul part sur internet, c'est mon prof de typographie qui m'a fait remarquer cette boulette. Et c'est également mon prof de web et j'ai total confiance en ce qu'il me dit (d'ailleurs j'ai vérifié plusieurs cas pratique).

D'ailleurs dans le site que tu montres (que je ne connaissais pas et qui est un must have) il décrit des ensembles de polices cohérents. Si tu veux que ta police principal soit Arial, forcément il mettra Arial en premier, la question ne se situe pas là.

Le problème se situe plutôt dans la distinction entre ces deux déclaration, rarement on choisira sciemment un ensemble de police type Arial sachant que c'est une (pâle) copie d'Helvetica. D'ailleurs lui même sur son site a placé Helvetica avant Arial (preuve que ma réflexion est logique ?).

En gros si on veut vraiment avoir Arial sur son site on la met en premier (c'est un peu bête de penser comme ça à mon sens), si on veut un ensemble de police cohérent on mettra Helvetica puis Arial.

Je ne sais pas si je me suis bien exprimé lol
Modifié par Gili (20 Dec 2011 - 13:34)

@gili: merci de tes explications, j'avais pas poussé jusque là, en fait j'avais pas poussé du tout puisque l'outil me convenait bien. Je comprends mieux maintenant.

Mais les polices de cssfontstack tout le monde ne les a pas je me trompe ?

C'est des polices web safe ?