[Intermédiaire] Nicolas Gilis - Site personnel

Bonsoir,

Bon benh voilà je viens me faire critiquer mon site, le design, l'ergonomie, le code, toussa toussa... Et l'orthographe aussi vu que j'ai des fameuses lacunes à ce niveau ^^.

Pour situer un peu le contexte je voulais faire trois sites en un en utilisant des styles différents mais avec néanmoins un file conducteur, ici c'est les couleurs et la typo (et le cercle qui revient périodiquement).

Ce site n'a pas de publique cible car je suis toujours étudiant et je ne cherche rien pour le moment je remanierai la communication quand je chercherai un job. Néanmoins il fait partie d'une série de sites que je dois présenter dans une semaine devant un jury de professionnel, donc n'hésitez pas à vous en donner à cœurs joie au niveau des critiques.

Le header n'est pas définitif mais j'aurai bien besoin d'avis au niveau de son esthétique et je n'ai pas fini la version mobile. Il est censé être consultable jusqu'à IE7 (mais je n'ai rien pour vérifier mes dires donc si vous avez un IE sous la main ^^).

Merci d'avance !

http://www.nicolasgilis.be
Modifié par Gili (22 Jan 2012 - 20:09)

Salut,

Chose promise chose due:

- http://www.alsacreations.com/article/lire/1158-tester-fiablement-ses-navigateurs.html pour faire des tests

-pour un portfolio la performance du site est très moyenne,

yslow a écrit :

Grade D on Make fewer HTTP requests
This page has 6 external Javascript scripts. Try combining them into one.
This page has 13 external background images. Try combining them with CSS sprites

- pas de favicon

- l'usage du "tu" fait assez amateur, la description pareil.

a écrit :
A l'époque ce qui me plaisait c'était squatter IRC

Je dis non là, à part si tu ne t'adresses pas à de futurs employeurs dans ce cas-là...

- j'ai rien à dire au niveau du CSS (tu es bien plus avancé que moi en la matière ) et j'aime le design, vraiment.

- Change tes textes vraiment (pas ceux sur les illustrations les paragraphes)

Voilà brièvement, je repasserai à l'occasion
Modifié par jmlapam (22 Jan 2012 - 21:16)

J'aime bien, juste une petite remarque : on voit trop de "cerveaux" stylisés de la sorte, il faudrait trouver quelque chose de plus original

jmlapam a écrit :
Je dis non là, à part si tu ne t'adresses pas à de futurs employeurs dans ce cas-là...

Oh ben ça dépend des employeurs
Modifié par Raphael (22 Jan 2012 - 22:47)

@raphael >> proposition d'emploi pour notre ami Gili ?
Autant pour moi alors, je dis pas qu'il faut pas être cool sur son site mais tu as lu tous les textes?
Modifié par jmlapam (22 Jan 2012 - 23:09)

Merci à tous

@jmlapam merci pour l'article je l'ai dévoré par contre les différents programmes proposés ne sont pas disponibles sous mac. J'ai virtual box mais il plante constamment, d'où le fait que je ne puisse pas vérifier l'état de la page avec IE.

jmlapam a écrit :
-pour un portfolio la performance du site est très moyenne,

Figure toi que j'avais un bon grade avec yslow et pagespeed avant d'installer le +1 de google+. J'utilise des sprites, et j'ai mis un maximum de scripts dans mon script.js les autres doivent rester externes. Malgré ça j’obtiens ce très disgracieux grade D, je vais me pencher sur le problème.

jmlapam a écrit :
- l'usage du "tu" fait assez amateur, la description pareil.

Je croyais que ça faisait djeunz et dynamique ce qui colle bien avec mon état d'esprit. Au niveau des textes, non je n'ai pas de publique cible donc je ne m'adresse pas à des futurs employeurs, mais je remarque ça peut passer dans certain cas, à méditer ^^.

@dew et Raphaël merci d'être passé

dew a écrit :
J'aime bien, juste une petite remarque : on voit trop de "cerveaux" stylisés de la sorte, il faudrait trouver quelque chose de plus original cligne

Merci pour ta remarque, je pensais que c'était novateur mais non j'ai souvent des idées que je crois novatrices et en fait benh non ^^ (comme pour mon t-shirt super html5 lol) je compte peut être changer pour un cœur (l'organe) j'y réfléchi.

Sinon quelqu'un pour le code, la sémantique et tout le tralala ?

Merci à tous !

Bonsoir Gili
Très joli et j'aime beaucoup ton slider

Ce que j'ai pu remarquer sur IE :
-Sur le web et Mes collègues : infos sur 1 seule colonne (IE 7, 8, 9)
- Portfolio : les infos de div mask apparaissent sur l'image, il n'y a pas de styles (background rose et noir sous le titre) (IE7 et 8)
- Tous les blocs dans le rose (Me contacter, mes collègues, etc) sont les uns en dessous des autres (IE 7)
- Les labels du formulaire sont cachés par les input (IE 7)

Il me semble que le JS html5shiv devrait être dans un commentaire conditionnel pour IE non ? ça vient peut être de là...

Sinon, je trouve que le texte en blanc dans portfolio n'est pas très lisible, le formulaire arrive sur une erreur 404 (si on valide sans rien écrire) et je ne suis pas sûre que la div introduction du header soit vraiment nécessaire...

Coté code, il n'y a que le hgroup englobant 3 niveaux de titre qui me perturbe mais je ne m'y connais pas assez pour savoir si c'est ok.

Salut,

J'aime bien les sites en une page avec des effets sur les ancres comme ici, mais ce que je trouve agaçant, ce sont les difficultés potentielles au niveau de la navigation… je m'explique :

Ici, en arrivant, je ne sais pas forcément sur quel type de site je me trouve (*). Je clique assez rapidement sur le deuxième lien de ce qui s'apparente à un menu et zou, me voilà sur le Portfolio sans être passé par le… disons par l'écran [?] «A propos». Si j'ai eu le temps de voir pendant le défilement qu'il y avait du contenu intermédiaire qui se cachait, tant mieux, mais va falloir remonter en scrollant alors que ce menu par ancres était quand même bien pratique et l'effet de défilement plutôt esthétique… dommage : l'expérience de navigation est un peu ratée du coup.

C'est AMHA un des problèmes de ce type de sites et je n'ai d'ailleurs pas vraiment de solution.
Qu'en pensez-vous ?

(*) : en fait si : j'ai bien vu qu'il y avait une énorme barre de défilement vertical, mais imaginons que je ne le sache pas ou que je n'ai pas fait attention…

Ps : Jmlapam, en fait c'est normalement plutôt « au temps pour moi »
Modifié par audrasjb (23 Jan 2012 - 10:06)

Bonjour,

Très beau site, j'aime les couleurs et le travail du bandeau. Mais, sur petit écran (1024) ça donne une impression d'oppression... Il faudrait voir pour s'adapter au résolutions bases (en plus des mobiles, que je testerais ce soir).

Très mauvais point, la navigation au clavier est un vrai défi : pas d'effet de survol au focus, ordre de parcours du menu incohérent avec l'ordre des section dans la page... C'est surtout l'effet survol qui pèche.

Niveau code :
Je ne suis pas convainque que ta hiérarchie des titres soit correcte :

<hgroup>
<h1>Tout savoir</h1>
<h2>A propos de moi</h2>
<h3>L'<em>art</em> et la <em>manière</em></h3>
</hgroup>
<div id="aboutMe">
<h2>Plus précisement</h2>

Mais j'ai encore un peu de mal avec l'utilisation du hgroup.

Pour l'orthographe :

a écrit :
Ma première connexion internet était en 1997. A l'époque ce qui me plaisait c'était squatter IRC, ce défunt service de messagerie instantané à connu mes premiers pas et mes premiers petits scripts qui ne servaient à rien ! Presque 15 ans plus tard, des étoiles pleins les yeux, j'ai assisté à l'ascension du web, des premiers sites web qui faisaient saigner des yeux aux grosses applications riches que l'ont connais aujourd'hui.

Ma première connexion à l'Internet était en 1997. À l'époque, ce qui me plaisait c'était de squatter IRC ; ce défunt service de messagerie instantané à connu mes premiers pas et mes premiers petits scripts qui ne servaient à rien ! Presque 15 ans plus tard, des étoiles pleins les yeux, j'ai assisté à l'ascension du web, des premiers sites web qui faisaient saigner des yeux aux grosses applications riches que l'on connait aujourd'hui.

a écrit :
Ce qui me plais le plus dans le web c'est la liberté, l'accès sans concession à n'importe quelle information.

Il faudrait remplacer la virgule, au choix, par "et" ou pas " : ".

audrasjb a écrit :


Ps : Jmlapam, en fait c'est normalement plutôt « au temps pour moi »

Oui attends, les 2 écritures passent maintenant, sinon je le sais bien ne t'inquiète pas pour moi. La question n'étant pas tranchée par nos académiciens j'alterne les deux.


EDIT: @Gili: ta partie "sur le web" s'affiche mal sur IE 8
Sous Chrome par exemple:


Sous IE8:

Modifié par jmlapam (23 Jan 2012 - 12:44)

jmlapam a écrit :
Oui attends, les 2 écritures passent maintenant, sinon je le sais bien ne t'inquiète pas pour moi. La question n'étant pas tranchée par nos académiciens j'alterne les deux.

Bien sur que c'est tranché...

Autant pour moi : se dit pour quelque chose d’identique.
Au temps pour moi : se dit pour s’excuser et admettre son erreur afin de reconsidérer le problème pour le rectifier
Modifié par Laurie-Anne (24 Jan 2012 - 11:05)

Merci à toi mais:
non pas du tout tranché mais alors pas du tout du tout.

a écrit :
A l'époque ce qui me plaisait c'était squatter IRC, ce défunt service de messagerie instantané

Je vois pas en quoi IRC est défunt...

Wahou trop content, merci à tous, franchement.

cilou a écrit :
Ce que j'ai pu remarquer sur IE :
-Sur le web et Mes collègues : infos sur 1 seule colonne (IE 7, 8, 9)
- Portfolio : les infos de div mask apparaissent sur l'image, il n'y a pas de styles (background rose et noir sous le titre) (IE7 et 8)
- Tous les blocs dans le rose (Me contacter, mes collègues, etc) sont les uns en dessous des autres (IE 7)
- Les labels du formulaire sont cachés par les input (IE 7)

Il me semble que le JS html5shiv devrait être dans un commentaire conditionnel pour IE non ? ça vient peut être de là...

Sinon, je trouve que le texte en blanc dans portfolio n'est pas très lisible, le formulaire arrive sur une erreur 404 (si on valide sans rien écrire) et je ne suis pas sûre que la div introduction du header soit vraiment nécessaire...

Coté code, il n'y a que le hgroup englobant 3 niveaux de titre qui me perturbe mais je ne m'y connais pas assez pour savoir si c'est ok.

@cilou :
- J'hésitais à mettre un js pour simuler la propriété css3 column je me disais que ce n'était pas forcément nécessaire. Mais au vue de l'image de jmlapam je dois bien me résigner
- merci merci, sur IE8 et inférieur rien ne fonctionne en somme (dans la partie portfolio), je vais me pencher sur une feuille de style alternative pour IE. Merci de ton retour.
- pour html5shiv j'ai fais une erreur de jugement, je me suis dis que ça ne devait pas se limiter à IE8 et inférieur et que d'autre vieux browsers pouvaient en profiter, mais j'avais oublié qu'il n'y avait que IE qui ignorait totalement les nouvelles balises, les autres ont un rendu par défaut de type block, j'avais oublié ce détail, mais c'est corriger merci de le souligner.
- la div introduction a été supprimée, c'était un reste de l'ancienne version
- le formulaire... j'avais totalement oublié, honte sur moi !
Merci beaucoup à toi ton aide me sera vraiment utile.

@audrasjb: merci beaucoup pour ton intervention et ton analyse de la navigation. Tu soulèves une erreur que j'ai fais et qui induit l’utilisateur en erreur pendant la navigation. En effet quand on arrive sur la page le lien « Accueil » est par défaut actif. Hors nous ne somme pas dans la partie accueil. Ce qui ta poussé à cliquer sur le lien suivant au lieu de cliquer sur le premier ! Je devrais donc, en premier lieu enlever l'effet actif par défaut du premier lien au chargement de la page.

Ça induit en erreur et ce n'est pas juste. Ça pallierai déjà ce problème au niveau de la navigation. Mais c'est vrais que, plus généralement sur ce genre de site l'utilisateur n'est pas sensé savoir que c'est un onepage, mais là, je pense qu'il faut le laisser découvrir et tester l'interface. le bandeau qui est en fixed suiscuite vraiment l’interaction et je pense que juste pour « s'amuser » l'utilisateur va utiliser ce menu en long et en large et découvrira par lui même la totalité du site. Enfin ça ne pâlie pas le problème que tu évoques, mais je suis presque sur que pour eux c'est presque ludique de découvrir ce genre d'interface qui change un peu de la norme.

@Laurie-Anne: quel bonheur de lire « très beau site » venant de ta part si tu savais .

Laurie-Anne a écrit :
Très mauvais point, la navigation au clavier est un vrai défi : pas d'effet de survol au focus, ordre de parcours du menu incohérent avec l'ordre des section dans la page... C'est surtout l'effet survol qui pèche.

Merci de me souligner le problème. Je dois dire que j'avais mis cette aspect, par erreur, totalement de côté. Je vais me pencher là dessus activement merci beaucoup.

Merci d'avoir pris de ton temps pour la vérification orthographique, ça a été corrigé. Merci.

Pour ce qui est du hgroup j'avoue qu'avec un peu de recule je ne trouve pas ça très pertinent, ni même sémantique. Je vais y travailler.

Merci beaucoup de ta critique en tout cas, ça fais rudement plaisir.

@jmlapam: merci pour les deux screens car de un de me permet de voir qu'il me faut une alternative à la propriété column et de deux je vois que l’icône twitter est collé au mot, c'est pas beau faut que j'y remédie. Merci!

Merci à tous

edit: @jb_gfx: bouh super ta critique sur mon site lol. C'est un autre débat, mais moi quand j'ai connu irc c'était avec des channels qui atteignaient les 10.000 users, où il y avait une grosse communauté axée autour d'irc et notamment le développement de script mirc. C'était LE chat par excellent (il n'y avait que ça en somme). Puis MSN est arrivé et a tué IRC, puis facebook a tué MSN et ainsi de suite. Donc oui irc est mort pour moi et j'en suis très triste.
Modifié par Gili (23 Jan 2012 - 15:00)

Ton sous domaine www est mal configuré, il renvoi vers le webmail.

Tu peux être plus précis stp ? je n'ai pas compris .

De quel URL parles-tu ?

www.nicolasgilis.be renvoyé vers le webmail y'a 2 minutes. T'as changé un truc ? Là c'est OK.

Ah non du tout, tu m'as fais peur. Surement OVH qui fait encore des choses bizarre.

Mais tu peux quand même donner ton avis (haha je suis chiant hien )

Gili a écrit :
Mais tu peux quand même donner ton avis (haha je suis chiant hien )

Très beau site.

C'est pas très constructif, mais si c'est vrais ça va droit dans mon petit cœurs , merci !