Jordan Moore@jordanmoore RSS Membership

The web was always responsive

17th March 2012 Jordan Moore

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 fluid¹ 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.