In the early days of smart phones, mobile optimized web pages frequently consisted of the most basic information (operating hours, contact info, maybe a list of products or services), and it made sense. Smart phones were still just not as fast or as useful as their more home bound computational counter parts, so it was an easy assumption to make that people would only be looking at a site on their phone if they were out and about and needed quick information. While people still do frequently use their smart phones and other mobile devices to look up straight forward things like directions to a restaurant or the name of a product, catering to that mobile experience is simply no longer enough. In 2012, the Pew Research Center’s Internet and American Life Project found that not only had 55 percent of Americans accessed the internet on a mobile device that year, but 31 percent of those that used the internet on their mobile device said that that was the primary way that they access the internet. That works out to nearly one-fifth of those surveyed who would potentially be lost to your business if your online presence doesn’t play nice with mobile devices, and there’s not a business in the world who can afford to just let that audience pass them by.
But fear not! Current smart phones and tablets are more powerful and flexible than ever before, and we have five tips to help you make sure your customers have a mobile content experience that will impress them rather than frustrate them.
Tip #1: Scalable font sizes
Most mobile devices, given that they have relatively small screens, allow for easy zooming and panning across web pages and other content. While most of this is handled by the device itself, make sure that you’re not employing any coding tricks on your website to force a certain font size or to make sure a heading takes up a certain percentage of the screen, as this is going to get in the way of mobile users being able to zoom in and out and see the content they want on their screen at one time. For an ideal user experience, start with a standard font size that is generous enough to be easily readable without taking up too much space, as this will limit the necessity of zooming in and out.
Tip #2: Use built in ways to make mobile ready pages
While a newer concept that not all web developers are particularly adept at yet (though we are!), responsive design, a type of website design that automatically optimizes pages based on how they are being accessed, is your best option for ensuring your site looks beautiful and is functional no matter the device being used to view it. Especially if you’re creating a new site, or doing a large scale overhaul of an existing one, responsive design will give you the best results. Barring that, WordPress, Tumblr, and a number of other services give you the option to have a mobile optimized version of your content created automatically, and this can be a great option if you’re not sure you have the time or the personnel or other resources within the business to create one. They may not be as customized or as beautiful as you might ideally like, but it’s better than having the content not be conveniently accessible to mobile users. That said, make sure you give your users an opt-out of the mobile version of your site if they’d prefer. A simple link at the bottom of a page that says “click here for desktop version” that routes you to the same page on your full site is all that’s required.
Tip #3: Navigation must WORK
Obviously your site navigation always has to work, but developing for mobile devices brings with it some new, specific concerns. Because of the need to zoom in that was mentioned before, it’s important that your menus work even while zoomed in and without kicking a user back out to the unzoomed in version of the page every time they try and select something. Obviously it’s also important that navigation items are able to be seen and tapped reliably. The major mobile operating systems offer developer guidelines about how much space is necessary between active tappable items, based on their testing of how much space a person actually needs to be able to differentiate between two possible items. For Apple’s iOS, for example, the recommendation is 44 x 44 pixels. Now bear in mind that this doesn’t mean that each link needs to be that size, but that there needs to be a space of that size that includes only one link or other tappable item. Also remember that there is no cursor on a touch screen device, so menus that require hovering to access a submenu are not ideal and should, at minimum, be configured to work on tap as well as on hover.
Tip #4: Make things easy to save
Because frequently people are viewing web content on their mobile devices while they have limited time, say on their commute or waiting for an appointment, making it easy for users to save the content somehow helps to make sure that they’ll revisit it and have the complete experience you planned for as a business. Most mobile browsers have a “share” function that allows a link to be sent via email or social media, but you can also consider building that into your site as well, in case someone is simply unfamiliar with the share option on their device or wouldn’t think about it. It’s also important that your content has a specific, reliable URL that, when bookmarked or emailed or shared to a service like Pocket, will actually return users to the page they were on and not simply kick them back to a landing page. Also be sure that there is an easy way for a user to switch between the mobile and desktop versions of a page once the page has been bookmarked, so that they can re-access your content on different devices without issue.
Tip #5: No Flash
I won’t even belabor this one with a lot of explanation, just say no. No Flash. It’s incompatible with too many devices, and there are other ways (primarily HTML5) to produce the same content. Especially if you’re creating new content, just don’t do it.
Mobile device usage is only going to keep increasing, and with more and more people eschewing traditional computer connectivity in favor of mobile, it’s critical that your content work effectively on all devices. It can seem overwhelming, but we hope these five tips (and a little extra guidance if you need it) help you make yourself known to that quickly growing percentage of people sticking with their mobile devices through it all. Share with us in the comments if you have a favorite (or least favorite) mobile web experience!