Monday to Thursday, 10am-4pm, EST
1.855.281.5499 (toll free)

How to Make your Nonprofit Website Mobile-Friendly

By: Tierney Smith

Mobile website on an iPhoneIf you’ve ever tried to browse the Internet on a smartphone, you’ll know how difficult it can be to navigate a website, read tiny text, and click on miniscule links. As more people get smartphones and tablets, it’s more likely that the frustrated people scrolling, pinching, and zooming their way through your website will be your donors, potential volunteers, or new members – people who need to access your information easily so that you can build relationships with them. The urgency for mobile becomes even more relevant when you are trying to reach young people.

So how do you provide your mobile visitors with a better experience so they’ll be more likely to stick around and engage with you? In short, you need your website to look good on small- and medium-sized screens. This article will discuss when you should consider optimizing your website for mobile and three main approaches.

Why mobile?

Research, sales trends, and advertising all speak to the growing trend in mobile (in this context, smartphone and tablet) use. As of 2011, 37% of Canadians had access to mobile internet (which breaks down to 47% of Canadians under 55) and the trend shows steady upward growth. Mobile is here to stay – technology will only continue to develop and advance in this area – so it makes sense to start thinking proactively about how it relates to your charity and website.

Trend in household internet access from 2001 to 2011

Before proceeding with any mobile project, it’s important to not only understand the broader trends, but also your specific community’s needs. Do the members of your community (donors, volunteers, members, etc.) own mobile devices? A simple way to find out the interest in a mobile website is to check your web analytics (e.g., Google Analytics) and determine how many people visit your home page via mobile.

So what would prompt someone to visit your website on their mobile device? Possible scenarios include

  • being prompted to look up website after seeing an ad or poster;
  • clicking through via social media on mobile;
  • clicking through via email on mobile;
  • using a QR code;
  • needing to find contact info on the go;
  • choosing to browse your site on mobile.


The more you are running campaigns and sharing content on email, social media, or in situations where people would be more likely to use a mobile device, the more important it is to consider the mobile-friendliness of your website.

Consider the big picture

Before embarking on a project to make your website mobile-friendly, you always want to ask:
What are my community’s goals and how would this help them?

  • What are my organization’s goals for our website?
  • How does our website support our broader strategy and mission?
  • Taking the time to reflect on these questions will help you decide whether this is a good use of your time and resources.

 

Mobile strategy

It’s worth noting at this point that a mobile-friendly website is just one facet of a mobile strategy. Other opportunities to consider include mobile-friendly emails, text-to-donate, text campaigns, and mobile apps.

Approaches to Mobile-Friendly Websites

The various approaches to mobile-friendly websites can be grouped into three main categories:

1. Mobile-Optimized Content

If you want to dip your toes into the world of mobile, optimizing a specific piece of content for mobile (rather than your whole site) can be one way to get started. The content you choose should be something that is highly likely to be accessed via mobile (e.g., the landing page from a QR code, a link in a mobile-optimized email, a link in a text campaign). The content itself could be a landing page with information, a donation form, a petition, or an advocacy action.

Example: care2.com and m.feedingamerica.org

Care2’s site is not optimized for mobile devices (it looks just like it would on a desktop computer, but smaller) but their petition forms are mobile-optimized so it’s easy for mobile users to take action. It’s a complex site with a lot of content, so mobile optimization would be a big project. Their approach is a great compromise that prioritizes what’s most important - the petition forms.

Feeding America’s whole site is optimized, (m. feedingamerica.org) but it’s a good example of a short, mobile-friendly donation form. You can even use Convio’s sample mobile donation form code as a starting point.

2. Mobile Websites

If you want your whole website to be mobile-friendly, you have two main options: build a mobile website or use responsive design. A mobile website is a separate website that looks good on a mobile device. When you visit the website on a mobile device, it will usually redirect you to the mobile version, though you will have the option to “Go to Full Site” if you prefer.

Examples: m.cyberbullying.co.uk, burkemuseum.org, m.cancer.org

Each of these is a mobile website, but with varying degrees of content. On one end of the spectrum, m.cyberbullying.co.uk is simply a blog - you would need to visit their full site to access any of their other content. Burkemuseum.org is somewhere in the middle, offering reduced content that is most focused on a mobile user’s needs (e.g., hours, cost, location). On the other end of the spectrum, m.cancer.org offers virtually all of the same content as their full site, however it is presented in a mobile-friendly way.

3. Responsive Design

Responsive design is the latest trend in mobile-friendly websites as it allows your website to adapt to look good on any size of screen. If you visit a responsive website on a mobile device, the content will rearrange itself to be mobile friendly - text may get larger, items may be rearranged to form one long column, images may resize, the menu may condense, etc.

A significant advantage of responsive design is that you only have one website, whereas the mobile website approach involves creating an additional website. This can save time and money during development and also make ongoing maintenance much simpler.

Examples: giveconfidently.ca, staugustineschurch.ca

Both of these websites are responsive. Try visiting them on your computer and on a mobile device, or simply open it on your computer and resize the window to see how the sites change. The responsiveness of giveconfidently.ca was done by a website developer familiar with CSS, while staugustineschurch.ca was done using a responsive WordPress theme.

Mobile-friendly Tips

Even if you aren’t ready to take the plunge into mobile, you can still design your website in a way that will be easier to optimize for mobile in the future. For example, designing your website with a relatively straightforward, block-based layout will make it easier to make the site responsive in the future by rearranging the blocks. As well, stay away from things that will make your website completely unusable on a mobile device such as:

  • Pop-up boxes
  • Hover (e.g., where you must hover your mouse to access a menu)
  • Flash - it simply doesn’t work on some mobile devices

Mobile-Optimized Content Mobile Website Responsive Design
What to do when you want to... Experiment with mobile content for a specific campaign or event Create a mobile site using a mobile website service. You won’t need to change your full website; the mobile site simply provides simplified/reduced content. Re-design your current website to adapt to any screen or device. This way, you’ll only need to maintain one website.
Cost/effort involved A small amount of a developer’s time Mobile website services (e.g., Mofuse) start around $9/month for a basic site.
Pre-built mobile themes cost between $0-100.
For more customization, hire a developer.
Pre-built responsive themes cost between $0-100.
Or, hire a developer (in most cases, the work involved is much simpler than building a mobile site from scratch).

Summary

If you’re already redesigning your website, now is the time to think about how you can make it mobile-friendly - or design it in a way that it will be easy to make it responsive when time or budget allows. If not, look at your audience, website analytics and goals, and consider whether a mobile-friendly website would be a good investment for your organization.

Related Resources


Webinar recording and slides:

Links:

Copyright © 2013 TechSoup Canada. This work is published under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 License.