Pages :
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 !! Smiley cligne

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 Smiley lol , 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 !
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 ?
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)
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 Smiley smile
— 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 Smiley cligne
— 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 Smiley cligne



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 Smiley biggthumpup
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 Smiley smile
— 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 Smiley cligne
— 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 Smiley cligne
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 Smiley biggthumpup




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 Smiley biggrin
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. Smiley cligne


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. Smiley cligne
Salut,

tu veux présenter trop de choses sur ton site (la phrase Hello, I am [Nom], I write articles, I design websites, and I like reading, taking photos, visiting great websites, and many other things.) en est bien représentative.

Je ne comprend pas si c'est le site d'un freelance, des délires perso ou autre chose. Bref, tes lectures d'harry potter vont en intéresser certains d'autres beaucoup moins, ce qui est sur c'est qu'en mélangeant tout, tu ne vas plus intéresser personne.
Modifié par bzh (21 Sep 2011 - 16:15)
Hello,

@jmlapam : oui, c'est du Georgia. Avant j'étais en Verdana mais finalement je préfère une police Serif ... je sais pas, je vais voir. Pour ce qui est de l'utilisation d'une grille, j'avais pensé à utiliser le Golden Grid System, mais finalement, j'ai laissé tomber, j'en ai pas vraiment besoin.

@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.
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)
Je ne sais pas quelles sont les modalités de ton hébergement mais tu peux très bien créer un sous-domaine où tu placeras tout ce qui est perso et un autre plus professionnel sans fioriture.
J'aime assez les maths mais je suis pas sûr que tout le monde apprécie. Smiley langue


Pour les grilles il y a grid960. Je t'assure que le sautillement des pages, cela gâche tout, c'est frustrant pour celui qui intègre comme pour celui qui visite. Smiley langue
Pages :