Designing Mobile Versions of Your Website

There was a time when it would have been considered the stuff of science fiction to have the most powerful information sharing service ever devised by human beings available to you twenty four hours a day almost anyplace that you were, but that is becoming a reality for more and more people all the time. Almost six billion people in the world use mobile phones, and at least 20% of those people have accessed the Internet on them. That doesn’t include regular tablet and iPad users or those who utilize more out of the way methods to access the ‘net that doesn’t involve a traditional computer setup. Mobile access is set to become the primary way that people access information and innovations that make mobile phones more convenient to use will only continue to drive that trend.

That’s why it’s important you optimize your website so it can be accessed via mobile device easily. While this might seem like a daunting task, especially if you’re not comfortable with Web design, it’s actually a lot simpler than you might expect. The trick is to think in terms of the platform and the user, then build around those ideas.

What Can We Decipher About Mobile Users?
As much as it is becoming a more common way of accessing information, there are certain things that can be determined by looking at exactly what it means to be accessing information on a phone or mobile-ready tablet.

The first thing to understand is, in most cases, these are people who are out and about. They are on the go and want to access information quickly and easily. That means a website designed for mobile access has to be pared down significantly from one that you would bring up on a laptop or desktop. The keywords you want to keep in mind are “sleek” and “efficient.” Mobile websites need to be navigable with a single finger; if not, they won’t be explored with any regularity.

The next thing to understand about mobile users is, often, they have cellular plans that limit their data transfer and connections that are much slower than typical home Internet access. That’s why a mobile website should be as simple as possible, requiring the least amount of data transfer to work properly.

Understanding these two important factors will make your site much more attractive to mobile users by better serving their needs quickly and easily. In fact, a well-designed mobile site can often make the difference between a legitimate lead and somebody clicking over to a more convenient location.

“Must Haves” for Mobile Web Design

There are a few things that must be done in order to create a mobile website that will be effective, lean and attention grabbing.

1. The site should be written in XML or XHTML and use CSS for layouts. This is because you don’t know the size of screen that somebody will be accessing your site on, and these provide the most flexibility for different types of browsers and visuals. Similarly, the design should be fluid and easy to navigate.

2. While this isn’t vital, it is beneficial to put the most important information at the top of the site. Again, keep in mind that people accessing mobile sites are generally on the go, and they need information quickly and easily. Additional scrolling and searching just makes it more difficult to find what they’re looking for, and therefore, less likely that they will continue browsing your page. Keep the most vital information at the top of the site and they’ll return frequently.

3. Typing is still difficult on phones, and fingers are the main way that mobile websites are accessed. This is why you should make sure you keep those things in mind when designing your site. Make sure that links are large and easy to see as well as to press, and also design them to have a certain amount of blank space around them so that people don’t accidentally press other links and get frustrated. Similarly, make sure that forms require as little typing as possible, using radio buttons and drop down lists whenever possible. For the fields that do require typing, employ cookies that will remember what was typed for next time, encouraging repeat visits.

Additional Tips and Guidelines

There are several more things that you can do to make your mobile site more attractive and functional for your intended customers. These are not strictly necessary, but they will help you design a site that will give the most to your visitors and convert them into customers.

1. Maximize vertical scrolling – Again, it’s critical to keep in mind that people accessing the mobile version of your website are probably on the go and almost certainly using their fingers to navigate around. That means that mobile sites need to be navigable with one finger, preferably a thumb of either hand. If your website requires people to scroll horizontally, that makes it more difficult to read and get around on, so focus your design efforts on keeping everything in a vertical line for ease of use.

2. Keep the site as simple as possible – Less is absolutely more when it comes to mobile design. If you can, combine multiple images into single ones and use CSS to place them on the page to reduce the number of HTML calls that the mobile device has to make. Try to avoid graphic heavy sites if you possibly can, limiting images to functional ones like buttons. Don’t try to employ Flash or similar extensions in the creation of the site since mobile devices usually don’t have the capability to run them and it’ll slow down access to your site. Use basic code, and don’t try to get too fancy with the design; focus instead on functionality.

3. Take color and look into account – If the majority of hits to your site come at mid-day, you don’t want a site with a color scheme that is difficult to see in the glare of sunlight. You want your links and buttons to be visible and easy to read even when very small. The background needs to be clear and as simple as possible, not employing images if you can avoid them.

Despite the millions of people accessing them regularly, a number of companies still haven’t figured out the secrets to designing a useful mobile site. That means that you can put yourself at the head of the pack pretty easily if you design a site that keeps the mobile user in mind. However, if you plan out your design and keep it as simple as possible, you should have no problem building a successful mobile website.

Posted on Friday, June 6th, 2014