Globalement, que pensez vous du site?








Tout d'abord bonne annee a tous!!! Smiley coeur Pleins de bonheur, sante, argent... Smiley cligne

Je viens de refaire mon site et j'aurai besoin de vos avis! Smiley confused
Constructif surtout! Je veux pouvoir progresser en web design!
J'ai du mal a ne pas avoir de bug avec les galleries flash.... sur ie surtout... Smiley ohwell

1/ Que pensez vous:

- du design?
- de l'accessibilite?
- du code?
- que rajouteriez vous?

2/Je vais me mettre en Freelance, devrais je rajoutez mes services selon vous?

http://www.sb-graphics.fr/ (edit: ajout de l'URL du site)
Modifié par Hermann (09 Jan 2010 - 22:08)
Salut,

Déja, je ne suis pas persuadé que le vote ait un quelconque intérêt pour ce genre de sujet. Des commentaires constructifs et justifiés auront bien plus d'utilité. Smiley cligne

Alors pour se débarrasser d'entrée du problème majeur de ton site, désactive la feuille de style et désactive l'affichage des images, tu vas avoir une légère surprise. Plus de titre, plus d'adresse mail et plus de téléphone.
Tout texte inséré dans une image pour une question esthétique doit se trouver dans le code html est être complétée d'une alternative textuelle pour permettre à l'information de rester accessible en permanence.

En terme d'information, celle de ta navigation est aussi quelque peu défaillante, en me faisant un peu l'avocat du diable, je n'ai aucune idée de ce que je vais trouver derrière tes icônes, il n'existe aucune possibilité d'obtenir cette information hormis en cliquant dessus. Il faudrait un title donnant un intitulé précis pour chaque lien.

Attention ton code comporte des erreurs de validation, qu'il te serait bien de corriger.

Visuellement, j'aime bien globalement, malgré des défauts.
Je trouve déja que le cadre bleu clair qui entoure le contenu n'est ni à cheval sur l'ondulation verte du menu, ni en dessous, mais juste contre. La petite ligne d'un pixel ou deux à l'endroit ou la courbe et le bloc sont tangeant n'est pas spécialement élégante et attire un peu trop l'attention.
Il y a un problème de contraste dans tes textes notamment concernant la couleur orange. Sur la page d'accueil, "web graphic designer." est optiquement beaucoup plus clair que le bleu du texte qui l'entoure, et le contraste avec le fond étant un peu diminué ces 3 mots sont plus difficiles à lire, alors que c'est ceux que tu as cherché à mettre en valeur.
Le "fidelity card" en orange sur bleu foncé est aussi difficile à lire car pas assez clair.
Dans les contrastes aussi, le copyright est relativement invisible.
Les mots "graphic" et "designer" verticaux à gauche ont aussi un contraste différent, ce qui fait qu'on lit très bien le deuxième, mais beaucoup moins bien le premier.
Enfin tout cela se corrigera assez rapidement par de légères modifications de teintes.

Autant j'aime bien ton logo en haut à gauche, mis en valeur par ses teintes dégradées, autant la reprise en pseudo perspective à droite est assez lourde. Tu as rempli car tu as senti que c'était un peu vide... Peux être pourrais tu reprendre un cadrage de tes plantes graphiques en légère trame plus claire, uniquement dans la partie rayée bleue, de plus en plus transparent en allant vers la gauche.

Le double cadre orange de la page d'accueil autour du rectangle bleu mériterait d'avoir des marges un peu mieux maîtrisées, quoi qu'en fait je me dit que le rectangle bleu, un peu trop carré, alourdit le reste de la page plutôt doux et rond.

Attention aux éléments qui restent cliquables sur la page qui les concerne. Le picto de la page d'accueil ne devrait pas l'être sur la page idoine, le picto portfolio non plus, d'autant qu'il mène présentement à une page d'erreur.

Attention aussi à une chose, ton design n'est strictement pas extensible, tout agrandissement de texte (uniquement) conduit à une dégradation de la mise en page, c'est un peu dommage. Il faudrait voir à rendre ton design extensible même si j'avoue que vu l'aspect visuel actuel, cela va être un peu compliqué.

Attention à la compression d'image de ton fond de site, les dégradés compressés en jpeg sont malheureusement souvent inesthétiques, ce qui est le cas du tien. Il faut une compression moins importante, ou carrément opter pour le png, plus lourd, mais qui évite ce genre d'effets.

Je ne sais pas quel est ton "stock" de réalisations, mais je pense que tu pourrais peut être en montrer plus, je trouve que c'est un peu léger présentement.

Au final j'aime bien ton site par son côté frais et doux, mais je pense qu'il mérite encore d'y retravailler ! Smiley cligne
Petit avis rapide...

Personnellement, j'ai l'impression que lorsqu'on arrive sur ton site, on ne sait pas trop où on arrive... ca manque d'un "titre". Le seul titre que je peux voir c'est "Welcome to my portfolio!". C'est très bien, je suis sur un portfolio, mais de qui, de quoi ? Photographie, sites internet, programmation, graphisme,...? En gros, je trouve que ca pourrait être bien d'inverser le "an idea... Make it alive" avec le "graphic designer", et pourquoi ne pas y ajouter ton nom également...

Sinon, même avis que Mikachu par rapport aux icones de navigation, un petit texte en plus serait le bienvenu.

A part ça, le style est assez sympa, j'aime assez bien la courbe verte qui sépare header et contenu qui au passage pourrait même un peu plus courbée à mon gout Smiley smile

Petit détail, il manque une uniformité dans les titres des pages... 4 pages, 4 titres de styles différents :
- sb-graphics/portfolio Stephanie Soupeaux - Graphic-Web Designer - Washington DC
- sb-graphics|about me
- Sb-graphics | Portfolio Print - Stephanie Soupeaux
- sb-graphics|contact
inoune a écrit :
Je vais me mettre en Freelance, devrais je rajoutez mes services selon vous?

Si tu te mets en freelance, c'est la moindre des choses que d'indiquer les prestations que l'on peut effectuer. Smiley cligne

Il y a un point qui m'intrigue : ton site indique que tu es basée à Washington DC (indication corroborée par un numéro de téléphone américain). Or, tu as choisi un nom de domaine en .fr. Smiley confus Si tu vises des clients basés aux États-Unis, pourquoi ne pas utiliser un nom de domaine en .us ou utilisant un TLD générique (.com, par exemple) ? Formulé autrement, lorsque je vois qu'un site utilise un nom de domaine en .fr, je m'attends à ce que ce site vise uniquement un public d'internautes habitant en France.

Lorsqu'on n'a pas le plug-in Flash, le cadre de l'encart « My recent work » est vide. Une liste de tes réalisations (ou un lien vers la page qui les résume) en guise d'alternative serait la bienvenue. Soit dit en passant, l'élément embed ne fait pas partie du standard XHTML 1.0 (ce qui explique les erreurs de validation de la page d'accueil relevées par Mikachu).

Autre souci, lié à l'accessibilité et à la structuration du document : on passe directement d'un h1 (« Welcome to my portfolio! ») à un h3 (« I hope you'll enjoy your visit! »). D'ailleurs, d'un point de vue sémantique, « I hope you'll enjoy your visit! » n'est pas un titre, mais plutôt un paragraphe. Pour ma part, je reverrais la hiérarchie des titres comme suit :
pour la page d'accueil :
- h1 : le logo SB Graphics,
- h2 : Welcome to my Portfolio!
- h3 : My recent work
- h3 : Status ;
pour la page About me :
- h1 : le logo SB Graphics,
- h2 : About me,
- h3 : Who I am?
- h3 : What I do?
- h3 : My Skills PC/Mac (avec une liste non ordonnée au lieu d'un h4 pour indiquer les langages et logiciels que tu maîtrises).

Quant au lien qui mène à ton CV, il devrait préciser que ce dernier est au format PDF et qu'il a un poids (de façon à prévenir les utilisateurs qu'un logiciel lisant les PDF risque de s'ouvrir et que le CV risque de mettre un peu de temps à être téléchargé), en évitant de recourir au verbe cliquer (un utilisateur aveugle ou malvoyant ou un utilisateur qui n'a pas d'autre choix que de naviguer au clavier, en alternant touche Tab et touche Entrer, ne peuvent pas cliquer Smiley cligne ) :
<a href="/images/images/stephanie_resume.pdf">download my resume (<abbr title="Portable Document Format">PDF</abbr>, 646<abbr title="kilo-bytes">kB</abbr>)</a>


Pourquoi utiliser cet élément meta ?
<meta http-equiv="X-UA-Compatible" content="IE=7" />

Un site qui s'affiche bien sous Firefox s'affiche tout aussi bien sous Internet Explorer 8, qui a un très bon support des CSS 2.1.

Les métas keywords et MSSmartTagsPreventParsing sont inutiles et tu peux donc les enlever, de même que ta méta robots (par défaut, un robot de moteur de recherche indexera tes pages et suivra les liens qui y figurent : la méta robots n'est utile que si tu veux donner des instructions négatives comme noindex, nofollow ou noarchive).
Modifié par Victor BRITO (10 Jan 2010 - 15:48)
Graphiquement c'est pas mal même si personnellement ça me fait beaucoup penser à une charte toute faites de CMS.

Par un site en .fr sans version française, je trouve que ça ne le fais pas du tout. Quelqu'un à déjà fait la remarque je crois. Autant prendre un .com.
Sinon un petit drapeau "anglais" et "français" ça peut le faire aussi. Et tu toucheras un public plus large ainsi.
PIGs_DarkSith a écrit :
Sinon un petit drapeau "anglais" et "français" ça peut le faire aussi. Et tu toucheras un public plus large ainsi.
Aux États-Unis, mettre le drapeau anglais c'est pas des plus malin... (et idem, le drapeau français c'est exclure les belges, les suisses...). Il vaux mieux mettre en toute lettres les noms des langues.
Merci a tous pour vos avis!! Smiley smile ca fait plaisir Smiley smile
Je vais donc essayer de corriger toutes mes erreurs... mais il y a certaines choses que je n'arrive pas a faire fonctionner...

Mikachu merci pour tes conseils d'un point de vue graphique.

Au niveau code, je ne sais pas comment faire pour que mon site soit plus accessible... j'ai deja indique des balises alt.

Pour la gallerie flash sur l'accueil, je n'ai pas reussi a rendre le fond du flash transparent (j'ai donc obligatoirement le cadre de couleur et je te l'accorde ca casse un peu tout...) comment faire pour l'enlever sachant que j'ai creer le flash directement dans dreamweaver??
J'ai deja inclus ce code : <param name="wmode" value="transparent"> mais ca ne fonctionne pas.

Au niveau de mes realisations, je debute dans le metier et j'ai eu pas mal de personnes qui m'ont dit de ne pas en mettre plus d'une vingtaine dans mon portfolio.

Victor / PIGs_DarkSith/ Laurie-Anne Merci pour le conseil concernant mon extension.
Je souhaitais prendre un nom de domaine en .com mais j'en avais deja un en .fr donc je ne vais pour l'instant garder celui ci meme si dans la logique vu que je suis aux us pour plus d'un an cela serait mieux un .com mais cela n'est qu'un petit detail.

Pour le noms des langues, je suis d'accord avec toi Laurie-Anne mais je devrais donc mettre fr et en/us?

PIGs_DarkSith
"Lorsqu'on n'a pas le plug-in Flash, le cadre de l'encart « My recent work » est vide. Une liste de tes réalisations (ou un lien vers la page qui les résume) en guise d'alternative serait la bienvenue"
Comment mettre cette liste sans qu'elle apparaisse avec le flash?

Pour la balise embed... je ne sais pas par quelle autre balise la remplacer... ( j'ai vu qu'a cause de mon flash j'ai des erreurs de validations :S) ... Peut etre comme ca ??:


          <object src="new_project.swf" quality="high" wmode="transparent" flashvars="flashlet={imageLinkTarget:'_self',showControls:false,frameShow:false,slideDelay:6,transitionsType:'Fade',slideAutoPlay:true,imageURLs:['slides/p_0001.jpg','slides/p_0002.jpg','slides/p_0003.jpg'],slideLoop:true,imageLinks:['pages/print/portfolio_print.html','pages/print/portfolio_print.html','pages/print/portfolio_print.html'],title:'Poster | Business card | Logo | Magazine | Website ...',imageCaptions:['Fidelity card','Poster','Pages of magazine'],captionSize:12,captionFont:'Verdana',bgColor:#,captionColor:#FF6600}" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="310" height="241"> </object>
        </object>




Si vous pouviez m'aidez a resoudre le gros probleme du fond de mon flash et celui de mon code de validation ca serait super sympa..
Je suis a la recherche d'un travail depuis quelques mois et ce n'est pas facile dans un pays etranger. Et je pense qu'un site bien fait et deja un bon debut...
inoune a écrit :
Victor / PIGs_DarkSith/ Laurie-Anne Merci pour le conseil concernant mon extension.
Je souhaitais prendre un nom de domaine en .com mais j'en avais deja un en .fr donc je ne vais pour l'instant garder celui ci meme si dans la logique vu que je suis aux us pour plus d'un an cela serait mieux un .com mais cela n'est qu'un petit detail.

Personnellement je ne pense pas que ça ne soit qu'un détail si tu veux le plus de monde possible. En tant que français si je recherche au pif... un webdesigner, je ne vais certainement pas cliquer sur un lien en .de ou .pl.
Surtout qu'un domaine en .com ou .us ne coute qu'une petite dizaine d'euros.


inoune a écrit :
Aux États-Unis, mettre le drapeau anglais c'est pas des plus malin... (et idem, le drapeau français c'est exclure les belges, les suisses...). Il vaux mieux mettre en toute lettres les noms des langues.

Ben je ne vois pas le soucis. Les Belges et Suisses savent bien qu'ils parlent français. Donc cliquer sur un drapeau français pour voir le contenu en français ça ne me semble pas idiot (de plus ça reste visible tout en étant discret).
Mettre le nom de la langue ne changent rien. Le Belges pourra te rétorquer qu'il parle Flamand et non Français....
D'ailleurs tu retrouves le système de drapeaux sur des sites assez important comme hardware.fr ou ogame.fr.
inoune a écrit :
Comment mettre cette liste sans qu'elle apparaisse avec le flash?

Pour la balise embed... je ne sais pas par quelle autre balise la remplacer... ( j'ai vu qu'a cause de mon flash j'ai des erreurs de validations :S) ... Peut etre comme ca ??:

Corrige ton code comme suit :
<object type="application/x-shockwave-flash" data="new_project.swf" width="310" height="241">
  <param name="flash_component" value="ImageViewer.swc" />
  <param name="movie" value="new_project.swf" />
  <param name="quality" value="high" />
  <param name="FlashVars" value="flashlet={imageLinkTarget:'_self',showControls:false,frameShow:false,slideDelay:6,transitionsType:'Fade',slideAutoPlay:true,imageURLs:['slides/p_0001.jpg','slides/p_0002.jpg','slides/p_0003.jpg'],slideLoop:true,imageLinks:['pages/print/portfolio_print.html','pages/print/portfolio_print.html','pages/print/portfolio_print.html'],title:'Poster | Business card | Logo | Magazine | Website ...',imageCaptions:['Fidelity card','Poster','Pages of magazine'],captionSize:12,captionFont:'Verdana',bgColor:#,captionColor:#FF6600}" />
  <a href="pages/print/portfolio_print.html">See my complete portfolio</a>
</object>

Soit dit en passant, tu peux te contenter de ce code-là, sans avoir à le mettre dans un élément noscript ni à le doubler d'un script JavaScript. Et je te déconseille d'utiliser le paramètre wmode, qui rend le Flash inaccessible aux lecteurs d'écran.

[Edit, Laurie-Anne : j'ai supprimé le code de la citation qui déformait le forum]
Modifié par Laurie-Anne (12 Jan 2010 - 09:28)
PIGs_DarkSith a écrit :
Ben je ne vois pas le soucis. Les Belges et Suisses savent bien qu'ils parlent français. Donc cliquer sur un drapeau français pour voir le contenu en français ça ne me semble pas idiot (de plus ça reste visible tout en étant discret).
Mettre le nom de la langue ne changent rien. Le Belges pourra te rétorquer qu'il parle Flamand et non Français....
D'ailleurs tu retrouves le système de drapeaux sur des sites assez important comme hardware.fr ou ogame.fr.

Alors, primo, je vis en Belgique ; secundo, tous les belges ne parlent pas français flamand et allemand (oui, l'allemand est aussi une langue officielle) ; tertio, les belges néerlandophones qui ne parlent pas français ne vont pas chercher à lire du français...

Et je reste sur mes position, beaucoup de belges se sentent bafoués quand ils doivent cliquer sur un drapeau français pour avoir le site en langue française. Un drapeau indique une nationalité, pas forcément une langue. Il est toujours préférable d'indiquer la langue qu'un pays.
Merci Victor! Ca a l'air de bien fonctionner Smiley smile cependant, j'aimerai le fond noir qui se met par defaut car cela n'est pas du tout en accord avec mon site :S Comment dois-je faire sans passer par le wmode???
Laurie-Anne a écrit :
Aux États-Unis, mettre le drapeau anglais c'est pas des plus malin... (et idem, le drapeau français c'est exclure les belges, les suisses...). Il vaux mieux mettre en toute lettres les noms des langues.


J'y avais pas pensé, mais c'est effectivement très vrai comme remarque.
Le drapeau représente une nationalité. Pour représenter une langue il y a les codes langues.

C'est même normé sous le code ISO 639-1 : Les codes langues

Tu peux donc avoir "Choisissez votre langue : FR | EN | etc..."
Laurie-Anne a écrit :
Un drapeau indique une nationalité, pas forcément une langue. Il est toujours préférable d'indiquer la langue qu'un pays.


+1
Un drapeau, c'est un pays, tu crées donc une confusion (en plus du risque de froisser ton visiteur) en utilisant ce picto pour définir une langue. Imagine que tu souhaites dire "version espagnole" en mettant un drapeau de l'Espagne : laquelle des 4 langues officielles de ce pays désignes-tu ? Impossible de le savoir.

C'est justifié en revanche si tu souhaites indiquer un contenu réservé à un pays, pour des raisons juridiques par exemple (âge de la majorité différent, etc.).

Jakob Nielsen sur le sujet : http://www.useit.com/alertbox/flagproblem.html
Mouè c'est pas mal niveau design, après j'ai une grosse connexion donc je sais pas si tout le monde peux y avoir accès....

Et pour l'histoire des drapeaux oui, mais le meilleur exemple c'est l'Italie par ce que en Italie personne n'est italien chacun d'eux se disent de sa région ou de sa ville : Siciliens, Napolitains, Calabrais...
Modifié par Zebiloute (14 Jan 2010 - 14:10)