How to make Mobile website like m.yahoo.com (Mobile Version)?

Question

I'm new to Mobile Site Development I want to develop a mobile website and I'm highly impressed with the (m.yahoo.com). Can any one give me any idea how can I be able to make that type of mobile website? Which technologies are highly required by that type of development for mobile website?

Answer 1

There are many ways in which you can do that. But before that, you need to consider some things;

1. Are you looking to have 2 separate domains for desktop and mobile (like www.yahoo.com AND m.yahoo.com)
2. How is your design going to look like in each view ?

The above are important decisions to make, as there are constantly new devices (mobile/tablets,etc) which are coming up in the market. So you need to design something which can be easily extended in future.

Talking of which, there is one very good approach to design mobile websites. It is called as Responsive Web Design (or fluid design) Here, you do not hard code any dimensions (width/height/padding/margin,etc) and specify everything in % (in your CSS) This ensures that the layout would adjust itself according to the screen on which it is viewed on and thus is not tied to any specific device.

Apart from that, you would also need to know about viewport for mobile devices.

Apart from that, for Javascript, you can consider libraries like jQTouch, jQuery Mobile, Sencha Touch (for more complex sites) and even basic ones like flowplayer plugins.

Please let me know if you need any additional info.

Answer 2

There is one disadvantage in having a different domain for your mobile website from the desktop/tablet website. It makes sharing content on the web difficult. If you share some URL on a mobile site, all users accessing that URL will be shown the mobile version even if they open it on a desktop.

If you have used django to create the desktop version of your site, you can use something like django_mobile to serve the mobile version with the same URLs. It sniffs the user-agent from the HTTP headers and serves the appropriate version. Some people think that this is not so reliable and prefer the former method.