Andrew Ingram

Thoughts on Responsive Design

Posted on .

Responsive design has become an established best-practice with remarkable speed, but is it sufficient to be your entire mobile strategy?

Having just made the layout of this site more responsive, it seems like the right time to air some thoughts I've been having about responsive design, particularly in light of some of the heated discussion of the last couple of months

I'm still on the fence as to whether a responsive design is sufficient as a mobile strategy, this is because I have minor doubts about whether the information architecture and UX that's suitable for desktop can always be said to be equally suitable for mobile. A purely responsive strategy assumes that the information mobile users will want is the same as for desktop users, and that the layout should merely adapt to a small number of factors such as screen size, pixel density and perhaps network speed. It assumes that information should be distributed around the site in an identical fashion, namely identical URLs and content. In the majority of cases this is true, so I won't hesitate to say that going forward every website should be responsive. Whether you need to do something more is down to what your own research tells you.

Responsive layouts do have some important implications. The first is that each piece of content needs to be authored with responsiveness in mind. If you still have authors creating blobs of arbitrary unstructured content, or hand-crafting HTML to create a certain appearance, you're very likely to have some difficulties. But I would contend that with modern web development frameworks making creation of domain-specific models a cheap and trivial task, using a CMS to create arbitrary 'pages' or 'blocks' is something we should push to get rid of.

I've also noticed a tendency to pre-emptively pick breakpoints (widths at which a change in layout is triggered) based on specific screen resolutions, ie 320, 480, 600, 768, etc. These are chosen because they match some common devices (mainly iOS). This is back-to-front, much like when some designers pick a grid system before starting a design. A design should be developed, and breakpoints should be introduced at widths where it feels like the layout no longer comfortably accommodates its content, it's what I've tried to do with this site and I'm please with the outcome.

I'll wrap up with a couple of other idle thoughts. Firstly, I imagine that publishers are facing similar challenges with eBooks now that readers can change a lot of the presentational settings (font-size, leading, typefaces), where there used to be full control over what appears in each page there is now much less certainty. The solutions to this will be both creative and technological. And secondly, I should mention that my approach for this site was desktop-down, I started at the widest size and worked downwards. Next time I'll try mobile-up in an effort to ensure mobiles get given due consideration from the start, by the sounds of things this is going to be the preferred methodology going forwards.