Mobile Device Design and Dimensions

In current market, everybody having smart phone and want to surf website using mobile. Apparently this trend comes from largely used Apple Iphone. Apple introduced new era for using mobile device and people are using smart phone…

Dimensions for Mobile Design.

Rapidly change mobile market, Screen resolution and dimensions could be changed. The life time of mobile device is much smaller than desktop application.

Resolution PPI(Pixels per Inch) Devices
320×240
  • Blackberry Devices: Curve 8530, Pearl Flip
  • Android Devices: Motorola Charm, Sony Ericsson Xperia X10 Mini, others
  • Symbian OS Devices: Nokia E63, others
320×480 164ppi
  • Apple OS Devices: iPhone3, iPod
  • Android devices: HTC Dream, HTC Hero, Droid Pro, i7500 Galaxy, Samsung Moment, others…
480×360 Blackberry Devices: Torch, Storm, Bold
360×640 Symbian OS Devices: Nokia N8, Nokia C6-01, others
480×800
  • Android Devices: Liquid A1, HTC Desire, Nexus One, i9000 Galaxy S, others
  • Maemo (Linux) Devices: Nokia 900, others
  • Windows Mobile 6 Devices: Sharp S01SH
  • Windows 7 Phone Devices Venue Pro, Samsung Omnia 7, HTC 7 Pro, others
768×1024 132ppi iPad
640×960 326ppi iPhone 4 (Should be mutiply 2 by iphone3 Dimensions)
1280×800
  • Android Devices: Motorola Xoom, Samsung Galaxy Tab 10.1
  • Windows OS Devices: Asus Eee Pad EP121
  • Apple OS Devices: Axiotron Modbook

Designing for Mobile Device

CSS2 allows you to specify stylesheet for specific media type such as screen or print.Now CSS3 making more efficicent in media query

View area smaller than 550px…

@media screen and (min-width: 500px) and (max-width: 550px) {    .class {      background: #ccc;    }  }

If you want to link to a separate stylesheet, put the following line of code in between the <head> tag.


Additional Resources :-
http://www.uxbooth.com/blog/considerations-for-mobile-design-part-2-dimensions/
http://www.lukew.com/ff/entry.asp?1142
http://webdesignerwall.com/tutorials/css3-media-queries

This entry was posted in Categories, Mobile Design. Bookmark the permalink.