Optimizing Your Political Campaign or Advocacy Website for Mobile Devices

Regular Epolitics.com contributor and digital Laura Packard (of PowerThru Consulting) is back with us, this time to help you survive the onslaught of cell phones and other mobile devices. Did your website survive Mobilegeddon? What should you be doing NOW to make sure that you’re not missing out as more and more of our audience switches to mobile? This post first appeared on the PowerThru blog.

In April, I had the pleasure of serving on a panel at CampaignTech East about mobile and campaign websites. Let’s dig in a little deeper for those that couldn’t make it, on what you should be looking for and thinking about when redesigning your non-profit or campaign website for mobile. We’re previously written general tips on building your campaign or non-profit website, but here are some ideas to think about specifically for mobile.

Mobilegeddon Cometh

You may have heard about “Mobilegeddon” on April 21st – when Google took into account whether your website is mobile-ready, and started ranking mobile friendly websites higher in search. The date has come and gone, and the aftermath is still being sorted out. But in general, mobile audiences are large (and growing), and you must take them into account for your political or advocacy website.

(Not sure if your site is mobile-friendly according to Google’s parameters? Plug in your URL and find out here!)

In the summer of 2014, total activity on smartphones and tablets accounted for 60 percent of Americans’ digital media time, according to comScore. Given how fast the migration to mobile has been trending, it’s safe to assume that the figures are even larger today. Particular audiences may have even higher percentages of mobile users too, so it’s important to think through what your audience is or should look like. If your fundraising emails and the donation pages on your website don’t take this into account, your organization’s budget could be losing out.

Think “Responsive Design”

Responsive design is the latest trend in website development, and it involves making a website adaptable to the width of the viewer’s web browser. Images and graphical elements size up or down according to a smaller or larger screen so that the site will be easy to use on all devices. In the past, people tended to develop separate mobile-only websites for mobile devices (i.e. m.website.com), but that means more headache to update, maintain, market and search-engine optimize. For all but the very largest organizations, a well-designed responsive site should make your life a lot easier. Or you may even consider developing “mobile first”, with the focus on your site for mobile, and building out additional features for desktop coming second on the priority list. You can learn more about responsive design principles and find some useful resources, including the Bootstrap framework, here.

Test, Test, Test

During the design process – before launch – test the front page of your website, your donation forms, email/volunteer signup forms and other critical pages on phones and tablets to make sure key fields and buttons show up and work as designed. Make sure that people can easily accomplish the tasks they’ll want to accomplish via a mobile device, without getting frustrated or giving up.

Check to make sure that all of your graphical and navigation elements size down properly and are still readable and usable on smaller screens. Make sure your photos still look good at a smaller size, too.

Don’t forget to check the site on an Android and an iPhone device before launch. There may be quirks specific to one device that you should be aware of. One easy way to do this is to use the device emulator in Chrome — it won’t tell you how your site will look in Firefox or (shudder) Internet Explorer, but it will show you how your site will look in various sizes and types of iOS and Android devices.

Some Elements Won’t Downsize

Make sure you’re not using elements like carousels or sliders in your design that may break on smaller devices. (Should I use a carousel? NO) (Ed. note: but they’re PRETTY!) They aren’t as user-friendly as you might think on desktops either, so this is a best practice that will help you on all platforms.

Build your site around a simple navigational structure that’s easy to use for fingers on smaller devices. For instance, if you use a dropdown menu structure, don’t nest menus inside too many submenus or people won’t easily be able to get to where they want to go on mobile.

In general, don’t bury important content under several layers of menus or buttons or other elements. Even people with desktop machines don’t have a lot of patience, so simplifying and making content easy to reach is good for all.

People Still Use Email. Really.

Moreover, check your email templates to make sure they work great on mobile devices. A website that’s good on mobile won’t do you much good if people are turned off before even getting there. And for as much as people are surfing the web on mobile devices, for many organizations a majority of their mass email is being opened on mobile already. Don’t forget to make your CRM templates mobile-optimized too!

Finally, make sure your fonts are large enough to be easy to read on mobile devices. As the average age of our country gets older, this is a kindness to desktop users as well. Many non-profits have tested growing their default email font size, and found big gains in performance too.

Thanks Laura, great advice all around! Of course, Laura and the folks at PowerThru Consulting would be happy to chat with you about optimizing your own site. – cpd

Photo credit: “IPhone 5s” by Zach Vega – Own work. Licensed under CC BY-SA 3.0 via Wikimedia Commons