notes on interaction design

January 06, 2012

9 Tips to Make Your Website Mobile Viewable

It’s no secret that more and more people are accessing the web from mobile phones. Stat Counter shows a steady growth of Mobile Browser usage share over the past few years. So it’s increasingly important that websites work on these devices: If a user tries to access your site from their phone and it’s broken, there’s no guarantee that they’re going to come back on a computer. The best way to address this issue is to create a website using Responsive Web Design so that the site “automatically” adjusts to the browser size. But what if you don’t have the resources to restructure your website?  There are some stop gap measures you can implement to ensure that your website is functional.

At the most basic level, it’s important to keep in consideration the limitations of a mobile browser and recognize that people use fingers instead of a mouse to navigate the web. Based on this, we’ve come up with the following 9 tips to make sure your website is accessible on a mobile device:

1. Make sure global navigation buttons link to other pages when you have drop down menus or mega menus
Mobile devices do not support hover states as users do not hover over links with their fingers. It’s all about tapping (a mobile device’s version of clicking), so be sure that the global navigation provides links to other pages. Also, it’s a good idea to have a delay of 300 milliseconds before showing the menu just to make sure the menu doesn’t pop up as the user is navigating to another page.

2. Links in global navigation menus need to accessible in relevant sections
Be sure that users can access other areas of the site from site pages, and not just the menus. For example if a user taps on “Products” in the global navigation, the Products page should contain the links that appear in the Products menu.

3. Keep line height spacious between text links
Users are tapping links with their fingers, which are not as precise as a mouse. Keeping enough white space between the text links will help them in not tapping the wrong link.

4. Make images related to links also clickable
Images are larger targets for fingers, so when they relate to a text link be sure that they are also clickable/”tappable”.

5. Avoid Flash
iOS devices (iPhones, iPod Touches, and iPads) have never supported Flash, and Adobe is ceasing development of mobile Flash, so it’s best not to go there. You can achieve the same effect of flash using HTML5, JavaScript, or video.

6. Use MPEG-4 for videos
MPEG-4 (.mp4) is the safest bet to accommodate all major mobile players: Android, Apple, Blackberry, and Windows.

7. Use HTML for contact phone numbers
Avoid putting contact phone numbers in graphics, as you render them useless to a mobile user. When phone numbers are in HTML, the mobile OS will allow users to call the number by simply tapping it.

Active Phone Number

8. Keep graphic and other media files as small as possible
We don’t have a specific recommendations for the file size, but it’s important to realize that users are loading these files over a mobile connection. No matter how fast the carrier claims these connections are, they aren’t as fast as broadband (at least, not yet).

9. Keep the line height spacious in paragraphs.
Spacious leading will make your website copy easier to read on a mobile screen.

Users want to access websites on whichever device they’re using (computer, phone, or tablet), so you want to make sure your website is available to them. Implementing Responsive Web Design is the best answer for this, but in the meantime, these 9 suggestions will help make your website viewable on a mobile device. One last tip: Make sure you test the changes you make on various mobile browsers and platforms.

Author:
Tags: ,
Permalink: 9 Tips to Make Your Website Mobile Viewable

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>