Article Header: Popular Screen Resolutions

Popular Screen Resolutions: Designing for All

February 18th, 2013   |   By Media Genesis   |  

To ensure they are built for the best experience on the most devices, it’s important to be aware of the most popular screen sizes and resolutions when designing web and mobile sites. The more your website is accessible and easy to use, the more people will be able to view and use it. The more enjoyable that experience, the more people will return to the website and want to use it.

Screen Size vs. Resolution
The screen size is the diagonal measurement of the physical screen in inches, while the resolution is the number of pixels on the screen. The resolution is displayed as width by height (i.e., 1024×768). Also, while desktop and laptop displays are in landscape (wider than tall), many mobile devices can be rotated to show websites in both landscape and portrait (taller than wide) orientations. This means that designers and developers, in some cases, must design for these differences.

Most Popular Screen Resolutions

  • Desktops & Laptops

1024×768 and higher

  • iPhone

5: 1136×640

4S: 640×960

3GS: 320×480

  • iPad

First & second generations: 1024×768

Third generation: 2048×1536

  • iPad Mini

1024×768

  • Android Phones & Tablets

Most phones are 320px wide or 360px wide, and most tablets are 800px wide. When designing for them, however, it is typical for developers to break them into the following groups based on their Density-independent pixel (dp), which is the minimum screen size.

Small screens: 426dp x 320dp

Normal screens: 470dp x 320dp

Large screens: 640dp x 480dp

Extra-large screens: 960dp x 720dp

Posted in Design, Mobile, News.
Related Articles