Mobile Website Design Best Practices: The Bad

Last week we started our series on mobile website interface design with The Ugly. We’re working our way up to The Good, but we have to address The Bad first. Hopefully this will help to provide a basic roadmap for ensuring your mobile website falls into The Good category.

This week — The Bad

As we saw in the previous article, the technical hurdles can be brutal — but now that we know what they are, we want to plan with those constraints in mind. This simple statement already guarantees that our mobile website will be of a higher quality.

We’ve left The Ugly behind, but now we must face The Bad. The next steps in getting to that Good place is to look at some mobile UI best practices, as well as the current mobile interface trends.

HTML 5: The mobile developer’s friend

HTML 5 provides a platform that is ideal for building mobile websites, and some argue that it evolved out of the need for a more app-like functionality for website interfaces, and that translates easily to mobile devices.

It is probably a good idea at this point to also say that we want to create a mobile website, not an “app”. Mobile apps are programs written to run on an operating system and are sometimes monetized and have specific functions, like listening to Pandora, or navigational tools. Our goal is for our website to have have an accompanying mobile version that lets users-on-the-go access helpful information from our website. HTML5 provides the alternative to building costly apps and allows us to leverage the data and HTML that runs our websites.

The advantages

Here are some of the advantages of using HTML5 to build our mobile websites:

• Offline support for AppCache and the database lets mobile website developers store data locally on the device.
• Storing data on the device rather than making a call to the webserver avoiding interruptions in connectivity and allowing the user to continue working.
• GeoLocation API - key to many mobile features and although not part of the HTML5 spec, it is typically part of the developers toolkit and integrated closely.
• The Canvas and Video features provide a simple way for adding videos and graphics to a mobile web page without the need for plugins.
• Browser level form validations and contextual content.

Ok, enough of the technical stuff

Your mobile website GUI (graphical user interface) is the top layer of the complex workings of the data, code, and server layers. When you decide to design a mobile website an understanding of this is key to success. You couldn’t build a house without knowing how the electrical and plumbing work. Since this is the layer that the user sees and interacts with, we need to consider which mobile devices we’re going to target. This is important because the design specifications for screen size are critical. Additionally, your testing phase will be based on these devices.

You know how the content is structured, because you have already built your website. Hopefully you also know who your target audience is and what percentage might be mobile users. If not, you will want to start here. An understanding of your mobile user’s needs will help you in the task of simplifying your content. A note here is that even the most prolific mobile user may want to see your full site, so providing a link like “View Full Site” should be visible on your mobile site.

Bird’s Eye View

The large view of usability design is that it doesn’t matter what device is being used. There are common expectations that a user of any device and application will have. If I design and develop a new car that has the gas pedal in the back seat, I won’t be able to sell a single car — even if it looked great!

The same goes for a mobile website. Navigation is king and this is why the homepage of many mobile apps and websites is simply a stack of navigational buttons.

Mobile user’s have a need for information, so your job is to give it to them. It is important for your brand to be consistent, but you may have to minimize how it appears on the mobile screen to allow more real estate for navigation and content. Adapting your content to the small screen is also needed. More concise and explicit content will make the user experience more pleasurable and helpful. If they want more, you’ve provided them with a link to view your full site.

The Bad

We’ll consider streamlining your content The Bad, because it was really hard to get it as concise as it is, and now that is too much! I know, it hurts. If it helps think about all of the additional traffic that will be generated.

Remember HTML5? It really kicks in now by allowing you to have web forms that handle things on the device prior to submission. Auto-completion, validation, and contextual information — all good for the mobile user trying to purchase your product. Your forms aren’t exempt from the simplification process either. If your website forms have a lot of fields that users must fill out, you will want to review those and utilize only what is necessary for your mobile site.

Now we’re getting somewhere. We know what devices we plan to target, we know our mobile target audience, we’ve audited our website content and created a version that is concise and useful, we’ve minimized our form capture fields, and we even got our brand identity into the mobile universe. So what’s left?

Next week — We end this series with - The Good

Image: The Good, The Bad, and The Ugly - Sergio Leone