Behind The Seine

webdesign link : 10 LESS CSS Examples You Should Steal for Your Projects | Design Shack

http://designshack.net/articles/css/10-less-css-examples-you-should-steal-for-your-projects/

Simple and nice introduction to LESS CSS syntax
tags: css, less, webdesign

webdesign link : Filter Functionality with CSS3 | Codrops

http://tympanus.net/codrops/2012/01/09/filter-functionality-with-css3/

Nice tut for filtering items using a simple menu and thumbnails.
tags: jquery, effect, webdesign

webdesign link : Creating a Floating HTML Menu Using jQuery and CSS | Nettuts+

http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/

tags: webdesign, tutorial, jquery

webdesign link : New High-Quality Free Fonts (2012 Edition) - Smashing Magazine

http://www.smashingmagazine.com/2012/01/09/high-quality-free-fonts-2012/

Featuring new classics like Hero and Open Sans. Aside from them the most interesting ones are the Valencia and Bree fonts.
tags: fonts, webdesign

webdesign link : Free High Resolution Textures - gallery

http://lostandtaken.com/gallery

tags: texture, webdesign

webdesign link : Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development

http://getskeleton.com/#examples

tags: webdesign, framework

webdesign link : 30 Sleek Fonts for Your Minimalist Designs | You the Designer

http://www.youthedesigner.com/2011/11/22/30-sleek-fonts-for-your-minimalist-design/

whola and satellite are very interesting
tags: fonts, webdesign

Améliorer le rendu des sites sur Internet Explorer

Pour les besoins du blog de Claudy Lebreton, nous avions proposé un design simple mais contenant quelques effets, liés à l'utilisation de CSS3, toujours problématiques à rendre sur des navigateurs de type Internet Explorer d'anciennes générations.
Usuellement, nous avons alors 2 alternatives qui nous sont offertes :

• prévoir une dégradation correcte du design ainsi réalisé pour l'affichage sur ces navigateurs désuets
• avoir recours à une feuille de style séparée pour ces navigateurs pour gérer ces effets via des images ou hacks

La première alternative est souvent frustrante car elle implique souvent de rogner sur ces petits plus qui font la lisibilité et l'ergonomie d'un site (mise en valeur de certains encarts par des effets ombrés, utilisation de pseudo-éléments CSS spécifiques pour gérer des événements…).
La seconde peut vite devenir un enfer en terme de maintenance et nécessite un travail additionnel parfois conséquent au détriment de la performance de la page (ajout d'images), ce qui s'apparente à une double peine, tant ses navigateurs sont déjà peu véloces à la base.

Au fil des recherches et des expérimentations, nous avons finalement validé et utilisé 2 astuces qu'il nous semble judicieux de partager avec vous :

• l'utilisation de PIE pour l'application de décorations CSS3 (IE6 à IE9) - http://css3pie.com/
• selectivizr pour l'émulation des pseudo-sélecteurs CSS3 (IE6 à IE8) - http://selectivizr.com/

Agrégation de flux RSS dans TypePad via Javascript

En se basant sur l'API TypePad, je vous avais déjà montré il y a quelques temps comment faire mieux que le module natif de TypePad pour afficher les notes d'un ou plusieurs autres blogs TypePad.
La limite de ce snippet est qu'évidemment il ne peut reprendre des flux d'autres blogs tiers (WordPress, Blogger, etc…).
Il s'avère que par hasard, suite à un travail sur un autre projet, je suis tombé sur un plugin jQuery, jGFeed, permettant de faire la blague, et qu'en plus, la demande avait été formulée par l'une de nos utilisatrices des plus fidèles, princesse101.
L'affaire était donc vite entendue, muni du plugin je me suis donc lancé dans la mise en place d'un aggrégateur de blogs pour une colonne latérale de blog.
Son principe est simple : partant d'un flux RSS que vous avez à créer, le plugin et le snippet associé vous permettront d'afficher en colonne latérale les X dernières notes de ce flux dans un format que vous définirez, et reprenant le style en place au sein de votre blog (permettant ainsi toutes les outrances stylistiques de votre crû par la suite).

TipTip, des info-bulles classieuses et légères pour vos liens

Ceux d'entre vous qui ont d'ores et déjà adopté des bonnes pratiques en termes de référencement savent qu'il est important de remplir le champ titre lorsque l'on insère un lien. Celui n'est en effet pas visible des visiteurs, mais il apporte une information supplémentaire aux moteurs de recherche.

Pour autant, le contenu inséré dans ce champ titre mériterait bien souvent d'être visible aux yeux du visiteur. D'une part parce que malgré tout vous vous donnez la peine de le créer et qu'il est parfois frustrant de se dire que ca n'a d'effet que sur le référencement, d'autres part parce qu'il peut également apporter une information pertinente au lecteur sur la destination du lien que vous lui proposez, pour peu que ce titre soit un tout petit peu explicite.

Pour vous aider à valoriser ce contenu, je vous propose aujourd'hui d'intégrer un petit widget très léger à votre blog qui va vous permettre de créer des info-bulles élégantes au passage de la souris et reprenant ce contenu.