Responsive Design: What to Know

Jesse Littlewood's picture

Director of Strategy & Campaigns

Blog

Responsive Design: What to Know

share

Mobile is the future of the web.

As more devices are built at consumer-friendly price points, more of your site visitors will come from what we currently consider "mobile devices" (perhaps soon to be just "devices?") From iPads to Android tablets, the Kindle Fire to smartphones of every size and shape, hand-held devices are accounting for a larger share of website visits each month. By 2015 a majority of internet users in the U.S. will be using mobile devices -- not desktops or laptops.

Laptops and desktop systems are still the majority of your website traffic and are still the focus point for most non-profits for good reason. But it would be a mistake to think that most people would rather use a laptop to take an online action or make a donation -- most people do those things now because our technology for these actions by and large is painful to do on a phone. But that won't be the case for long as the web progresses in becoming mobile-friendly. Non-profits risk being left behind if they don't adapt mobile phone and tablet-friendly designs. The two key approaches to serving up your website content on mobile devices are (1) to use a "mobile optimized" design or (2) use a "responsive design."

Mobile Optimized Design

Mobile optimized designs give you the most control over how your website will appear on most devices: by creating a design specifically for the screen width of the iPhone, and another for the screen size of the iPad, you can nail down exactly how your website will work on specific devices. Many websites will make significant changes to their design in order to give their mobile-optimized site an "app-like" user experience. The major disadvantages of this approach is that it takes significant additional time and energy to maintain multiple designs. The hardware is constantly changing: new devices come to market like the iPad mini, Microsoft Surface, new big-screen phones and old ones lose favor (remember netbooks?) Your organization needs to decide which devices you will want an optimized version of your website on. Third party vendors are happy to take your money to do this.

 

Responsive Design

The second approach, and likely the best one for your organization, is to use a responsive design. There is plenty of debate over exactly what this term means, so for this post, I'll define responsive web design as one that "responds" to different screen sizes within the same layout and design -- adjusting how much content is displayed based on different screens, devices and landscape vs portrait mode. In this definition a responsive design can be seen by resizing your web browser: the design and layout remains the same, but the website "responds" to the size of your browser making the page look different, but keeping the same overall design and layout. A responsive design will change as you grab the lower right-hand corner of your browser window and shrink it down.

Here are a few examples -- I'll wait here while you play around with them for a minute.

http://www.abookapart.com/
http://www.microsoft.com/
http://www.harvard.edu/
http://www.aids.gov

Pretty cool, right? With a responsive design you have one layout and design for any device that your visitors are using. It takes less time and effort to make a responsive design work for new screen sizes than it does to adapt your mobile-optimized site. In many cases you don't need to update your design at all. You only have one design to maintain so any changes to your branding or design elements (colors, typography, etc) need to happen only once. Responsive designs are typically the best practice for any website design, but there are some key points to consider as you move forward with a responsive design.

What to keep in mind

If you decide to use a responsive design in your website (and we hope you do!) there are some points that you'll want to keep in mind.

Responsive designs -- both the actual design and the implementation -- are going to be more expensive than a design that isn't responsive. But that cost should be balanced with the increased engagement from a better user experience. Your content strategy will drive the decisions and trade-offs inherent in a responsive design.

When developing your responsive design, you'll need to decide where/when and how much content is displayed as the screen size changes. Your information architecture and wireframes need to address how you will execute your content strategy across screens and devices. There are multiple ways a vendor can accomplish this (from static wireframes to dynamic responsive ones). Regardless of how it happens, you need to be confident that the most important content is prioritized across all devices.

The responsive design's user experience should be checked against the three most typical layouts: desktop/laptop, mobile and tablet. Mobile and tablet views of your website need to be "finger friendly" for swiping and clicking with fingers.

Budget for ongoing tweaks to your responsive site: new devices (like the iPad mini) might gain large enough market share to require a refresh of your design -- changing how you position and display content. A new, wacky screen size might a huge part of your traffic in two or three years and you'll want to optimize your site for it. Note that this cost is likely much less than creating new mobile-only versions of the site design.

Onward and upward

I hope this post has helped make clear the reason why a responsive design is most likely the best choice for your website, but also arms you with knowledge of what to expect when building a responsive website. Ultimately, the additional work put in up-front when building a responsive site will pay off with an optimized experience for mobile visitors. And as a bonus, having to really prioritize your content on the small screen real estate of a phone will drive you to make the hard choices in your content strategy.

Further reading:

 

Photo of Boston Globe website being all kinds of responsive (even on a Newton!) by Flickr user jiraisurfer

I see you like to read printed material. You should check out Nicco's book The End of Big: http://endofbig.com