Www.alexandreliere.fr

Bonjour

Nouveau sur le forum, je décide de soumettre mon portfolio à vos critiques.
J'ai réalisé ce site à la suite de mes trois années d'études en infographie,
dans le but de trouver une place en agence.

N'hésitez pas à commenter et à me faire part de vos remarques.

http://www.alexandreliere.fr/index.html

Merci

Bonjour,

Visuellement c'est sympa, c'est doux, ça manque même un poil de contraste je pense entre le fond et les textes.
En tout cas pour ma part ça fonctionne plutôt bien.

Niveau technique, tes images "Hello" "I am a graphic & Designer" auraient mérité d'être dans l'html avec un alt="" correctement renseigné. Ces images portent des informations !

Sur ton Css, tu perds du temps à détailler certaines choses, tu devrais les concaténer ex:

	margin-top: 9px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;

deviendrait

margin : 9px auto auto auto;

et

	background-color: #FFFFFF;
	background-image: url(../images/fond.jpg);
	background-repeat: repeat-x;

deviendrait

	background: #FFFFFF url(../images/fond.jpg) repeat-x;

Aussi, lorsque tu initialise des marges interne et externe à 0, inutile de préciser l'unité, 0 c'est 0.

Sinon, il y a de très belles choses dans ton folio

Salut !

Visuellement, ça casse pas des briques ! C'est un style très simple... Quand on voit tes travaux (portfolio, cv) je me demande un peu pourquoi le site n'est pas plus travaillé.

Quelques remarques rapides :

- la couleur du texte est beaucoup trop clair que pour être correctement lisible

- Le texte "Hello ! I'm a graphic designer" (pourquoi un "&" ?) est porteur de contenu et DOIT se trouver dans une balise image utilisant un attribut alternatif, et non en background

- je ne trouve pas la bordure grise tout en haut de la page visuellement utile (plutot moche ne fait)

- une meta language serait utile, ainsi qu'une meta description

- il faut éviter les blocs vides tel que <div id="hello"></div> et <p class="presentation">&nbsp;</p>. Au passage, si tu souhaites avoir un interligne entre tes paragraphes, ca se fait via css et non par ajout de blocs vides.

- le lien twitter n'a pas vraiment à être dans un paragraphe (ce n'est pas un paragraphe)

- tu n'utilises aucune hiérarchie de titres. Au lieu des <div id="titre">, penses à utiliser des <h1>, <h2>,...

- ça m'étonnerait que le site soit sous copyright, si tu veux absolument mettre un truc dans ce genre, alors met plutôt "tous droits réservés" ou un truc dans le genre

Bonjour, et merci pour vos commentaires.

@fufu : Visuellement, ce côté "doux" et épuré est en partie voulu. Je voulais quelque chose de simple pour mettre en avant les travaux présent dans le portfolio.
Niveau technique tu as raison, je placerai l'image d'arrière plan dans le html, elle est importante.
En ce qui concerne le CSS, je suis conscient qu'il faut que je simplifie mon code. Je prends note, Merci !

@pixelb : Comme j'expliquais, la simplicité du site est quelque chose de volontaire, mais il est clair que si mon portfolio était à refaire, il n'en serait pas de même. Je précise au passage que c'est une de mes premières expérience (web) ce portfolio.

a écrit :
la couleur du texte est beaucoup trop clair que pour être correctement lisible

Je suis d'accord avec toi (la lecture est difficile principalement dans le footer).

Pour l'image "Hello" en background, tu es donc le deuxième à me faire la remarque, j'en prends note.
Il est vrai que la bordure grise en haut de page n'a pas grand intérêt.

a écrit :
une meta language serait utile, ainsi qu'une meta description

Qu'entends tu par là ? Peux tu me donner un exemple ?

Je vais également veiller à ne plus laisser traîner de balises vides et à utiliser les bonnes balises pour mes titres.

Bonjour,

La première chose qui m'est passée par l'esprit en arrivant sur le site c'est "Hello! I can't speak english properly and I hope the visitors won't either; plus it's cool to put English stuff". Niveau crédibilité, c'est pas génial la phrase d'accroche en à-peu-près anglais... Il serait préférable de rester sur du français.

Deuxième chose qui m'est passée par l'esprit : "m'est c'est illisible ce gris clair sur blanc". Là le problème est plus sérieux... Si lire ton site donne des migraines, n'espère pas qu'il soit lu. Tant pis si tu es le candidat idéal, le recruteur n'aime pas la migraine (sauf s'il est SM).

Il est impossible, à vue d'œil de déterminer ce qui est un lien de ce qui ne l'est pas. Par exemple : le texte en vert en fin de présentation, j’étais sûre que c'était un lien (couleur + graissage) mais non. Par contre les liens de bas de page sont en gris, comme le reste du contenu... À revoir.

Pour le code source :
* Comme déjà dit, mais il vaut mieux répéter car c'est vraiment important : les images porteuses de contenu ne vont jamais dans le CSS, toujours dans le code HTML avec un attribut alt qui reprend exactement le contenu qu'elles portent.

* Pour les meta, ce n'est pas un meta language qu'il faut ajouter, mais Content-Language, ça fonctionne comme Content-Type et avec une petite recherche Google tu trouveras la syntaxe exacte.

* Le target blank n’est pas vraiment une bonne idée. Forcer le comportement du navigateur c’est te mettre la majorité de tes visiteurs à dos. Pour ton CV, il serait préférable d’indiquer dans le lien que c’est un document PDF (et si tu garde le target, qu’une nouvelle fenêtre va s’ouvrir).

* Ce genre de chose :

<p class="presentation">&nbsp;</p>

peut (devrait, même) être évité. Il est préférable d’utiliser les margin/padding en CSS plutôt que des éléments vides.