What is the standard mobile screen resolution?

Smartphones, Web Design

  • Helena
  • 10 May 2012
  • 38 comment
  •  
  •  
  •  
  •  
  •  
  •  

Designing for the mobile web is not about finding new ways to fit the bells in whistles in into these devices. Its about deciding what is valuable to the site and what is expendable in this format. This often means removing extraneous elements and really thinking about what’s valuable to the core of the site.

Phones come in a variety of sizes, shapes, operating systems, web capabilities. This is important to know when developing for mobile platforms, but what’s more important is to know how many of these people are really in your target audience.

HTC Touch Diamond2 and Samsung I8000 Omnia II are using 480 x 800 pixels (WVGA) display resolution. My brother just bought LG KM900 Arena. It has 3.0 inches 480 x 800 pixels display resolution too. Pretty much like the standard for smart phone nowadays.

The trend in display size is moving towards a common resolution of 240×320. It’s becoming something of a standard in the same way that modern desktop web sites are optimized to display at roughly 1280×800. 75% of phones provide a screen resolution of 240×320 pixels or more. This number is only increasing. It will become more of a standard. Keeping 240 pixels as your optimal screen width will ensure the best user experience for the majority of mobile web browsers.

This doesn’t mean you should strictly code widths of 240 pixels into your divs or images, it just means you should design with the thought in mind that most people will be viewing your site at this resolution. A good standards compliant layout will adapt to many screen sizes.

While width is the real obstacle in designing for mobile platforms, height doesn’t seem to be as challenging. Touch interfaces make navigating and scrolling through content a breeze. Common sense should tell you not to drop a 5 inch high header at the top of your mobile site, but height of site is generally not much an issue. Those who frequently browse the web from well-equipped devices are accustomed to scrolling.

You need to consider your site visitors’ most common screen size and resolution. Your site should work on the widest range of mobile devices that your visitors might be using. Common resolutions for standard cell phones include 101×80 pixels (many Sony Ericsson phones), 128×128 pixels (some Samsung phones), and 120×160 pixels (many Motorola phones). For smartphones, there’s a lot more to work with. The iPhone has a 320×480 pixel screen; the HTC Touch Pro has a 480×640 pixel screen; the Palm Pre has a 320×480 pixel screen; the BlackBerry Storm has a 360×480 pixel screen; and the HTC Venus has a whopping 800×480 pixel screen. Many of these screens can comfortably display a standard website.

  • 72% have a screen resolution of 240×320 or more
  • 68% strictly equals to 240×320

This resolution is good enough to have a decent experience on a properly designed mobile site: it can display enough text on one screen, and it can display many button and links without scrolling too much, or it can even display a readable full size image.

Today, the average handset isn’t a barrier anymore for mobile web browsing. And with the short period of mobile renewal for the user, soon most users will have a web capable phone.

38 Comments

  1. Tulsa 16/05/2012 at 02:20:50 Responder

    Thank you for this post and the useful information!

  2. Megan 16/05/2012 at 02:22:06 Responder

    I think there is a trend toward large screens in mobile phones absurd. Eventually the phone will be as big as it was when it was invented!

    • Anthony S. 30/05/2012 at 00:08:40 Responder

      I totally agree with you. It’s a madness!

  3. Sophi 16/05/2012 at 02:22:37 Responder

    Cool advices for designers. thank you

  4. Paola Subernel. 24/05/2012 at 06:02:13 Responder

    Great! Wonderful information to analyse features mobiles.

  5. Toni Strasgter 24/05/2012 at 06:03:33 Responder

    Thanks to this analysis of the mobile resolutions. I needed this information to do a job and it was very useful aid.

  6. Sofi Strasgter 24/05/2012 at 06:05:40 Responder

    The mobile development is booming today and is constantly evolving. We need items like these to understand the new trends and developments.

  7. Leonor Paus 14/06/2012 at 02:19:23 Responder

    Thanks for highlighting technical aspects needed to create a mobile website.

  8. Andy W. 13/07/2012 at 21:12:48 Responder

    A wonderful way of explaining very important information. Thank you so much!

  9. Todd D. 20/08/2012 at 13:47:12 Responder

    Great article. Thanks for the info. I didn’t realize how popular a 240 pixel width is until now. Anyone think we’re headed to 320 pixel as the standard?

  10. Art 21/08/2012 at 00:30:11 Responder

    “72% have a screen resolution of 240×320 or more”
    “Population” is number of phones in market not number of users, right?

  11. Christopher 13/09/2012 at 09:04:54 Responder

    Please provide sources/references for the numbers!!!

  12. Jonay 27/09/2012 at 01:54:26 Responder

    Thanks for the post. Is there a web where you can see them all and tablets as well? I have been looking and I can not find one. Thanks

  13. J. M. 06/01/2013 at 12:14:05 Responder

    I can’t believe a site about mobile design and its article about screen resolutions is totally impossible to read with an iPhone 4S browser. The irony is killing me. XD

    Probably a good article, though.

    • Helena 07/01/2013 at 00:14:11 Responder

      Hi,
      Although our website is completely adapted to mobile, we’re still working on the blog part. Thank you for your patience :)

  14. Quotex 19/01/2013 at 21:41:08 Responder

    Thanks for this article. I currently am developing a few free open-source games for python (then ported to java, and then android devices) with the intent of making them playable on any screen size. I needed to know what the minimum playable size SHOULD be, and now that I know 240×320 is the most common, I have no problem creating 240×320, 320×480, and 480×800 versions. This article did me a solid

  15. Fernando Freitas 30/01/2013 at 08:16:26 Responder

    Please provide sources/references for the numbers!!! [2]

  16. Peter Drinnan 12/02/2013 at 07:40:11 Responder

    I usually use a mobile css file that sets the main page wrapper to 320pixels. This is in order to make text readable. It only works however if you have a VERY important meta tag in your page:

  17. Bauke Janssens 18/02/2013 at 05:15:52 Responder

    Hi,

    Do you also have a list with the bars on top or bottom that reduce the available browser-height? That would help me even more!

    Thank you!

    • Helena 19/02/2013 at 00:03:04 Responder

      Hi Bauke,
      I’m afraid we don’t have that information.

  18. Flynn White 08/03/2013 at 03:37:45 Responder

    Good and useful article.

  19. Rose 08/03/2013 at 03:41:47 Responder

    That is a very good article. Congratulations.

  20. Kedar Lasane 08/03/2013 at 06:34:34 Responder

    Could you tell me Samsung Ace Standard Resolution?

  21. Maciej 04/06/2013 at 06:31:43 Responder

    I don’t understand one thing. You say in the article that
    “72% have a screen resolution of 240×320 or more [and] 68% strictly equals to 240×320″

    I understand that this data is at least one year old now but did you want to say that only 4% (72-68) of phones have screen resolution bigger than 240×320? All these iPhones, Samsungs HTCs, make only for 4% of the market share? It sounds unbelievable.

    • Helena 05/06/2013 at 00:38:00 Responder

      Hi Maciej,
      I think you misunderstood. It’s 68% within that 72%, not of the total. Although, as you said, figures may be a little out of date.

  22. Amida V. 21/08/2013 at 04:06:39 Responder

    Although outdated, that Samsung looks very nice!

  23. Anastacia J. 13/09/2013 at 07:23:41 Responder

    That samsung diamond was awesome for the time when it was rolled out ;)

  24. Cyrill P. 22/09/2013 at 23:09:23 Responder

    My samsung galaxy mini has quite a small screen resolution, but I can browse the internet without any problems.

  25. Sean 23/10/2013 at 05:37:59 Responder

    Phone should be used for calling, tablets and desktop/laptops should be used for browsing.

  26. Alice U. 05/11/2013 at 07:14:09 Responder

    That HTC in your article looks.. weird.

  27. Paul 23/11/2013 at 09:55:35 Responder

    Just what I was searching for, Helena, thank you. I’m tweaking the responsive Adsense (beta) to stop it falling off the edge of the display and this is very helpful, particularly the breakdown of percentages. It’s finding the balance between best and optimal and if only 32% (and dropping) are using tiny screens, common sense says they aren’t web surfing with their phones and if they are, they’ll soon upgrade to save their eyes!

    • Helena 25/11/2013 at 00:46:58 Responder

      I’m glad you found it useful, Paul. Thanks for the comment! :)

  28. Gaurav Chauhan 31/03/2014 at 02:21:01 Responder

    Thanks for taking time to write behind this list of phones sizes, it couldn’t have come at a more serious time!

  29. Prakash 10/04/2014 at 03:16:48 Responder

    Hi Helena,

    Could you please share the top downloaded resolution of images which is downloaded across handsets.

    • Helena 13/04/2014 at 23:49:10 Responder

      Hello Prakash, I’m afraid I don’t have that information.

      Best,

      Helena

Insert comment