Web Design for Smart Phone - Pixel Size

Question

I need someone to help clarify my understanding regarding pixel size on new phones with high density screens. Since, it's throwing a curve ball into my web design.

My initial understanding about smartphones was that the pixel size was roughly 480 x 320, which made designing easy, since pixels were still the same pixels.

However, some smart phones are double (or more) than this. I believe the iPhone is truly double at 960 x 640. My Galaxy Nexus is 1280 x 720.

Now, this works just fine when using %'s. However, there are many things I wanted to use fix pixel values for. For instance, many height values don't need to be in %s. Additionally, if the height is fixed, some items, like logo, icons, some pictures, I won't want being stretched out when the width widens... so these will need a consistent value.

However, how do I handle this when a pixel is not really a consistent physical measurement?

It's easier when using an example, so if someone could explain it to me taking, say icons as an example.

When I log onto Facebook on my phone, I see those three notification icons in the navigation bar (friend requests, messages, and something else). These are fixed. Whether I have my phone upright or on it's side, they stay the exact same size. The only that changes with the width is the space between... essentially what I'm working for.

What would the measurement on these icons be? For one, I know the standard icon is usually 16x16. So, would they need to be 32x32 on these high density smart phones? However, they also don't seem to be the same size as my 16x16 icons I see on my desktop. They look to be more 12x12 perhaps. So, not sure, but I'd think there is a different "standard" icon size for smart phones then for desktops (what would that be?).

Anyways, I already have CSS identifying that a mobile phone is being used to attain my mobile layout. However, must I go a step further for it to recognize the pixel density and then adjust my fixed values to be, in this case, double? Or is there another / better way?

Any and all help is appreciated. I'm a bit stumped and there's not really a great deal of information on this out there. Thanks and sorry for the lengthy post!

Solution

List of pixel density for devices: http://www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/ your problem is probably the change in ratio.

Here is a nice article covering some responsive research which I personally like to reference

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Skipping to the end; the iPhone 4 Retina display for example is double the pixel density and here is an example from the above article of targeting it (haven't tested) http://thomasmaier.me/blog/2010/06/23/css-for-iphone-4-retina-display/

and another article giving a bit of info on having to make 2 images with different ppi http://bjango.com/articles/designingforretina/

I personally use Twitter's Bootstrap & its Responsive plugin for the layout of the design using CSS: http://twitter.github.com/bootstrap/scaffolding.html#responsive