Popular Screen Resolutions: Designing for AllFebruary 18th, 2013 | |
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
First & second generations: 1024×768
Third generation: 2048×1536
- iPad Mini
- 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