How-to: Quickly Optimize Your Website for Mobile Devices

Submitted on Wed, 4/11/2012 - 11:08am
It doesn't need to take a lot of time and money to make your website more friendly for mobile users. Here's how to get the most bang for your buck when investing in the mobile web.

Pop quiz hot shot: What percentage of website traffic do you get from mobile devices, tablets, and smart phones?A smart answer involves looking in Google Analytics or another tool and looking at the overall percentages (ours is 7.4%). An even smarter answer is: "It depends!"  You probably only have a handful of pages that people visit on their phones: Your homepage, your Twitter and Facebook pages, and perhaps a couple event specific pages or signup pages.

So, how do you get the most bang for your buck when investing in the mobile web?

iPhone vs. Tricorder (19/365)

Terminology

There's currently a line between the mobile web (meaning web browser), and native apps, meaning iPhone, iPad, Android, Blackberry apps. That line is getting blurry, but for now, for most organizations, simple mobile friendly web pages are the best option. Native apps can be more expensive to produce, take longer to deploy, and are difficult to change once they are deployed to app stores and devices.

Mobile detection refers to the practice of checking to see what device a person is using, and delivering different styling or content based on that. It's not perfect, because new devices are coming out all the time, and some devices can't be distinguished in this way.

HTML5, in this case, refers to using certain HTML tags and best practices so that mobile browsers already know how to render your page in a reasonable way. Using best practices on the web, and making sure your webpages are clean and standards compliant is very beneficial in many ways, including Section 508 compliance, browser rendering, mobile friendliness, and load times. Do that first and you'll probably make all your users a little happier.

After that, it might be wise to invest some time on the mobile experience.

The Easy Way: Let Others Do The Work

If you use an open source CMS (Content Management System), you are already familiar with the benefits of a worldwide community of developers and users. These plugins will try to detect mobile devices, and reformat your page into a single column.  To accomplish that they might hide some columns, change horizontal lists to vertical lists, stuff like that.  In some cases, you can just install the right mobile plugin, enable it, and you're done. I've used the Joomla extension before - it does a pretty good job.

If your CMS doesn't have a handy plugin, or if you built your own website, and don't have much time or money to spend on a mobile layout, try this approach instead:

No Plugin? A DIY Example

On HelpAttack!, our most important pages for mobile are the signup pages. We had to make sure people at an event, or surfing through Twitter on a bus, could still join in. We made some sacrifices:

  • Not collecting credit card information up front (too many things to type with your thumbs).
  • No non-essential menus or modules.

We accomplished a mobile friendly page with mobile detection and a little CSS.  In a special mobile.css file, we defined a couple special styles:

// Used to hide modules, menus, and images not needed on mobile
.hidemobile { display: none }
// Change the main column from a fixed width to flexible
.container {width:90%; margin: auto; }
// ...and a handful of other changes

Then, we used mobile detection to add that CSS file when we detect a mobile device. It's not perfect, but it works pretty well.

Form Inputs

Once you have your simpler layout and content, and know what pages people are visiting the most from their phones, you might want to edit form inputs to help people out with phone or touch keyboards.  For example, phones can bring up a special numeric keyboard, or a keyboard with ".com" as a button, if you use the "number" or "url" input types, instead of regular ol' text.

Capture Now, Contact Later

If a supporter reaches a donation form with 20 fields on it while sitting in traffic or while checking their phone during lunch, you are probably not getting their money just then. If they reach a form with two or three fields, including first name, last name, and email - you just might get their contact information.

This same rule of thumb applies in many situations.  Sometimes it's better to get just enough information from someone using their phone, and follow up later to complete the action. Email list signups, petitions, Likes, retweets, and shares are easy things to do with a phone - present those simple options.

Strategy First!

It's better to think about what your mobile supporters want to do with you, rather than what you want them to do. What goals of your organization align well with people with a few only minutes to spare and only their thumbs to do it? Once they engage on their phones, what next steps make sense for them? How do you measure your results?

Before you invest heavily in mobile websites or apps, be sure you have solid answers to the above questions. Keep experimenting, measuring, and improving. If you're already headed down that road, let us know how you approached the mobile web by leaving a comment. Thanks!

Ehren Foss is the Co-Founder and CEO of HelpAttack! He has a decade of diverse technical experience with web programming, database administration, and many of the open source tools that help make the web an amazing place to work. He is the founder of Prelude Interactive, a web development firm. Before that he worked at Alchemy Systems an Austin, TX company specializing in professional development and training systems. Ehren is a graduate of the Massachusetts Institute of Technology.