S.

No Particular iPhone Android Blackberry

1 Screen Size 480 * 320 480 * 320 360 * 320

Site to check the screen resolution of various mobile http://cartoonized.net/cellphone-screen-resolution.php

2 Top Bar : Logo and Home + Back Button

Logo Left Align
Home + Back Button Right Align
3 Menu Always use Accordian menu
Image with Heading use small images and
4
Set the background image as per the device width smaller font size
Form Details :Where ever possible align all the
5 control to left because if we change the device
horizontally it won't distort the page that much N/A
6 Second Menu Left Align
7 Footer: Use simple text for footer Differenct CSS
Background Images:Avoid background images if you
8 can other wise you have to set the image height
according to different mobile browser

If we have a control such as listview, dropdown and

textbox and we want all of them to be of same width
8 then we required to make textbox width bit bigger Yes No Yes
then listbox and dropdown because listbox and
dropdown will have extra scroll bar and arrow at the
last
Icon and Text: Never combine image with Text for
any heading, tab bar etc.
9 Yes Yes Yes
Design both of them as a single image other wise
there will be an align issues with all the phone
Avoid Checkbox because check box won't look good
10
in Blackberry
11 User Agent string for different mobile http://www.mobilemultimedia.be/
12 Check the site performance report on http://www.w3.org/Mobile/
13 User Agent pluging for firefox https://addons.mozilla.org/en-US/firefox/addon/59/
14 Avoid HTML Frames and Tables Yes Yes Yes
15 Java Scrip for getting screen height and width <script type="text/javascript" language="javascript">
var res;
res = "&res="+screen.width+"x"+screen.height+"&d="+
screen.colorDepth;
alert (res) ;
</script>
 Naming convention for css and
Use same class name what you used for web in all sitename_iphone.css sitename_android.css sitename_blackberry.css
16 mobile css

Split Css into small small module instead of making

17 one big Css. So that loading of page will be fast
 Windows iPad PC

320 * 240 1024 * 768

een-resolution.php

Write different css for logo

PC Version of site works fine for iPad because of 1024 * 768 resolution
size and home n back button Any Design
menu Any Design
use small images and smaller
font size N/A

N/A N/A
N/A
Differenct CSS N/A

N/A

Yes

N/A

Yes

N/A

N/A
edia.be/ N/A
obile/ N/A
firefox/addon/59/
Yes
sitename_window.css