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

(reprise du message précédent)

Salut,

Oui, pour l'entête, je suis revenu sur un modèle comme celui de JSM, un peu adapté à ma façon, en attendant de le customiser (je dois avouer que je suis un peu en panne d'idées, les headers, c'est vite ennuyant pour le visiteur).

Pour le reste, je ne me suis pas inspiré d'un site en particulier, y a juste la couleur de fond que j'avais vu chez quelqu'un (un designer, je sais plus qui), que j'ai reprise (le gris clair).

Et le footer est celui de l'ancienne version de mon site.

Bonjour,

J'ai testé sous iphone vu qu'il y a un media query à 550px :
- ton logo et ton menu se chevauchent rendant la navigation difficile
- Il manque des padding sur les côtés pour #bigwrap pour décoller le texte du bord
- Dans le footer par contre la largeur des section fait que le texte est trop tassé
- Ton #final est complètement relié aux oubliettes avec un footer déclaré height: 4850px ! Il te manque un clearfix pour le footer
- Le viewport en mode landscape a l'air d'être en 980px... Apparemment il s'adapte mieux si on ne met pas l'initial-scale dans la meta viewport

Sinon le site est agréable mais je trouve globalement les fonts un peu trop grandes.

Salut,

Merci pour ton test sous iPhone, je vais essayer de corriger tout ça !

Sinon c'est joli et tout !

Merci !

Nouvelle version en ligne !

Celle d'avant me plaisait, mais elle était contraignante au niveau de la mise à jour donc je suis revenu sur quelque chose de plus simple ... j'ai décidé d'archiver les anciennes versions, comme vous pouvez le voir dans la sidebar.

Que pensez-vous de ce quatrième redesign de l'année ?

Et bien tu es productif ! j'aime bien le super soft comme ça ! lisible et tout comme il faut, bonne initiative de ne laisser paraitre que l'info et en plus c'est stylé !

sinon j'ai noté un truc :

.bigwrap ta div n'englobe pas le flux, je pense que tu devrais appliquer un clear à la fin de ton contenu
Modifié par SuperMerguez (25 Jul 2012 - 10:19)

Chez moi la police est littéralement affreuse lol

Sur chrome, ca bave complètement faut la changer ^^

SuperMerguez a écrit :
Et bien tu es productif ! j'aime bien le super soft comme ça ! lisible et tout comme il faut, bonne initiative de ne laisser paraitre que l'info et en plus c'est stylé !

Merci, content que ça te plaise

SuperMerguez a écrit :
.bigwrap ta div n'englobe pas le flux, je pense que tu devrais appliquer un clear à la fin de ton contenu

Je vois pas ce que c'est le flux ... tu parles de quoi ?

Fabious a écrit :
Chez moi la police est littéralement affreuse lol

Sur chrome, ca bave complètement faut la changer ^^

Oui, sur Chrome, c'est pas magnifique ... pour ça aussi que je préfère Firefox
Mais sur le fond, tu as raison ... je vais voir ce que je peux y faire.

EDIT : j'ai fait un changement de typographie, maintenant ça passe bien sous Chrome aussi normalement, mais de toute façon, toutes les polices sont aliasées sous Chrome ... vive Firefox !
Modifié par Stephanelam (28 Jul 2012 - 17:29)

P'tit up pour rebondir sur la question de la typographie évoquée par Fabious ... j'ai trouvé une solution et j'ai revu du coup toute la typo du site, maintenant c'est parfait, et même que je préfère de très loin à avant !

EDIT : Pour pas remonter à nouveau le topic, je vais faire le changelog sur ce post-ci.

30/07 (08:18) - Ajout de mon avatar fait par la talentueuse Diana Ramirez dans la colonne de droite.

30/07 (20:24) - En fait non, ça rend moche avec l'avatar ... et finalement cette version me plaît pas tant que ça, je pense qu'un redesign s'impose

03/08 (08:45) - Pas mal d'améliorations typographiques par endroits, et surtout, je suis passé sur un CMS, Stacey ! Donc voilà, adieu la bidouille avec le module JavaScript de Tumblr, j'ai enfin pris le temps de caler un vrai CMS, et ça marche bien, j'en suis content !

05/08 (21:45) - Changements typographiques sur la police Sans-Serif.

15/08 (09:34) - Beaucoup de changements, notamment sur les margin/padding pour un effet encore plus minimaliste et plus propre. Suppression de Stacey CMS, et retour sur un système manuel, plus adapté. Changement de la charte graphique.


Modifié par Stephanelam (15 Aug 2012 - 09:35)

Et encore du nouveau !

Comme je le disais sur la page de début de ce topic, ce seront sans doute les dernières modifications faites sur mon site web pour un bon bout de temps, d'une part parce que je serai bien plus occupé à partir de septembre, et d'autre part parce qu'il est temps que je passe à autre chose, que je me lance dans de nouveaux projets, plutôt que de tourner en rond sur mon propre site.

Et ce sera donc aussi sans doute mon dernier "up" pour une nouvelle version sur Alsa
Modifié par Stephanelam (22 Aug 2012 - 08:58)

Alors :

1. Le contraste du texte est vraiment léger, presque illisible. J'ai bien remarqué le :hover mais on ne le lit pas forcément avec la souris en main positionnée au dessus du texte. Je n'ai pas regardé sur iPad ou sur Smartphone.
2. Il y a des problèmes au niveau de la structure :
*Pas de header avec au moins le titre du site en h1
*du coup hiérarchie des titres incorrectes. Normalement : titre du site (h1), titre des billets (h2, là c'est bon), titre dans le aside (h2, pas h3 car pas enfants du dernier billet).
*on voit mieux le problème quand on désactive la css
3. Pas de permaliens pour les billets (à part dans le flux rss).
4. Les éléments <article> sont à réserver pour des contenus qui se suffisent à eux-même (billets par exemple), tu ne dois pas les utiliser dans le <aside>, des divs suffisent.
5. Pour un peu plus de sémantique, tu peux utiliser des <header> dans les billets pour encadrer le titre et la date.
Modifié par Patidou (22 Aug 2012 - 10:49)

Chouette, une critique de code ! Merci Patidou ...

Patidou a écrit :
1. Le contraste du texte est vraiment léger, presque illisible. J'ai bien remarqué le :hover mais on ne le lit pas forcément avec la souris en main positionnée au dessus du texte. Je n'ai pas regardé sur iPad ou sur Smartphone.

C'est pas faux, je vais peut-être l'enlever. Par contre je tiens à le garder pour l'aside, mais peut-être que je vais augmenter l'opacité initiale (en non :hover).

Patidou a écrit :
2. Il y a des problèmes au niveau de la structure :
*Pas de header avec au moins le titre du site en h1
*du coup hiérarchie des titres incorrectes. Normalement : titre du site (h1), titre des billets (h2, là c'est bon), titre dans le aside (h2, pas h3 car pas enfants du dernier billet).
*on voit mieux le problème quand on désactive la css

Pour ce qui est du h1, je vais mettre mon nom dans l'aside en tant que h1 au lieu de le mettre en tant que em. Et je vais passer les h3 de l'aside en h2. J'avais pas remarqué que mon hiérarchie était tellement à la ramasse, merci de me l'avoir signalé !

Patidou a écrit :
3. Pas de permaliens pour les billets (à part dans le flux rss).

Je vais ajouter une icône avec le permalien au niveau du titre, tu as raison.

Patidou a écrit :
4. Les éléments &lt;article&gt; sont à réserver pour des contenus qui se suffisent à eux-même (billets par exemple), tu ne dois pas les utiliser dans le &lt;aside&gt;, des divs suffisent.

C'est noté, je vais changer ça pour des sections.

Patidou a écrit :
5. Pour un peu plus de sémantique, tu peux utiliser des &lt;header&gt; dans les billets pour encadrer le titre et la date.

C'est noté, je vais le faire. Je l'avais fait dans mon premier essai mais j'avais trouvé ça assez lourd pour quelque chose de purement sémantique ...

Merci beaucoup pour ton passage et tes remarques toutes pertinentes !

Salut Stéphane,

Patidou+10 pour la sémantique.

J'aime bien ce genre de style minimaliste et fin, ce qui a l'air facile mais qui est travaillé.
En revanche, l'ergonomie du site laisse franchement à désirer.

Peut-être que je me trompe mais la plupart des spé de l'ergo recommande des points assez basiques comme un menu par exemple. Perso je suis un peu dérouté par l'organisation de ta page. Je te rassure je m'y fais rapidement mais c'est un peu gênant.

Les seuls liens pointent vers d'autres sites, de pros, des pointures du web, je ne sais pas si c'est un si bon calcul parce que le réflexe c'est de comparer quand même/ Après peut-être que je me trompe sur l'utilité de ton site, c'est pas pour attirer les clients ou une carte de visite hein ?

a écrit :
Hosted by OVH, through Filezilla.

Je n'ai pas compris cela.

a écrit :
The Flash era lasted for

Il faut du present perfect avec for. Il y a quelques soucis d'anglais, c'est pas pour jouer les professeurs mais tous les anglosaxons que j'ai côtoyés me l'ont dit : pas grave s'il y a qq fautes mineures, en revanche des fautes plus importantes sont discriminantes. Faut s'imaginer que cela revient à "si j'aurais su" pour eux.


J'aime bien ta citation de Cyril Connolly, dommage que l'on ne la voit plus aussi bien qu'avant
Modifié par jmlapam (22 Aug 2012 - 14:26)

jmlapam a écrit :
Salut Stéphane,

Salut Julien,

jmlapam a écrit :
J'aime bien ce genre de style minimaliste et fin, ce qui a l'air facile mais qui est travaillé.
En revanche, l'ergonomie du site laisse franchement à désirer.

Peut-être que je me trompe mais la plupart des spé de l'ergo recommande des points assez basiques comme un menu par exemple. Perso je suis un peu dérouté par l'organisation de ta page. Je te rassure je m'y fais rapidement mais c'est un peu gênant.

C'est clair que c'est assez déroutant au premier abord pour le visiteur, mais comme c'est un design en une seule page, il ne peut pas y avoir de menu ... je vais voir quand même s'il y a des points que je peux améliorer au niveau de l'ergonomie.

jmlapam a écrit :
Les seuls liens pointent vers d'autres sites, de pros, des pointures du web, je ne sais pas si c'est un si bon calcul parce que le réflexe c'est de comparer quand même/ Après peut-être que je me trompe sur l'utilité de ton site, c'est pas pour attirer les clients ou une carte de visite hein ?

C'est clair que si on commence à me comparer à Mark Boulton, à Jason Santa Maria ou à Elliot Jay Stocks je suis un peu dans la ...

Le truc c'est que, légalement, du fait que je ne suis pas majeur, je ne peux pas avoir de "clients", donc mon but n'est pas spécialement de les attirer ... mon activité se base surtout sur des projets personnels, je fais ce qui m'amuse, je n'ai pas de contraintes ni quoi que ce soit. Mais sur le fond tu as raison, ce n'est peut-être pas le meilleur plan de linker vers ces sites-là ... je vais y réfléchir.

jmlapam a écrit :
Je n'ai pas compris cela.

Je veux dire que j'utilise Filezilla pour le transfert FTP, c'est un logiciel que j'aime bien donc j'en parle ... je vais expliciter.

jmlapam a écrit :
Il faut du present perfect avec for. Il y a quelques soucis d'anglais, c'est pas pour jouer les professeurs mais tous les anglosaxons que j'ai côtoyés me l'ont dit : pas grave s'il y a qq fautes mineures, en revanche des fautes plus importantes sont discriminantes. Faut s'imaginer que cela revient à &quot;si j'aurais su&quot; pour eux.

Oui, tu as raison, je vais relire plus attentivement mes articles en essayant de me détacher du contenu, c'est un de mes objectifs principaux ...

jmlapam a écrit :
J'aime bien ta citation de Cyril Connolly, dommage que l'on ne la voit plus aussi bien qu'avant

Je vais augmenter la taille si tu préfères

Merci de ton passage ! J'ai du pain sur la planche ...
Modifié par Stephanelam (22 Aug 2012 - 14:36)

Salut,

Retour à un système manuel ça veut dire quoi au juste ? c'est « juste » de l'HTML/CSS ? ou il y a quand même un soupçons de PHP derrière ? Car moi ce qui me tracasse c'est la pagination qui est inexistante. Comment ça va se passer quand tu auras pleins d'articles ? tu resteras sur un onepage layout ? Tu bricoleras tes pages en HTML ?

L'absence de titre me gène également. Même si le style du site s'y prête ça reste une lacune de mon point de vue.
edit:

Stephanelam a écrit :

C'est clair que c'est assez déroutant au premier abord pour le visiteur, mais comme c'est un design en une seule page, il ne peut pas y avoir de menu ... je vais voir quand même s'il y a des points que je peux améliorer au niveau de l'ergonomie.

Donc effectivement tu restes sur un onepage c'est assez étonnant pour un blog, comment vas-tu gérer si tu as plusieurs article. De plus la structure en onepage n’exclus pas un menu
Modifié par Gili (22 Aug 2012 - 14:38)

Gili a écrit :
Salut,

Retour à un système manuel ça veut dire quoi au juste ? c'est « juste » de l'HTML/CSS ? ou il y a quand même un soupçons de PHP derrière ? Car moi ce qui me tracasse c'est la pagination qui est inexistante. Comment ça va se passer quand tu auras pleins d'articles ? tu resteras sur un onepage layout ? Tu bricoleras tes pages en HTML ?

L'absence de titre me gène également. Même si le style du site s'y prête ça reste une lacune de mon point de vue.

Salut Gili,

Comme tu dis, c'est « juste » de l'HTML/CSS, sans aucun soupçon de PHP. Et la pagination, comme je le disais en réponse à Patidou, est une de mes grosses interrogations ... je pense que quand j'aurai plein d'articles, je resterai quand même sur un one-page layout. Sur la v3, je bricolais mes pages en HTML, et c'était vraiment long ...

Pour le titre, je vais réfléchir à une façon d'en intégrer un de façon discrète.

Merci de ton passage !

Stephanelam a écrit :


Pour ce qui est du h1, je vais mettre mon nom dans l'aside en tant que h1 au lieu de le mettre en tant que em. Et je vais passer les h3 de l'aside en h2. J'avais pas remarqué que mon hiérarchie était tellement à la ramasse, merci de me l'avoir signalé !

Mmm… Le header doit normalement être en premier dans le code html et pas dans le aside, c'est d'ailleurs un peu dérangeant cette page sans titre principal. Moi je verrais le titre principal avec ton nom (h1) et dans le aside un truc du genre "l'auteur" en h2 avec un plus d'infos sur toi.

Patidou a écrit :


Mmm… Le header doit normalement être en premier dans le code html et pas dans le aside, c'est d'ailleurs un peu dérangeant cette page sans titre principal. Moi je verrais le titre principal avec ton nom (h1) et dans le aside un truc du genre &quot;l'auteur&quot; en h2 avec un plus d'infos sur toi.

Ok, je ne m'étais jamais intéressé aux détails d'utilisation des headings ... je pense que j'ai une petite idée pour intégrer un titre au site de manière assez élégante ...

Bon, j'ai uploadé les modifs. Voilà un résumé du changelog :

- hiérarchie des titres revue
- intégration d'un titre au site (premier élément du HTML) ... niveau RWD c'était chaud !
- augmentation de la taille de police du footer
- les blocs dans l'aside sont maintenant des section et non des article
- ajout de headers pour les articles eux-même

Voilà, j'ai corrigé tous les points évoqués, sauf celui de la pagination (là il va falloir que je réflechisse un peu plus ...).

EDIT : si quelqu'un a une suggestion de CMS vraiment facile à mettre en place, un peu comme Stacey mais en encore plus lightweight, je suis preneur.

EDIT 2 : encore quelques modifs ...

- ajout d'un "links journal", un peu comme j'avais avant, pour y mettre les sites qui m'ont plu ou intéressé.

- le header était avant un div en position absolute avec right et top à 0 ce qui faisait que ça rendait mal au niveau responsive, donc j'ai trouvé une astuce : le header prend maintenant toute la largeur de la page, mais il y a un sous-div qui prend lui une largeur de 35,5% (comme l'aside) et il est mis en float right ... conclusion, c'est juste nickel, je suis ravi !

- il y a maintenant des permalinks sur les titres de chaque article.

- beaucoup de corrections de code au niveau des margin/padding qui se superposaient souvent mal, j'ai gagné 5/6 lignes de CSS avec ça.

- mise en cache des fichiers dans le header de mon .htaccess, ce qui fait que le site atteint un Page Speed Grade de 97% et un score pour Yslow de 95% (d'après GTMetrix) ... j'essaye encore d'améliorer, mais je commence à bloquer.

- petits correctifs par-ci par-là !

EDIT 3 : c'est fait !

- score PageSpeed de 100% et score YSlow de 100% après :
__ déplacement des assets sur un sous-domaine de mon site
__ minimisation du CSS
__ ajout de headers HTTP dans le htaccess pour la mise en cache
__ réduction de la taille de favicon
__ configuration des ETags

- quelques modifs dans l'aside.

Je pense donc avoir atteint la version tout à fait finale maintenant que j'ai 100% à la fois sur PageSpeed et Yslow, donc je vais m'arrêter là pour le design, et il n'y aura désormais plus que le contenu qui changera.

J'attends quand même vos avis sur le design ... et sur le contenu !

EDIT 4 : juste une petite modif au niveau du design :

- passage de la typeface Elena à la typeface FF Meta Serif, que je trouve beaucoup plus humaine, plus belle, elle a plus de caractère. Et en plus elle s'affiche mieux, notamment au niveau du font-weight: bold. Elle est plus classe, quoi.


EDIT 5 : beaucoup de petites modifications au niveau du design et du contenu, et ajout des articles des archives.
Modifié par Stephanelam (02 Oct 2012 - 21:53)

Re !

Voilà, encore un nouveau design, avec pas mal de modifications ... si vous avez des idées, des critiques, ou des remarques concernant le design et le code (notamment du point de vue sémantique), ce serait sympa, c'est ça qui fait progresser !

Merci

PS : je voulais pas ouvrir un nouveau thread, mais j'admets que celui-ci devient un peu gros ... sans doute que je redesigne trop mon site
Modifié par Stephanelam (04 Nov 2012 - 19:57)