Building Mobile Friendly Websites from Scratch !

March 31, 2009 – 7:51 am

Are you looking ahead to build a mobile website? May be you need to first evaluate whether you really need a mobile version of your site. If you have concluded that you really need one, read the rmaining of this post.

‘Building Mobile Friendly Websites’ was one topic presented at the India SearchMasters conference at Google India on 28th of Feb 2009.  Presenter Ankit Gupta from Google gave a very good insight to this topic, which made me digg a bit deeper into this subject. Thats why this post !

Why you need to build a website for Mobile devices?

When I write this post, I am parallely logged in to GMail from my SonyEricsson’s Opera Mini browser! Well I am not the only one who use internet on mobile, there are many people who use internet on mobile. If you think you are in India and it would cost a lot to use internet on mobile, you are wrong. I am paying just INR 99 to my operator Airtel per month to use unlimited internet time on mobile!

People use internet on mobile phones for various purposes, to check email, check stock quotes, browse websites, find a location on maps on mobile etc. You can even book rail tickets in india through mobile ! (Thanks to IRCTC’s java mobile app).

Mobile is a very tiny device which people can carry effortlessly, so adding internet on mobile can make people more comfortable while on the move, and they do browse websites on the move.

Suppose they know your website and they are regular visitors to your websites from a desktop/laptop, but while on the move, dont you think that they might visit your site on mobile? And dont you think that you need to pay attention to these visitors from mobile, when the numbers of these mobile internet users are growing worldwide?

Okay.. If you are convinced about the need to make your website mobile friendly, I have put in some information for you. Read on..

Is a mobile website different from a normal website?

I would like to post some myths and explanations here first

  1. Mobile websites use .mobi extension
    .Mobi is just another domain extension.
  2. Mobile websites are built on another domain, separate from the main site – This isn’t necessary, you can run mobile websites on the same domain using some server tricks or on a subdomain

Why a Mobile website is different from a main website?

Mobile phones are getting smarter and smarter every day, but still there are few limitations of a mobile browser

  1. Screen Size – This is a major limitation on a mobile website, you can’t fit a normal webpage on a mobile browser.
  2. WAP/XHTML compliance – Initial mobile browsers render only WAP pages, new mobile phones do render HTML/XHTML content.
  3. JavaScript and Flash – Only modern mobile browsers execute JavaScript and have Flash lite to play flash content.

Putting Everything Together

Its very difficult to build a single website which run well on any browsers, as a developer one would have experienced the difficulty to make a cross browser compatible website.

Building a Mobile Website

So, a mobile website is not just a set of WAP files which can run on any browser, a good mobile website is one which renders in a WAP browser as well as run on a high end mobile browser, making use of JavaScript and Flash too.

How to make it possible?

For making an effective mobile website, one need a right mix of both server technologies as well as front end technologies such as HTML, CSS, JavScript etc.

On the presentation side, one has to build web pages which is very lightweight. It takes time to load on a mobile device with a slow connection, hence one has to be very careful not to add too much of decorations to the page and increase the size.

As the mobile devices have lesser screen size, we need to add content blocks vertically than horizontally. The traditional left navigation, content, right navigation will not work good for mobile phones and it would be an extra burden for the user to use the horizontal scroll to see content hidden on the right navigation.

Stick with a validated HTML code, it helps the browser to render the page properly.

So the core system must contain libraries which identify the type of mobile browser and decide what type of content which can be served to the browser. Say on a wap browser, the server responds with only wap content and on a browser like Google’s Android browser, respond with an interactive website content with JavaScript.

As I told server side libraries, dont panic that you need to create them your own, there are something like WURFL to make your job easier. Check out http://wurfl.sourceforge.net

WURFL is an XML configuration file which lists all the available mobile devices and its properties. One can match the user agent string to take out the properties of the device which is creating the web page request. You can identify the device properties such as display width and height using this file, along with other important parameters such as javascript and flash compatibility. Knowing these properties, serving a suitable version of mobile content becomes easy.

When someone types www.yourdomain.com from a mobile device !

As I explained earlier, a mobile website need not necessarily be hosted on anoter domain. In this case, when someone types yourdomain.com from a mobile browser, you can use the WURFL library to identify the browser and redirect the visitor to a mobile friendly page at m.yourdomain.com, or even you can show a mobile friendly page on the same URL without redirecting the visitor. I would prefer the second option, than using a different subdomain for mobile. Rest of the action continues on the mobile page. Optionally you can add an option to the visitor to switch back and forth between the mobile version and the standard website – this is again preferred.

This post is an attempt to clarify the doubts others raised when I was at the Indian Search Masters 2009 at Google India Bangalore. Please leave your valuable feedbacks and queries here, that would help me enhance this content better ! Thanks!

  1. 4 Responses to “Building Mobile Friendly Websites from Scratch !”

  2. i’m just now redesigning my site and want to do a mobile one as well. i surf with Opera Mini for the phone and it of course does most of the work using proxy servers. still, i’m going to do a mobile version for the redesigned site. this post is therefore exceedingly useful to me. thx, you are appreciated.

    By johnson kitololo on Sep 30, 2009

  3. Hi

    this is really great resource for those who is planning start mobile version of the website.

    thank u for great articles.

    prajosh

    By prajosh on Mar 23, 2011

  1. 2 Trackback(s)

  2. Apr 17, 2009: » WebReviewer.info has Mobile friendly version » Web Reviewer
  3. Dec 17, 2009: Do you need a mobile version for your site? » SEO Lion’s Blog

Post a Comment