Design, Tutoriaux

Blog design : la tendance des “étiquettes / rubans”

Difficile de trouver un nom pour cette nouvelle tendance. J’appelle ça, surement à tords, des étiquettes. Les anglophones parlent de “isometric banner”. Ce que j’appelle étiquette, ce sont les images qui apparaissent avec un effet de superposition. Difficile à expliquer…

Voici quelques exemples pour vous inspirer ainsi qu’un tutoriel pour vous expliquer comment les mettre en place sur votre blog.

Galerie / Exemples :

Yoast.com
yoast

yoast2

DesignMag.com
designm

Webdesign Ne.ws
webdesign

webdesign-2

Marekting Alternatif.com
marketing-alternatif

From the Couch.com (ancienne et nouvelle version)
fromthecouch

from-the-couch

from-the-couch-2

Sarah Longnecker
sarahlongnecker

Build Conference
buildconference

buildconference

Burker King Studio

burgerkingstudio

burgerkingstudio1

Les thèmes WordPress

Evidemment le plus simple reste d’adopter un thème wordpress qui utilise ces petites étiquettes. Voici donc une sélection de thème wordpress :

ZinePress
zinepress

Imprezz
imprezz

eBusiness
elegantthemes

LightWord
lightword

Pholio
coloris-wp

Choloris
choloris-wp

Blues Vintage
blues-vintage-wordpress-themes

Comment faire ?

Vous ne souhaitez pas changer de thème wordpress, ou n’êtes pas sous wordpress, mais vous aimeriez tout de même adopter les étiquettes sur votre blog ? Voici quelques conseils pour les utiliser sur votre blog.

Afin de maximiser les compatibilités entre navigateurs, je vous conseil d’éviter la transparence pour gérer les ombres de l’étiquette. Si votre fond est d’une couleur unie cela ne posera pas de problème. En revanche, si votre fond est une image qui se répète, il faudra utiliser la transparence du format PNG et le hack qui va bien pour que votre blog s’affiche correctement sur IE6. Oubliez le format GIF qui ne gère pas les différents niveau de transparence (indispensable pour un dégradé d’ombre).

Si vous utilisez ces étiquettes pour vos titres d’articles, il faudra qu’elle puisse s’adapter en fonction de la longueur du titre. Pour cela je vous conseil de découper votre étiquette en 3 images : le coin gauche, le fond et le bout de l’étiquette. Prenons l’exemple du thème ebusiness :

etiquette

Les 3 images utilisées : image de gauche / image centrale répétée / image de droite

Vous constaterez que le fond des étiquettes est sur chacune des images, ainsi pas besoin de gérer la transparence. Si votre fond est texturé (ou une image qui se répète) l’astuce peut-être de faire un angle d’étiquette très petit (comme sur l’exemple au dessus) et de mettre une couleur proche de votre texture de fond. Comme vous pouvez le contaster sur l’exemple avec l’image de gauche, la différence ne se remarque pas. Sinon, vous pouvez utiliser un hack qui vous permettra de gérer la transparence PNG 24bits sous IE6.

D’une manière générale, il est recommandé d’utiliser les étiquette en image de fond (via le CSS) et de mettre le texte en code et non en image. Tout simplement pour un meilleur référencement mais aussi pour que le texte soit modifiable facilement. Quoi qu’il en soit, si vous utilisez les étiquettes pour les titres de vos articles, vous serez obligé de procéder ainsi. Voici le code à utiliser pour afficher les étiquettes comme dans l’exemple :

Dans votre fichier index.php et single.php (et partout là ou votre titre s’affiche, archive.php etc.) :

[php]
<div class="post-info-wrap"> <img src="<?php bloginfo(‘template_directory’); ?>/images/home-title-2-left-<?php echo $artsee_ebusiness_color; ?>.gif" alt="home title" class="home-title-image" /> <span class="post-info">Post&eacute; par
<?php the_author() ?>
sur
<?php the_time(‘M jS, Y’) ?> <!– affiche la date –>
| <a href="#respond" title="<?php _e("Ecrire un commentaires"); ?>"> <!– commentaires –>
<?php comments_number(‘commentaire’,’1 commentaire’,’% commentaires’); ?>
</a></span> <img src="<?php bloginfo(‘template_directory’); ?>/images/home-title-2-right-<?php echo $artsee_ebusiness_color; ?>.gif" alt="home title" class="home-title-image" /> </div>
<div style="clear: both;"/>
[/php]

Dans votre feuille de style (style.css par exemple) :

[css]
.post-info-wrap {
margin-left: -39px;
float: left;
clear: both;
margin-bottom: 15px;
}
.post-info-wrap-home {
margin-left: -31px;
float: left;
clear: both;
margin-bottom: 15px;
}
.post-info {
float: left;
color: #fff;
margin: 0px;
display: block;
background-image: url(images/home-title-2-bg.gif);
height: 41px;
font-size: 19px;
padding: 8px 20px 0px 20px;
}
.post-info a:link, .post-info a:hover, .post-info a:visited {
color:     #ffe8a1;
}
.home-title-image {
float: left;
}
[/css]

Notez que dans l’exemple c’est l’auteur / la date / le nombre de commentaires qui s’affiche. Pour afficher le titre de l’article voici le code à insérer (le css ne change pas) :

[php]
<div class="post-info-wrap"> <img src="<?php bloginfo(‘template_directory’); ?>/images/home-title-2-left-<?php echo $artsee_ebusiness_color; ?>.gif" alt="home title" class="home-title-image" /> <span class="post-info">
<h2 class="titles"><a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>">
<?php the_title() ?></a></h2>
| <a href="#respond" title="<?php _e("Ecrire un commentaires"); ?>">
<?php comments_number(‘commentaire’,’1 commentaire’,’% commentaires’); ?>
</a></span> <img src="<?php bloginfo(‘template_directory’); ?>/images/home-title-2-right-<?php echo $artsee_ebusiness_color; ?>.gif" alt="home title" class="home-title-image" /> </div>
<div style="clear: both;"/>
[/php]

Vous pouvez rajouter une class pour les titres dans le css :

[css]
.titles a:link, .titles a:visited, .titles a:active {<a>
</a>color:#FFFFFF;
float:left;
font-size:20px;
}
[/css]

N’hésitez pas à partager vos étiquettes :p. Et si vous trouvez mieux que “étiquette” dites moi !

ABONNEZ-VOUS à la mailing list, c'est GRATUIT !

Abonnez-vous à la mailing list et recevez plein d'infos intéressantes !

13 Comments

  1. complètement d’accord avec toi, on voit de plus en plus cette tendance et c’est vrai que je l’ai aussi utiliser sur le graph d’un site que je suis en train de monter. J’aime bien d’ailleur… 🙂

  2. Yes y’a un article sur smashing magazine apparu y a quelques semaines là dessus, c’est vrai que c’est un peu la tendance du moment, surtout dans les portfolio de graphistes/ blogs…

    Perso j’aime bien mais ça va vite lasser encore une fois.

  3. Bof, je ne sais pas si ce sont les exemples, mais perso, ça ne me plaît pas beaucoup.

  4. Ha sympa comme tout. Dès que j’ai un poil de temps je vais voir si j’arrive à mettre ça dans blogger. C’est mon gros challenge à chaque fois 🙂

  5. En effet pas mal ! Je n’avais pas encore remarqué cette tendance !
    Je vais surement m’en inspirer pour un de mes sites !

    @livre_photo : quant au flash, beurk 😉 En fait, on ne parle plus de la même chose, je pense…

  6. Le tutoriel n’est pas très clair mais ces étiquettes/rubans m’intéressent. Tout dépendrait donc de la propriété Css “float” ?

  7. L’étiquette est la meilleure des définitions, j’ai de suite su que tyu parlais de ça! 😀 PAr contre j’ai essayé de les intégrer a des photos perso…mais c’est d’une galère pour obtenir quelque chose de vraiment propre! Ok suis pas douée alors du coup j’ai abandonné! 😀

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Avant de partir

Abonnez-vous à la mailing list et recevez plein d'infos intéressantes !