I would test at the following resolutions (and their rotated equivalents since many devices support rotation, given below in PORTRAIT orientation):

240*320

320*480 (iPhone w/o Retina)

640*960 (iPhone w/ Retina)

800*480 (Android; from @Mavrik's answer)

768*1024 (iPad)

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.

Thanks, sounds like if I make sure it works at a minimum of 480 pixels wide, most users will be able to see all content without side scrolling.
–
JD IsaacksJun 27 '11 at 17:55

@John Isaacks I would look into Media Queries with CSS3 if you're going down the path I think you're going. You'll be able to develop one stylesheet for all of the sizes you're seeing.
–
NicJun 27 '11 at 18:16

@melee, good point, I have used that in the past.
–
JD IsaacksJun 27 '11 at 18:19

Hi Adel, welcome to Programmers.SE! We're looking for answers that go into a little more depth than a one liner and a link: can you elaborate and provide any expert insight into the problem?
–
user8Jun 27 '11 at 17:39

Actually, only the iPhone4 is 960x640. All other previous versions are still 480x320.
–
ShaunaJun 27 '11 at 17:53