Lessons for devs from a responsive build

Warning This article was written over six months ago, and may contain outdated information.

I’ve recent­ly fin­ished a build of a ful­ly-respon­sive site for a client, made with a group of friends (the site’s not online yet, it’s being inte­grat­ed with their sys­tems by their inter­nal web team). I’ve built mobile-opti­mised, flu­id and semi-respon­sive sites before, but this was the most com­plete respon­sive build I’ve worked on to date, so I thought it would be worth dis­cussing some of what we learned and had confirmed.

‘Mobile first’ means just that

Mobile-first is not a method­ol­o­gy, it’s a man­date. If you decide to build mobile-first you must com­mit to it com­plete­ly — you must not only plan and archi­tect mobile-first, but also build and test mobile-first. Make changes to your base stylesheet and let them prop­a­gate through the others.

Think of it as like drop­ping a stone into a pond; changes you make in the base stylesheet are the splash, and those changes will rip­ple out into all of your oth­er stylesheets.

Don’t build and test in desk­top first just because it’s more con­ve­nient. It’s a false econ­o­my. You’ll have much less work to do if you use media queries to alter sol­id base val­ues, so devel­op in a mobile brows­er (or at least a desk­top brows­er resized to mobile dimensions).

Let content dictate code

As well as (or instead of) device break­points, you’ll also want to let con­tent dic­tate break­points. It’s not suf­fi­cient to just have the page lay­out change between device break­points, you must also con­sid­er that with­in the defined device ranges there’s huge vari­abil­i­ty. There will be occa­sions when con­tent break­points will need to be cre­at­ed to span device breakpoints.

Thier­ry Koblentz’s Device-Agnos­tic Approach To Respon­sive Web Design and Stephen Greig’s Decid­ing what Respon­sive Break­points to use advo­cate using con­tent break­points only, although I found a hybrid approach worked best for me.

Make time for testing

Make sure you get more test­ing time in the sched­ule and bud­get. I don’t think I’m exag­ger­at­ing when I say that test­ing could be 50% of the front-end build time. 40% at least. Test­ing is part of the build now, it’s ongo­ing. Of course you can (should) have a QA phase (or phas­es), but it’s no longer suf­fi­cient to wait until the end of the project before seri­ous test­ing occurs. Test ear­ly, test often.

4 comments on
“Lessons for devs from a responsive build”

  1. […] Lessons for devs from a respon­sive build (Bro­ken Links) […]

  2. Hi, thanks for share it first of all…,
    I am won­der­ing, if you start from the mobile site, you’ll prov­ably need less html than on tablets or desk­top devices. (at least this is my sensation).
    If it is my case, is it still worth in your opin­ion keep the process start­ing from the small­ers resolutions?…
    If I need add html stuff after­wwards i’ll need keep adding css rules on my media queries all the time…
    could you clarify?
    thanks!

  3. Hi Jor­di,

    I’m not sure if that’s def­i­nite­ly true that you need less HTML for a mobile site; the build we did was exact­ly the same across all plat­forms, there was no more or less on mobile or desk­top; the only extras we added was an ani­mat­ed carousel, which was added using JS on desk­top sites.

    I think what you’re propos­ing is that the mobile site has less con­tent than the desk­top site; that should­n’t always be the case, but if you want to do a very tar­get­ed mobile site then you might be bet­ter off not using media queries. But then you have to think about UA sniff­ing, which is full of its own problems.

    Does that help?

  4. Hi,
    thank you very much, and yes, it does help, I am going for a flu­id web rather than tar­get it to a con­cret devices, it is for sure (tha’t my boss desire :) ), so I think that my “wrong assump­tion” was that I was gonna need more con­tent on the “desck­top” ver­sion, but if I think it again, it does­n’t need to be like that, and if I real­ly have any issues with the con­tent on the small­er res­o­lu­tions I always have CSS.
    So, let’s cre­ate that new site form the small to the big and see what happens :)
    cheers, your help is very much appreciated.