Jordan Moore UX & Interaction Designer

The web was always responsive

March 17, 2012 in responsive web design

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.


  1. I owe my epiphany to Chris Armstrong who pointed this out to me during our first responsive design project together. 

Biography

I make cool things for the web for Eyekiller most days, the rest of the time is spent with my family and cycling Ireland's hills and coasts.

My interests lie in the areas of responsive web design and helping create good typography for the web.

Ambassadors