Is 480px screen width a legitimate design target for mobile web applications in late 2009?

Question

I am working on a web application that will target modern browsers or recent smartphones. When I look at the different resolutions, I see 480 a lot. For example:

• 480x320 is used by the iPhone and Blackberry Bold 9000. This appears to be a standard called Half VGA (HVGA), which has a 3:2 aspect ratio and half the pixels of VGA.
• 480x360 is used by the Blackberry Curve 8900, Blackberry Bold 9700 and Blackberry Storm 9550. It has a 4:3 aspect ratio.
• 480x854 is used by the Motorola Droid. This appears to be one of the resolutions attributed to Wide VGA (WVGA). It has a 16:9 aspect ratio.

This tells me that popular smartphones in late 2009 are converging on 480px for one of their screen dimensions and trying to match a standard aspect ratio.

The question is how legitimate is using 480px as the target width in my design. Are there any major negatives to this design?

Answer 1

That's not unreasonable. The main issue I see is that 480px is the width only in landscape orientation, not in the (sometimes default) portrait. I know that it is not a big deal these days to rotate one's phone, but this is something to think about.

Answer 2

Modern smartphones use browsers that (usually) support the viewport meta tag.

The viewport tag scales the browser window to fit the content. That means you can scale up for small screens (ie stretch) or scale down for the latest tablets that have near desktop resolution.

It looks like this:

<meta name="viewport" content="width=320px" />

That will zoom in or out to fit your device's viewport.

The real constraint is pixelation - if you have an Acer CloudMobile or a Samsung Note with a resolution of 800x1280 you'll be stretching images 3 times their regular proportion in portrait view. (Because text is vector is will look fine when stretched.)

For this reason I recommend using a higher page resolution (I usually aim for around 800 pixels) and scaling down for low res devices rather than scaling up for high res devices.

Answer 3

240x320 is the new baseline for mobile phones. For high end units, 480 would be the correct width to aim for.