Usability Tips For Smartphone Websites

In this article, I'll share some of my secrets for building killer mobile websites. I'll also show you a change you can make in just 5 minutes, which will make most websites twice as legible on an iPhone, iPod Touch or Android phones.

Know your customer
Before you can create a killer mobile website, you have to consider first the differences inherent in mobile vs. traditional desktop web development. It's then possible to create a plan that maximizes the capabilities of the mobile platform to provide a truly unique user experience. Every platform has its strengths and weaknesses, and mobile is no different, but by defining your goals and matching them to the right technology, it's pretty straight forward to setup a killer mobile web presence. 

Let's suppose for a moment, that you are developing a site targeted specifically at Apple's iPhone and iPod touch users. That's over 85 Million people, a number that is growing rapidly. Since the "Android" phones all run off the same mobile browser as the iPhone, you can add that entire customer base to the list as well. Except for a few differences such as app or music store purchases, the experience is pretty much identical across these devices. In fact, many smartphones coming out these days boast similar features, so it's fairly easy to identify and design your site in such a way that it displays beautifully for these visitors. Let's look at some specific examples.

Think small
If you recall, in my previous article I discussed the differences between a traditional desktop and a mobile device's screen resolution and orientation. The point I had stressed was this, you must make sure your page elements present well on the reduced size and smaller "real estate" available to the mobile screen. Furthermore, it's important that the site elements are laid out in such a way that the most important information is readily available to the visitor. Remember, mobile customers aren't searching for information like a traditional web user, they are online for a specific purpose. If you consider these points when designing your user interface, you'll end up with a site that is much more user friendly for the intended platform. Later on I'll show you how both laymen and seasoned pro's can create these mobile masterpieces in minutes.

Take usability cue's from native apps

If you've ever taken a look at the similarities in native smartphone applications, you've no doubt noticed they all share certain common design elements. For example, there is often a "header" bar that contains a title in the middle and a main action button in the upper right corner (email or search typically). Also, when you drill down a level into the program, there is often a "back" button shown in the upper left hand of the screen, in this bar. This is no coincidence. the UI, or user interface, of many native applications often look very similar. This is because the user has become accustomed to seeing these controls in certain places, the same way we have become accustomed to having website menu links display across the top or down the left hand side of traditional website designs.

These UI cues enable you to design a mobile web presentation that is both familiar and intuitive. I suggest you spend some time considering the usability of your designs, and make adjustments as necessary to ensure your design will translate well to the mobile platform.

Viewport 
The screen of the web browser may be referred to as the viewport. http://en.wikipedia.org/wiki/Viewport That's important because I'm about to show you how you can increase readability of most websites on an iPhone by 200% using a simple line of code. This may be the easiest modification you can make but will make the text seem much more legible for your visitors. What we are going to do is to set the viewport's default "zoom" for iPhone, iPod Touch or Android phone visitors. This will allow your pages to render without the extra space shown on the left and right of many website designs. In turn, it will directly affect the legibility of your site for these visitors. 

To do this, simply figure out what width your main content area occupies, and add this value to the code below. Most websites display extra space to the left and right of the content, this secret will allow the site to snap to a "zoomed in" state whenever a modern smartphone user visits your site. You can use a tool such as Photoshop or the Art Director's toolbox to take the measurement.

The modification can be accomplished by adding the following tag to the HEAD of your HTML documents (or asking your webmaster to do so). In this case we're setting a content width of 700 pixels.

<meta name="viewport" content="width=700" />

They won't adversely impact your normal site visitors, and this simple change will make most normal websites more legible by a large margin. This technique is recommended for anyone who runs a website and would like to easily improve the user experience of their mobile visitors.

Leverage native device capabilities
A substantial advantage to serving mobile web content is the ability to interact with native device applications such as phone, mail and maps. Furthermore, it is easy to play audio and video files on most modern smartphones nowadays, and these features can be leveraged to create engaging interactive experiences for your new customers. Once you understand the limitations and capabilities of the platform, it's easy to see how to formulate presentation and marketing strategies that leverage these capabilities. 

Movie producers and enthusiasts alike can broadcast their latest YouTube creations directly from their page, while local merchants may choose to offer discounts for customers who show a coupon on their phone at the store. As the mobile medium continues to explode, the opportunities to leverage core device capabilities continue to grow. This is a real key to creating killer mobile websites. 

Navigation and usability
We'll cover the topic of mobile site usability in further detail in a future article, but one point of note is to make sure your links and other "clickable" elements have enough space between them to be easily "tappable" by users who may be using their finger, an input device nearly 60 times wider than a traditional mouse cursor, to navigate the page. This has a direct impact on the usability of your site, and should be taken into consideration when planning your design. 

Join message boards
Whoever said the best things in life were free was right.  Message boards are available for nearly every topic imaginable, and can be an invaluable source of FREE expert advice for aspiring mobile web designers and developers. They're a great place to stat up to date and informed on the latest advances in a given field, and a valuable resource when you need to look up specific information. When using message boards be mindful that it is a public forum, and take any advise with a grain of salt. Solutions that solve your problem may not take into account other aspects of your project, such as security or portability. If you keep this consideration in mind, Message boards and user groups are a great way to get the answers you need when you don't have the time to sit down and study the subject. 

Pay attention to media limitations
One important tip I can give you to help you design killer mobile websites is this. Understand the limitations of the device for which you're developing your content. For example, I've seen numerous posts on mobile development message boards from users asking for help with embedding audio or video media on a mobile webpage. The response usually goes something like this. "Device X does not support the embed tag, try linking to your file instead to play it in the device's native application." The user experience is very similar, really. You will not always be able to use traditional techniques to setup your media, but with a little knowledge of what's supported and what's not, you'll be able to better design sites that leverage the capabilites of modern smartphones.

Don't re-invent the wheel
If it's been done before, and you can use it, why recreate it? Take the iMicrosites online toolkits for example. It's a turnkey online solution I created which allows anyone to create killer mobile websites. It allows you to get the job done with the piece of mind of consistent results. There's no need to test your changes across multiple devices, the software is smart enough to turn your input into valid HTML supported on a wide range of today's popular smartphones and devices. Visit http://site.imicrosites.com for a free trial.

I hope that you have a better understanding of what goes into the process of creating a site for the mobile web. If you liked this article, I'd appreciate it if you'd share on your favorite social network or post a comment below. Keep an eye out for my next article where I'll show you how to put the final pieces in place and begin reaching millions of new mobile customers.

Best, 
Shaun Mackey