If I wanted to make a mobile version of a website, what are the most common screen resolutions that I should be testing on?
According to my Android Market stats the testing screens should be as follows:
Since the most avid mobile web consumers are iOS users, I also recommend testing on the iPhone 4 resolution (960x640) and the iPad resolution (1024x768).
Testing for lower resolutions isn't all that useful, since most people that buy such low-end phones, don't use mobile web all that much.
It depends on your definition of "mobile". ;-)
I would test at the following resolutions (and their rotated equivalents since many devices support rotation, given below in PORTRAIT orientation):
Can you make a design that will work great on all the available resolutions? Yes, but it'll take some work and probably some hacks for each size and browser type. At the moment, I'm only going to worry about modern phones in my mobile development, and since a modern smartphone usually has a good webkit browser, I'll target that (since it should have decent CSS/JS/HTML support). Older phones will be much more handicapped in what they will support, and so you may end up having to have several versions of your site in order to support old phones.
I agree with @Mavrik in that designing for the lower resolutions isn't really that useful anymore since you're going to have fewer and fewer devices in that class. But it doesn't hurt to see how painful things look -- just know that the ROI on making a site work on older phones isn't at all good.
So as we know, *iPhone * is still king, and it uses 960-by-640-pixels..
But there are a lot of small variations, such as the Motor. Droid at 854*480. There is not set rule.
On old phones(circa '08) it appears to be 640 by 200/360/480 & 320*240