10 tips for making a mobile friendly website

When planning to build a mobile version of website you need to consider the diversity of mobile ecosystem. Launching a mobile website version would involve the screen size, browsers and connection speed, which is remarkably different from a desktop environment. Form choosing mobile friendly URL to designing a mobile-optimized layout using CSS and HTML, building a mobile version of website takes multi-facet effort. Adding to the hassles, the next gen phones are upgrading faster than you can ever think of. Clearly you don’t have a hint of what mobile your site viewers will have next. Given that the iPhone is enjoying a good market and smartphones with Google’s Android (having variety of screen sizes) are also gaining momentum.  At this juncture, making a mobile friendly website involves more intricacies than ever before. We decided to workout on some simple tips that would resolve the complexities in making a mobile version of website.

1. Detecting mobile devices automatically

This is quite a complicated part of the entire mobile site development. How do you get the visitors to see the mobile version of the site. Well, this can be easily sort out by the automatic mobile device detection. One such reliable approach is User Agent detection in which the server makes the decision about the site to serve depending on the capabilities of the browser. Other implementation feature real-time JavaScript requests to databases such as DeviceAtlas or WURFL. It also offers information on what the device can do. The mobile version would be beneficial only if it is imperatively visited by every mobile user.

2. Easy navigation

Typically your website might have a number of footer, header and sidebar links. The fads and frills doesn’t matter much to a new visitor. As you know mobile web surfing has high bounce rates. Most users  just visit a single. Design the site to grab your visitors short attention span. Detach the links that doesn’t have a high mobile priority.

Try to focus on mobile-specific items. One of the most viable ideas would be have the Search on the header. Further, adding the Contact link to the header could double up the advantage. The visitors might be looking for contacts.

3. Keep the links intact

Mobile traffic to your site is mostly dependent on Google searches, links from Twitter streams and email. These links are directed to the desktop websites. This can only be avoided with automatic device detection. Make sure that the visitors using mobile to access your site are sent to the mobile version of your site say m.yoursite.com. This is not all, you must also

4. Provide clear path to the full site

The content on your mobile site might be trimmed and missing out elaboration. You could solve this easily by providing a link to your Full site on the Footer. After the transition to the full site it would be better to stop mobile redirection for the user. You can do this permanently or set a timeout period of 1 to 2 hours.

5. Styling the site

While styling the mobile site use the relative units such as the ems, percentages, etc. The relative units would be supported for a longer period and would be support in most future mobiles.

6. Simple page structure

The best layout for a mobile site would be a one-column layout. This is popular with most of the mobile sites. Such a layout would make it more readable as well as more usable for visitors to the site. Most of the major sites like YouTube, Facebook, Twitter use this layout one-column for their mobile versions. One Column layout would forces all content to fit in a single column. To know more about mobile layout and design you might take a dig at woork.

7. Resize images

Clearly a desktop-size image couldn’t fit In a mobile.  You need to get the mobile size images . This could involve resizing the images on the web server. This would further reduce the time load the image by 90%. It’s better to get optimized images link to the full, original image hosted in a different image server. The mobile visitors would appreciate it in case they wanna zoom it acquire more details.

8. Minimize the scrolling

Try to reduce the scrolling and page transition times to reduce the time spent on watching the content.

9. Brand Recognition

When building a mobile site your brand is on stake. It’s important that you maintain a panoramic consistency between your mobile and desktop site. Highlight your brand in the mobile page to reassure the visitors that they are in safe hands.

10. Mobile site analytics

Observing the stats of your mobile audience is crucial for your site. This is mainly because it will allow your to know the devices that are popular with your users. It helps you to take better design decisions. In case your mobile audience is mostly using BlackBerry, you need not worry about those using iPhone. You can use Google’s recent AdMob acquisition and a Mobile Analytics API  for your mobile site’s analytics.