16 Jan, 2010
Tips on building websites for mobile browsers
Web Development » Tutorials » Tips on building websites for mobile browsers
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
Some of the common CSS styles that are often used for <select> elements are background, font-family, font-size and color. However, many mobile browsers handle <select> elements differently, some displays the list in a new page, some displays it like a web browser does, some displays it like an iPhone does. Therefore, it is best not to go too crazy with styling of <select> elements (or any other input element for that matter). Many people try to modify the look and feel of <input> elements using jQuery, however, jQuery requires Javascript and it will not work on most mobile devices, apart from an iPhone.
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.
