2010 is predicted to be the year of mobile and mobile web browsing is expected to increase this year. To help you build a website that is accessible not just to normal web users on desktop or laptop computers but also to mobile users, let’s have a look at some of the tips on building websites for mobile browsers. Here, we will be looking at using HTML instead of WML.
1. Making the header area stretchable
One of the most common ways to make the header stretchable is to use a background image inside a container that is set to 100% instead of a specific pixel and have the background on repeat. However, please note that it will not work for ALL mobile browsers because some of the very low-end mobile browsers doesn’t support css background-image property. (But you can ignore those very low-end mobile browsers for this requirement as long as the rest of the content on the site is readable)
2. Styling <select> elements and other input elements
3. Using the same markup for web and mobile
The first thing you will need to look at if you’d like to use the same markup for both web and mobile is to reduce the size of the page to a recommended page size for a mobile browser. Mobile browsers have a memory limitation and therefore, they have restrictions on the largest page they can accommodate. To give you an example of acceptable page sizes, mobile version of Facebook homepage is 10K and Facebook friends page is between 15 – 20K. (The size of a page also includes the size of all the requests that a page makes, such as, css and images.)
4. Best practices on writing HTML markup for mobile browsers
Have a look at this document by the World Wide Web Consortium (W3C) which covers best practices on delivering web content to mobile devices.
5. Catering for all mobile devices
Catering for most (if not all) mobile devices should not be an issue if you follow the best practices. After all, the aim of delivering web content to mobile devices is to make the content accessible to all but not necessarily to provide a rich UI for each device.
Before jumping into designing a mobile version of your website, have a look at a few websites that are optimisied for mobile devices for an inspiration. There are over 100+ mobile website templates by template monster and you can view the live demo of each template to get a feel for how a mobile site works.