How to Make your Nonprofit Website Mobile-Friendly
By: Tierney Smith
If 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.
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.
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.
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.
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.
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).
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.
Webinar recording and slides:
- 33 Nonprofit Mobile Websites (and here's 3 more!)
- Websites used as examples in this presentation: giveconfidently.ca, cccc.org, nature.org, cancer.org, 350.org, staugustineschurch.ca, fundraise.com
- 10 Reasons Why Your Nonprofit Needs a Mobile Site (infographic)
- How to learn about your mobile visitors with Google Analytics
- Sample code for a mobile-friendly donation form
- Case study of a mobile-friendly sign up form
- Examples of mobile website services that help you make a mobile website: Mofuse, GoMobi, WinkSite, Duda Mobile, Bmobilized, Mobify, Moovweb
- Examples of mobile themes and plugins for WordPress: WPTouch, WPTap, WordPress Mobile Pack
- Mobile plugins for Drupal, Joomla and Plone
- Responsive design - an example of a responsive theme, a roundup of templates and frameworks to make responsive design easier and info on options about how to use responsive design with WordPress
- Tips on designing for mobile: A User-Centered Approach To Web Design For Mobile Devices, iOS User Experience Guidelines and Mobile form design strategies
- Resources on HTML5 and mobile, and how HTML5 works with form input on mobile
Copyright © 2013 TechSoup Canada. This work is published under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 License.