Samedi
10/04/10

Attention, peinture fraîche !

Ça faisait un bout de temps que cela me démangeait... J'avais d'ailleurs commencé pendant les vacances de février, mais trop de boulot, j'avais du mettre le projet en attente.
Non pas que j'aie moins de travail en ce moment d'ailleurs (ce serait plutôt le contraire) puisque nous venons juste d'apprendre comment il fallait que se contruisent et s'organisent ces fameux CCF de certification niveau V, alors qu'il faut les faire au plus tard le mois prochain... Et que ce n'est pas une mince affaire qui s'improvise, mais bref.

Donc, voilà : refonte de la page d'accueil de Mammouthland en html5 et CSS3.

L'ami Raphaël n'est évidemment pas étranger à l'affaire. Le bougre m'avait gravement transmis le virus en janvier dernier, et je me suis largement inspirée de son travail et de ses conseils.

Donc moi aussi je me suis amusée à grands coups de header, nav, section, footer. Coté CSS3, en dehors des border-radius et autre box-shadow que j'avais déjà utilisé lors de la refonte de CSS Débutant, j'ai testé le @font-face et le rotate.

Je n'ai donc pas été aussi loin que Raphaël, mais c'est un premier jet qui s'enrichira au fur et à mesure.

Car bien entendu, reste toutes les autres pages, et en premier celles du blog qui garde encore ses anciens atours.

Je tiens à remercier en particulier Reuno, qui m'a dessiné le gentil mammouth en un temps record. Grand, grand merci à lui.
Je remercie tout aussi chaleureusement Nicolas, Emmanuel et Frank pour leurs remarques constructives.

À vous maintenant d'ailleurs de critiquer sur tout ce que vous voulez : le design, l'ergonomie, l'accessibilité. Tout ce qui m'aidera à avancer. Merci d'avance :-)

Oh ben merci, mais je n'ai rien dit !

Sinon, tu as pensé à optimiser les performances ? Un petit tour dans YSlow indique qu'il y a 2-3 lignes que tu as oublié dans ton htaccess :).

Neovov - 11-04-2010 - 23:31

Le Yslow, je ne maitrise pas du tout !
Qu'est-ce qu'il manque dans le .htaccess (je me bats avec lui d'ailleurs, saleté :( )

Pascale - 12-04-2010 - 11:11

Et allez... remise à neuf ici aussi...

Pascale - 12-04-2010 - 16:40

Puisque tu invites à commenter, j'aurais deux petites remarques :
Concernant les onglets du menu. Ils sont ombrés, sous-entendu qu'une lumière les éclaire. C'est donc normal que le texte soit blanc (éclairé). En revanche, au survol ils passent en noir avec un texte plus grand, ce qui crée une perception visuelle contradictoire : comment un élément éclairé, ombré, sur lequel on fait le focus peut-il "s'enfoncer" dans le noir ?
Bref, personnellement je n'utiliserais donc pas le noir dans ce cas et laisserais le survol en blanc, le texte grossi étant suffisant.

La seconde remarque concerne la pop-up de commentaire dans laquelle j'écris actuellement. Tout centré et avec un champ de saisie trop petit, c'est peu confortable. Mais en pleine refonte tu auras certainement déjà noté cela.

Emmanuel - 13-04-2010 - 10:34

Oui, oui, la fenêtre de commentaire est à refaire aussi bien entendu ;) Et je vire le noir.
(c'est vraiment un métier le webdesign, et ce n'est vraiment pas le mien !! :D )

Pascale - 13-04-2010 - 11:10

Il est trop mignon ton mammouth!

Laurent - 13-04-2010 - 19:05

N'est-il pas ? ;)

Le bas de page est clairement plus réussi que le haut. Faut que ça décante... qui sait, je finirais peut-être à avoir un coup de génie !

Pascale - 14-04-2010 - 10:42

Quelques remarques puisque tu les demandes :)

1. Enlever la graisse de ta police @font-face, ça la rend bien plus lisible.

Voir un screenshot ici : http://dl.dropbox.com/u/5426860/Mammouthland.png (il ne va pas y rester longtemps, c'est juste pour te faire la démo).

2. Moi j'aime pas les onglets (Schtroumpf Grognon) ;)

C'est en partie personnel et en partie un problème d'ergonomie : pour moi les onglets ont traditionnellement un rôle (la métaphore de l'onglet du monde réel) et quand ils sont montés à l'envers ça me brouille la compréhension.

3. La plume qui écrit me trouble, c'est le genre qui est utilisé par le plugin "plume" de Spip qui permet de faire de la modification in situ. Du coup spontanément j'ai cliqué dessus pour voir ce qui se passe... :)

Plus sérieusement : elle relève d'un problème un poil sournois de cohérence graphique entre les éléments de la page. Pour moi il y a trois tentative de chartes qui se battent en duel : les trucs minimaux (les aplats de couleur et la police, quoi), l'éléphant, et la plume.

Tu dois décider d'une démarche parmi ces trois et la creuser, à mon humble avis, et ça réglera ton problème de "décantation" ci-dessus.

4. Pour finir, ta home véhicule une idée de finition meilleure que les posts uniques comme celui-ci, je trouve.

Et donc voilà, ce message se veut encourageant, à part ça... ;)

Stéphane Deschamps - 14-04-2010 - 12:11

@Stephane : ah enfin tu te décides à critiquer ! ;p

1. La graisse... comprends pas ce que tu veux dire. Je ne vois aucune différence entre ton screenshot et le rendu réel. Alors euh... tu m'expliques ?

2. Les onglets : mais euuuuh ! Nicolas ne les aime pas non plus. Groumph, bon, vais réfléchir à autre chose.

3. La plume : oui, bon ok, c'était juste un élément de déco histoire d'égayer un peu. Ca se vire ça, pas de pb.

4. J'avais dans un premier temps mis le même cadre autour du texte que sur la page d'accueil, mais je ne trouvais pas ça génial, ça faisait grossier... Alors je ne sais pas : je remets, dis-moi ce que tu en penses.

Pascale - 14-04-2010 - 12:32

Sur la graisse, je viens de mettre à jour le fichier http://dl.dropbox.com/u/5426860/Mammouthland.png
Tu vas voir, le gras est, comment dire, pâteux avec FF3.6.

Pour le côté "fini" de la home, je pensais en fait à tes blocs de commentaires (div class="comments") qui sont assez sommaires (1px inset #F8F5F2) et qui gagneraient à être affinés. L'article lui-même peut rester avec plein de blanc tournant, c'est moins gênant (après tout c'est le composant principal de la page, il a droit à des honneurs) ;)

Stéphane Deschamps - 14-04-2010 - 13:49

Ok pour la graisse, je vois. Mais le pb c'est que je n'ai mis nulle part un font-weight:bold ! Donc là je ne comprends pas, tu as fait comment pour enlever cette graisse qui n'existe pas ? O_o

Et pour les commentaires, oui : c'est du vite fait en attendant mieux. Par contre là tu vois, pour le contenu, moi ça ne me plait pas ce gros pavé blanc.

Bon, décantation, décantation...

Pascale - 14-04-2010 - 14:03

La graisse est par défaut dans la CSS de tous les navigateurs pour les hn, poulette... :)

Stéphane Deschamps - 14-04-2010 - 14:10

PS : le "blanc tournant" est un terme de design qui ne veut pas dire "blanc" mais "respiration tout autour", donc en fait on est d'accord. :)

Stéphane Deschamps - 14-04-2010 - 14:13

Ah parce qu'en plus dans le jargon design, le blanc c'est pas du blanc... pffff ;)

Bon font-weight:100 change rien du tout mon Stéphanou :

Pascale - 14-04-2010 - 14:17

Elle est superbe la refonte de ton site. (petit coucou en passant ;-)

Joel - 27-04-2010 - 09:48

Ah ben ça tombe bien, fallait que je me penche (et même tombe) sur le HTML5 et CSS3.

Ps : pas très poilu ton mammouth ;)

microtom - 05-05-2010 - 13:40

Oui, oui, je sais... la fenêtre de commentaire n'est tjs pas refaite, ça va venir ;)

Donc, nouvelle couche de peinture, marron cette fois.

Steph, tjs des problèmes de graisse avec cette nouvelle fonte ? ou pas...

Pascale - 11-06-2010 - 17:57

Non, la graisse c'est bien mieux. La lisibilité aussi. Sauf le "s" minuscule, qui n'est pas toujours hyper lisible et ressemble un peu trop à certaines polices Art Déco plus décoratives que lisibles.

Mais je pinaille, je pinaille, tandis qu'en face je ne fais rien pour me débarrasser des mes titres-en-images et me rapprocher de notre idéal HTML5/CSS3 :)

Stéphane Deschamps - 11-06-2010 - 18:08

Bon ! tant mieux si ça passe mieux.

Pour le s, tu as raison... mais cette fonte est le meilleur compromis que j'ai trouvé rapport "qualité/poids".

Pascale - 11-06-2010 - 18:26

Bonjour,

J'ai vraiment envie de le croquer, ce mammouth en chocolat ;-)

Il est vrai que j'ai une mauvaise vue, mais je n'avais pas remarqué la séparation entre la fin du billet et le premier commentaire...

Sinon : beau et bon boulot :-)

Amicalement,
Monique

Monique - 11-06-2010 - 18:55

Et si tu as en plus un écran plat, ça se voit encore moins... :(

Je vais forcer un peu la teinte, voire trouver quelque chose de mieux pour les commentaires.

Merci Monique :)

Pascale - 11-06-2010 - 19:06

coucou pascale,

Quel beau chantier, la peinture est encore fraiche, mais ça prend joliment forme. En tant qu'inspecteur des travaux finis, je me permettrais à mon tour quelques conseils :

Que dirais-tu d'augmenter le contraste sur les skip links, d'en rajouter un autre pour la recherche qui est tout en bas de page (mais pas sur l'accueil, dommage). (un petit #fff avec une opacity à 0.8 ou un truc du genre)

C'est bien d'avoir pensé à ajouter des roles ARIA, mais si je navigue au clavier il me faut pas moins de 29 tabulations pour arriver dans l'input de recherche ;)

Un petit lien vers les flux RSS du site dans ton head serait le bienvenu. Heureusement ça n'empêche pas Safari 5 de proposer le mode lecteur sur les articles de ton blog ;)

Certains éléments mériteraient d'être aligné sur une grille pour donner plus de cohérence à la mise en page, mais tout ça se prévoit normalement en amont sur les wireframes. Je vois que tu as fait tout à la mano sans passer par un framework, pour ce genre de design ça aurait pu t'aider à caler des éléments.

Concernant les performances je vois que tu as corrigé quelques trucs car tu récoltes un beau 98/100 dans Yslow. Il te manque juste un mécanisme de gestion de la fusion et de la minification des feuilles de styles.

C'est quand même pas mal du tout pour une prof de maths ;)

Frank Taillandier - 12-06-2010 - 11:24

ah oui et aussi tu n'as pas masquer le header et le footer dans ta feuille de style pour l'impression.

Allez je m'arrête sinon tu vas passer ton WE à corriger ton site web au lieu de corriger les copies du bac ;)

Frank Taillandier - 12-06-2010 - 11:31

La prof de maths te remercie du compliment ;)

Et comme la correction du bac, ce n'est pas pour tout de suite, je vais donc m'atteler à tout ça.

Merci Frank de tous tes conseils ! :)

Pascale - 12-06-2010 - 15:22

Et une nouvelle interface de commentaires, une !

Pascale - 14-06-2010 - 18:42

Avec plein de smileys dedans clin d'oeil

Pascale - 14-06-2010 - 22:10

belles photos arrivées chez A-Marie mais mon engin capricieux ne captant pas ...rien pour nous.

mouillés pour mouillés, sous la pluie programme suivi par A-Marie et Th.

mamie L - 28-06-2010 - 15:11

Les commentaires des billets de l'année 2010 sont fermés.

| Avant | Archives | Haut de page |