Les résultats du Sandbox Designs Competition sont disponibles depuis quelques heures après plusieurs jours passés à peser le pour et le contre de chaque proposition. Chaque membre du jury était libre de laisser libre court à sa subjectivité et à son intime conviction pour se prononcer sur les choix éditoriaux ou la mise en valeur des différentes fonctionnalités qui structurent un blog. Ou encore sur les choix purement esthétiques comme les visuels employés ou les choix colorimétriques. J’ai accordé un poids important au confort de lecture en traquant impitoyablement les déficits en blancs tournants, interlignages et autres espacements. Pour autant, je n’ai pas laissé de répit aux problèmes de lisibilité dépendants de la palette de couleurs retenue : un blog, c’est avant tout beaucoup de texte à lire. En second lieu, j’ai pris en compte l’équilibre global du design. J’ai vérifié ensuite si la structure résistait à l’épreuve de la compatibilité inter-navigateurs. Pour celà, j’ai testé les pages sous Firefox 2, Internet Explorer 6 et Opéra 9, le tout pour Windows. Merci à Scott pour avoir mis en place ce concours qui fut un modèle d’organisation. Vivement l’année prochaine !
C’est quoi au juste ce concours ?
Il s’agissait de proposer un thème pour WordPress en utilisant l’intendance fournie par Sandbox. Je vous renvoie sur l’un des billets que j’ai déjà écris sur ce thème Sandbox. Grosso modo, ce thème a deux particularités. D’une part, il offre l’intégration des microformats dans un écrin xhtml CHIC, donc classe… D’autre part, il utilise le fichier functions.php pour générer des classes à gogo en fonction du contexte dans lequel s’affiche la page dont voici quelques exemples :
<body class="wordpress y2007 m05 d31 h18 home loggedin"> <body class="wordpress y2007 m05 d31 h18 archive category category-action-citoyenne loggedin"> <div id="post-1" class="hentry p1 post publish author-admin category-uncategorized y2007 m05 d16 h09"> <li id="comment-550" class="comment c1 byuser comment-author-admin bypostauthor c-y2007 c-m05 c-d31 c-h20">
Et quand on sait que Sandbox fera probablement partie un jour ou l’autre de la distribution WordPress, vous conviendrez qu’il est urgent d’aller jeter un oeil chez l’ami Scott !
46 designs — Mes impressions « à chaud »
La suite de ce billet contient mes notes de lecture prises durant la phase de sélection des designs. Ces notes, destinées à guider mes choix pour désigner les trois meilleurs thèmes accompagnés de leur chalengers, sont à peines réécrites pour les besoins de cet article. A la relecture, je m’aperçois que je n’ai pas été particulièrement tendre : que voulez-vous, c’est pas de ma faute si j’ai pris mon rôle de judge au sérieux 😉 En, même temps, je me dis que ça ne sert à rien d’embellir les résultats après coup pour éviter de froisser les susceptibilités. Car en fait, si les résultats parlent d’eux-mêmes, ils ne disent finalement pas grand chose sur les designs qui n’ont pas été retenus.
Ca va sans dire mais mieux en le disant, il s’agit essentiellement d’impressions personnelles et subjectives, même si ça et là, quelques justifications techniques ou ergononiques donnent l’impression du contraire ^_^. Lorsque je n’ai pas pu me prononcer franchement « pour » un design, j’ai joué la carte de l’honnêteté en précisant « N/A » pour « Non Applicable » au moment où j’ai rédigé ma note. En revanche, je me suis appliqué à justifier mes impressions « contre ».
Les 46 designs »
BAWS
Structure : centrée, 2 colonnes (sidebar à droite). Ce design est découpé par des bordures et des aplats noirs légèrement trop saillants. Les interlignages sont un peu faibles.
Pour : design structuré et solide.
Contre : la mise en page manque de respiration : trop de formes et pas assez de contre-formes. Les photos en couleur s’intègrent mal. Sous Internet Explorer 6 la mise en page n’est pas stable et le menu déroulant pour les pages-filles n’apparait pas (:hover spécifié sur le li au lien de la balise a ?).
Black and Blue and Read All Over
Structure : centrée, 2 colonnes (sidebar à droite). Manque de « consistance », certainement à cause d’une utilisation aléatoire des espaces entre les éléments : ils semblent posés là par hasard. Les tailles relatives des éléments entre eux semblent aussi le fait du hasard et non de la nécessité. La finition des dégradés est perfectible.
Pour : identique sous Internet Explorer 6
Contre : manque globale de consistance du design. Nombreux détails laissés de côté : marges des images, formulaire, etc.
Blackbox
Structure : calée à droite, 2 colonnes (sidebar à gauche). Sous Firefox (et dans une moindre mesure sous Opera), le titre chevauche une partie du premier billet à cause d’une valeur height (150px) pour le header qui ne suffit pas à contenir le titre à 800% !
Pour : couleurs harmonieuses, même si le gris aurait pu être un peu plus utilisé tout au long du design pour rythmer la mise en page.
Contre : le texte n’est pas interligné correctement : trop monotone. Aucune gestion des marges pour séparer les éléments dans la blogroll ou la zone de commentaires. Manque de rythme pour préserver l’intérêt de lecture.
Blueberry
Structure : centrée, 3 colonnes (2 sidebars à droite). Choix étonnant de couleurs pour un résultat global qui pourrait être assez harmonieux en adoucissant la couleur du texte.
Pour : couleurs originales et traitement judicieux des visuels qui s’intègrent bien dans la mise en page.
Contre : le texte blanc contraste un peu trop et fatigue l’oeil d’autant plus que l’interlignage est trop faible. Certains éléments manquent de lisibilité (textes foncés sur fond foncé).
Blueberry Dreams
Structure : centrée, 1 colonne, big footer. Palette de couleurs bien déclinée. Maquette bien équilibrée grâce aux espaces et interlignages.
Pour : Choix et déclinaison des couleurs. Lisibilité de l’ensemble.
Contre : Le big footer risque la démesure en vitesse de croisière à cause de l’augmentation du nombre d’items. L’effet :hover sur le titre (énormes pointillés) est en trop. Sous Internet Explorer 6, le menu déroulant pour les pages-filles ne fonctionne pas (cf. BAWS).
Butterfly
Structure : liquide, 3 colonnes (2 sidebars à droite). Ce design occupe toute la largeur de la fenêtre du navigateur, ce qui en soi n’est pas une mauvaise idée, mais un exercice difficile. La taille des polices de caractère est quasi identique partout et rend le design un peu trop plat.
Pour : l’internaute peut diminuer la taille de sa fenêtre pour l’adapter à ses besoins.
Contre : importance du fond rose qui occupe toute la largeur pour accueillir la liste des pages. Sous Firefox et Opera, ce fond rose disparait et la liste des pages déborde sur le contenu.
Ceruleus
Structure : centrée, 2 colonnes (sidebar à gauche). Le contenu semble à l’étroit. La palette de couleurs renforce cette impression par son absence d’ouverture.
Pour : dans ce contexte, le bleu est sans doute un choix éclairé.
Contre : pas assez de marge et d’interlignage. Blanc insuffisant autour des blocs.
Chocolate Vanilla
Structure : centrée, 2 colonnes (sidebar à droite). Palette de couleurs subtile et reposante. La page est aérée, mais les marges et les alignements sont perfectibles : la sidebar semble tourner le dos au contenu. Le header ne semble pas avoir maquetté.
Pour : harmonie des couleurs. Interlignage des billets.
Contre : absence de grille de mise en page. Sous IE6 les éléments (sidebars et liste des pages) passent les uns sous les autres et la bordure bleue autour des photos casse la charte couleur pourtant bien déclinée sous Firefox… Interlignage trop faible dans la sidebar.
CITYscape
Structure : calée à droite, 3 colonnes (sidebars à droite). Une certaine sobriété dans le choix des couleurs pour un design assez « carré ». L’ensemble est lumineux et donne envie de lire le billet qui est bien mis en valeur.
Pour : clarté, sobriété, efficacité.
Contre : les flèches traditionnelles vers les articles précédents et suivants ont été remplacés par une puce carré à peine plus petite que celle qui accompagne le titre des billets. Cette puce est identique aux titres des rubriques dans les sidebars. Le pavé « Welcome judges » est noir sur fond bleu foncé… et manque donc de lisibilité ; il manque aussi quelques pixels de marge. Sous IE6, une petite partie du bandeau bleu disparait au niveau du footer.
Crystal Liberty
Structure : calée à droite, 3 colonnes (sidebars à gauche). Structure assez inhabituelle qui met le focus sur la deuxième colonne de la sidebar. L’image de fond dans le body, assez compliquée, ramène le regard vers la zone de contenu : les aplats de couleurs dans les tons bleus et blanc sont plus reposants !
Pour : bon équilibre des blancs tournants et des interlignages.
Contre : le header fait peut-être un peu « pièce rapporté » à cause de la présence du dégradé de couleur entre le rose-mauve et le bleu dont l’harmonie est discutable. Le design du menu horizontal formé par la liste des pages semble avoir été oublié par le designer. Si on masque le header, le design global tient bien la route, c’est dommage !
Diurnal
Structure : liquide, 3 colonnes (2 sidebars à droite). Le design occupe toute la largeur et le résultat est relativement harmonieux. Relativement, car comme je l’ai déjà dit, il est très difficile de remplir toute la largeur d’un écran quand le texte a autant de présence comme c’est le cas dans la plupart des blogs.
Pour : le design fonctionne et j’aime bien le traitement réservé au menu horizontal qui casse un peu la rigidité de la page dont le design est basé sur une succession de pavés rectangulaires. Ce type de design, même s’il « date » un peu, trouvera certainement son public parmi les administrateurs réseaux et autres linuxiens (no troll inside, quoique…)
Contre : la place laissée au formulaire pour soumettre les commentaires est ridiculement faible par rapport à l’espace restant.
Elegently Presented
Structure : centrée, 2 colonnes (sidebar à droite). Ce design porterait bien son nom si le contenu bénéficiait de blancs tournants et d’aération et autres padding ou margin. Si l’écrin est élégant, le contenu est étriqué.
pour : Structure solide.
Contre : manque global de respiration. Sous IE6 et Opera, le visuel de la page « Example Images » déborde sur la sidebar : l’image répétée du footer remonte lorsqu’on joue avec la barre de défilement.
Essay
Structure : centrée, 2 colonnes (sidebar à droite). Habillage minimaliste pour ce design élégant dans les tons gris et noirs. Le header et le menu déroulant sont bien structurés : couleurs, filets, aplats, tandis que le reste de la page semble appartenir à un autre design. J’ai cru un moment que la page n’était pas totalement chargée. Mais ça fonctionne !
pour : traitement intelligent apporté à la liste ordonnée où les trois niveaux de profondeur sont bien hiérarchisés. Très aéré.
Contre : L’interlignage est peut-être légèrement trop important, mais bon, mieux vaut ça que le contraire… Les éléments structurants présents dans le header ne sont rappellés nulle part ailleurs. Sous IE6, le menu déroulant « About » ne fonctionne pas. Un bel « Essay » tout de même.
Evening Grass
Structure : centrée, 1 colonne. Absence des éléments situés traditionnellement dans la sidebar ou le big footer. L’effet de surprise passé, l’oeil ne peut s’empêcher de « bloquer » sur les formes évoquant des herbes ou des algues bleues et rouges. Au point que le texte des billets, pourtant bien lisible, semble phagocyté par ces formes inquiétantes et agressives…
pour : N/A.
Contre :les éléments graphiques font trop de bruit visuellement parlant. Le choix des couleurs « bleu – blanc – rouge » détonne par rapport au thème censé évoquer la nature (Evening = soir, Grass = herbe). Sous IE6, la marge gauche disparait totalement. Par ailleurs, le largeur du design parait faible dans des résolutions 1280×1024 et au-delà.
Fashionable
Structure : centrée, 2 colonnes (sidebar à droite). Design rose-mauve clair sur fond noir avec un header composé principalement d’un visuel de femme en petite tenue avec des ailes de papillon qui occupe tout l’écran en 1280×1024…
pour : Sur le fond noir, les photos ressortent bien. Le fond noir ne consomme pas trop d’énergie !
Contre : Tout est dans le visuel, et le visuel ne me plait pas. En outre, le texte blanc sur le fond noir à tendance à scintiller sur mon écran.
Hourglass
Structure : centrée, 3 colonnes (sidebars à droite). Si le choix de la palette de couleur (verts, bleus, oranges) n’est pas un problème, la multiplication des pavés en aplats ou en dégradés associée à des images de fond en diagonale, décourage la lecture.
pour : de bonnes idées concernant les images de fond pour distinguer les billets des Asides.
Contre : trop de bruit parasite la lecture. Sous Firefox, les titres sur deux lignes débordent de l’image de fond dans la sidebar. Marges inexistantes dans le bloc Welcome judges. Le lien d’évitement Skip to content est situé en dehors de l’empagement, au même niveau que le contenu…
Lovely Green
Structure : calée à gauche, 2 colonnes (sidebar à droite). La palette de couleur (verte avec une touche de violet et de rouge) est du plus bel effet. Toutefois, le design semble avoir été conçu pour une résolution assez faible puisque, bien que le design est calé à gauche, l’image de fond contient une « frise » à droite visuellement attractive : l’oeil hésite. Cette impression que le design n’est pas, à l’origine conçut pour des résolution importante, est confortée par la solution de continuité dans le visuel du header dont la répétition apparait un peu trop.
pour : palette de couleur originale et agréable à regarder.
Contre : visualisé en 1280×1024, le design manque de consistance à cause de la frise de droite. Les textes dans la sidebar manquent globalement de lisibilité. Les photos semblent avoir été oubliées dans le design. La liste des pages est collée à gauche contre la fenêtre du navigateur. Le traitement de certains éléments (citations) n’est pas en accord avec la logique du thème (formes, couleurs).
Magnolia
Structure : centrée, 3 colonnes (sidebars à droite). Palette de couleurs dans les noirs, bleus, vert et rose sur fond blanc avec un header énorme sur fond noir. Même à petites touches, ces couleurs interpellent l’oeil qui n’en peut, mais… Les espaces avant les titres de rubriques sont moins importants que l’espace qui suit, ce qui est un peu confusant. A la limite, on pourrait presque se demander à quelle liste de lien appartient quel titre !
pour : la taille du header sur fond noir est un plus pour les économies d’énergie.
Contre : pas assez structuré. Sous IE6, les deux colonnes touchent le header.
Milkia
Structure : centrée, 2 colonnes (sidebar à gauche). Cette palette de couleur manque de contraste, mais reste lisible. L’absence de header interroge sur le chargement de la page : les titres des billets prennent le pas sur le titre du blog. Mais on s’y fait très vite. Le traitement visuel des listes « pages », « catégories », etc. est efficace en détachant bien les sous-rubriques sans gêner la lecture. La gestion des marges et autre interlignage n’a pas été oubliée.
pour : gestion des listes et des blancs tournants.
Contre : manque peut-être légèrement de contraste.
MIX
Structure : centrée, 3 colonnes (sidebars de part et d’autre du contenu). Les quelques touches de couleurs différentes pour les liens des catégories, des archives ou des pages permettent de donner du relief à ce design assez calme. Une impression d’ensemble positive malgré quelque espacements trop faibles : entre le titre du billet et la date de publication, et absence d’espace entre les photos et le texte. Le texte déjà petit dans l’ensemble est presque illisible dans la balise pre.
pour : design calme.
Contre : le menu horizontal pour afficher les pages est peut-être un peu trop présent, d’autant plus qu’on le retrouve dans la barre latérale. Sous IE6, le sous-menu « About » ne s’affiche pas (problème de :hover) et les puces (flèches) sur les éléments de liste des page ont un fond gris disgracieux (problème de png transparent).
Modernistic
Structure : N/A.
Pour : N/A.
Contre : s’affiche aussi mal sous IE6 qu’avec Firefox ou Opera !
Mom
Structure : 2 colonnes (sidebar à droite). Le titre est énorme et passe sur deux lignes (ce qui n’était probablement pas voulu par l’auteur). Le menu « pages » (probablement testé uniquement sous IE6) déborde sur le billet. Le design est structuré par des bloc à la Mondrian (enfin, non, pas vraiment).
Pour : design structuré.
Contre : trop d’aplats différents. Sous IE6 et Opera, le menu déborde sur le billet. Sur la page « Example images », la sidebar passe sous la zone de contenu sous IE6, tandis que la photo du bas déborde de l’empagement sous Opera.
Moon Under Uranus
Structure : centrée, 1 colonne, big footer en deux parties. Le bandeau haut occupe toute la largeur de l’écran sans que celà soit vraiment utile : le design gagnerait certainement si le header était centré comme le reste. Jusqu’à présent, j’ai essayé de ne pas juger le choix des couleurs en elles-mêmes (les goûts et les couleurs, n’est-ce pas…) mais là, je dois avouer que ce dégradé de bleus et ce jaune est épuisant (bon, en même temps, je n’ai plus 20 ans, ceci explique peut-être celà 😉 )
Pour : la mise en page passe sous Firefox, IE6 et Opera.
Contre : couleurs agressives. Le big footer occupe toute la largeur de la fenêtre. Si en soit ce n’est pas un problème, le fait que le header subisse le même traitement donne l’impression que la colonne de contenu se trouve entre le marteau et l’enclume.
Moo Point
Structure : centrée, 2 colonnes (sidebar à droite). Design sobre et bien équilibré. Palette de couleur légère et bien utilisée. Les billets sont composés sur 2 colonnes : une pour les informations sur le billet, et l’autre pour l’article lui-même. Les Asides sont traités sur une seule colonne et rythment agréablement la mise en page. Un bon candidat pour un blog de type journal ou magazine sur lequel l’auteur interviendrait plus personnellement par le biais des Asides.
Pour : classe et sobriété.
Contre : le menu déroulant des sous-pages ne fonctionne pas avec IE6. Le fond gris sous les noms des commentateurs.
One Sweet Theme
Structure : 2 colonnes (sidebar à gauche). La douceur du thème est à la limite du manque de contraste : les textes disparaissent sous un nuage de brume. L’interlignage est trop faible. A cette taille, cette police n’est pas la plus élégante. La zone réservée aux billets aurait pu être réduite au bénéfice de la barre latérale.
Pour : N/A
Contre : les textes semblent compressés, les couleurs ne sont pas harmonisées entre elles. Les puces associées aux listes de la barre latérale déstructurent plus qu’autre chose. Sous IE6, la taille de la photo chasse la sidebar sous le contenu.
Oranges
Structure : calée à gauche, 3 colonnes (sidebars à droite). Le header (logo blanc et orange sur fond noir) occupe toute la largeur de l’écran, sans toutefois que le fond noir, très présent, ne dérange : il dirige bien le regard vers le contenu. Celui-ci gagnerait à voir l’interlignage des texte augmenter sensiblement.
Pour : le header met le contenu en valeur.
Contre : pagination des billets trop proche des meta information. Les catégories gagneraient en lisibilité en supprimant l’italique.
Oriole
Structure : centrée, 2 colonnes (sidebar à droite). Le header occupe la largeur de le fenêtre, mais le titre et le menu « page » ainsi que le champ de recherche sont centrés. Le design contient des éléments à angles droits et des aplats de couleurs, mais le design est affaibli par le footer arrondi et le dégradé qui court sur toute la largeur de l’écran. On sent que le designer a voulu tout mettre pour éviter de faire un choix (dizaïner, c’est choisir et faire le deuil des solutions qu’on ne retient pas).
Pour : gestion correcte des interlignages. Placer le menu « pages » et le champ de recherche dans le header est une bonne idée (mais limite toutefois le nombre de pages possibles).
Contre : présence du dégradé et du footer en arc de cercle qui dilue l’impact du design.
Pagoda
Structure : 2 colonnes (sidebar à droite). Design plutôt hybride : la zone de contenu se situe à plus de 550px du bord gauche pour laisser la place à des visuels détourés rapidement… La sidebar est calée contre la barre de défilement à droite, de sorte qu’un redimensionnement de la fenêtre lui fait chevaucher l’article.
Pour : rendu identique dans Firefox, IE6 et Opera…
Contre : taille des images de fond.
Picnic
Structure : liquide, 1 colonne, big footer en deux colonnes. Palette de couleurs dans les roses et marrons pour ce thème qui file la métaphore du pique-nique avec une nappe en background pour les billets, et une plante persistante (position: fixed) dans la marge gauche. Le reste du design est composé de simples blocs avec contours. S’il n’est généralement pas recommandé d’aller jusqu’au bout d’une métaphore, il est toutefois bon que tous les éléments s’en inspirent d’une façon ou d’une autre. Ici, il manque peut-être un peu de vert et des formes organiques pour évoquer la nature (vous me direz qu’on peut pique-niquer partout, mais bon…)
Pour : bonne gestion du découpage et de la répétition des images de fond pour la nappe.
Contre : les « Asides » passent inaperçus. Le design me semble trop carré pour évoquer la convivialité du pique-nique. Sur les longs billets, le fond peut vite devenir gênant. Sous IE6, le sous-menu About ne s’affiche pas au passage de la souris.
Ponjong
Structure : liquide, 3 colonnes (sidebars à droite). Palette composée de gris, gris foncé avec une touche de jaune pétantet un peu de vert tendre. L’ensemble est équilibré, mais comme souvent avec les designs liquides, la longueur des lignes ralentit la lecture. Cet inconvénient aurait pu être limité en augmentant la taille du texte. Dans la sidebar, les titres sur fond jaune gêne la concentration sur le contenu quand le billet est affiché en entier. Par ailleurs, la page d’accueil qui affiche les extraits des billets n’est pas assez aérée, de sorte que l’oeil va chercher du repos auprès des sidebars…
Pour : le fond gris foncé apporte un sentiment de distinction.
Contre : le design est plus fait pour être regardé que pour permettre une lecture confortable (ce qui est souvent le cas avec les design sur fond foncé où le contraste optimum est dur à obtenir).
Potassium
Structure : centrée, fluide, 2 colonnes (sidebar à droite). Le gris clair qui domine largement est accompagné de touches de bleu et de tons jaunes-orangés qui détonnent un peu dans l’ensemble. Le texte des billets est bien interligné, mais les lignes sont trop longues ; d’autant plus que la sidebar semble un peu étroite. Les rubriques présentes dans cette barre latérale sont composées de blocs aux bords arrondis indépendants dont le contenu ressemble à des petits pâtés de sable à cause de l’absence d’espace entre les lignes.
Pour : N/A.
Contre : le titre du blog est blanc sur fond gris clair. L’image en bas dans la page d’exemple déborde et passe sous la sidebar dans Firefox, IE6 et Opera.
Prima
Structure : centrée, 2 colonnes (sidebar à droite) et big footer. Palette de couleur dans les marrons-beige, plus une touche de bleu et d’orange. Le fond du header s’étend de part et d’autre de la zone de la fenêtre. Le design est élégant et agrémenté d’images de fond qui rehaussent subtilement les titres et les billets. C’est une bonne idée d’avoir placé les liens internes (catégories, archives, pages) dans la sidebar et les liens dirigeant les visiteurs ailleurs (blogroll) dans le big footer.
Pour : harmonie des couleurs. Le menu horizontal structure l’organisation du contenu.
Contre : le footer est centré sous IE6 et Firefox mais aligné à gauche sous Opera (une broutille). L’image de fond du menu horizontale met un certain temps pour s’afficher au passage de la souris.
Promised Land
Structure : centrée, 1 colonne, big footer. L’idée principale du design est de mettre en avant le dernier billet. Les autres étant simplement évoqués par le titre et les informations associées au billet. Le titre du blog n’apparait qu’au passage de la souris sur l’élément « home » du menu horizontale en haut de la page. Les éléments graphiques suivent la métaphore de la terre promise avec le ciel en haut, l’herbe au milieu et le sol dans lequel on s’enfonce progressivement à mesure que l’on fait défiler la page.
Pour : l’idée de descendre sous la terre en avançant dans la lecture du texte.
Contre : une partie du texte « Welcome judge » disparait sous le cadre. Le graphisme du fond et les cadres épais sont un peu agressifs à mon goût. Sous IE6, un espace blanc important apparait sous la pagination du billet.
Sakeena
Structure : calée à gauche, 2 colonnes (sidebar à droite). La première impression est très bonne, mais très vite, la disparition d’une partie du titre du blog surprend : la couleur du titre est identique à celle du fond de la sidebar et il y a un chevauchement… Ce problème existe sous les trois navigateurs testés. Ce n’est pas très grave, puisqu’il suffirait de modifier la couleur du texte, mais bon… En parlant de couleur, celle du texte « Welcome judge » est très peu lisible (noir sur le fond gris foncé de la sidebar). A part ces détails, le reste est très bon : le dernier billet et les Asides se distinguent par une images de fond qui rythme la lecture. Sous le menu horizontal des pages, un visuel assez clair laisse respirer le design en ouvrant une fenêtre.
Pour : de bonnes idées pour structurer la page.
Contre : absence de la blogroll et quelques petites pétouilles aisément perfectibles (espace autour des petites photos). Sous IE6, le contenu de la sidebar disparait dans la page « Example images ».
SandBAM
Structure : calée à gauche, 2 colonnes (sidebar à gauche), big footer en deux colonnes. La position: fixed de la sidebar permet d’avoir la liste des pages sous les yeux pendant le défilement. Je ne suis pas fan de cette pratique, mais la persistance de l’élément fixe ne gêne pas non plus. Les titres et les meta informations ressortent un peu trop au détriment du contenu du billet. Les rubriques au sein du big footer manquent de padding ; lle corps utilisé pour les textes me parait un peu élevé.
Pour : palette de couleurs, visuel en background de la sidebar.
Contre : si on met le billet de côté, les textes ne respirent pas assez (manque de margin et de padding). Sous IE6, le contenu passe à la suite de la sidebar qui perd son joli background à l’occasion (sûrement à cause du décalage de la liste des pages). Sous Opera, le même décalage existe.
SandPress
Structure : centrée, 3 colonnes (sidebars à droite). Thème très élégant dans les tons bleus et gris sur fond blanc, avec une discrète pointe de vert et de rose du plus bel effet. Les dégradés subtils et les relief légers donnent une certaine consistance au design. Les images de fond sont employées avec parcimonie. Le menu page horizontal se situe au-dessus du header et se raccorde avec ce dernier lorsqu’on clique dessus. Le design est rythmé par des coins parfois carrés, parfois arrondis.
Pour : très classe, convient à tous type de blog. J’aime beaucoup les dégradés très fin et les effets mirroirs et ombrés maitrisés. Les interlignages et les espacement entre les différents éléments sont impeccables.
Contre : certains petits textes remplacés par des images en background apparaissent au-dessus du visuel (recherche, flèche de navigation). Une broutille.
SAZI
Structure : liquide, 2 colonnes (sidebar à droite). Du gris, du gris et encore du gris… Ah non, une petite touche de couleur mauve et rouge dans le logo accentue encore un peu la tristesse de la page… Dans ce genre de structure, la longueur des lignes de texte pose souvent des problèmes de lisibilité qui sont ici aggravés par l’utilisation d’une police de type Times dont l’oeil est souvent plus faible qu’un Helvetica, par exemple. La lisibilité globale n’est pas améliorée par le manque de contraste entre des éléments gris moyen sur gris plus foncé…
Pour : L’image de fond est particulièrement bien étudiée pour la répétition.
Contre : L’image de fond (plutôt organique) n’es pas du tout dans l’esprit reste (plutôt carré). Bordures « à l’ancienne ».
Scrappr
Structure : centrée, 1 colonne, big footer en 2 colonnes. Les icônes et les liens pour accéder aux flux RSS se situent en dehors du bloc de contenu. On dirait un bug, mais comme il se retrouve sur les 3 navigateurs, je suppose que c’est voulu. C’est un peu la même chose pour la « liste » des pages qui est placée de façon aléatoire au point que je n’ai pas réussi déterminer le navigateur qui s’approche le plus de la vérité du concepteur. Les titres des billets sont précédés du signe # qui passe en dehors de la page sous Firefox et Opera, pour disparaitre totalement sous IE6…
Pour : N/A.
Contre : trop gris.
Shades of Gray
Structure : calée à gauche, 2 colonnes (sidebar à droite), big footer. Tres sobre, très beau et bien équilibré, ce thème sera idéal pour tous les blogs proposant des articles de type magazine. Une large photo en niveau de gris dans le header donne une personnalité et un peu de « chaleur » à l’ensemble qui pourrait sembler un peu « froid » (ce qui milite pour des articles de type journalistique qui ont besoin d’un environnement neutre pour plus d’objectivité). A découvrir.
Pour : tout.
Contre : rien.
Takimata
Structure : « Est-ce que les blogs doivent forcément ressembler à un blog ? » Telle est la question posée par l’auteur de ce design épuré. L’affichage des billets est limité aux titres, à la date, au nom de l’auteur et au nombre de commentaires. Plus bas, le big footer est complètement linéarisé. Le tout dan les tons gris clairs, gris foncés et blanc. Cette palette fonctionne plutôt bien et passé l’étonnement du début, je me suis surpris à cliquer sur les titres pour savoir ce que l’auteur du blog avait à dire ! Thème à forte personnalité, donc, malgré un abord minimaliste. A découvrir.
Pour : minimaliste, lisible, surprenant.
Contre : première impression à dépasser.
The Blue Butterfly Layout
Structure : centrée, 2 colonnes (sidebar à gauche en deux parties). Ce thème papillonne énormément avec un header composé d’un grand visuel de papillons bleus et de feuilles vertes. Le texte est largement interlettré, ce qui aère visuellement le texte, sans pour autant améliorer la lisibilité (l’espace entre les mots se rapprochant dangereusement de l’espace entre les mots eux-mêmes…).
Pour : découpage de la sidebar en deux parties. Palette de couleur présente mais douce qui ne détourne pas l’attention du texte.
Contre : interlettrage trop important. Un peu trop d’espace dans le header : le contenu pourrait se trouver trop bas avec des résolutions d’écran basses.
Tiffany Blue
Structure : centrée, 2 colonnes (sidebar à droite). Très joli avec un header composé d’un visuel de bijoux (Tiffany oblige) en forme de coeur et du titre du blog, le tout sur un large fond blanc. Ce header est suivi des onglets du menu horizontal pour les pages, suivi par un doux dégradé cyan-blanc pour la partie billet et d’un aplat cyan pour la barre latérale surplombée par une élégante boucle de papier cadeau. Les billets sont séparés par du blanc agrémenté d’un discret visuel. Parfait pour un blog de fille (ou de garçon en remplaçant le cyan par du rose 😉 )
Pour : joli et agréable à regarder. Sobre. A découvrir malgré quelques imperfections.
Contre : texte de la sidebar un peu trop présent. Quelques défauts d’affichage (dernier onglet qui déborde sur la sidebar, et d’un pixel en hauteur (toujours par rapport à la sidebar). Sous IE6, la zone de contenu disparait presque totalement vers la gauche et la sidebar passe sous le contenu à cause de la largeur de l’image du bas trop importante. Sous Firefox et Opera, cette même image passe simplement sous la sidebar sans décaler les blocs.
Veracity
Structure : centrée, 2 colonnes (sidebar à droite). Fond bleu lagon à la limite du gris foncé, textes blancs, une touche de bleu et de vert-kaki. Les couleurs fonctionnent assez bien, mais les alignements entre les éléments semblent n’obéir à aucune grille précise : le titre des billets est plus proche du header que du billet lui-même, par exemple. Les nombreuses lignes horizontales et verticales dispersent l’attention au lieu de proposer un sens de lecture.
Pour : interlignage et constraste pertinent pour la lecture du billet seul.
Contre : trop de filets en page d’accueil. Header encombré et ramassé à gauche. Sous IE6, la colonne de contenu disparait vers la droite et l’image de la page d’exemple provoque les mêmes dégâts que pour la proposition précédente (Tiffany Blue).
Walk on the Shadows
Structure : calée à gauche, 3 colonnes (sidebars droite). Superbe design moderne sur fond noir zébré avec moults effet d’ombrés et d’éclairages parfaitement maitrisés. La palette de couleur évoque parfaitement la marche sous les étoiles. Beaucoup de travail sur les images de fond qui exploitent judicieusement raccords et répétitions. A découvrir.
Pour : Aspect moderne. Bien réalisé. Alignements bien vu pour les dates.
Contre : ne se prêtera pas à tous les styles de contenu, mais est-ce vraiment un problème ?
We Love WordPress
Structure : liquide, 3 colonnes (sidebars à droite). Le concepteur affirme adorer WordPress, mais doit être fâché avec les sidebars qui semblent ratatinées dans leur coin. Le billet, lui est parfaitement lisible, c’est assez rare dans les designs liquide pour être signalé 😉 Ceci est dû principalement à la taille du texte assez généreuse (et oui, les pixels ne coûtent rien) et à une marge gauche qui limite de facto la taille de la colonne de contenu.
Pour : bonne longueur pour les lignes de texte du billet dans ce contexte de design liquide.
Contre : : le design manque globalement de consistance. Sous les 3 navigateurs testés, le menu page est décalé vers le bas.
Wrock It
Structure : liquide, 2 colonnes (sidebar à droite). L’ambiance hésite entre le fun de la bande dessiné (fusé qui part dans l’espace, couleurs bleus et rose) et le sérieux du gris qui occupe la quasi totalité de la fenêtre. Je ne suis pas fan de ce genre d’univers, mais je dois reconnaitre que le concepteur l’a parfaitement décliné dans toute les pages, sans rien oublier.
Pour : design consistant.
Contre : univers graphique trop éloigné du mien pour être vraiment objectif 😉
C’est mon choix
J’avais 15 points à distribuer à un minimum de 4 designs et 7 au maximum. Il fallait aussi choisir trois challengers. Puis écrire une ou deux lignes sur les propositions retenues. Voici le règlement du concours si vous voulez en savoir davantage. Les vainqueurs se partagent près de 2000 US$, ce qui n’est pas négligeable.
First : Shades of Gray de Leslie Franke (5 points)
This very pure, beautifull and balanced design, will fit all blogs which provide magazine’s style articles. The large picture in the header give personnality and warmth feeling.
Second: Moo Point de Will Wilkins (4 points)
Well designed with sobriety and neatness : the palette offers colors sparingly but efficiency. The content is king and it will find a nice jewel case in Moo Point.
Third : Walk on the Shadows d’Adam Freetly (4 points)
Very modern design with zebra background and al lot of shadows and lightenings effects, perfectly controled.
Runner-up: Takimata de Robert Ellis (2 points)
« Do blogs have to look like blogs? » That’s the question asked by this uncluttered design. My answer ? Why not! The palette works well and the posts are completely readable. Will fit well for geeks blogs or artistics blogs!
Runner-up: SandPress, d’Arpit Jacob
Harmonious and tastful design with a wise sens of rythmes. Good use of smooths gradients.
Runner-up: Essay de Ian Stewart
Minimalist covering for this neat design. Good idea for the hierarchical treatment of the nested lists!
En guise de conclusion
Une grande partie des défauts relevés sont des erreurs de jeunesse : marges, interlignages, alignements. De fait, de nombreux designs ont été proposés par des participants pour lesquels ce concours était l’occasion de réaliser un thème public pour la première fois. Par ailleurs, de nombreux participants ont mis l’accent sur l’exploitation des classes dynamiques du thème Sandbox au détriment peut-être de l’équilibre graphique de leur composition.
Nul doute que les quelques défauts seront améliorés rapidement par leurs auteurs, à moins que vous décidiez de le faire vous même : dans la plupart des cas, modifier la présentation du texte pour améliorer sa lisibilité est l’affaire de quelques minutes. En tout état de cause, n’hésitez pas à vous rendre sur les sites respectifs des participants pour suivre l’évolution des designs qui vous intéressent.
Je voulais terminer par un récapitulatif des bonnes pratiques pour l’affichage des textes à l’écran et je suis tombé sur un excellent texte que je partagerais avec vous lorsque j’en aurais finalisé la traduction.
Stay tuned and mind the gap!
PS : J’ai fais au plus vite pour publier ce billet rapidement après la publication des résultats au détriment, sans doute, de la rigueur orthographique…
scoopeo_url=’http://www.css4design.com/index.php/2007/08/07/112-sandbox-designs-competition-46-themes-pour-wordpress-passes-en-revue’
Thanks for the kind words (luckily, I work with a francophone!) and fair critique, Bruno. I appreciate it.
J’avais commencé ma contrib pour le concours mais je n’ai pas su m’y tenir… Je regrette là.
En tout cas y’a de bons résultats!!!
Mais je ne vois que 1 français? Pas de belges?? c’est fou.
Ian > I’m happy you appreciate my critique 😉 I hope that Scott is planning SDC 2008!
Ben > C’est dommage que tu n’ais rien proposé, et oui, un seul français, pas de belges, pas de suisses… Allez, si Scott remet le couvert pour 2008, on fera un peu plus de bruit car cet été les concours n’ont pas manqués 😉
J’ai fait le tour de la moitié des thèmes mais point de vue ergonomie j’ai toujours à redire malheureusement. Soit le contraste est insuffisant, soit le texte se chevauche, soit les liens ne sont pas franchement visibles…
Moo-point se détache du lot, sans être catchy graphiquement. Potassium, Prima, Promised land, SandBAM, Sandpress sont sympas aussi. Après, je n’ai pas eu le courage… 🙂
Pas l’impression que les thèmes soient nombreux non plus à utiliser la pseudo-classe :focus, quand ils ne le suppriment pas totalement, sacrilège ! (Fournir des feuilles reset aux néophytes est toujours dangereux…).
Mucho agreement with your comments on my themes. Black + Blue was my first attempt at CSS and I had no idea what a grid was. 🙂 (still haven’t tried one out yet)
engtech @ IDT > Mucho thanks for your "savoir-vivre" (fair play in french) 😉 Goulven > A ce propos je finalise un billet sur les reset CSS et j’ai pris soin de pointer du doigt certains de leurs défauts. Et leurs avantages aussi 😉
Quel travail de ouf br1o. Bravo à toa 🙂
j’irais voir quand j’aurais le temps à quoi ressemble ces thèmes^^
Le menu déroulant sous IE6 ne fonctionne pas avec le thème sandbox ???, quel dommage !!!
#sam {
Aucun menu déroulant basé sur la pseudo-classe :hover appliquée sur la balise [li] ne fonctionne sur IE6. Pour ce faire il faut mettre :hover sur le lien [a]. Le thème Sandbox n’y est donc pour rien. Il semble que nos amis outre-atlantique ne se soucient guère d’être affiché sur ce navigateur, ceci explique peut-être celà 😉
}
Je viens de mettre le theme Sandpress sur le blog, il en jette!
Nico, cool, je viens de passe chez toi, c’est clean 😉
Ils sont vraiment super jolis!
Bravo!