Top Tips to keep in mind when designing a mobile website

Before getting started on a mobile site, it’s important that you are clear about which devices you will target. There are no specific formats that may be compatible across all devices and screen resolutions.

An initial analysis of your target users and devices will help narrow down your requirements when designing a site that will create the best experience

for your user. Here are a couple of tips put together keeping in mind compatibility with the latest and major smartphones.

1. Fluid Layouts

Mobile screens are so small that you have to use the entire space available to deliver the maximum impact with the key information. Screens come in different resolutions. Using a fluid layout helps to utilize all the space. A maximum width of 320px is optimal for viewing on most devices.

Optimal scale of 320 x 480 will be most efficient. High end phones like iPhone and Android will scale it up by a factor or two to fit the screen.

 

2. High Resolution Images

The display of an iPhone 4 uses four times the number of pixels that the original iPhone. To avoid pixilation, always use high res images for viewing on the iPhone, at a width of 640 pixels. 50% resolution will work for all other devices.

 

3. Auto Scaling

Mobile devices are programmed to auto scale websites unless told otherwise. To do so simply, add a viewport meta tag to the header of the HTML page and ensu

re the width of the site is set to match the width of the display. Set a zoom level of 100% to avoid having to zoom in and out.

 

4. Allow easy Finger Clicking

Using a finger for a pointer is not as accurate as using a mouse pointer. It can be a pain to keep stabbing at the mobile screen to get the right click. You don’t necessarily have to make large icons. Using padding to allow small icons to be enlarged will do.

On the iPhone the average space used is 44px x 44px (i.e. 88px x 88px on a high res Photoshop doc).

 

5. Omit Hover States

This is a good touch to add on a desktop site but when it comes to a mobile site, the rollovers do no make sense. So avoid using hover in CSS or mouse over in JavaScript.

 

 

 

6. Website Icons

Use your creativity. Get the right default icon and add meta tags to define these. The more appealing and user friendly your site is, the more likely it is to be accessed by your audience.

 

7. Efficient Designing

Using CSS3 is an excellent option for designing and avoids the hassle of doing a patchwork of gradients, image slices and the sort. Moreover, it significantly cuts down on loading time.

Keeping in mind your target device and web audience, decide where you can use CSS3. Remember that iPhone, Android and Nokia have good CSS3 support whereas, Windows Mobiles are built of versions of IE6.

 

Everything you need to know about CSS3.

8. Using HTML doctype

All browsers may not implement HTML5 features but they accept HTML5 doctype. This makes it possible even to display HTML4 elements with added features from HTML5, and can be done across all browsers that support it.

9. Offline viewing

Create a cache manifest file to ensure the browser caches the necessary files for an offline session. This is particularly advantageous if the user has a slow Internet line and if they frequently visit your site. Doing this also increases the number of return visitors to the site.

An advanced option would be to create an SQLite database with JavaScript.

10. Link your mobile site and your main site

It’s always advisable to allow an option for users to view the normal mode of the website. Leave it to your viewer’s preference.