romy.tetue.net

Conception web, UI et UX,
sémantique, ergonomie et accessibilité.


Les intégristes

31 mars 2010,
par Romy Têtue


« RSSistes de tous horizons, venez donc faire un tour sur le blog, car le nouveau thème des intégristes est en ligne et il nous plaît beaucoup ! »

J’aime follement le look de ce site, lesintegristes.net :

  • Les bordures qui s’assument, en 6 px d’épaisseur, allons-y franchement !
  • Les effets de relief en creux (en images et en CSS avec -moz-box-shadow)
  • Les personnages étranges, à grosses lunettes creuses, qui ressemblent moins à d’inquisiteurs intégristes qu’à des curieux en quête de quelque vérité, observant le monde à la jumelle...
  • Le picto signalant le flux RSS placé au centre, impossible de le rater, dans une couleur inhabituelle (vert pomme au lieu d’orange), tellement en vue dans le bandeau qu’il devient un élément décoratif aussi incongru que ces personnages à grosses lunettes creuses, à l’un desquels il semble faire une crête aztèque...
  • L’attention apportée aux détails, notamment pour les commentaires qui, par exemple, distinguent visuellement ceux des internautes de ceux émis par les auteurs du blog ou par l’auteur du billet, etc.
  • La différenciation fine des états des liens (:hover vs :active) qui rend la navigation agréable, pas seulement au clavier.
  • Les champs de formulaires, larges et écrits en gros, avec les explications de saisie qui se déploient au focus sur le textarea : bien vu !
  • La couleur des aplats (#ECE4D6) : sable, discrète, très proche de celle dont je me délectais sur maiis.net.
  • La dégradation élégante du site, qui reste agréablement accessible, y compris au clavier, même sans javascript, sans image et/ou sans CSS.
  • La simplicité et la lisibilité des typos : Verdana pour les corps de texte et Georgia pour les titres, deux polices conçues pour améliorer le confort de lecture à l’écran [1], ici affichées dans un taille généreuse (14px pour le corps de texte). Pourquoi faire compliquer quand on peut faire si simple !?
  • Ces zestes de vert mousse et vert anis (#8FA042 et #B4C626), qui identifient certains hyperliens et titres, pile comme j’aime.


Page d'accueil du site lesintegristes.net

La cerise sur le gâteau (en javascript) :

  • Le bandeau qui change selon la météo et l’heure (avec les API Yahoo GeoPlanet et Weather) : ça ne sert à rien et c’est sans rapport avec le sujet du site, mais ça donne le sentiment pas dégueux que le site est vivant. Mais pourquoi faut-il que je préfère les versions pluie et neige de ce bandeau !?
  • L’ergonomie du menu de navigation dans les archives par mois et années. J’ai toujours douté de l’utilité de ce genre de menu mais celui-ci sait être exhaustif sans être envahissant. Il reste simple et discret, n’affichant que les années, dépliables. Ce qui permet aussi de voir d’un coup d’œil que le blog est actif depuis 2007 et qu’aucun billet n’a encore été publié cette année... alors quoi !? Vos internautes s’impatientent !


Pied de page du site lesintegristes.net

Un petit point négatif : la largeur de la compo (1150px). Si le site apparaît de façon très satisfaisante sur mon grand écran de bureau, il est mordu à gauche sur mon portable (en 1024px de large) : les trombines des auteurs des commentaires sont hors champ, dommage !

Penchez-vous aussi sur le code, qui utilise HTML5 et se débarrasse d’IE6 pour profiter de toute la richesse des sélecteurs CSS 2, plus de 10 ans après leur recommandation par le W3C. Pas mal non ?

Ouais, pas mal du tout !

Voir en ligne : http://www.lesintegristes.net


Le thème du site lesintegristes.net, qui tourne sous Wordpress avec jQuery, PHP et Apache, a été réalisé par le Fauteuil et est référencé dans différentes galeries, sans autre forme de commentaires : CSSBake, CSSLeake, HTML5 Gallery.

Pour en savoir plus, lire : Les intégristes, le thème !, par Pierre Bertet, 22/12/2009.


[1] Rappelons que Times et Arial ont été initialement conçues pour l’imprimerie, tandis que Georgia et Verdana ont été spécifiquement développées pour optimiser la lecture sur écran d’ordinateur (cf. : Boyarski, D., Neuwirth, C., Forlizzi, J. et Regli, S. H., 1998, A study of fonts designed for screen display, Proceedings of CHI’98, pp. 87-94.).

Voter pour cet artice sur hellocoton.fr Netvibes Del.ico.us

Vos commentaires

  • Le 31 mars 2010 à 12:31, par Christophe Gravatar En réponse à : Les intégristes

    100% d’accord avec toi : c’est du bon boulot ! bravo.

  • Le 13 avril 2010 à 09:42, par Grégoire Dierendonck Gravatar En réponse à : Les intégristes

    Merci beaucoup pour ce très très sympathique billet !

    Nous sommes encore en train de peaufiner pas mal de petits détails sur le site...
    Nous voudrions aussi y apporter plusieurs améliorations (et/ou évolutions), notamment une adaptation du site pour petits écrans, une meilleure mise en avant de notre grille verticale, et une version opensource du thème (comprenant la présence d’une home, la catégorie notes, la structure graphique globale et la grille verticale).
    Bon, nous travaillons dessus en parallèle de nos jobs respectifs, donc je ne m’avancerai pas trop sur les délais... Huum...

    Et pour la réintégration des avatars et dates d’articles à l’intérieur des 960px réglementaires... Allez, motiv, je vais commencer à y penser ! ;)

  • Le 16 avril 2010 à 19:31, par Pierre Bertet Gravatar En réponse à : Les intégristes

    Je passe (bien tard, le temps se fait rare en ce moment) te remercier à mon tour : c’est un vrai plaisir de voir son travail étudié et apprécié, qui plus est par romy.tetue.net !

    À propos de la fraîcheur des articles, tu as bien raison, c’est une honte : il va falloir se retrousser les manches, et vite !

  • Le 16 septembre 2012 à 17:31, par Romy Têtue Gravatar En réponse à : Les intégristes

    Comme cette note l’annonce, le thème WordPress de ce blog est maintenant disponible sur GitHub (sous licence MIT). Chic !

Un message, un commentaire ?


Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d'abord sur gravatar.com (gratuit et indolore) et n'oubliez pas d'indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom