7 Steps to building a mobile website

Article by Sam Beavan

aside-icon Sam Beavan

Just because you can view your desktop site on a mobile phone doesn’t mean it’s mobile-friendly. Mobile sites are for smaller screens, with the needs of the mobile user in mind. A mobile-friendly site helps your business connect with customers on mobile and increase sales. Here are a few tips to bare in mind if you are looking at creating a mobile website.

Reduce Content

On a mobile screen space is limited and every pixel counts. It is therefore important to carefully consider how to reduce content in order to tailor the site for the mobile user. Think about content that maybe unnecessary for a mobile user. This may include areas such as right hand side navigation, text or content outside the main page area, links that appear outside the main content area. It is important to make the content and experience as simple and focussed as possible as content needs to load quickly for the slow connection speeds that can often occur on mobile. Content also needs to be quick to digest and easy navigate as people typically don’t have a high tolerance for website that aren’t optimised for mobile. The attention span for people on the move is also significantly shorter in comparison to those that are working from a desktop computers so bare in mind content needs to be edited acordingly.

Single Columns

Wide pages are very difficult to navigate on a mobile device so it is advisable that a narrow column of content is provided so that content can be digested across all phones. Websites that typically works well on a desktop will often be unreadable on a mobile device and will

involve zooming in/out to make content legible. This additional step maes the mobile experience cumbersome and ineffective and can often lead people to click off the wbsite altogether, leading to a reduction in enquiries and customers.

Redesign The Navigation

Fitting navigation across the top of a web page ona  mobile devide can be difficult and staking too many navigation options at the top of the page will push the page content too far down. Here are a few suggested tips for adding navigation to your mobile website. Position the navigation and site search options at the top of the home page in tabs that are positioned vertically down the page. It is advisable to leave content for later pages and keep th ehomepae as a navigation page. This especially relevent becasue ona mobile device users want to navigate or search straight away.If the site has alot of content and more navigation options are needed it is a good idea to use drop down links which should be placed at the top and the bottom of the pages.

Reduce Need For Text Entry

Anyone that has tried to use a conventional website on a mobile will be aware that entering text can be very frustrating, especially weh using the increasiongly popular touch screen phones. Typing is also significantly slower when typing on even the best mobile keyboard than when using a full size PC keyboard so reducing the need for typing on your mobile website is a essential in order to ensure an effective end user experience.

Consider Option Of Building More Than 1 Mobile Website

The screen size and processing power of mobile phones vary hugely. A quick look on a leading mobile phone retailer shows phones selling with resolutions ranging from 128 x 160 pixels, right up to 480 x 800. It is also worth considering that while many smart phones have the ability to load up full web pages less advanced phones can’t cope and would crash trying to do the same.

If your mobile website is aimed at smartphone users with a fast download speed then a single mobile version will be sufficient. However, if you want a broader reach then you should consider creating a 2nd paired down version for non smart phone users.

Consider Both Touchscreen And Non Touchscreen Users

One of the most common difficulties when viewing traditional web pages on a smartphone is in selecting small text links accurately. Small links are easy to miss when tapping on a Smartphone with fingers tending to be too thick to hit a small link accurately, especially if there are 2 links that are close together. As a rule of thumb links should be avoided for all calls to action. Instead, design calls to action that take up more screen space and which can be tapped easily such as a large button or icon. A good option is to use thick rows that span the width of the screen or square boxes as these can be tapped or pressed easily whe using a mobile device.

Exploit Inbuilt Functionality

Many mobile phones come with plenty of inbuilt functionality that give them an advantage over PC’s when it comes to exploiting a call to action . You can make it easy for users to perform certain tasks by utilising a mobile’s inbuilt functionality.

Make calls: All phones can, of course, make phone calls by default (PCs require additional software most users won’t have purchased credit to make calls from their PC to physical phone). Allow users to automatically ring a number when they tap or click a phone number. This is useful for ‘Contact us’ or ‘Store finder’ pages.

See an address on a map: It’s also possible to give the user the option to select an address and automatically open the mobile phone’s map application.

Find the nearest… As most users are often away from their home when they use the Internet you can make use of the inbuilt location-detection capability (e.g. GPS) and you can ask a user to share their current location. Of course, this is most useful for companise that have multiple locations and want custoemrs to be directed to their nearest store.

Input information in innovative ways: There are many innovative and useful ways to allow users to input information. QR codes are an example of this. Waitrose had a press campaign last year to promote it’s iPhone and Android apps. Scanning the code took users directly to the app stores to download it.


You might also like