Nonprofit Websites & Responsive Design

Posted · Add Comment
Responsive Nonprofit Website

In the last few months I have been asked if nonprofits should worry about having their website ready for mobile viewing. After all, having a functional website across the many web browsers is a job in itself. (You know, it looks great in Safari, ok in Firefox and just plain awful in Internet Explorer.) The answer always comes down to this: yes, mobile is the future that is happening right now. I know many experts will say you need to look at your website statistics to figure out what percentage of visitors are viewing your website using a mobile device. However, we don’t need Einstein to tell us that users are increasingly relying on smartphones and tablet computers to access the Web (and yes, this includes your organization’s website).

So, what is responsive design? Essentially, any website design that takes multi-platforms into account and morphs to match the size and shape of the screen the user is viewing it on. In other words, the design adapts its appearance to the viewport size, representing different devices accordingly.

To really understand responsive design, let’s look at some examples.  If you  visit the Human Rights Watch website on your desktop, laptop (#1), smartphone (#2) or iPad (#3, 4), you will notice that it morphs to match the size of the different viewing devices.

Human Rights Campaign | Responsive Design | Nonprofits

The design is fluid, meaning that text and graphics automatically re-size depending on the screen size. Another feature of responsive design is that if you are viewing a website in a smartphone or a tablet and you make it taller than it is wide, the graphic rotates from landscape to portrait view (iPad view #3 and #4).

The Human Rights Watch example shows us the same site across different platforms. The look and feel remains the same, but the size changes. This is what we call “mobile friendly.”

Now, let’s take a look at another example. The Red Cross has gone a step further to make their website “mobile ready.”  When you view the website on a smartphone or tablet computer, the look (design) changes altogether.

Red Cross | Responsive Design | Nonprofits

#1 shows a laptop screenshot. When we view the same webpage on a smartphone, the site morphs into a thumb-friendly version. The design takes a blog sort of shape. Although it retains the look and feel of the organization’s original website, the mobile version only shows  a few elements (logo, donate now button and latest new) to make it easier to navigate. Yet, the user is also given the choice to see the “full version” of the site, which in that case, the site will be re-sized to a mobile-ready version, which will fit on a smartphone screen.

To recap, responsive design means that websites respond to how users  use the site rather than making users adjust the website manually by scrolling, magnifying, rotating their device, etc., in order to view it comfortably. Responsive design is a major component of what we call the user experience. The easier you make it for your users to visit and navigate your site, the greater the chances you have to convert them into supporters.

Responsive design is the modern web. If your site design doesn’t work that way, if your site can’t tell the difference between a smartphone, an iPad and a desktop computer, this is the time to start thinking about making the transition. After all, statistics tell us that most mobile phones in America will be smartphones by the end of 2012 and more and more users are accessing the Web on their phone!

Leave a Reply

Your email address will not be published. Required fields are marked *