What the Heck is Responsive Design?

Mobile web browsing is forecast to take over desktop browsing in the next 18 months.

According to Google, their click-to-call ad format for mobile search is so popular it generates 30 million calls every month already.

Gartner reports that “Anytime-Anywhere” computing is driving the pc, tablet, and mobile phone market, with an expectation that tablet sales will equal pc sales by next year.

We’ve been advising clients to maximize their donation pages and important content pages for mobile devices, which required special coding and content. We’re not advising a blind jump into responsive design for everyone, but it’s worth taking a good hard look at responsive design if you are looking to upgrade or update your current website.

Responsive design evolved to allow you to develop one site for all sizes of screens: desktop, laptop, tablet, and mobile. How it works is elegant. You design and code a single website:

  • That conducts a media inquiry that helps the device browser decide how to render the website based on the size of screen of the device
  • With “fluid grids” that allows your content to resize or rearrange based on the width of the device

Responsive Web Design

Here’s an example of a responsive website design from worldwildlife.org. Other great examples include pittsburghkids.org and edf.org.

worldwildlife.org “Desktop”

worldwildlife.org “Tablet”

World Wildlife Tablet

worldwildlife.org “Mobile”

World Wildlife Mobile

Factors to Consider in Your Decision

We’re still learning responsive design best practices, but here are a few factors we’ve learned from “early adopters” you might want to consider if you are thinking about a responsive web design:

  • Because you’re using one design for large, medium, and small screens, you will have to make design compromises to ensure that all navigation is optimized for all size of screens.
  • It’s theoretically easier to maintain a single HTML/CSS code base. That said, a responsive code base is quite a bit more complicated and pretty much rules out website modifications by anyone not fluent in coding. On the other hand, maintaining two separate code bases, one for desktop and one for mobile, is also complicated and expensive. Every change needs to be made in two separate code bases.
  • You can save money by staying on your current “desktop” site and just maximize your key content pages and forms. And, the bonus is that load times will be quicker with mobile-specific assets and content.
  • With responsive design, there’s no more need to set up server-side redirects to get mobile and desktop users to the right site. Those redirects could be tricky and complex.
  • With responsive design you would no longer have to manage cross-linking and redirecting of users between your desktop site and your mobile site. Cross-linking slows load speeds, which drives users crazy.
  • A separate user experience on each device can confuse donors, supporters, and your brand. Responsive design minimizes that confusion with a fluid design and experience.
  • Banner images and banner-serving software haven’t quite caught up with responsive design techniques. If you rely on banners, which many advocacy organizations do, you might be better off staying away from responsive design.
  • If you’re only giving your website a “facelift,” responsive design isn’t for you because it requires a whole new code base. You can’t build on top of your old code base, so a responsive design can cost more up front, but theoretically saves you in maintenance.