[Intermédiaire] Portfolio : www.graphibulle.com

Bonjour à tous,

Suivant un cursus dans le développement web, j'ai eu pour "exercice" en début de formation la réalisation d'un site portfolio présentant mes compétences.

Je sais que ce site est perfectible, du coup je viens par ici pour avoir plus de précisions sur les défauts existants, les corrections minimes et importantes à effectuer, car je vais d'ici peu m'atteler à le refaire proprement dans un but professionnel.

Ce site est réalisé en HTML / CSS, du Javascript pour le menu, et du PHP couplé à du JQuery pour la page de contact.
Les sites présents dans l'onglet "Sites Web" sont réalisés là aussi dans le cadre du cursus, pour l'un avec PHP, pour l'autre avec un CMS que je trouve pour le moins perfectible que je ne pense pas conserver par la suite.

Merci d'avance pour vos retours, je n'hésiterais pas à participer d'avantage à ce forum et à donner mon avis dès que j'aurais un peu plus de temps et de connaissances.

Voici l'adresse : Graphibulle
Modifié par Mathy (05 Jul 2011 - 17:42)

Salut !

Alors je te livre mes premières impressions sans approfondissements.

- Le menu : C'est possible de faire un peu plus sobre parce que ça pête un peu à la tronche toutes ces animations, c'est un peu too much de mon point de vue...

- Le compteur en bas à droite : rien de plus has been

- Dans le menu tu mets un item "formulaire php" : le visiteur a-t-il vraiment besoin d'avoir le nom de la techno derrière ton formulaire ?

- Je ne sais pas pourquoi mais ton site rame au scroll (sur safari en tout cas).

++
Modifié par Thierry_B (05 Jul 2011 - 20:16)

Ton site est un vrai paradoxe, un mélange de trucs vraiment sympas et en même temps de la pire beauferie.

Si j'ai un peu de temps je donnerais quelques détails plus tard.

Bonjour,

Le menu c'est un horreur à utiliser : l'apparition fait peur et sans JS (ou au clavier), pas de sous-menu... Accessoirement, même à la souris, cliquer sur un sous-menu pourra relever du défi pour certains.... Bref, ça il faut absolument revoir.

La différence entre le header super "graphique" et le contenu quasi nu est trop contrastée.

Sans les images, on perd une grande partie du contenu du site (genre, son nom). Les images porteuses de contenu ne doivent JAMAIS se trouver dans le CSS. TOUJOURS dans l'HTML avec un alt correctement rempli.

Je te reviens demain avec un analyse du code (flemme ce soir).

Je partage l'avis de Laurie-Anne concernant le menu : Pas très accessible à première vue.

Pour le logo, j'aurais bien vu une typo un peu plus ronde (gonflée) comme une bulle puisque c'est dans le titre.

C'est vrai que dans le corps, tu pourrais envisager une texture très légère ou d'autres artifices pour l'habiller. Pourquoi pas une sidebar pour réduire la largeur de lecture des contenus.

jb_gfx a écrit :
Ton site est un vrai paradoxe, un mélange de trucs vraiment sympas et en même temps de la pire beauferie.

Si j'ai un peu de temps je donnerais quelques détails plus tard.

@jb_gfx : Qu'est-ce qui correspondrait à de la beauferie ? Et du coup, qu'est-ce que tu trouves sympa ?

En reprenant les différents avis, je vous rejoins sur certains points :

@Thierry_B : Le compteur, évidemment has been, je l'ai mis pour savoir comment ça fonctionnait et par flatterie quand je le vois s'incrémenter... Je vais l'enlever.
Le Formulaire PHP, c'était indiqué dans le but scolaire d'indiquer aux personnes qui vont me noter que j'ai utilisé ce langage. Effectivement, c'est de trop.
Chez moi je ne constate pas de ramage, mais peut-être (et surement) que mon site n'est pas optimisé.

@Thierry_B / Laurie-Anne / strategio : Le menu j'ai eu certains retours positifs, étonnamment venant de développeurs plutôt confirmé mais dont le graphisme n'est pas la priorité. C'est ma "priorité" dans les changements, je souhaite le rendre ergonomique et accessible. C'est vrai qu'à force de le côtoyer, j'ai l'habitude et je ne sens pas ce manque d'accessibilité.

@Laurie-Anne / strategio : Je note tout ça, avec dans l'idée de réaliser un nouveau logo et une autre façon de présenter le contenu dans les côtés "amusants".
Et grosse boulette pour ma façon d'utiliser les images donc.
J'ai déjà peur pour l'analyse du code, je ne me souviens plus comment c'est fait, je m'y replongerais demain.

Merci beaucoup pour ces premiers retours en tout cas.

Re-bonjour,

Bon pour commencer, grosse erreurs dans ton code : deux balises <body>. C'est comme Les highlanders, une seule peut rester. De plus le <style> n'est pas autorisé dans le <body>.

Le title s’en tirerais très bien sans « Bienvenue dans notre ». Attention à ne pas avoir de titre de page trop long.

La meta robots est inutile car elle a ses valeurs par défaut.

La meta description sert à apporter une description de la page, pas une liste de mots clés. Le seul intérêt de cette meta est qu’elle peut être affichée par les moteurs de recherche dans leurs pages de résultats, s’ils la juge pertinente. Cette meta doit donc être pertinence et sexy (son but étant de décider le visiteur à cliquer sur le lien). Là, sa pertinence est plus que discutable et son côté sexy est totalement absent.

La meta keywords ne sert à rien, à part prendre de la place et aider Google a placer ses pubs.

6 scripts dans le header... c’est beaucoup trop. Il faut regrouper ceux qui peuvent l’être (donc tous sauf ceux venant de sources externes) et les placer de préférence en fin de document (sauf, éventuellement, s’il y a chargement asynchrone).

3 feuilles de style, idem, il faut les regrouper en un seul fichier.

Il faut éviter les styles en lignes, surtout quand ils sont appelés n’importe comment et n’importe où (voir erreur validateur).

Le menu est donc à revoir totalement. Pour les effets de déroulement, il est préférable d’utiliser JS et de veiller à ce que tout fonctionne lorsque l’on navigue au clavier (touche tab) et que les liens restent utilisables et visibles même sans JS.

Comme déjà dis, si une image a du texte dessus, elle va dans le HTML avec un attribut alt correctement rempli.

Ta hiérarchie des titres est fausse. Elle commence à h3 alors qu’elle devrait commencer à h1 (voir article à ce sujet dans la partie « Apprendre » du site).

Le « Bienvenue chez nous » c’est du titre qu’il est inutile... Et je pense que ça fait partie des éléments de beaufitude relevé par JB.

L’utilisation de plus d’un <br> consécutifs est le signe certain qu’un nouveau paragraphe aurait du être créé.

Pourquoi mettre des guillemets autours du nom de l’agence ?

Le <br> avant la fermeture de la div contenu n’a rien à faire là.

Attention (page compétences), em ne doit pas être utilisé pour mettre le texte en italique ! Il indique une emphase. Son utilisation dans cette page est totalement abusive et contreproductive. Pour mettre le contenu d’un élément en italique il y a le CSS et span pour ne cibler qu’une portion de ce contenu.

Le contenu de ta page CV est un peu léger. Il serait bien de détailler les taches que tu as effectuées dans tes fonctions et de préciser s’il s’agit de stages ou non. Idem pour les formations, précise les modules suivis.

Sur ton formulaire de contact, les labels sont effectivement mal mis en place. Pour être utile, un label doit être de la forme :

<label for="nom">Mon beau label</label>
<input id="nom" ...>

.

La gestion des erreurs de ton formulaire n’est pas accessible. Afficher en JS le message d’erreur dans les éléments vides prévu a cet effet risque de gêner. Il serait préférable que les messages soient dans le code, masqués au chargement de la page en JS et affichés au besoin.

Je plussoie Laurie-Anne.

Précision pour la balise em et les autres balises de ce type ( "strong","italic","b" ... ), elles ne doivent pas être utilisées pour des questions de design mais plutôt au sein d'un paragraphe de texte quand elles sont appropriées ( voir les spécifications W3C).

Ici tu es déjà dans une balise "li" , applique le css qui va bien à tes balises "li" et enlève les balises "em", vu qu'elles encadrent tout le texte elles n'apportent rien à part leur design naturel css mais sémantiquement elles ne sont pas appropriées.

Maintenant le "span" je trouve qu'il doit être limité à repérer certains éléments de texte non pour leur design mais leur sémantique, par exemple faire un

<span class="auteur">Ovide</span>

est plus approprié qu'avec une balise "strong" ( on peut aussi utiliser les data ... pas encore étudié ça ... )

par contre une partie de phrase qui doit être mise en exergue doit plutôt utiliser les balises "em", "italic","b" ou "strong" suivant le cas , par exemple comme la phrase entre parenthèses que j'ai mis au-dessus en italique .
Modifié par Arialia (06 Jul 2011 - 09:42)

Laurie-Anne a écrit :
Re-bonjour,

Bon pour commencer, grosse erreurs dans ton code : deux balises &lt;body&gt;. C'est comme Les highlanders, une seule peut rester. De plus le &lt;style&gt; n'est pas autorisé dans le &lt;body&gt;.

Oups...

Laurie-Anne a écrit :
Le title s’en tirerais très bien sans « Bienvenue dans notre ». Attention à ne pas avoir de titre de page trop long.

La meta robots est inutile car elle a ses valeurs par défaut.

La meta description sert à apporter une description de la page, pas une liste de mots clés. Le seul intérêt de cette meta est qu’elle peut être affichée par les moteurs de recherche dans leurs pages de résultats, s’ils la juge pertinente. Cette meta doit donc être pertinence et sexy (son but étant de décider le visiteur à cliquer sur le lien). Là, sa pertinence est plus que discutable et son côté sexy est totalement absent.

La meta keywords ne sert à rien, à part prendre de la place et aider Google a placer ses pubs.

6 scripts dans le header... c’est beaucoup trop. Il faut regrouper ceux qui peuvent l’être (donc tous sauf ceux venant de sources externes) et les placer de préférence en fin de document (sauf, éventuellement, s’il y a chargement asynchrone).

3 feuilles de style, idem, il faut les regrouper en un seul fichier.

Il faut éviter les styles en lignes, surtout quand ils sont appelés n’importe comment et n’importe où (voir erreur validateur).

Je note aussi. Pour le menu, j'ai bêtement repris quelque chose qui semblait à la mode pour voir un peu comment fonctionnait JQuery, sans réfléchir, d'où la multiplication de CSS et de Javascript.

Laurie-Anne a écrit :
Le menu est donc à revoir totalement. Pour les effets de déroulement, il est préférable d’utiliser JS et de veiller à ce que tout fonctionne lorsque l’on navigue au clavier (touche tab) et que les liens restent utilisables et visibles même sans JS.

Oui en attendant de trouver mieux, je remettrais le menu classique et accessible que j'avais fait avant d'insérer celui-là.

[quote=Laurie-Anne]Comme déjà dis, si une image a du texte dessus, elle va dans le HTML avec un attribut alt correctement rempli.

Oui c'est bien rentré, je vais faire ça en priorité.

Laurie-Anne a écrit :
Ta hiérarchie des titres est fausse. Elle commence à h3 alors qu’elle devrait commencer à h1 (voir article à ce sujet dans la partie « Apprendre » du site).

Re-oups...

Laurie-Anne a écrit :
Le « Bienvenue chez nous » c’est du titre qu’il est inutile... Et je pense que ça fait partie des éléments de beaufitude relevé par JB.

C'est une erreur, car je ne pensais pas en faire quelque chose de professionnel, c'était principalement pour avoir du contenu.

[quote=Laurie-Anne]L’utilisation de plus d’un &lt;br&gt; consécutifs est le signe certain qu’un nouveau paragraphe aurait du être créé.

En effet.

Laurie-Anne a écrit :
Pourquoi mettre des guillemets autours du nom de l’agence ?

Car pour le moment ce n'était pas dans un but professionnel.

Laurie-Anne a écrit :
Le &lt;br&gt; avant la fermeture de la div contenu n’a rien à faire là.

En effet.
Oups...

Laurie-Anne a écrit :
Attention (page compétences), em ne doit pas être utilisé pour mettre le texte en italique ! Il indique une emphase. Son utilisation dans cette page est totalement abusive et contreproductive. Pour mettre le contenu d’un élément en italique il y a le CSS et span pour ne cibler qu’une portion de ce contenu.

En effet.

Laurie-Anne a écrit :
Le contenu de ta page CV est un peu léger. Il serait bien de détailler les taches que tu as effectuées dans tes fonctions et de préciser s’il s’agit de stages ou non. Idem pour les formations, précise les modules suivis.

D'accord. Donc, réfléchir au contenu avant de coder.

Laurie-Anne a écrit :
Sur ton formulaire de contact, les labels sont effectivement mal mis en place. Pour être utile, un label doit être de la forme :

<label for="nom">Mon beau label</label>
<input id="nom" ...>

.

La gestion des erreurs de ton formulaire n’est pas accessible. Afficher en JS le message d’erreur dans les éléments vides prévu a cet effet risque de gêner. Il serait préférable que les messages soient dans le code, masqués au chargement de la page en JS et affichés au besoin.

Je vais le revoir, mais ce qui m'importait pour le moment c'était d'éviter les mails indésirables avec quelques protections.

Bilan :
- Réfléchir à contenu plus sérieux et plus étoffé avant de me replonger dans le code.
- Revoir la conformité aux normes et l'accessibilité, en particulier du menu.

j'aime beaucoup le style du site...


c'est très fluide sur mon pc de boulot et il date pas d'aujourd'hui ...

Les effets sont sympas et originaux

dommage que ça soit pas très accessible, si tu arrangeais ça, ça serait parfait...

après c'est des questions de goût, c'est vrai qu'on est sur un forum ou l'accessibilité prime, ce que je comprends sur des gros sites d'informations et les sites publiques ou c'est vraiment nécessaire ... mais pour un site comme le tien, s'il n'est pas accessible à 100% c'est pas super grave .. tu rejoindras les 99% d'autres sites qui ne le sont pas non plus.

Si tu codes bien au niveau de l'accessibilité, tu rentreras peut-être dans des créations de sites pour gros professionnelle, comme alsacreations.fr sait si bien le faire...

Après c'est vrai que ce forum est très dur avec ça, ce qui a fait sa réputation d'ailleurs, sa notoriété. C'est bien, mais ton site dépasse largement la moyenne de tous les autres du même type.

Revoit un peu la typographie et la présentation (ca fait un peu vide), mais sinon je te dis bonne chance par la suite !

mobile83 a écrit :

Les effets sont sympas et originaux

Après c'est vrai que ce forum est très dur avec ça, ce qui a fait sa réputation d'ailleurs, sa notoriété. C'est bien, mais ton site dépasse largement la moyenne de tous les autres du même type.

Quels sont les effets que tu trouves "sympas et originaux" ?

Sinon dans le reste de ton message, mon but est déjà d'être exigeant avec mon propre site pour ensuite proposer quelque chose de correct au niveau professionnel si mon projet voit le jour.

Pour le contenu, j'y réfléchis activement et je suis en train de modifier ça, en local pour le moment.

En tout cas, merci pour ton message.

Salut,

je vais être un peu sec mais tu pourras faire la même chose avec mon site que je posterai d'ici une semaine ...

Le menu : Je suppose que tu as trouvé sympa le script de Codrops sorti il y a quelques mois, et que tu pourrais le mettre sur ton site ... ben nan, là c'est moche et ça sert à rien. En plus, sur l'écran de mon netbook, on voit pas la fin (on voit juste "Parco" pour "Parcours").

Le header plus généralement : je trouve que le design n'est pas de très bon goût, mais là c'est un avis perso, je suis quelqu'un de minimaliste au niveau des couleurs.

Le footer : pareil que le header.

Le contenu : j'ai pas tout compris, notamment cette page : http://www.graphibulle.com/integration.php

Voilà

Bonne continuation !

Pas de soucis pour le côté sec, du moment que c'est argumenté.

Depuis que j'ai posté et obtenu plusieurs avis, je refais mon site de fond en comble mais en local.

Alors pèle-mêle :

Le menu : comme tout le monde, je suis revenu au côté classique que j'avais mis de côté.
Le header : je le trouvais aussi assez chargé, mais je n'avais pas eu de retour négatif avant, et ici non plus, hormis bien sûr qu'il véhiculait du contenu et ça va être réparé aussi. Je suis en train de réfléchir à une modification de ce côté-là.
Le footer : va être totalement remanié car n'a aucun intérêt actuellement.
Le contenu : idem, ça va changer. Moins de page et plus de contenu.

Merci pour ton avis.
Certaines de tes photos sont bien sympathiques !

En attendant ton site,
Bonne continuation.
Modifié par Mathy (25 Jul 2011 - 14:46)

Re,

Je suis content que tu le prennes bien

Mon site sera un portfolio de web design, je vais séparer photo/web/maths vu que de toute façon, les gens sont rarement intéressés par les trois à la fois !

Bonne continuation !

[Modération : bonjour, ce n'est pas vraiment le lieu pour faire ta pub, même si tu ne le considère pas comme tel]
Modifié par Laurie-Anne (25 Jul 2011 - 22:20)

Pas mal stéphane !

C'est vraiment un bon début. Je voulais juste dire de faire gaffe à ta grille. Tout dois être aligné au pixel près, surtout minimaliste comme chez toi.
Penses peut-être à créer deux colonnes dans ta feuille principale, qui reprennent la largeur de ton menu. Comme çà ton texte sera tronqué en deux, parceque là le bloc texte est trop gros.
Puis le noir et blanc, moi j'aime bien, pas de souci, mais laisse vivre un peu les couleurs, très discrètement....
Le logo est un peu vite fait, manque peut-être un truc.
au plaisir de revoir des modifs

Merci

Mais je vais ouvrir un topic quand il sera plus complet, pour l'instant je galère avec mon formulaire de contact

Bonsoir à toutes et à tous,

dans l'ensemble, j'aime bien, aussi bien les couleurs que la navigation. Je trouve que ce site est agréable, sauf sur deux points :

1) je suis comme Laurie-Anne, je n'aime vraiment pas du tout le menu qui en l'ouvrant, saute aux yeux. J'ai l'impression qu'un diablotin sort de sa boite.

2) tu ne pourrais pas réduire la hauteur de tes pages afin qu'elles puissent tenir dans la fenêtre. Elles ne sont pas très hautes et je ne comprends pas pourquoi tu n'y a pas pensé.

Sauf si cela est justifié, j'aime avoir une vue d'ensemble qui se trouve totalement répartie dans la fenêtre. Je n'aime pas trop lorsque j'ai des manipulations à faire, du genre actionner les ascenseurs.

@+
Modifié par Artemus24 (31 Jul 2011 - 01:04)

Merci à toi, à vrai dire je n'ai pas trop le temps de m'y atteler pour le moment, mais tes remarques sont très bonnes, surtout la seconde que je vais creuser.

Par contre, tu dis aimer la navigation alors que tu n'aimes pas (à juste titre) le menu. Peux-tu m'en dire plus ?

Merci pour cet avis, et j'espère revenir soumettre à la critique une nouvelle version d'ici peu.

Bonsoir Mathy,

j'ai peut-être des idées spéciales mais il y a deux visions diamétralement opposées lorsque l'on construit un site WEB :

1) on se fait avant tout plaisir en construisant un site, et de ce fait, on ne pense qu'à soit. Je fais des animations, je mets de la musique ou encore j'utilise les couleurs. Oui, c'est très bien, mais pour qui ?

2) inversement, si tu désires vendre quelques choses, tu dois faire en sorte de te mettre à la place de celui qui vient sur ton site et de lui proposer ce qu'il attend à trouver.

Je ne suis pas du tout un expert en cela, mais j'aime comprendre pourquoi telle ou telle chose est acceptée ou rejetée par les personnes qui regardent. Et la seule réponse que je puisse donnée est que cela nous parle. Donc il y a des choses qui sont bien et d'autre choses qui sont mal.

voici quelques exemples :

--> animation : sur un site, j'ai vu une araignée se déplacer à l'écran. Et si la personne est arachnophobe, elle va s'empresser de fuir au plus vite.

--> musique : du rock pour quelqu'un qui aime le classique, ou encore ne supporte pas le bruit. Tu auras exactement la même réaction de fuite.

--> couleurs : elles laissent des impressions qui peuvent être négatives ou positives selon le choix des couleurs et le thème abordé. Le rouge évoque le sang, le noir la mort, le jaune la chaleur, le bleu le froid, le blanc la pureté, le vert l'espérance ...

--> ne pas mettre son nom d'emblée sur une page d'accueil car cela fait "m'as tu vu". Et j'ai l'impression que la personne est un exhibitionniste.

--> ne pas agresser les gens avec des phrases tirées d'un livre de philosophie ou je ne sais quoi ? Nous ne sommes pas l'église, et se faire sermonner n'est pas toujours bien accepter.

Donc pour reprendre le fil de l'histoire, ton menu fonctionne correctement en tant navigateur au sein de ton site. Il est simple à l'usage et ne me pose aucun problème sauf que la présentation du menu est choquante, non par le choix des couleurs mais par le fait qu'il est disproportionnée.

Je te donne un exemple de ce qui ne faut pas faire : je rencontre quelqu'un que je ne connais pas et je m'attends à ce qu'il me dise bonjour en me serrant la main. Et voila qu'il me saute au coup et m'embrasse sur les joues avec une grande fougue. Que croix-tu que j'ai comme impression ?

Et bien ton menu c'est exactement une impression disproportionnée. En gros, tu en donnes trop, alors que j'attendais de la modération.

@+
Modifié par Artemus24 (01 Aug 2011 - 23:06)

Laurie-Anne a écrit :


dans ton code : deux balises &lt;body&gt;. C'est comme Les highlanders, une seule peut rester.

Bonsoir. J'ai visité ton site et voici quelques remarques en vrac:

- tu prends la peine de remercier le visiteur mais on ne voit presque pas ton merci (et encore moins ton copyright).
- techniquement le menu de navigation est avancé mais le rendu est vraiment très moyen
- ce n'est pas adapté à toutes les résolutions (ex: notebook)
- pour ma part j'ai compris la rubrique "Intégration" comme une galerie de tes réalisations, non?


En bref, ta rubrique compétences montrent que tu en as justement beaucoup mais je pense que l'ergonomie de ton site est à revoir.
Modifié par jmlapam (01 Aug 2011 - 23:39)