Mobile design guidelines
With the number of people using the web through their mobiles continuously rising, also increases the need of good sites which are optimized and built specifically for mobile devices. In this post you will find valuable information about ways to design your web site for the mobile audience and ensure that users receive a satisfactory experience while browsing. The basic guidelines that should be followed are provided below:
1. Find out the right screen size The common phones available can be roughly categorized in several categories based on their screen size:
- 128 x 160 pixels
- 176 x 220 pixels
- 240 x 320 pixels
- 320 x 480 pixels
If you stick to these screen sizes you can guarantee that many people will be able to view your site. Maybe the most important thing here is to make sure the content is organized vertically, as the viewport has very limited space. Another good point to mention – just use compliant xHTML and not WML, unless your target group is the old rigid Nokia 1100 
.
2. Choose your markup language Continuing with the latter, you have to make a decision on what markup you’ll be using. So is it going to be WML or xHTML? WML(Wireless Markup Language) was used primarily in the early days of mobile web devices and is now considered old and obsolete. Hand by hand with the WAP protocol it was the only way to access the Internet through mobile devices. Conversely xHTML is a modern “language” accepted everywhere and being approved as a standard. Most new devices understand it and can render xHTML pages similarly to your favourite desktop browser.
3. Validate your web site Why is web site validation necessary? Firstly, because erroneous markup is removed and this guarantees user agents won’t receive input they won’t understand. For example if you miss to provide a valid mobile document type definition like this one -
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
, many browsers will fail to process the document properly and produce unexpected results. You might provide a valid DTD, but you need to write your markup according to the definition. Basically there are subtle differences between the various DTD’s, here’s a list for the interested, of the most popular ones to choose from:
- XHTML Mobile Profile 1.0
- XHTML Mobile Profile 1.1
- XHTML Mobile Profile 1.2
- XHTML Basic 1.0
- XHTML Basic 1.1
As for the validation locations, there are two places, the first one is of course w3c – http://validator.w3.org/mobile/ , with their mobile validation checker and the second one – http://www.ready.mobi , they have built a really nice validation engine which provides detailed reports on areas which seem to be problematic or cause errors.
4. Use short domain names. As we all know typing is not as easy on mobiles as it is on a desktop machine. Less typing for the user actually means less frustration here. Wouldn’t it be easier to write mysite.mobi instead of mygorgeousmobilewebsite.mobi ? Of course yes, and a good thing to do to avoid the inconsistencies in names between the normal version and the mobile version Is to use a subdomain – example.com and mobi.example.com suits our purpose just fine.
5. Keep your page size small Limited bandwidth and processor power is something that distinguishes mobile computers from regular ones. If you make a request for a heavy spiced up web page and the packet sizes that you receive by the mobile operator are small ones – the only thing that you’ll guarantee for the visitor is the slow browsing and annoying, painful interactions. Do not use too much images, prefer repeated backgrounds where necessary or just plain colours – this could greatly reduce the overall size and increase download time by the client. In conclusion we can say that if you pay proper attention to the guidelines provided above during your development, you’ll know your visitors won’t run away from your mobile site disappointed.
Posted: April 22nd, 2009 under Development.
Comments: 2
Comments
Comment from Catherine
Time: April 22, 2009, 9:42 pm
Keep up the good work.
Comment from aaaaa@a.com
Time: June 11, 2009, 7:08 pm
Write a comment