[Intermédiaire] - Site personnel / Portfolio de S.L.

Bonjour les amis,

EDIT 04 novembre : très franchement, je ne pensais pas à nouveau redesigner mon site, mais finalement, j'ai trouvé que la sidebar nuisait à la lisibilité, donc je suis revenu sur un modèle header/content/footer, mais de manière un peu différente. Si vous avez des critiques sur le design et le code (notamment pour la sémantique), je suis preneur ! Merci ... (au fait, merci à jb_gfx pour son aide pour le formulaire de contact !)

EDIT 21 août : modifications assez conséquentes au niveau du design, retour sur un système manuel (ni CMS ni Tumblr), charte graphique revue, ... ce sera, je pense, la dernière version de mon site, car il est temps que je passe à autre chose, que je me lance dans de nouveaux projets plutôt que de redesigner sans cesse le même site.

EDIT 24 juillet : si vous comptez bien, c'est la quatrième version, à nouveau radicalement différente ! j'ai opté pour un layout encore plus épuré avec une sidebar, et je suis retourné sur Tumblr pour le système de mise à jour.

EDIT 05 juillet : Et encore une nouvelle version, ma préférée jusqu'ici !!

EDIT 09 avril : Toute nouvelle version, même adresse qu'avant, design complètement changé, j'ai opté pour un layout à une seule colonne, un footer de 1300px , des couleurs sombres, une typo grande (c'est in !), ...

Je reviens avec une version plus complète, sobre mais avec une couleur de plus, ...

C'est par ici.

Mon HTML5 est parfaitement valide, mais mon CSS3 est affreux ... je comprends pas comment raisonne le validateur, parce que quand on regarde le résultat de la validation CSS de Jason Santa Maria qui est quand même pas personne dans le domaine du web design, il y a 233 fautes !

Tout n'est pas fini, notamment le portfolio qui est en cours de construction, et je dois faire la page des archives.

Que pensez-vous de ce petit site perso ?

S.

PS : j'ai changé le titre pour des questions de référencement ... shame on me, I know.
Modifié par Stephanelam (04 Nov 2012 - 19:56)

Tiens, j'ai oublié de mettre la todo list traditionnelle :

- faire une CSS Print.
- faire une CSS Mobile avec des media queries.
- faire la page des archives.
- terminer le portfolio.
- faire les pages de sciences.

Et j'en profite pour rajouter l'exemple du CSS de Happy Cog, plein de fautes aussi, alors que Jeffrey Zeldman est censé être une tête en matière de standards web !

Le CSS validator ne prend pas encore en compte CSS3

Pourtant il y a une option "CSS Niveau 3" dans le menu déroulant détaillé lors de la validation, et ça fait (quasiment) la même chose ...

Bref, c'est pas grave, c'est pas de ma faute.

Et le site, t'en penses quoi ?

J'aime bien le design, même si c'est un peu trop rouge.

Ouch. C'est exactement le point sur lequel j'hésitais.

idem p-e voir pour changer le rouge juste sur les coté

et aussi voir pour passer les <h2> en gras.

Un point que j'aprécis c'est le favicon, beaucoup n'en mettent pas moi je trouve ça important

aussi ajouter :

<meta name="keywords" content="tes, mots, clef, ici" />
Modifié par rbwebdev (10 Sep 2011 - 12:21)

j'en apprends tout les jours

Tant mieux, c'est ce qu'il faut.

Hello,

Visuellement, c'est très réussi.
Et merci pour la clarté de ton code HTML.

Quelques petits détails :
— Je suis contre l'idée d'utiliser une graisse sur les titres, c'est parfait comme ça
— Tu pourrais aller un peu plus loin avec HTML5 : éléments <section>, <aside>, utilisation des rôles ARIA ; d'ailleurs à ce niveau de compétence, on s'attendrait à voir des microformats et tout dans le code
— Si tu compte utiliser le code en commentaire de la partie «Portfolio», je ne comprends pas l'utilisation de la liste non-ordonnée qui se trouve dans la div.description… pourquoi ne pas simplement utiliser des paragraphes ?

rbwebdev a écrit :
Le CSS validator ne prend pas encore en compte CSS3

non ! certaines propriétés ne sont pas finalisées voilà tout, mais on peut monter d'un niveau la validation en cliquant sur options.


@stephane: je n'aime pas la typo ni les couleurs. Tes pages sautent lors de la navigation.

en revanche, super footer
Modifié par jmlapam (10 Sep 2011 - 19:47)

audrasjb a écrit :
Hello,

Visuellement, c'est très réussi.
Et merci pour la clarté de ton code HTML.

Quelques petits détails :
— Je suis contre l'idée d'utiliser une graisse sur les titres, c'est parfait comme ça
— Tu pourrais aller un peu plus loin avec HTML5 : éléments &lt;section&gt;, &lt;aside&gt;, utilisation des rôles ARIA ; d'ailleurs à ce niveau de compétence, on s'attendrait à voir des microformats et tout dans le code
— Si tu compte utiliser le code en commentaire de la partie «Portfolio», je ne comprends pas l'utilisation de la liste non-ordonnée qui se trouve dans la div.description… pourquoi ne pas simplement utiliser des paragraphes ?

Hello,

Merci pour tes remarques. J'avais envisagé d'intégrer section, mais j'attends un peu. Pour aside, je n'en ai pas vraiment besoin, donc je ne vais pas m'en encombrer.

Pour ce qui est des ARIA, je vais m'en occuper, j'ai été bête de ne pas y penser.

Enfin, oui, je compte utiliser la partie de code en commentaire pour le portfolio, mais je préfère une liste, puisque c'est vraiment ce que le div .description représente.

Merci encore de tes remarques pertinentes,
Stéphane

PS : c'est la classe le em dash en début d'item

jmlapam a écrit :



non ! certaines propriétés ne sont pas finalisées voilà tout, mais on peut monter d'un niveau la validation en cliquant sur options.

C'est ce que j'avait dit, mais ça ne change quasiment pas en effet, sans doute que les propriétés ne sont effectivement pas finalisés.

jmlapam a écrit :


@stephane: je n'aime pas la typo ni les couleurs. Tes pages sautent lors de la navigation.

en revanche, super footer

Quand tu dis que tu n'aimes pas la typo, peux-tu préciser s'il te plaît ?

Pour ce qui est du saut de page, je dois avouer que j'ai toujours pas compris pourquoi.

Et merci pour le footer
Il est inspiré de celui de Jason Santa Maria, et de celui de 8Faces.

Salut,


J'ai pas regardé le code mais cela ressemble à du GEORGIA,
je trouve que cette police nuit à la lisibilité quand elle est utilisée partout, ce qui peut se corriger en la laissant sur les titres tout en mettant une police d'une autre famille sur le texte.


Le sautillement des pages à la navigation vient du CSS, comme tu n'as pas le même contenu sur chaque page, cela créé des décalages. Pour éviter cela, j'utilise les grilles et le design du site je le mesure précisément. C'est ici que j'ai appris à le faire d'ailleurs et depuis j'ai beaucoup moins de problèmes.

Stephanelam a écrit :
@bzh : je sais que le contenu est très (trop) varié, mais non, je ne suis pas freelance (disons que je veux bien faire des sites pour des gens qui le voudraient), mais ce n'est pas mon activité principale. En fait, c'est plus pour caser tout ce que j'aime, en effet.

Oui, ça donne l'impression d'un site que tu as fait pour toi.
Modifié par bzh (11 Sep 2011 - 12:52)

Ben ouais, c'est pas faux. Je vais voir si je peux pas arranger ce point "je-case-tout".