Blog - Tutorials

Best practices for a mobile website

Written by: Dan C, on 2012-10-17

1. Prioritize content and keep it simple

Keeping your site simple means:

  • eliminating most images.
  • simplifying navigation, layout, and design elements
  • eliminate Flash and other proprietary software
  • keep your site free of clutter
  • break up text and other content.

Mobile site visitors are on the move and with space being a valuable resource on a mobile site, you need to anticipate what users will most likely search and want to access. Make sure you have your most important items visible and easy to find. Make it easy for them to buy or review products, find the store’s location, call your business or request information.

2. Focus on usability

A mobile website design is focused on usability and simplicity. A smaller screen design is challenging and requires to take down some elements used in desktop websites.

  • Don’t pile paid ads or unnecessary elements onto your website.
  • Organize content using CSS. Stop using HTML tables.
  • Use plenty of white space and use light-colored backgrounds.
  • Use single column layouts.

3. Focus on conversion

Users are not browsing your mobile site so you have to make it easy for them to buy or review products, find the store’s location, call your business or request information.

4. Be concise when formatting content

The rules of content are not changing, even if we are on mobile Web. Content is king and you should keep your valuable content available to visitors. Here are a few ways to do that:

  • Text has to be readable at an arm’s length.
  • Long chunks of text should be broken up with read more links or collapsible navigation.
  • Avoid placing many links within the body of the text.
  • Headers should be clear and prominent.
  • Use bulleted lists when formatting the text.
  • Avoid the use of images when possible.

5. Design items should be tapable not clickable

Smartphones and other mobile devices use touch screens instead of a mouse. So be sure to design your site’s buttons, navigation items and links for a touch screen. While improving the user’s experience it will also prevent accidental navigation away from your site. Do not use hover features on your mobile site because a thumb simply cannot hover over an item.

6. Use vertical navigation instead of scrolling

Mobile users scroll from top to bottom, so keep in mind that left to right scrolling should be is eliminated and also try keeping the top to bottom scrolling to a minimum.

7. Optimize your page size

Page load time can determine whether users stays on your site or not. It also plays a major role in how well a site ranks in search engines.

  • Images take long to load. Mobile users are searching for content rather than admiring your website. For the few images you need show, use an image cruncher to cut back on image size.
  • Video can also affect load time and usability. Instead of streaming the video or using other proprietary software, consider using YouTube for videos on your mobile site.

8. The URL structure

There are a few choices for types of url to use for a mobile site.
  • .mobi extension will result in the following url – sitename.mobi
  • sub-domain name like m.sitename.com or mobile.sitename.com 
The closest to a standard using m.sitename.com

9. Redirect visitors to the mobile site

When a user views your website from a mobile device, you have to make sure is the mobile version of your site he sees. Also allow users the option of to view the standard version of the site.