Mobile websites - a guide for nonprofits

Speech bubbles

Mobile internet access is growing fast. The United Nations say there are more than 1 billion mobile-broadband subscriptions worldwide. If you have a website, it needs to be mobile ready. Read on to find out why, and what to do about it.

By Andrew, 04 September 2012

Mobile websites are better for everyone

With mobile, information can be found in a snap from almost anywhere. Need to find the best pub walking around a new area? No problem. Need to access emergency medical information from a remote location? If there’s a mobile internet connection, you’re sorted. Hopefully the two scenarios won’t be connected.

On top of that mobiles have lots of cool features, like knowing where you are, how fast you’re going, and which direction you’re facing.

Mobile users want to get to the information they want quickly. A challenge with small screens and slow load times. Web designers handle this by cutting the fluff. The best approach is to give users what they want and little else. Of course, that’s what all users want, even if they are using a desktop computer. So, considering mobile first encourages designers to create wonderfully usable websites.

There’s a good business case too. The Wireless Internet Institute make a clear case for going mobile. A worker with mobile internet access to their company’s systems will reduce costs, will do their job more efficiently and will be more accurate.

Astonishing growth

Mobile broadband is growing fast! It achieved an astonishing 40% annual subscription growth in 2011. Much of the growth is driven by the BRICS (Brazil, the Russian Federation, India, China and South Africa). In India it looks (pretty much) as though mobile will soon surpass desktop. Because it’s more expensive to get a wired connection, mobile growth is exploding.

Here’s a graph showing how mobile broadband access worldwide compares to desktop. Not long before the lines join!

Graph showing mobile broadband at 12% and wired broadband at 88% in September 2011

Source: StatCounter Global Stats - Mobile vs. Desktop Market Share

You should also check out the United Nations ICT data visualization tool on google. It doesn’t include mobile broadband data yet, but it’s slick and reminds me of this great Ted talk from Hans Rosling.

So, we’ve established that more and more people are going to be visiting your website through a mobile device. Let’s pretend for a moment that you have the budget to create a brand new website. What are the options?

Responsive design

Responsive design simply means that your website’s layout and images will adjust according to how big the screen it’s being viewed on is. A newspaper style website with multiple columns on a desktop will transform to a single column layout on a mobile. Here’s an example from Ethan Marcotte’s classic article on responsive web design.

The World Wildlife Federation have a really nice responsive design. Visit their website from a desktop and try resizing your browser to see the different layouts. Open Ethical, the platform we've designed for NGOs and non-profits, is responsive. The Media Queries website has lots more examples.

Having just one website to create and maintain is the main benefit of responsive design. The alternative is one website for desktop and one for mobile. A real pain, especially when devices with new screen sizes come out. You can’t guarantee that your site won’t break. With responsive design you’re covered.

Responsive design can be expensive compared to traditional design techniques. Your designer will need to consider how your site will look at different sizes. And that can take a while. However, it’s possible to use an off-the-shelf design. Many popular content management systems have free responsive designs. The tricky thing with free designs is finding one that works well, across all screen sizes, with your specific content. Our content management sytem Open Ethical is fully responsive and is designed for NGOs and non-profits. We’d be happy to show you around.

----------------------------------------------

Pros

  • One website to maintain.
  • Future proof.
  • Your website will look good and work well across many different devices.
  • Good user experience on mobile, tablet and desktop.

Cons

  • Load times for a responsive design can sometimes be slow. If well crafted, this can be minimised.
  • Your final site may not look exactly like the initial designs. There will be lots of back and forth between you, the designer and the developer before your site is looking good and working well across all screen sizes.
  • Initial cost will be relatively high if going for a custom design

Dedicated mobile website

Another option is to have more than one website. A dedicated mobile website, separate from your desktop optimized site. The main advantage is that the mobile site can be tailored completely to your mobile audience. The main disadvantage is cost.

I must admit, I’m biased towards a one website, responsive design approach. If you create a dedicated mobile website, what about all the different device sizes? Some mobiles are huge these days! And what about tablets? Should you create another website for them?

In their campaigns, Mitt Romney has gone for a dedicated mobile site, Barack Obama has gone for responsive design. An interesting battle! Smashing Magazine have done a thorough analysis in their article: Separate mobile website vs. responsive website.

----------------------------------------------

Pros

  • Tailored design and user experience.
  • Quick load times.

Cons

  • More than one website to maintain.
  • Expensive.
  • Dedicated mobile sites often have less features, and that’s not what people want.
  • On some sites, if a mobile site is shared on facebook that’s what friends will see, even if they’re on a desktop.

Stick with your current website

If you have a website already the first thing to do is to check it out using a few different devices - desktop, tablet and smartphone. How does it look? If it looks good and works well it may be that your website was built using one of the techniques above. You can either sit back and relax, or aim to further optimize your site.

Much of the time you’ll see exactly the same website layout as you would on a desktop. You’ll need to pinch to zoom in order to read text, and then zoom out to find your way around.

So what’s the problem? Your site looks ok, and people can use it.

----------------------------------------------

Pros

  • Cheap.
  • Your information can be accessed.

Cons

  • Slow load times.
  • Pinch to zoom is annoying.
  • Tricky navigation.
  • Some aspects of your site may not work at all. For example pop-up image galleries.

If your site doesn’t look good, even with pinch to zoom, speak to your web team. They should be able to get your site to work without too much effort. Then, when budget allows you can move to a responsive design or mobile specific solution.

Mobile is here to stay

Mobile is more than a trend. It’s here to stay. Currently, 1 in 10 visits to websites worldwide are from a mobile device. If you already have a website, take a look at your statistics to see what percentage of your traffic is from mobile. It may well be worth adjusting your site, or moving over to a responsive design. If you’re looking to create a new website, it’s vital that you consider mobile. Even better, think mobile first.

Want to show off your responsive design, or know a great place to get a free design template? Perhaps you think separate mobile sites are the future? Let us know in the comments.


Categories: