Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

If I wanted to make a mobile version of a website, what are the most common screen resolutions that I should be testing on?

share|improve this question
    
This question might also be appropriate on sqa.stackexchange.com –  Ethel Evans Jun 27 '11 at 17:44
    
@Ethel, thanks, I am not a member of that site yet. New SE sites are popping up so fast its hard to keep track. –  JD Isaacks Jun 27 '11 at 17:49
add comment

3 Answers

According to my Android Market stats the testing screens should be as follows:

  • The most common is (still) 480x320 resolution of pre-4 iPhones and most of middle-range Android/Nokia devices
  • Followed by 320x240 of the low-end Android (HTC Wildfire, HTC Tattoo...) and older Nokia Symbian devices
  • Followed by 800x480 of the new Nokia and Android devices (HTC Desire, Galaxy S, Nexus One...)

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.

share|improve this answer
    
Your last paragraph only holds true if your market isn't Africa or India. –  darryn.ten Aug 21 '12 at 7:09
add comment

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):

  • 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.

share|improve this answer
    
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 Isaacks Jun 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. –  Nic Jun 27 '11 at 18:16
    
@melee, good point, I have used that in the past. –  JD Isaacks Jun 27 '11 at 18:19
add comment

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

share|improve this answer
3  
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? –  user8 Jun 27 '11 at 17:39
    
Actually, only the iPhone4 is 960x640. All other previous versions are still 480x320. –  Shauna Jun 27 '11 at 17:53
    
Ah I see :) Thanks a lot Shauna! –  Adel Jun 27 '11 at 23:45
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.