Tips and best practices for mobile website design

Accessing the internet through mobile handheld devices is commonplace these days. All businesses have realised that a large majority of their potential customers will want to access information when they’re out and about. Therefore it’s important for businesses to be in a position to make this information available quickly and conveniently. Obviously this means that companies will have to provide mobile websites for these customers. So does this mean simply making the primary website available for mobile devices? Well, in a sense yes, but it needs modified to make it both mobile-friendly and accessible for the user.

Designing a mobile website doesn’t have to be too complicated. There are special procedures and considerations that need to be taken into account, but practicality needs to be uppermost in the designers mind.  The easiest way would obviously be to modify the existing primary website to make it compatible for mobile handsets. However, this isn’t as easy as it might at first seem: remember there will have to be some big changes made to the website to make it compatible, like layout, design and construction. So, does that mean it’s easier to build a new design from scratch? Well, it can be as long as certain principles and best practices are followed.

Layout

Browsing through a mobile website can be very time-consuming and laborious: the screen is small, so the information needs to be readily accessible. Nobody wants to have to scroll through pages of text to find the link they’re looking for. Therefore it’s vital to put all of the most important information you want mobile users to see on the top of the page. You should also include your company logo, customized for a mobile site. Try to keep any left/right navigation to a minimum as this can be tricky on a phone:  arranging content in a single column layout is far more preferable. You should also try to minimize the use of tables as these can also cause problems on mobile phones: if you do have to incorporate them, try to use no more than 2 columns, and avoid row and column merging.

Content

You should make sure that the information on your website is easy to read and navigate. It needs to be simple and intuitive because it’s probably users accessing your site are probably out and about. Having finally selected which parts of the business content need be displayed on mobile website, the site menu and text will need to be adjusted to avoid zooming. Keep the typography simple and easy to use, and use headings rather than a variety of font sizes.

Coding

There isn’t really any need to use any special coding when creating a mobile website.  It is much easier if the mobile site is coded using either XML or XHTML. You can also build the site with the most basic HTML and CSS coding possible as this will prove to be just as effective. As the mobile website will have comparatively little optimisable content, title tags, description Meta tags, heading tags and filenames need to be carefully crafted with targeted keywords.

Images

However powerful a mobile phone may be, it’s no substitute for a computer. Therefore complicated images can cause problems and take a long time to load. If images are necessary, they should be used contextually and sparingly. If you do wish to incorporate images on your mobile website, they should be in .jpeg or .gif or .png format as these files are relatively small, and make sure to compress these pictures to avoid zooming.

Page Size

When assigning a style for a mobile website, it’s essential to keep it all simple and to keep the page sizes as small as possible. Remember that the maximum page size for a mobile page is only 20 Kb, so make everything fit this. In fact, if all the information can be contained in less than 10KB then this will be better for many users as they are often per KB of mobile web data.

Page Links

A good mobile website design should ideally provide back buttons and links, because it is often difficult to navigate a website on a mobile phone. However, not all phones are equipped with back buttons: therefore it’s necessary to provide some form of alternative to prevent users from landing on dead end pages.  It’s also important to remember that all pages need to be linked to other pages.