5 Keys to Improving the Mobile Viewing Experience

In the old days just a short two or so years ago, marketers and creatives didn't need to worry about their websites being mobile-friendly. Not that it wouldn't be helpful to have a mobile-friendly site, but there was a low percentage of site visitors accessing websites with their smartphones.

At the end of 2014, comScore reported that 66.8% of all mobile subscribers had a smartphones. It also reported combined mobile web and applications account for 60% of time users consume digital media, leaving just 40% for desktop viewing. We've reached the mobile tipping point where mobile has overtaken desktop. Smartphones are becoming the computer of choice.

This makes mobile-friendly a key of today's website design.

There are many items to consider when developing your site, but these are elements that can dramatically help with the mobile viewer's experience.

1. Responsive or a Separate Mobile Site
Some may say "you need a responsive site so it'll work on a smartphone." I have a different take on that: I think you need to determine the best experience for your users first. What do they need to access? Directions? Product information? Menu? Order placement? What's the best way to present this information? Once you understand this, you can then determine what type of mobile site is best.

Responsive Sites are created so the elements of the site stack upon themselves. This means as you make the website window smaller, the graphic elements will shrink and the navigation and text elements will arrange into a one column format (see the Time example below). These sites can determine where they are being viewed and adjust for desktop, tablet and smartphone. Plus they adjust as you enlarge or reduce your browser window on a desktop.

Separate Mobile Sites are designed to be completely unique from the desktop site. They show the same information but in a different format and react very differently (see the Mission BBQ example below). Most separate mobile sites will also have a link to view the full site. They are basically two completely different sites designed to fit the screen being used.

In the first example, Time is presenting many articles and a responsive site does a good job. It easily stacks the articles on top of each other and is easy to scroll through the article list on a smartphone. Once you click on the article, the story is presented in clear and simple one-column format that is easy to consume.

The Mission BBQ site uses a separate mobile site as it has determined the most critical information users are accessing from their smartphones is their locations, menu and catering pages. The navigation is stacked and is designed to be navigated easily with your thumb. Notice it still has sliders on the top of the mobile site to promote Mission BBQ's seasonal foods and events, but the focus is on locations and menu.

Is any one solution better than another? From a functional standpoint, not really. Both types of sites are driven by a CMS (content management system). All content is entered into a database once and then populated to the appropriate page or pages. It's really all about user experience.

2. Use Larger Fonts
On a desktop, it's easy to read 12 pt type on a large monitor. Plus with a simple key command you can enlarge a webpage (on a Mac, it's command +). But on a smartphone it's much more difficult to read small text. Consider making your smallest type a little too big and then make it one point larger. A rule of thumb: Make you body font size no smaller than 16 pt.

3. Design for Fat Fingers
I'm a fat fingered person. This makes me very sensitive to form fill-ins and links. Make them big. Remember a mouse on a desktop gives you very fine control. A finger on a smartphone does not. Make it easy for all to enter data into form fields and click navigation buttons. Make your call-to-action buttons even bigger.

4. Use Conventions
Conventions work ... don't reinvent the wheel. Try to adhere to mobile design conventions whenever possible. People are comfortable with them and know what to do. Remember, your site is for customers to use and navigate. They need to know how to do that.

5. Test Across Devices/Browsers
There are so many smartphones available today. Add to this different operating systems (iOS, Android, Microsoft etc.) and different browsers (Chrome, Firefox, Safari, etc.) and you can see how complex things can get. Just like desktop systems, different mobile browsers will support different technologies and show your site different ways.

The solution: Test, Test, Test. Cloud-based solutions like Keynote Mobile Testing tools can help with testing your site across multiple devices, browsers and different carriers. Make the time in your schedule to do this testing.

Obviously there are many more things to consider when developing your mobile-friendly and desktop sites. Work closely with your design and development teams and challenge them all along the way; your site will be better for it. And, most importantly, put your users' experience first. Make sure to test your sites with real people. See how they use it. See where they stumble and adjust.

Patrick Fultz is the President and Chief Creative Officer of DM Creative Group, based in Woodstock, Vt. Reach him at pfultz@dmcreativegroup.com.