- Tutorials / Mobile Web Development
- Monday, 8th Nov, 2010
Mobile browser growing rapidly since iPhone 3G launched in few years back. Nowadays, a lot of web designers / web developers start to optimize their website for mobile phone users. It’s not easy to optimize a website that compatible and accessible for multiple mobile phones. A mobile optimized website might looks good in iPhone, but might not fit well in Android or Symbian phone.
I’m sure that some of you might already start designing, optimizing your website for mobile phone, but no worry for those who haven’t start yet, following are some ideas for you to keep in mind when designing website for mobile phone.
Knowing your audience phone resolution can help you in designing your mobile website. Don’t expect your mobile optimized website might look same on different mobile phones. You should analyze who is your target audience and what kind of mobile phone they are using. Then prepare the specific style-sheet for specific mobile phone to ensure your website looks great in your audience phone. The following are some of the common screen resolution of mobile phone:
You should keep your mobile website’s layout as simple as possible. The screen of the mobile device is much more smaller if compared desktop, it’s hard to read and more scrolling will required, if you squeeze all your content into the small screen. The ideal layout for mobile phone is to use single column. (See image below)
Although most of the modern mobile phones allows users to zoom in and zoom out the web page, but there are still plenty of mobile phones do not have this ability. I’m sure that every web designer know that horizontal scrolling in web page is not a good practice, so you should avoid horizontal scrolling in your website.
The connection speed of the mobile phone might slower than desktop or laptop, if mobile phone user connected by using 3G. You should optimize the document size of your website, make it small and load fast, this is because it’s not only reduce the loading time needed and also can save the bandwidth’s cost.
Please keep in mind that, the screen of the mobile phone is small, so you should make your navigations and links easier to click on. Use bigger font for your navigations or links, and reserve more space between each links.
It’s a good practice to check your website by using emulator before it launch. You can preview and know how your website will look on other mobile phones. Below are the great emulators for your to preview your website:
Click the link below to see some of the great example of mobile (iPhone) optimized website:
You may also take a look on iPhone Native Apps design, when you are designing mobile optimized website.