May 4th, 2012 by David Poteet

Rebekah Godshall to Present at Eduweb 2012 on Managing Responsive Design

About this post:

Rebekah Godshall will share tips and strategies at Eduweb 2012 for managing a mobile-friendly responsive design process

One of the hottest topics in web development today is the idea of "responsive design" – building a site to respond appropriately to any screen size from desktop to tablet to smart phone. It's revolutionizing our approach to development – almost every site we're building today is responsive.

Lots of people are talking about how to implement responsive design from a technical standpoint, but how do you plan and manage a project with this approach?

Rebekah Godshall, NewCity's Director of Project Management, will be presenting at Eduweb 2012 on managing a responsive design process.Read some of Rebekah's tips for tackling a responsive redesign.

1. Start with what's familiar.
Rather than wireframing and designing every template at every breakpoint, have your UX and Design teams plan and design at the screen size with which they are the most comfortable to begin with. That is where they'll do their best work. For us, that is still the desktop site (960 pixels or up); for others it might be mobile.

2. Put your website on a diet.
No matter where you start, keep in mind the mobile first approach to content development. Don't cram more onto the desktop design (if that is where you begin) than you will want to display on the mobile phone design.

The tendency to want to add more features, more buttons, more bells and whistles is natural. But, if you can subtract features and keep a narrow focus, your message will come across more clearly.

3. Define how the layouts will change
When the wrapper is complete, define the location and state of every page zone at every breakpoint for every template. (This can be done in batches to keep it from becoming overwhelming.)

What happens to the right-hand column on smaller screens? Where does the secondary navigation reside at each break point? Does it's behavior change? Should it be expanded? Collapsed?

4. Be open to change.
Change is going to happen. You're building a site that aims to be future proof and to work on most internet-capable devices out there. New ideas, problems, and solutions are bound to pop up.

5. Get to the real thing quickly.
Move from planning and design into template production as soon as you can. Use a cross-functional team including a user experience architect, designer, and developer to "design in the browser".

Start with the wrapper (the page's header, footer, and background) first. These zones include some of the most critical site components, including the primary navigation. Get those elements right first.

6. Finally, address individual content items.
How does the display of this carousel change at each breakpoint? How will this image slideshow work on a mobile phone? A tablet? Can we change the display of this bulleted list of links--easily clickable with a mouse--to make them easy to tap with a finger or thumb?

7. Test and iterate. Test and iterate. Over and over.
Launch when the site is good enough, but continue to test and iterate on a smaller scale if you can.

That includes testing for template, browser and device compatibility as well as user testing on various devices.

One more note
Implementing a responsive design on an existing site (without a redesign) can be especially challenging. You're often stuck with your existing site architecture, and because the site wasn't developed with a mobile-first approach, the pages are often far too content heavy. But, it can still be done.

Try to follow the same steps as above beginning with step 2 – putting your site on a diet. Review your existing site and simplify it (by subtracting features and unnecessary content) wherever you can. Then dive into designing in the browser.

If you've been through a responsive redesign process and have some tips to share, Rebekah would love to get your insights to include in her presentation at Eduweb.

Email her at rebekah@insidenewcity.com.