Concevez des bandeaux de titres en relief avec CSSPublié le par dans CSS, Développement | Aucun commentaire »

Les bandeaux de titres en relief inspirés par les marque-pages sont à la mode. Dans le cadre de la dernière refonte de Scooter System, j'ai eu l'occasion de travailler avec ce type d'éléments graphiques, et j'ai vraiment apprécié leurs qualités ergonomiques et esthétiques. C'est donc tout naturellement que dernièrement, dans le cadre de la refonte complète du site Techno Scoots, je me suis tourné vers eux. J'ai toutefois longuement réfléchi au meilleur moyen de les réaliser, l'objectif étant d'obtenir un code html et CSS le plus propre possible tout en limitant l'impact en termes de poids et de requêtes http.

Sur Scooter System, j'avais opté pour les sprites CSS qui répondent en partie à mes attentes, sauf au niveau du poids des éléments. Pour Techno Scoots, j'ai cherché à limiter les images et en suis arrivé à un constat : seuls les coins en triangles sont véritablement problématiques. Bien qu'il soit possible de les créer à partir de CSS3 (grâce aux sélecteurs :before, :after et à quelques rotate), j'ai préféré me tourner vers des images classiques, à savoir des png-24 transparents de 5x5 pixels. J'ai ensuite encodé ces petits fichiers en base64 afin de les intégrer directement dans le fichier CSS.

Bandeau en CSS

Le résultat répond à mes attentes en termes de poids (le fichier CSS est Gzipé par le serveur) et de requêtes http (aucun fichier externe n'est appelé). Après avoir appliqué un background-color (et en option un border-bottom) sur la zone centrale du bandeau, il me restait à trouver une solution pour intégrer proprement ces coins en dessous. Après plusieurs essais, j'ai finalement opté pour un positionnement absolu dans le div enfant. En utilisant les background multiples et en jouant sur les margin et padding, on arrive à un résultat identique sous tous les navigateurs récents, les plus anciens se contentant d'afficher un vide à la place des coins.

Voici le code CSS correspondant à mes travaux sur la colonne latérale (#aside) du site Techno Scoots, en 300 pixels de large :

#aside h2{
font-size:24px;
line-height:38px;
text-align:center;
width:310px;
height:38px;
margin:20px 0 0 -5px;
color:#fff;
text-shadow:1px 1px #8d0000;
background:#c90000;
}
#aside .child{
width:310px;
margin:0 0 0 -5px;
background:url(data:image/png;base64,codeenbase64) 0 0 no-repeat,url(data:image/png;base64,codeenbase64) 305px 0 no-repeat;
}



Un breadcrumb dans les SERPs de GooglePublié le par dans Développement, HTML 5, Référencement | 8 commentaires »

Cela fait des mois que Google est capable de détecter dans le code html et de traiter ce que l'on appelle les breadcrumbs, encore baptisés fils d'ariane ou fils de navigation. Souvent affichés en haut des pages des sites, ces éléments de navigation permettent aux visiteurs de savoir instantanément où ils se trouvent dans l'arborescence d'un site en affichant les pages parentes.

S'ils sont utiles sur un site en lui-même, ils peuvent également être affichés dans les résultats des recherches (SERPs) pour apporter une information supplémentaire à l'internaute qui recherche un contenu. En prenant la place de l'url des pages, ils permettent d'augmenter le nombre de liens vers le site, et donc le taux de clics... Pourquoi alors ne pas tout mettre en oeuvre pour qu'ils soient correctement détectés et traités ?

Breadcrumbs dans les SERP de Google

Si l'algorithme de Google comprend un moteur chargé de traiter automatiquement les breadcrumbs, sachez qu'il est possible de lui forcer la main afin qu'il les prenne en compte très rapidement. Pour ce faire, nous allons aborder les microformats (ou Rich Formats), et notamment le système RDFa qui est l'un des plus utilisés actuellement. Il s'agit d'une couche qui vient de greffer sur le code html pour le rendre intelligible.

Pour aider les webmasters à mettre en place cette fonctionnalité, Google a publié une rubrique d'aide très complète. Un technicien y explique de façon simple quelles sont les propriétés prises en compte par le moteur et de quelle façon les implémenter sur une trame html existante. Nous vous invitons à consulter cette rubrique d'aide. Une fois les consignes suivies, vous devriez obtenir un code html assez proche de notre exemple ci-dessous :

<div id="breadcrumb" xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a href="http://www.site.com" rel="v:url" property="v:title">Accueil</a></span> &gt;
<span typeof="v:Breadcrumb"><a href="http://www.site.com/categorie/" rel="v:url" property="v:title">Catégorie</a></span> &gt;
<span typeof="v:Breadcrumb"><a href="http://www.site.com/categorie/contenu.html" rel="v:url" property="v:title">Contenu</a></span>
</div>

Quand le balisage est mis en place dans le code html de votre site, l'étape suivante consiste à vérifier que Google détecte bien votre fil d'ariane en RDFa. Utilisez pour cela l'outil de test des Rich Snippets. Vous devriez voir apparaître autant de lignes "Breadcrumb" qu'il y a d'éléments dans votre fil d'ariane, chacune étant accompagnée d'un title et d'une url. N'hésitez pas à tester différentes url comme votre page d'accueil, les pages de catégories et les contenus les plus profonds.

Si tout est correctement détecté et extrait par Google, vous pouvez finaliser vos travaux en soumettant vos modifications au moteur de recherche. Utilisez pour cela le formulaire de déclaration des Rich Snippets, en prenant soin de bien remplir tous les champs. Pour le data type, cochez "other" et indiquez "Breadcrumb" en dessous. Indiquez enfin que vous avez déjà mis en place le balisage et donnez 4 exemples de pages.

À partir de là, Google mettra quelques heures à prendre en compte votre fil d'ariane dans ses SERPs. Les pages nouvellement crawlées apparaîtront avec leur fil d'ariane tant que le balisage RDFa sera présent sur votre site. Du côté des inconvénients, on peut noter que vos pages ne seront plus valides au niveau du code html, le formulaire du W3C indiquant que les balises de microformats n'ont rien à faire ici... mais qu'importe !



Chargez Jquery en asynchrone avec Head.jsPublié le par dans Développement, Javascript et jQuery | 7 commentaires »

Suite à cet article publié par la Ferme du web, je me suis intéressé à une nouvelle librairie javascript baptisée Head.js. Encore très jeune comparée aux ténors que sont Mootools, Prototype ou Jquery, cette dernière propose un angle d'attaque différent. Elle a en effet un objectif simple : remplacer tous les appels de fichiers javascripts du header par un seul et unique script très léger (2.3 ko gzippé).

Une fois appelé, ce dernier va charger dynamiquement vos fichiers javascript, en parallèle de la page, comme s'il s'agissait de simples images. Pour autant, et c'est là toute la force de head.js, vos scripts développés sur la base de Jquery resteront entièrement opérationnels. Dès que les fichiers seront chargés par le navigateur (depuis le serveur, un cdn ou le cache du navigateur), vos scripts deviendront opérationnels, qu'ils soient appelés depuis les fichiers ou la page en elle-même.

Si ce changement n'est pas considéré comme une évolution positive par les Yslow et autres Page Speed (plug-ins Firefox), les résultats sont bien là côté performances. Les pages s'affichent beaucoup plus rapidement, avec un gain de 100% à 400% selon les sites et le nombre de fichiers javascript appelés. J'ai déployé head.js sur Scooter System hier, et ai constaté un gain de plusieurs centaines de millisecondes sur les temps de chargement.

Au delà de cette fonctionnalité extrêmement prometteuse, la librairie Head.js permet d'autres acrobaties fort pratiques : prise en charge des balises html5 sur les anciens navigateurs, création de classes permettant de cibler les visiteurs en fonction de leur navigateur ou de la résolution de leur écran directement depuis un fichier css... bref, de quoi simplifier le développement d'un site tout en améliorant significativement l'expérience utilisateur.

Je vous propose ci-dessous un exemple d'appel à Head.js dérivé de mes "travaux" sur Scooter System. Pour une efficacité maximale, ce dernier est à placer dans le header de la page (bien qu'il puisse également être appelé à la fin) :

<script src="http://static.monsite.com/js/head.js"></script>
<script>
head.js("http://static.monsite.com/js/jquery.js","http://static.monsite.com/js/jquery_perso.js");
</script>

Il s'agit de l'appel le plus simple, qui permet de charger une série de scripts les uns à la suite des autres. En l'occurrence ici, Jquery suivi de divers plug-ins et de mes scripts maison (regroupés dans un unique fichier). Simple à mettre en oeuvre, Head.js devrait faire parler de lui dans les prochains mois. S'il est pour le moment toujours en cours de développement (version 0.8.0), il a déjà été adopté par de nombreux sites plus ou moins importants.

Vous pouvez suivre les avancées de Head.js sur Github.



@font-face et les navigateurs, la solution ultime !Publié le par dans CSS, Développement | 8 commentaires »

Dans le cadre de la refonte de Scooter System, je me suis intéressé de près à l'implémentation de polices d'écriture exotiques dans les pages web. Après avoir trouvé une première solution que je pensais idéale (@font-face CSS avec un .ttf + javascript Cufon), mes heures de recherches sur les sites et blogs spécialisés m'ont conduit vers une solution à la fois plus légère, plus simple et multi-plateformes.

La solution que j'ai finalement adoptée ne fait appel à aucun plugin ou librairie javascript et a l'avantage d'être interprétée directement par les navigateurs quels qu'ils soient : IE6, 7, 8 et 9, Firefox, Chrome, Opera, Safari et ses versions mobiles (pour iPhone et iPad). Elle repose sur un simple appel en CSS3 de la propriété @font-face, avec une subtilité qui fait que chaque navigateur va appeler un format de police qu'il sait interpréter :

  • Internet Explorer : .eot (format propriétaire de Microsoft interprété depuis IE6) ;
  • Firefox, Opera, Chrome et Safari : .ttf (format de police d'écriture TrueType tandard) ;
  • Safari mobile : .svg (format basé sur une structure xml).

Pour générer les 3 formats de fichiers nécessaires, j'ai utilisé le Font-face Kit Generator de Squirell. Ce script extrêmement poussé permet de convertir un fichier de police .ttf ou .otf dans de multiples formats tout en maîtrisant le contenu du fichier (et donc son poids). Voici les options à sélectionner pour obtenir le résultat escompté (commencez par cocher la case "Expert...") :

  • Font formats : cochez TrueType, EOT et SVG ;
  • Rendering : décochez tout ;
  • Misc : cochez la case "WebOnly" ;
  • Subsetting : cochez la case "Custom subsetting..." puis "Mac Roman" dans la liste qui apparaît. Vous allez ensuite pouvoir ajouter ou supprimer des caractères en fonction de vos besoins, la liste étant mise à jour en temps réel dans la partie basse. De cette façon, vous allez pouvoir diminuer la taille des fichiers de police générés en supprimant les caractères inutiles ;
  • CSS formats : laissez "Bulletproof (Smiley)" ;
  • CSS options : ne cochez rien ;
  • Agreement : cochez la case pour accepter les conditions.

Une fois ce formulaire validé, vous allez télécharger une archive compressée contenant tous les éléments dont vous avez besoin. Reste à mettre vos fichiers .ttf, .eot et .svg sur votre serveur via ftp, puis à mettre à jour votre fichier CSS pour qu'il appelle les fichiers selon le navigateur. La seule solution qui fonctionne est celle donnée ci-dessous. Elle garantit que chaque navigateur ne téléchargera que le fichier dont il a besoin.

@font-face{font-family:"custom";
src:url("http://www.votresite.fr/fonts/custom_font.eot");
src:local("Nom original de la police"),
url("http://www.votresite.fr/fonts/custom_font.ttf") format("truetype"),
url("http://www.votresite.fr/fonts/custom_font.svg#custom") format("svg");}

Notez que dans l'appel du fichier .svg est présent un hashtag (#custom). Ce dernier fait référence à l'identifiant de la fonte présent dans le fichier .svg. Il est indispensable pour que la police d'écriture soit appelée. Vous pouvez le retrouver très facilement en ouvrant le fichier .svg avec un éditeur texte, et en récupérant l'ID contenu dans la ligne "<font id="custom" horiz-adv-x="***" >".

Maintenant, il ne vous reste plus qu'à utiliser votre police d'écriture "custom" où bon vous semble dans votre fichier CSS... Simple, efficace et garanti fonctionnel sous tous les navigateurs utilisés actuellement ;)



Comment utiliser la propriété CSS3 @font-face ?Publié le par dans CSS, Développement | 1 commentaire »

CSS3 débarque avec une propriété qui va réjouir graphistes et intégrateurs html : @font-face. Cette dernière permet d'appeler des polices d'écriture stockées sur un serveur dans une page en html sans nécessiter l'utilisation de plugins javascript ou de hacks. Malheureusement, elle n'est interprétée que par la dernière génération de navigateurs Webkit, à savoir Chrome et Safari. Firefox et les dernières versions d'Internet Explorer peuvent en profiter mais en utilisant des formats de fichiers de polices différents.

Alors que les navigateurs Webkit fonctionnent avec n'importe quel fichier avec l'extension .ttf, Firefox nécessite l'utilisation d'un fichier en .otf alors qu'Internet Explorer, toujours à la traîne, ne comprend que les fichiers au format propriétaire .eot. Comme le suggère Alsacréations, il est alors nécessaire d'utiliser les commentaires conditionnels pour obtenir un résultat potable sous tous les navigateurs. Une technique obsolète et pas facile à gérer dans le cadre d'un projet de développement complexe.

L'alternative la plus pertinente consiste à se tourner vers des systèmes tels que Cufon. À partir d'un classique fichier .ttf, l'outil permet de générer en ligne un code javascript qui sera interprété par le navigateur et affichera les polices stylisées dans tous les navigateurs. Le poids du fichier de police est certes doublé, mais le résultat est garanti 100% identique dans tous les navigateurs utilisés aujourd'hui, IE6 compris.

Pour un résultat optimal, Cufon peut être appelé de manière conditionnelle dans les navigateurs ne gérant pas la propriété @font-face. C'est la solution que j'ai choisie pour la nouvelle version de Scooter System, actuellement en cours de développement. Grâce au plugin FontAvailable pour Jquery (quelques lignes de javascript seulement), le navigateur détecte si la police est chargée ou pas et, le cas échéant, fait appel à Cufon pour la charger en javascript.

En intégrant l'ensemble des codes javascript nécessaires dans un unique fichier .js (Jquery + FontAvailable + Cufon + police pour Cufon), il est possible d'obtenir un fichier relativement léger, de l'ordre de 20ko avec compression Gzip. L'affichage sera instantané avec les derniers navigateurs, et un peu plus lent avec les autres. Pour rappel, voici le code à utiliser dans votre fichier CSS pour appeler une police via @font-face :

@font-face{
font-family:'custom';
src:url('http://www.votresite.com/polices/custom_font.ttf');
}

La police peut alors être utilisée dans votre fichier CSS via un simple appel par son nom :

.custom_font{
font-family:custom;
}

Source : http://dev.pockyworld.com/developpement/css/gestion-des-polices-exotiques-avec-css3-jquery-et-cufon.html



De l’utilisation de Base64 en CSSPublié le par dans CSS, Développement | 9 commentaires »

À cheval sur les recommandations de Google et de Yahoo que l'on peut obtenir facilement en utilisant des outils tels que Page Speed ou Yslow (2 plugins pour l'extension Firebug de Firefox), je suis régulièrement amené à faire des choix en matière de graphisme. Faut-il privilégier l'expérience utilisateur en intégrant (intelligemment) des icônes aidant à la compréhension de l'interface, ou bien est-il plus important de conserver des pages rapides à charger, avec un minimum de requêtes http ?

J'ai découvert aujourd'hui l'existence d'un algorithme de codage de l'information basé sur une table limitée à 64 caractères, le Base64. Une fois une image encodée à l'aide d'outils comme celui de Motobit, elle peut être intégrée simplement à tous types de fichiers dont le html, le xml et le CSS ! Au lieu d'afficher ces images depuis votre serveur, le navigateur les génèrera à partir du code Base64 contenu dans le fichier CSS. Cela permet de limiter le nombre de requêtes http, et donc d'accélérer le temps de chargement et d'affichage des pages.

Certains me diront que les images appelées via CSS sont mises en cache par le navigateur. C'est certain, mais le fichier CSS en lui-même l'est également... D'autres argumenteront en annonçant un poids supérieur de l'ordre de 150% entre un code en Base64 et une image équivalente. Certes, mais un fichier CSS peut être gzipé, ce qui n'est pas le cas d'une image. Pour convaincre ceux qui douteraient encore de l'intérêt de la chose, l'appel d'images en Base64 est instantané. Il peut remplacer les sprites pour gérer les changements de backgrounds en hover sans temps d'attente.

Appel d'une image en CSS classique :

.maclasse{
padding-left:20px;
background:url(icone.png) 0 0 no-repeat;
}

Appel d'une image avec Base64 :

.maclasse{
padding-left:20px;
background:url(data:image/png;base64,CODE64ASSEZLONG...) 0 0 no-repeat;
}

Du côté des faiblesses, on notera tout de même une non-compatibilité acec les navigateurs anciens comme IE6 et IE7, et la relative difficulté de mise à jour du graphisme si vous n'avez pas conservé une version non encodée des images utilisées. Au delà de ces limitations faciles à contourner, le couple CSS/Base64 m'apparaît comme une révolution à même de résoudre les "problèmes" de nombre de graphistes et webdesigners. La fin des sprites de 500 pixels carrés et des background-position à gogo est terminée (pour moi en tous cas) !



Dessiner avec les canvas html5Publié le par dans CSS, Développement | 3 commentaires »

Le html5 inaugure une nouvelle balise <canvas> permettant d'intégrer des zones graphiques en 2 ou 3 dimensions dans le corps des pages. Pour le moment gérée par une poignée de navigateurs récents (dont Safari, Chrome, Opera et Firefox), elle laisse entrevoir de belles opportunités en termes de design et de graphisme. Il est en effet possible d'y "dessiner" en utilisant les nombreuses possibilités offertes par CSS3 : formes complexes, transparence, dégradés, calques....

En se substituant à des images simples, la balise html canvas (en dessin 2D) permet de limiter le nombre de requêtes http exécutées au chargement d'une page, et donc d'en accélérer la vitesse d'affichage. On peut imaginer que dans un futur proche, les logos de sites et autres éléments faisant partie intégrante de la charte graphique seront chargés dans des balises canvas, directement depuis le fichier CSS. On comprend pourquoi Google promeut la technologie !

Afin de tester les possibilités offertes par ce nouvel élément canvas, plusieurs graphistes et web-designers se sont amusés à créer des illustrations plus ou moins travaillées. On retrouve notamment des personnages et des logos de navigateurs web. Pour un début, certaines créations sont tout simplement bluffantes... Voici une liste des plus réussies d'entre elles :

Si ces dessins en canvas html5 et CSS3 sont pour le moment dessinés minutieusement (et longuement) par de talentueux graphistes, je suis prêt à parier que des logiciels voire des services web permettront prochainement d'en générer à partir d'images classiques ou en mode édition. Photoshop pourrait par exemple proposer un enregistrement dans ce format. Avec la montée en puissance des navigateurs "CSS3 compliant", la balise canvas a de beaux jours devant elle ! N'hésitez pas à proposer d'autres exemples sympas via les commentaires ;)



Ce que html5 va changer pour les concepteurs de sitesPublié le par dans Développement, HTML 5 | 2 commentaires »

La 5ème version de l'Hypertext Markup Language, j'ai nommé html5, est sur toutes les langues. À peine a t-il été dévoilé par le W3C que déjà Apple et Google proposent un aperçu des multiples possibilités offertes par le langage en association avec CSS3. Non content de permettre un développement simplifié grâce à ses nouvelles balises, html5 offre également des perspectives incroyables sur le plan de l'interactivité et du graphisme... Cela va t-il changer quelque chose pour les concepteurs de sites ?

Développant moi-même régulièrement de nouveaux sites, j'ai pris l'habitude de travailler avec différentes technologies qui satisfont dans 95% des cas mes besoins : html pour le code, les microformats ou RDFa pour les données structurées (Rich Snippets chez Google), javascript et jQuery pour l'interactivité et CSS pour la forme. Avec l'arrivée du couple html5/CSS3, les choses vont incontestablement changer. Non seulement il va être nécessaire de réapprendre la structure de base du html, mais il va en plus falloir abandonner des outils avec lesquels nous avions pris l'habitude de travailler...

Les structures micro-encapsulées comme le RDFa seront abandonnées au profit de celles intégrées à html5. Les librairies javascript comme jQuery ou Mootools perdront de leur intérêt face aux nouvelles possibilités offertes par le html... Sans compter les centaines de nouvelles propriétés CSS3 à apprendre ! Bref, l'évolution du html 4.01 vers html5 risque de ne pas être des plus aisées pour les concepteurs de sites. J'ai encore bien du mal à me voir développer mon 1er site tirant pleinement profit du nouveau couple html5/CSS3. Et vous, où en êtes-vous ?



Étendre la portée d’un lien avec JqueryPublié le par dans Développement, Javascript et jQuery | 3 commentaires »

Pour ceux qui ne connaissent pas Jquery, il s'agit d'une librairie Javascript qui permet de simplifier le développement de scripts et de garantir un fonctionnement similaire sous tous les navigateurs, depuis Firefox à Chrome en passant par Internet Explorer et Opera. Il fonctionne de la même façon que les concurrents Mootools et Prototype, avec toutefois une communauté plus dynamique.

Utilisateur de Jquery depuis plus d'un an, je vous propose un focus sur une astuce simple mais qui s'est avérée pratique dans de nombreux cas de figures. Après l'avoir mise en place sur Scooter System dans le cadre d'une refonte graphique, je l'ai rapidement intégrée à plusieurs autres sites tant elle s'est avérée fonctionnelle.

Les quelques lignes de code Jquery ci-dessous vous permettront d'étendre la zone cliquable d'un lien à un élément parent, généralement un <div>. Cela permet d'offrir une expérience utilisateur agréable et intuitive tout en conservant une structure de liens naturelle. Pour obtenir un résultat similaire sans utiliser Jquery, il faudrait utiliser des liens composites, déconseillés pour le référencement.

<script type="text/javascript">
$(function(){
$(".zonecliquable").mouseover(function(){
$(this).css("cursor","pointer").find("a").css("text-decoration","underline");
}).mouseout(function(){
$(this).find("a").css("text-decoration","none");
}).click(function(e){
document.location.href = $(this).find("a").attr("href");
e.preventDefault();
});
});
</script>

La mise en oeuvre de ce script est simple. Après avoir intégré un appel à la dernière version de la librairie Jquery en header, il vous suffit de copier-coller ce code en pied de page, juste avant la balise </body>. Les éléments ayant la classe "zonecliquable" deviendront cliquables et pointeront vers le lien qu'ils contiennent. Les liens se surligneront de façon naturelle au survol de la souris.

Attention, chaque élément ne doit contenir qu'un lien sous peine de compromettre le fonctionnement du script. Le nom de la classe peut être changé pour s'adapter à une charte graphique existante. Pour voir ce script en fonctionnement, je vous invite à jeter un oeil sur les zones de listes de Scooter System ou de TouchMobile. N'hésitez pas à poser vos questions ou à laisser vos commentaires ci-dessous.