As a webmaster, you typically concern yourself with how your site would look on a 17" desktop monitor or a 15" laptop screen, etc. But have you ever thought about how your site would appear on various types of mobile phones? Mobile phones have a much smaller screen than PC's, different aspect ratios, and a very different navigation system. Here's how a site would look on a mobile phone if it were only designed for a PC browser:
Fig 1: A site designed for PC browsers as viewed on a mobile phone
The user would only see a portion of the web page without scrolling vertically and horizontally. Navigating through the various components of the page and interacting with the UI would be very cumbersome, and chances are images and logos wouldn't render correctly.
But why should webmasters care about how their site looks on these alternate displays? Aren't websites meant to be browsed on desktop computers and laptops with internet connections? The rapidly evolving answer, especially in India, is only sometimes. In a country where internet penetration is low, mobile penetration is quite healthy at almost 300 million. And some estimates put the number of web-enabled phones (phones capable of browsing your website) at more than the number of PC internet users in India. So as a webmaster whose major goal is maximize traffic to your site, you should definitely aim for your website to appear on mobile phones as follows:
Fig 2: A site designed for mobile phones
Now the user can see the entire content of the page without having to scroll, can navigate between the various parts of the page and can interact with the UI very naturally. So how can one build a mobile-friendly site? Here's a list of top concerns and tips/tricks, which we plan to elaborate on in subsequent blog posts:
- Markup language - Can the HTML site carry over to the Mobile, or should the mobile site be in XHTML, WML or CHTML?
- Form factor and navigation capabilities of the target handset - Screen size, stylus or touch-screen needs to be taken into account
- Automatic "transcoders" - Some gateways like Google Search, transcode your desktop site to a mobile site and can be leveraged
- Fancy Web 2.0 sites for Mobile - It's now possible on more and more Mobile browsers to leverage Javascript, Ajax and audio/video
With the growing mobile data usage in India and other countries, you can't afford to miss reaching an important (and for millions of users the only) internet access device. Now it's not as much work as you might think - over the next few weeks, we intend to show you how to make your site mobile-friendly with minimal customization for each platform.