Search form

The case for making your nonprofit website mobile-friendly (and some tips on how to do it)

Submitted by laryn on Fri, 19 Nov 2010 (15:38)

Mobile web (before)

Mobile web (after)

The first question is why you would want to bother making your site mobile friendly. The answer is that most likely your "full blown" site will not be user-friendly for mobile browsers -- they can scale the page down so it fits on the mobile screen, but readability and usability are completely lost. See the screenshot of our website on an Android browser before we made some modifications. At full size you couldn't even see any of the content, and after a "pinch and zoom" to see the whole page, the text is illegible and any links on the page are so small that my fat fingers couldn't select them on a mobile touchscreen.

The important part about this is that sales of smart phones are going through the roof. David Cole explains that this trend combined with the fact that many organizations and companies have no mobile optimization on their websites means that they "are going to frustrate their clients & customers who are trying to visit their website on a mobile device."

How to make your non-profit site mobile-friendly

In the very early days of mobile browsing, having a mobile-friendly site meant having a separate website specifically for mobile browsers. Sometimes this even meant completely separate content, links that didn't transfer between the two, and in general a very non-fluid interaction between the real site and the scaled down mobile site. This is no longer a good solution -- it's unfriendly, expensive, and unsustainable. These days, given the interwoven nature of the media, search results, Twitter, and Facebook, you'll want to configure your site to automatically detect the device being used and serve the appropriate theme. Making it seamless like this will give the best experience to everyone, keeping all your links functional and accurate and serving the page in the most appropriate format.

Here are some basic tips to remember for the mobile-friendly version of your site:

If you can, resample or optimize your images for smaller browsers. This reduces bandwidth usage and load time and makes for a more pleasant visit.

Avoid Flash, Silverlight and other non-supported formats

Remember there's no hover state. Make your content accessible without relying on :hover.

Declutter your sidebars. Do your mobile visitors need to see everything that's in the sidebar?

Keep it simple. Give them the information they're after and keep it clean and simple.

Use automatic device detection to serve the mobile-friendly pages.

simple Case study: CEDC.org

As you saw in the screenshots above, our full-blown site was not usable in miniature. We followed the tips listed above and made some modifications to reorganize the way that certain pages displayed. For example, some of our pages (including this one) use a lightbox/popup effect which we disabled for the mobile version. Instead we list the images one after the other in a mobile-optimized size, followed by the content. We also removed the tag clouds from the mobile version since that's not very helpful on a handheld device. We also made a scaled down and modified version of our theme to keep our branding consistent while also being mobile-friendly. Click the images above to enlarge the sample screenshots of some of our other pages on the mobile side.

The obvious benefit to us is that the site is much more invitational to anyone browsing in with a mobile device, and at this point it will not take an extremely high amount of maintenance to keep it running that way. When we add new content to the site (the same way we always have) it will automatically be adjusted and served in a mobile-optimized fashion as well.

Drop us a line if you are interested in discussing what it would take to make your nonprofit web site mobile-friendly. We'd be happy to talk.