17th March 2012
The web is inherently responsive. It’s in it’s DNA. If you create a structured HTML document with no CSS applied and open it in any browser, you will see it is naturally fluid1 and will fit any window size.
This is why mobile first makes sense to me. Block level elements stack nicely on top of each other and are fluid by default so our code should’t be heavy at this stage. From a styling perspective, at the mobile first stage you are essentially adding colour, type properties and establishing the vertical relationship between objects.
At your breakpoints you are mainly dealing with layout (widths and floats). Jeremy Keith’s approach for serving stylesheets helps here. Jeremy serves a separate stylesheet for mobile which filters through all properties to the layout stylesheet which is only applied when a viewport can handle it. The layout stylesheet shouldn’t be heavy either as it should only contain layout properties.
Realising that the web is naturally responsive encourages your thinking to keep your code light. A lot of the work is already done for you when using a mobile first approach. That was my epiphany, I hope it helps you too.
I owe my epiphany to Chris Armstrong who pointed this out to me during our first responsive design project together. ↩
Jordan is a web designer passionate about responsive web design and content choreography. He as a penchant for typography having worked previously with the Typecast team.
He writes occasionally for .net Magazine and Smashing Magazine and currently works for Eyekiller in Bangor, Northern Ireland. You can follow him on twitter @jordanmoore
Available for freelance projects in early 2014