New Responsive Design

Filed under:

I've created a new fluid, responsive, mobile first/one web skin for (I'm hesitating to call it a design). Anyway, here it is.

My goal was to target smartphones, tablets, netbooks and desktops with the same codebase by responsively enhancing the site with CSS3 Media Queries and some JavaScript. All users get reset, typography and colour declarations. Width and float declarations are added only if larger viewport is detected, using four resolution breakpoints.

All elements are aligned to a fluid 8-column symmetrical grid structure. All font sizes are defined in ems, according to the traditional typographic scale (8-9-10-11-12-14-16-18-21-24-36 etc.). I've also made an effort to maintain a consistent baseline even if element font size decreases or increases.

Finally, some extra nice-to-have (but not core) content is lazy loaded with JavaScript. This means that you'll see Platform info, Credits and Elsewhere content only if you have JavaScript enabled and your viewport is larger than 48em/768px.

What about Internet Explorer? I thought you'd ask that. Internet Explorer lower than 9 get Andy Clarke's excellent Universal IE6 stylesheet. You see, on this site I can't be bothered to patch dead browsers (at work I do though). Also, if you have JavaScript enabled in IE lower than 9, you'll be prompted to install Chrome Frame. Done.

For icons, I'm using Vector social media icons. I'm using ARIA landmark roles for styling, referenced with CSS attribute selectors. Another solution I'm using here is Sticky footer. It works nicely.

I was also planning for switching the display of content and navigation based on browser size but that'll have to wait until the next design iteration of this site.

Here are some of the articles and frameworks published during the last year or so that inspired this redesign:

There are still some tweaks to be done but I figured the theme was ready to be put online. This is the fifth version of this site. The previous version was online from November 2009 until September 2011.