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.
Multiple Style-sheet for Multiple Devices
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:
- 128 x 128
- 128 x 160
- 240 x 320
- 320 x 480
Keep Web Layout As Simple As Possible
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)
Avoid Horizontal Scrolling
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.
Loading Speed Of 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.
User-Friendly Navigations And Links
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.
Check Your Website By Using Emulator
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:
- Opera Mini Emulator: A native app that install on your desktop and runs exactly the same code as its mobile phone version
- Android SDK: The SDK contained the emulator, for you to preview your website in android devices.
Great Example of Mobile Optimized 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.