Après 1 an 1/2 de bons et loyaux services, l’ancien thème graphique de ce blog a été remplacé par un nouveau thème plus clair et plus minimaliste :
J’ai voulu ce nouveau thème plus aéré et moins chargé que le précédent. La réalisation a été confiée à Francis qui a fait du très bon travail pour interpréter et traduire mes indications (“j’veux du blanc“). La maquette graphique parle pour elle, mais je vous livre quand même les explications de l’artiste : “J’ai voulu faire du minimalisme jusqu’au bout : 95% de typographie, un layout simple, et un travail sur différentes tonalités d’une même couleur. Une police Slab pour asseoir une certaine légitimité, expertise, et qui se marrie très bien avec les tons bruns et gris, le tout en respectant les règles ergonomiques imposées par Fred“.
Il reste encore un peu de travail d’optimisation sur la mise en page et le réglage des contrastes mais le thème est quasi-finalisé. Concernant la technique, le gabarit a été réalisé en HTML5 (avec les balises article, section…) et en CSS3 avec des typographies exotiques. Comme ce thème n’est pas très sophistiqué, les expérimentations en matière de CSS3 ne sont pas aussi poussées que sur MarketingVirtuel.fr (également réalisé par Francis) où je pense avoir utilisé tout ce que la version 3 des feuilles de style peut proposer (coins arrondis, transparence, transition…) :
Si vous consultez ces blogs avec Internet Explorer, vous aurez très certainement des problèmes de rendu, c’est tout à fait normal, car ces nouveaux thèmes graphiques ne sont volontairement pas optimisés pour IE6, 7 ou 8. C’est une décision dont je suis entièrement à l’initiative et qui est motivée par plusieurs choses :
- Le désir d’expérimenter les dernières nouveautés d’HTML et de CSS ;
- La volonté de ne pas alourdir inutilement le code source avec des astuces à la noix pour faire plaisir à un navigateur lancé il y a presque 10 ans (je fais référence à IE6) ;
- L’envie de motiver les visiteurs à mettre à jour régulièrement leur navigateur (si vous ne voulez pas utiliser Firefox ou Chrome, je vous rappelle qu’IE 9 est disponible en beta).
Suite à ces deux nouvelles versions, les autres blogs devraient également bénéficier très prochainement d’un ravalement pour accompagner un changement majeur dans ma vie professionnelle. Mais j’aurais l’occasion de vous en reparler en fin de semaine…
Très sympa effectivement et lisible ce qui est la principale qualité pour un blog ! On reconnaît le style de l’ami Fran6 !
Juste une remarque : un simple changement de couleur sur le lien “Découvrez mon offre >” ne mettrait-il pas mieux en avant ton offre ? exemple : http://fred.sh/aSY0VW
Juste 2 remarques concernant le menu :
1. les éléments du sous-menu n’apparaissent pas comme appartenant clairement un élément principal. Par exemple “In English” semble plutôt lié à “Contact”, ou “Best of” à “Mes ressources”.
2. quand on passe sur “Mes ressources” le sous-menu idoine s’affiche mais il faut parcourir une certaine distante avec le pointeur sans sortir de la zone du sous-menu sous peine de perdre l’affichage de celui-ci. Pas très pratique.
Ergonomie très sympa, bravo.
Ensuite cela vient peut etre de mon poste mais le gris utilisé sur les typo (rt notamment pour la box des commentaires) est très très clair.
En effet pour les commentaires je tape à l’aveugle là ;-)
C’est clair… mais j’aimais bien la cohérence entre les différents univers sur les anciens thèmes (rouge, noir … ) . Par contre, de mon point de vue, je trouve ça trop clair, et un peu triste. Mais bon les goûts et les couleurs, tant que le contenu reste pertinent, je prendrais même un simple thème blanc avec des liens bleus :)
Thomas > Merci pour ta remarque concernant les commentaires, j’ai assombri le texte des commentaires ainsi que le texte du formulaire…
Très sympa !
un tout petit détail : lorsqu’on survole les icones recherches/rss/contact elles disparaissent car elles ne sont pas pré-chargées.
Une petite sprite contenant tout les états des boutons éviterait que ça clignote à la première visite.
pa.
Bonjour,
En effet, très jolie refonte minimaliste, bravo à Francis. Il semble que quelques détails puissent être optimisés au sujet des contrastes de couleurs pour une bonne conformité avec les règles du WCAG :
– Dans la barre de titre, le contraste entre l’arrière-plan et le titre grisé (“Cavazza” en normal, “Fred” et “.net” au survol de la souris) manque de force, le ratio est de 1.92. Le W3C demande un ratio minimal de 4.5,
– Les trois icônes situées à droite du menu ont également un manque de contraste (1.74) entre le pictogramme et la couleur de fond, ainsi que la couleur du texte du champ de recherche (2.79)
– Les pictogrammes Twitter ont le même souci, avec un ratio de 1.5,
– Enfin, dans le pied de page : le texte sur fond gris clair a un ratio de 4.34 tandis que les crédits ont un ratio de 3.5.
D’autre part, nous partageons l’avis de Thomas sur la taille des caractères dans le champs de saisie du message : il est très difficile de se relire.
Dans l’espoir que ces informations pourront vous être utile.
“utiles” avec un “s” bien entendu !
Une petite remarque (qui est valable pour 90% des sites), pensez à forcer le background-color des input, textarea et consorts, sinon c’est mon thème Ubuntu qui prend le relais et sachant que c’est un gris foncé ( #4A4949 ) sur le gris clair de la police, c’est peu lisible.
Sinon ça manque quand même de couleur, les nuances de gris c’est sympa mais nos écrans ont la possibilité d’afficher des millions de couleurs, profitons en :D
Cordialement,
Handi-pratique > Merci pour ces informations super utiles, je vais regarder tout ça de près cet après-midi…
La tendance est aux thèmes simples et épurés, au moins on voit bien le contenu. Personnellement je préfère ce thème à l’ancien…
Deux petites remarques :
– il est difficile de scanner la page pour les lien… Ils ne sont pas assez visibles.
– le formulaire de commentaire a une taille de police trop faible… Difficilement lisible (Chrome Ubuntu & Win)
@ Frédéric Cozic > Nous avons testé différentes solutions pour mettre en avant ce lien mais je préfère le laisser très sobre pour le moment car ça n’a plus d’importance (en rapport avec mon prochain changement d’activité).
@ jim > Oui le fonctionnement du sous-menu n’est pas un modèle d’ergonomie, il a été sacrifié sur l’autel de l’esthétisme (mais c’est mn choix, je l’assume).
@ Handi-pratique > Merci pour les ratios, c’est très pro !
@ * > Merci pour toutes vos remarques sur les champs.
Blanc, Gris, Noir … très bien.
Penser à contre-balancer cette austérité par des photos hautes en couleurs
(like Apple) … Sinon ça risque d’être un peu raide et aride ;)
Belle inspiration d’ensemble mais je rejoins Jim sur le menu de navivation principal : les alignements entre items de premier niveau et ceux de deuxième niveau, renforcés visuellement par des lignes, sont très perturbants …
On a l’impression qu’ils sont appareillés 2 à 2 …
J’aime bien le nouveau thème. Mais j’ai un peu de mal à délimiter chaque article (fin du précédent, début du suivant). Je n’y connais pas grand chose en webdesign donc c’est très personnel comme avis.
Bonjour,
thème sympa graphiquement, mais…
1. j’en remet une couche, sur l’inutilisabilité du menu déroulant. Il est vraiment très très désagréable à l’usage. Je trouve que ça reflète très mal tes (excellentes) compétences d’ergonome. C’est dommage.
2. le texte dans le champ de saisie d’un commentaire (celui que j’ai sous les yeux en écrivant celui-ci) est vraiment minuscule / illisible.
A part ça, bravo, très jolie.
bonjour,
petit nouveau, je n’avais pas eu le temps de profiter de l’ancien thème graphique ;-)
par contre là c’est radical, et du coup trop clair et trop minimaliste à mon goût..Ah, les goûts et les couleurs !!!
une remarque constructive (faut bien) : les typos sont toutes pixellisées (Firefox 3.5.1, windows xp, 1920*1080) c’est domage car il parait qu’elles sont bien
sinon, pourquoi ne pas limiter la taille en largeur et avoir un rendu comme la copie d’écran de l’article, elle semble plus jolie que le réél
“@ jim > Oui le fonctionnement du sous-menu n’est pas un modèle d’ergonomie, il a été sacrifié sur l’autel de l’esthétisme (mais c’est mn choix, je l’assume).”
Ah, l’ergonomie est sacrifiée pour “un courant artistique et littéraire anglais du dernier quart du XIXe siècle” (cf Wikipédia) ?
Sinon le nouveau design est clairement meilleur, chouette typo.
Je trouve personnellement le design très clair et plat. De plus, le faible contraste entraîne des problèmes de visibilité (nous n’avons pas tous réglé le moniteur de façon identique!) et nuisent à l’ergonomie du site.
Sympa comme design mais un peu applestore-like non?
J’espère que l’on arrivera pas à l’air du blanc et gris… ce sera peut-être difficile de se démarquer face aux autres blogs et sites… L’essentiel est le contenu mais je crois toujours à la forme.
Je suis également d’accord avec les éventuels problèmes de contraste.