Scribd
Upload
42 views

Particular Iphone Android Blackberry

This document compares design considerations for mobile websites across iPhone, Android, Blackberry, and other platforms. It suggests using smaller images and font sizes to accommodate smaller screens. User interface elements like menus and logos should be optimized for mobile, with logos left-aligned and navigation buttons right-aligned. Form controls should generally be left-aligned for readability. The document also provides recommendations for CSS naming conventions and performance testing tools.

Uploaded by

Ashish Sharma
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as XLS, PDF, TXT or read online on Scribd
42 views

Particular Iphone Android Blackberry

This document compares design considerations for mobile websites across iPhone, Android, Blackberry, and other platforms. It suggests using smaller images and font sizes to accommodate smaller screens. User interface elements like menus and logos should be optimized for mobile, with logos left-aligned and navigation buttons right-aligned. Form controls should generally be left-aligned for readability. The document also provides recommendations for CSS naming conventions and performance testing tools.

Uploaded by

Ashish Sharma
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as XLS, PDF, TXT or read online on Scribd
You are on page 1/ 4

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

You might also like