Blueprint Goes Responsive

   breakpoint / design / development / ipad / iphone / mobile / responsive      Posted on June 21, 2012 by Erin

[This post is Part 1 of a series, Blueprint Goes Responsive. Others in the series: Part 2, Part 3]

We always aim to be responsive to what our clients need and want, but these days, that’s not enough. Now even our website will be responsive! It’s not responsive yet, but this week we kicked off our effort to make it so.

We thought it might be instructive to share our ideas and process with you as we go. So this will be our first of a series of posts on this topic. Learn with us as we learn!

But first, what does it mean to be responsive?

In a nutshell, responsive websites are built flexibly so that they will display nicely on various screen sizes. This doesn’t happen automatically, as you may have noticed when you try to visit many sites on your smartphone. Non-responsive sites appear miniscule, requiring you to zoom in quite far to read anything, and then to clumsily pan around to see anything that doesn’t fit on screen once you're zoomed in.

Here's how our site looks on an iPhone now (pre-responsive approach):

Before Going Responsive: Blueprint Interactive's website on an iPhone

Pretty hard to read and use, huh? That's precisely why we're doing this! Here are some of our thoughts at this early stage:

Idea 1: Be prepared.

There are a ton of resources out there that can start you thinking about your responsive approach. Here are just a few that I’ve found informative and inspiring:

Idea 2: Start at home.

Making a responsive website is a new thing for all of us, so we thought we’d start with our own site. That way, we’ll get all of the kinks out before we try to help our clients go responsive.

Idea 3: Go with the path of least resistance.

Some responsive projects start from scratch (you’re building a brand new site, and you’ve decided that you want to make it responsive). In our case, however, we already have a website, and we aren’t sure we want to throw the baby out with the bath water. But in thinking about how we’d adapt our current design and code, we were reminded that our website has some tricky idiosyncrasies that we need to rethink before we're responsive (ex: we use lightboxes to display project case studies). But guess what — our blog doesn’t have these things, and overall it’s a much simpler design! So we’re going to start by making our blog responsive before we move on to tackle the website.

Idea 4: Decide what you will optimize for.

Of course the idea behind a responsive site is that it will be flexible for an array of display sizes. But when it comes to planning for it, we need concrete dimensions to focus on. The industry calls these “breakpoints,” and they’re basically dimensional display thresholds at which the code tells your device to present elements differently. There are divergent opinions out there as to whether you should start large and plan for progressively smaller breakpoints or start small and plan for progressively larger ones. We decided to start with our smallest breakpoint, 320x480, hoping that determinations we make will be able to apply-up to each progressively larger size. And hopefully the priorities we are forced to set for small screens will help us further streamline what we offer on our site (and blog).

Idea 5: Plan to be iterative (rather than perfect) out of the gate.

This might be the hardest for me personally, since I struggle with perfectionist tendencies. But our plan is to get a functional prototype going before we’ve figured everything out with the design. That way, our design can be also be informed by the development process, rather than just the other way around.

Wish us luck! And keep following our progress this summer!

Subsequent posts in this series: Part 2, Part 3