New Responsive Realign for

Filed under:

Photo by Jason Leung on Unsplash.

Every couple of years or so I realign this site. As the site was already Responsive and Mobile First after the previous design in 2011, this time around I wanted to change mostly the typography for cleaner and simpler look and feel, and make performance enhancements. A lot of things have changed below the surface as well.

The Grid

Like the previous design (v5), elements are (mostly) aligned to a fluid 8-column symmetrical grid structure. All font sizes are still defined in ems, according to the traditional typographic scale.

Sass and Dev Tools

I wrote and restructured most of the styles again, this time using the Sass pre-processor. I used the same Sass setup than in my One Web Boilerplate. During development I also used various Grunt tasks from my Backbone-RequireJS Multipage Boilerplate (even if this version of the site doesn't use much JavaScript). Grunt has become an essential part of my workflow.


The new typeface, Open Sans is embedded as a base64 string. I'm using both Open Sans Light and Open Sans Bold variants.

Structural changes

I've removed Social icons, Platform, Credits, and Elsewhere modules that were lazy-loaded for bigger viewports in the previous version. I might bring some of them back at a later stage though. Main navigation is now at the end of the page, linked from the top. I'm still tweaking things a bit here and there. I'll probably add some lazy-loaded custom icon fonts too.

This is the sixth major version of this site. The previous version was online from September 2011 until May 2013.