Three Steps to Creating a Responsive Design For Your Nonprofit Website

Imagine for a moment that a supporter of yours is having dinner with one of their friends (let’s call her Amanda).

The cause you support comes up in conversation, and because Amanda is passionate about the work your nonprofit does, she pulls out her iPhone to show her friend.

But there’s a problem.

Your website looks like doggie doodoo. Not a good first impression.

Now obviously Amanda will be able to overcome this hurdle because of the trust she’s earned with her friend. But why put hurdles in front of your core supporters to begin with?

What is Responsive Web Design?

A responsive website means that the content (pages, text, videos, photos) automatically resizes in response to the particular device a viewer is using.

For example, you can easily view this website on an iPad, iPhone or Browser (as shown below).

Why is Responsive Web Design Important?

Unless you’ve been living under a rock with no Internet access, you’re probably well aware of the prevalence of mobile devices like iPads, iPhones, and Androids. In fact, more than half of the 1 billion people using Facebook access it from their mobile device.

In addition to the increased use of mobile devices, there’s also the change in behavior. More and more people are engaging with websites across multiple access points.

Finally, having a responsive website means that users won’t need to pinch, tap, or squint in order to view your website. Again, hurdles…

Three Steps to Developing a Responsive Website

After you’ve determined that your website needs to be more responsive, you should follow these three steps:

1. Have Clear Objectives for Mobile

Be clear about the purpose of your website on mobile devices, beyond the readability factor.

Ask yourself if a mobile user would have different needs than someone accessing your site through a browser.

For example, a person visiting a museum might want to easily browse showtimes and buy tickets on their iPhone. Having those pages prominently displayed on your mobile site would increase the likelihood that those transactions would occur.

Think about proximity, location and ease-of-use for mobile. Be clear about what you’d like mobile users to do when they access your website. And are these goals different for people using a browser?

2. Choose an Approach

There are generally three different approaches to achieving a responsive website:

1. Create a Mobile Site – Creating a mobile site means creating a completely separate website for mobile devices. The great thing about creating a separate mobile site is the user experience. Because the site is designed for specific dimensions, the content will be easy to view and interact with. The downside is the expense and work. However, if you use WordPress, you can use a plug-in called WP Touch which automatically renders a mobile site, and allows you to select which pages to display on mobile devices and which pages to hide.

2. Create a Mobile App – A mobile app that contains your website content can create even a better user experience then a mobile site. Users can access your content off-line, integrate location features, receive push notifications for any updates, and integrate much more tightly with Facebook and Twitter on the iPhone. The downside of a mobile app is the cost and maintenance, although there are ways you can DIY.

3. Create a Flexible Width Website – This is the easiest and cheapest approach to creating a responsive website. This website uses the flexible with approach, meaning that it automatically resizes in response to the device.

If you use WordPress, most commercial themes like Headway and Woo Themes are responsive out-of-the-box. If you don’t use WordPress here’s a great article on coding a fluid width into your website.

3. Test After Launch

You certainly want to test your mobile site before launch, but you also want to test after. The reason why is that you have very little information (beyond your hypothesis) for how people will actually use your mobile website. Testing your mobile sites after they go live will help you improve it much faster.

What To Do Next

The very first thing you should do is open up Google analytics and look at the “Devices” report (under “Mobile”). This will show you the most popular mobile devices people use to access your website (as shown below):

After you have this information, take a look at how your website looks on these devices. Then, with this information you should sit down with your colleagues and discuss the possibility of making your site more mobile friendly.

How Responsive Is Your Website?