Flexible grid system using calc()

Almost one year ago, I wrote about how to make "A basic 16-lines-of-code CSS fluid grid" using inline-block instead of the usual float. Today I’ll show you how to build a grid system using the (...)

WebP : an hybrid image format

What about a unique image format for digital photography, web graphics, transparency and animations ? That’s the mission of the WebP (pronounced "Weppy") image format. Introduced by Google in (...)

Sticky footer with box-sizing

If you want a footer that sticks to the end of a long scrollable con tent and at the same time sticks to the bottom of the window in case of a short content, here is the code to write using the (...)

Photoshop Layer Filters

When working on a webdesign, my PSDs always have dozens of layers. I recently wanted to change the font-family of the layout. I started to go every layers and make the change. Feeling I was doing (...)

Sidebar and Aside are different !

One thing you already probably see, as a web developer, is a visual sidebar wrapped in an <aside> tag. It works fine in many cases but not always. <aside> is an HTML5 tag while (...)

A basic 16-lines-of-code CSS fluid grid

When having a simple design, it is sometimes better to write your own grid than to download a heavy CSS framework or grid system from which you will only use (...)

Retina after all

Two years after launching a project, your client is asking every image of his website to be retina displayed ! As they aren’t vectorized and been created in Photoshop, it might be complicated and (...)

Using Bootstrap for FamiHero

The new website of FamiHero, a baby-sitting service, is now online. I participated the project as a Front-End developer. I usually start an integration with the Boilerplate, but for this project, (...)

A basic jQuery scroller

I was looking for a nice jQuery scroller plugin for a client website and though I should write my own. I end up with a little (really basic) jQuery code. Considering the following HTML (don’t pay (...)

Hello Normalize.css

Normalize.css is the new "alternative to the traditional reset.css". It has been developed by Jonathan Neal and Nicolas Gallagher, who also create the useful Micro Clearfix. After "100’s of (...)

The three <ol> tag attributes

’reversed’, ’type’ and ’start’ : the first one is new and the two others, deprecated in HTML4, are no longer in HTML5. Let’s see what those attributes can do (...)

The <meter> tag in HTML5

HTML5 provides a new tag called the meter tag : <meter>. Use it to measure data within a given range.

Master Multimédia Interactif (Paris)

Little photo from a speech I gave this morning at the Master Multimédia Interactif of La Sorbonne (Paris) about "Responsive Web Design".

99Lime HTML Kickstart

Présenté comme un ensemble de block html ultra léger, 99Lime est une solution extrêmement pratique qui permet de gagner en temps de production d’un site Internet.

C’est quoi les Media Queries ?

Les Media Queries permettent d’afficher un site Internet aux dimensions (ou particularités) du média sur lequel il est regardé : écran couleur, tablette, smartphone, kindle, etc. Techniquement il (...)

Créer un mot de passe

Voici deux méthodes simples pour créer un bon mot de passe. Méthode phonétique Cette méthode consiste à utiliser les sons de chaque syllabe pour fabriquer une phrase facile à retenir. Par exemple la (...)

Sorti de Typo3 4.5 LTS

Cette nouvelle version, la 4.5 est annoncée TLS : Long Term Support ; c’est-à-dire que sa stabilité et sa maintenance seront assurées pour au moins 3 ans ("2014+"). Présentation rapide Sans trop entrer (...)

Cahiers du Cinéma

La refonte du site Internet des Cahiers du Cinéma est en ligne. D’importantes modifications et mises-à-jour ont été apportées au ’core’ du site. Le résultat est donc peu visible en Front-End (...)

Web Design Index 2010

Underwires.net a été publié dans la 10e édition du Web Design Index 2010