[intermédiaire] www.nicolasschiff.com

Bonjour,

Webdesigner, intégrateur et graphiste multimédia en tant que Freelance, j'ai récemment mis en ligne mon site personnel www.nicolasschiff.com
Celui-ci à l'origine devait me permettre de trouver un stage pour ma formation universitaire. Ceci étant fait, j'ai changé sa fonction pour présenter mon activité et les services que je propose. Il me servira également de portfolio pour mes futures candidatures en entreprise.

Attaché au respect des normes du W3C, j'ai veillé à appliquer mes connaissances en termes de sémantique, d'accessibilité et de référencement naturel.

J'aurais donc besoin de votre avis personnel que ce soit au niveau du design ou de l'ergonomie, mais également au niveau de la qualité de l'intégration et du code.

Enfin je tiens à préciser que le site est "codé main", sans utiliser de CMS mais que j'ai automatisé plusieurs actions avec PHP (base de données pour le portfolio etc...)

Merci d'avance,
Nicolas
Modifié par Javert67 (31 May 2012 - 10:18)

Salut !

Bon bah je trouve ça cool.
Rien de choquant pour moi a première vue (j'ai pas plongé la tête dans le code désolé c'est le weekend bientot) c'est même plutot réussi a mon gout

Trois petites remarques (sinon bah ca serait pas drôle hein !!)

- Ton logo/nom est pas très en valeur.... ça mériterait une plus grosse mise en avant !

- Ta favicon est une bulle et on dirait qu'il y a un truc marqué dedans... (ou alors c'est juste un décors et je me trompe désolé) Mais du coup j'en ferait une plus simpliste que l'on comprend (donc sans texte illisible) et surtout avec un élément que l'on retrouve sur ton site et plus particulièrement dans ton "logo" dans ta "marque" comme les "</>" par exemple j'en sais rien. Mais cette bulle je ne l'ai revu nulle part... (ou alors j'ai pas bien chercher mais ça reviens au même)

- Le dernier point et plus une réflexion et porte sur ton fil d’Ariane. Je ne pense pas qu'il soit nécessaire ici. Sur les 6 menus seul le portefolio possède des sous-menus. Tu as déjà un accès direct à l'accueil via le menu. En plus le fil d’Ariane fait comme si la page était imbriquée dans l'accueil alors qu'elle est adjacente dans le menu. Toujours en plus, le fil d’Ariane répète ton titre... "Accueil Accueil" etc pour pas grand chose. Il serait plus judicieux de ne pas mettre ce fil d’Ariane et de proposer un retour au portefolio en haut des sous-pages du portefolio (je suis clair la ? ).
Si tu l'avais mis car une fois scrollé le slider empêche l'accès au menu c'est un petit soucis d'accessibilité... quelques solutions (il y en a surement d'autres hein) :
1) Gader un big slider sur la page d'accueil puis l'enlever ou en faire un réduit sur les autres pages (en plus le fil d’Ariane sur la page d'accueil est plus qu'inutile) (c'est la solution préférable pour moi)
2) que le bandeau soit fixe ou bien vienne sous le slider au scroll
3) slider qui peut se masquer/s'afficher
4) bouton retour en haut sur le coté de la page



Voila pour les premières réactions a chaud,

Bonne continuation (mais ça a l'air très bien parti !)
Bon weekend a tous !

Modifié par _laurent (25 May 2012 - 17:27)

Merci beaucoup pour ces remarques très constructives

Effectivement, j'étais pas totalement satisfait de la favicon et je n'avais pas pensé à utiliser les caractères </> qui est une très bonne idée !

Concernant mon logo, je vais voir ce que je peux faire pour le mettre un peu plus en valeur aussi.

Enfin pour le fil d'Ariane, initialement je voulais le faire apparaître que sur les pages (et sous-pages) du portfolio. Mais je me suis dit que pour être cohérent avec mon site, il fallait le faire apparaître partout. L'idée ne me plaisait pas puisque comme tu l'as souligné, il est par exemple inutile sur la page d'accueil.
Je pense donc opter pour la solution de faire apparaître un lien de retour vers le portfolio sur les différentes sous-pages. Concernant le slider, je ne suis pour l'instant pas totalement décidé à le laisser sur toutes les pages où à l'enlever (de peur que ça fasse vide...)

Merci encore pour cette analyse et bonne continuation
Nicolas

Hop je refais un passage bref.

C'est un plaisir si ça peut t'aider !

Ensuite j'ai remarqué une petite incohérence, c'est peu être du au fait que tu changes encore des trucs mais je me permet de le relever au cas ou.
Quand on clique sur "Portefolio" on s'attend à avoir le choix des 7 sous pages (création graphique, support de com, etc.) or on ne tombe que sur 4 de tes dernières réalisations et on est obligé de passer par le menu pour aller aux différentes rubriques... faut changer ca !

Bonne fin de journée !

Effectivement j'ai prévu de faire apparaitre les sous-catégories du portfolio sur la page globale de celui-ci. Par contre je ne sais pas comment représenter ça... Plutôt par de grosses icônes (sachant qu'il y en a déjà sur la page des services) ? Plutôt par des boutons avec du texte ? Une liste de liens ? J'avoue que sur cette page je sèche un peu...

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.

Désolé, est-ce bon comme ça ?

Salut,

Sympa ton site. J'aime beaucoup la bannière très réussie.
Juste des détails qui me semblent pas très vendeurs :

- le screenshot de Notepadd++ pour illustrer les services que tu proposes
- le menu de navigation du footer est pas du tout travaillé
- les créations graphiques sont trop simples, cela se résume à un filtre parfois
- toujours la même présentation dans ton portfolio même si elle est bien faîte cela peut lasser


Sinon c'est agréable à visiter

Merci pour ces quelques remarques

- Concernant le screenshot des lignes de code, je pensais à l'origine mettre une capture d'écran d'un site web. Cependant ça met en valeur un site uniquement et on risque de confondre avec une vignette du portfolio. Que puis-je mettre à la place ?

- Pour le menu du footer je vais ajouter une transition CSS au survol des liens (changement de couleur et déplacement léger vers la droite).

- Concernant les créations graphiques, effectivement certaines sont peut être simplistes. Lesquelles pensez-vous que je devrais supprimer du portfolio ?

Merci encore.
Nicolas

Bah,
notepad ++ c'est pas très funky et en général c'est perçu amateur. Il y a des banques d'images libres où tu trouveras plus de choix.
Pour les créas au moins bulles lumineuses, ombre et effet de vitesse à retravailler.

Enfaite c'est de Dreamweaver la capture d'écran mais bon ça ne change rien puisque si je comprend bien c'est le principe des lignes de codes qui ne va pas. Je tacherais de changer ça

Concernant les créations graphiques, je pensais effectivement aux mêmes éléments. Merci.

Javert67 a écrit :
Enfaite c'est de Dreamweaver la capture d'écran mais bon ça ne change rien puisque si je comprend bien c'est le
principe des lignes de codes qui ne va pas. Je tacherais de changer ça

Non non je visais Notepad ++ et Dreamweaver... pour un webdesigner j'irais plutôt voir du côté des Text-Mate, côté Mac où la vie est plus design ou alors tu mets juste du code que tu auras toi-même capté par un screenshot par exemple.
Modifié par jmlapam (31 May 2012 - 14:58)

Bonjour,

Javert67 a écrit :
Celui-ci à l'origine devait me permettre de trouver un stage pour ma formation universitaire. Ceci étant fait, j'ai changé sa fonction pour présenter mon activité et les services que je propose. Il me servira également de portfolio pour mes futures candidatures en entreprise.

Au niveau du portfolio, il y a beaucoup de problèmes de contenu:

- Comme jmlapam, les exercices toshop. En plus ça fait travail scolaire.
- Les partitions de musique, je peine à voir le rapport avec "webdesigner – intégrateur"
- Mes dernières réalisations: 2 print 2 partitions: rapport avec "webdesigner – intégrateur"

Je peine à trouver de vraies réalisations parmi le travaux scolaires et autres exercices. Quel client veut confier un boulot à quelqu'un qui n'a jamais rien fait d'autres que des exercices?

À mon avis il y a beaucoup trop de choses dans ce portfolio, et de qualité pas exceptionnelle.

Voilà je suis entrain de bosser sur mon site et j'ai remplacé le code à la "Notepad++" par une coloration syntaxique plus sympa et plus proche de textmate.

Concernant mon portfolio, j'ai modifié ma requête SQL pour que les créations musicales n'apparaissent pas parmi les dernières créations présentes sur la page "portfolio" ce qui évitera déjà un problème de "rapport" entre les différentes créations.

Ensuite, je vais faire le tri parmi mes différentes créations pour voir si je peux ôter quelques travaux moins intéressants.

Enfin, en ce qui concerne les partitions, je pense garder la page "musique" de mon site puisque même si ça n'est pas mon métier, ce sont tout de même mes créations et j'aimerais pouvoir les exposer, surtout après le temps que j'ai passé pour créer ces pages. Cependant qu'en pensez-vous : si je précise à l'internaute que les créations de cette page (musique) sont présentes uniquement à titre informatif et ne font pas l'objet d'une prestation pouvant être facturée dans le cadre de mon activité de graphiste ?

En fait l'impression débutant peut être donnée par le côté "je vous montre absolument tout ce que je fais". Pour ma part mais je peux largement me tromper car comme toi j'apprends, je pense qu'un site tout blanc avec 50 liens vers des réalisations concrètes tapera plus dans l'oeil des clients. Après tout dépend du client que tu vises mais par ma très modeste expérience je te conseille de viser plutôt "les clients à l'âge malin" (comme dirait Rudy Rigot) que les particuliers (it's a joke !). Tu progresseras beaucoup plus par ce que du coup on n'est pas vraiment sur la même exigence.
Modifié par jmlapam (31 May 2012 - 21:04)

Bonjour,

Sur le site je vois :

a écrit :

Attaché au respect des standards du web et à l’accessibilité de son contenu, je développe des sites en produisant un code valide, fonctionnant sur tous les principaux navigateurs du marché. Ainsi je favorise le référencement naturel de vos pages tout en accordant une attention particulière à l’accès aux personnes à déficience visuelle.

Maintenant je suis un client qui trouve les réalisations graphiques intéressantes ou bien une agence web cherchant un indépendant qui prends en compte l'accessibilité dans son boulot.

Même si votre vision de l'accessibilité est très réductrice, pour rappel, l'accessibilité est utile à tous et pas uniquement aux personnes déficientes visuelles, je me lance.

J'arrive donc avec ma petite batterie de tests et là patatras.

1) Navigation au clavier impossible {outline:none;} çaymal

http://www.alsacreations.com/astuce/lire/1150-reset-css-et-outline-attention.html

2) Le menu n'est pas navigable au clavier. Alors même si le lien de premier niveau renvoie sur une page qui donne accès aux sous rubriques je ne vois pas pourquoi je dois être discriminé par rapport à quelqu'un qui navigue avec une souris.

De plus, comme il n'existe aucun lien d'évitement (ou accès rapide) je suis obligé de me retaper tout le menu de premier niveau ainsi que le menu des sous rubriques sur la page.

Si je veux accéder à la sous rubrique musique dans portfolio cela fait 17 tabulations. Si le menu était accessible au clavier cela ne m'en ferais que 12.

Alors sur cette exemple 5 tabulations ce n'est pas énorme c'est vrai (quoique 5 tabulations pour certaines personnes cela peut avoir un impact) mais je me dis que sur un site avec des supers menu on peux vite passer à 10, 15, 20.... tabulations supplémentaires et inutiles.

3) Comme cité plus haut aucun lien d'évitement

4) Si je désactive la couleur le menu déroulant devient difficilement utilisable même à la souris, à aucun moment je peux discerner sur quel lien je me situe exactement en principe une information ne doit pas passer uniquement par la couleur.

5) Le slider ne comporte aucun moyen d'être stoppé

6) Si je désactive les images, le contraste du menu est insuffisant.

Le formulaire de contact

1) Même si les "label" sont bien implémentés j'ai tendance à rajouter un cursor:pointer pour montrer qu'ils sont cliquables.

2) J'ai fais un test en omettant certains champs et je me retrouve avec un beau message rouge qui me dit "tous les champs sont à remplir" mais à aucun moment on m'informe de cela. En principe on l'indique en début de formulaire que les champs avec (*) sont obligatoires ou directement dans le label.

Exemple:
Nom (obligatoire)

3) Je suis obligé de remplir à nouveau la totalité du formulaire. Je devrais avoir à remplir uniquement ceux ou se situent les erreurs.

4) Le message d'erreur devrait normalement se situer au niveau du ou des champs qui comportent l'erreur

5) J'ai voulu retourner à l'accueil mais je me suis aperçu que le message d'erreur occultait complètement le menu. Même si il existe un menu me le permettant dans le footer c'est assez déstabilisant.

Dans le footer le lien "cliquez" ici pour accéder au formulaire n'est pas très explicite, je ne vois pas ce qui empêchait ici de mettre un lien du type "Accéder au formulaire de contact".

Voilà, le bilan est que vous venez de perdre un client ou la possibilité de travailler avec une agence web qui cherchait un profil "accessibilité".

C'est dommage de mettre en avant cette compétence et de tout gâcher avec de petites erreurs d’inattentions.
Modifié par knarf (01 Jun 2012 - 03:04)

Bonjour,

Merci pour cette analyse d'accessibilité particulièrement intéressante.
Je dois dire que pour l'instant - mon site étant toujours en développement - je n'ai pas accordé suffisamment de temps à l'accessibilité de mon site. Effectivement, pour plusieurs raisons, j'ai préféré mettre mon site en ligne une fois que celui-ci était fonctionnel et terminé graphiquement. Ceci dit, je suis toujours entrain de le modifier, principalement au niveau des fonctionnalité, de l'ergonomie et justement de l'accessibilité (le message d'erreur du formulaire n'était pas encore présenté de cette manière il y a deux jours).

Je comprend que les points que tu as soulevé aient pu te choquer et ils seront corrigés sous peu. Grâce à ces précieuses remarques, au moins je suis sûr de ne rien oublier

Merci pour le temps consacré à l’amélioration de mon site

Voilà j'ai déjà apporté de nombreuses modifications (par encore en ligne) parmi lesquelles :

- Navigation au clavier (outline rétablis, menu qui se déroule).
- Indication explicite des champs obligatoires des formulaires.
- Cursor:pointer sur les labels des formulaires.
- Message d'alerte du formulaire (en cas d'envoi ou d'erreur) qui disparait automatiquement au bout de 4 secondes pour ne pas masquer le menu.
- Lien "cliquez ici" dans le footer, renommé convenablement.

Le reste des modifications est en cours. Par contre je butte sur un point : les liens d'évitement.
Peux-tu m'éclairer sur la manière de les utiliser ? Comment ferais-tu à ma place sur mon site ?

Merci encore.

Pour les liens d'évitements http://www.alsacreations.com/tuto/lire/572-Les-liens-d-evitement.html

Merci pour le lien.

Voilà, j'ai mis en ligne une "nouvelle version" corrigeant déjà les nombreux défauts d'accessibilité dont je parlais avant, plus les suivants :

- En désactivant les images, le menu reste accessible (couleur de fond sombre)
- Le slider peut-être stoppé en cliquant dessus
- En cas d'erreur dans le formulaire, les champs ne sont pas vidés (pour éviter de tout ressaisir)

Seuls les liens d'évitements et le problème de désactivation de la couleur n'est pas encore réglé.