Responsive design is a bit like a toddler

Why? Because it’s a pain in the butt but ultimately well worth it. And it’s a real pain if you go about it like I did.

Screen shot of this website on three different devices

Requisite showoff-y composite of this site on three different Apple devices

I started out very inspired by the approach Andy Clarke took with his well known 320 and up framework: Design primarily for mobile and add CSS via media queries as you need it for larger screen sizes. Brilliant. Makes so much sense. Unfortunately, I found designing only for mobile takes a lot of discipline: I found myself constantly widening the browser window “just to see” what the design was looking like beyond mobile. Next thing I knew I was having flashes of debatable layout inspiration and quickly adding styles to the main “mobile only” section of my style sheet because I couldn’t be bothered to scroll down to the appropriate media query.

Long story short, I gave up and designed the site for the desktop. Then when I was done, I had to go back through each selector and figure out what declarations were needed for each screen size. This editing took at least a couple of evenings of my life I will never get back — and by flitting around between screen sizes while designing in the browser (constantly second guessing myself as I flitted), I’m pretty sure I added a substantial amount of development time to the project. Fortunately, I was the only client, and next time I’m going to exercise a lot more self control when I’m designing in the browser.

Fitter, happier, more responsive

The site has three layout states: Under 555px, it’s a single column. At 555px, it expands to a flexible multi-column grid, until the screen size reaches 992px, at which point it snaps to a fixed-width grid with a maximum width of 960px. Why the specific widths? The single column layout is obviously for smartphones, while the flexible grid between 556px and 992px was my attempt to accommodate various tablet sizes in both horizontal and vertical states. Despite the fact it’s been a standard of sorts a while now, I feel like 960px is still my happy place for desktop site width. Super-wide sites are fun to look at, but I find them a bit overwhelming and not super usable.

Or maybe I’m the toddler

So I ended up with a 320 and up-inspired site, but I got there the hard way. And maybe if I hadn’t gone about the CSS like a 2 year-old with the attention span of a gnat, it wouldn’t have been such a pain. That responsive design is worth the extra effort isn’t even a question for me anymore. I was sold the second I pulled up this site’s homepage on a germ-infested iPad at the Maine Mall Apple Store. It’s up to me to adapt the way I work to make it happen efficiently — just like I did when I weaned myself off table-based layouts five or so years ago.

Happy browser window resizing!

CSS, Nerdy Web Stuff

Comment on this entry

* = required field

HTML nerds can use: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Browse by entry

Browse by topic

Browse by date