Creating a mobile website design

ForestWorks-Large_02Charles Elena’s experts explain the difference between responsive and mobile website design. We also reveal how much content should you keep and cut when creating your mobile website.

Responsive and mobile website designs

Mobile website design enables a business to specifically target its mobile audience. There are two separate sites – one for mobile and one for desktop. The aim is to ensure mobile customers have the best possible experience when visiting the site. However, there is a lot of work involved in re-writing and adjusting content twice for both sites – even little things as simple as correcting spelling mistakes can become problematic.

Meanwhile, responsive web design automatically adjusts the website according to what device the visitor is using, whether it’s a smartphone, tablet or laptop. While there are obvious benefits to this, according to Milestone Insights you might have to reduce the amount of content on the site if there is a lot of it. This could include HD videos, flash, PNG-24 images and plug-ins that aren’t accessible via mobile devices. However, it’s important to carefully consider what content will be removed because it would also be removed on every device.

The decision as to whether a company opts for responsive or mobile web design should be approached on a case-by-case basis. However, there are a number of things web developers should be aiming for when it comes to websites for mobile devices:

Fast loading times

Achieving fast loading times is vital in retaining customers using mobile devices. A 2011 survey found that nearly 75 percent of mobile phone users won’t wait more than five seconds for a page to load and nearly half won’t return to a website they had trouble accessing with their phone. According to Angie Schottmuller from Search Engine Watch for a company’s mobile page to load quickly, content should add up to a total of 20KB. One effective way of achieving this is by downsizing the quality of images (within reason) as a smartphone can’t show the full size of the image anyway. Also, the more images or videos on the web page the longer it will take to load, so it would be worthwhile determining what content is necessary for your mobile users and most effectively portrays the brand personality.

Design for the small screen

When designing web pages for mobile devices it’s important to remember the screen will be significantly smaller than a computer screen. This has many implications for the design process. Firstly, images can’t be too large on a mobile site and they must fit within the small screen, as viewers generally don’t like having to scroll in both directions to view information. Improving readability is a must and this can be done by increasing font sizes or rearranging layouts. This is where reducing multi-column layouts to single columns proves to be an appropriate method, especially considering mobile screens are usually vertical. Ensure text and links aren’t cluttered on the small screen because users must tap on links with their fingers as opposed to precisely clicking on a link with a computer mouse. If links are too close together customers will get frustrated when trying to tap on one link and then accidentally hitting the wrong one.

Easy access to contact and checkout options

All good designers understand the importance of designing with the user in mind. Think about it – when are people most likely to browse the web on their mobile phones? When they’re outdoors or on-the-go and they want information quickly and easily. Therefore, prioritise important information such as contact and checkout options as opposed to less-relevant information that won’t benefit your mobile users.