Popular Screen Resolutions: Designing for All

In today’s world, there are a plethora of devices for people to choose from and it can be daunting to try to accommodate and build for the best experiences on all devices. However, it’s important to stay up-to-date with the most popular screen sizes and resolutions when designing web and mobile sites. A site that is optimized and responsive makes for an easier user flow and ultimately, an enjoyable experience for your audience.

Screen Size, Resolution, and Viewport: What does it all mean?

When you buy a device, you will often see both screen size and resolution listed in the specs. The screensize is the physical measurement diagonally of the screen in inches. This is not to be confused with the resolution, which is the number of pixels on the screen often displayed as a width by height (i.e. 1024×768). Because devices with the same screen size can have very different resolutions, developers use viewports when they’re creating mobile friendly pages. Viewports are scaled down versions of resolutions that allows sites to be viewed more consistently across different devices. Viewports are often more standardized and smaller than resolution sizes.

While desktop and laptop displays are in landscape orientation (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 must design for these differences.

Need help determining if your website is responsive? Use our free MG tool, Responsive Design Checker.

While desktop and laptop displays are in landscape orientation (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 must design for these differences.

Responsive Styling

It would be nearly impossible for businesses to design for each and every individual device. Instead, when programming responsive designs, developers often:

• Group the styling into the most typical device sizes for phones, tablets, and desktops. In this case, anything larger than 7 inches is usually displayed at desktop resolution or-
• Use breakpoints (defined pixel widths that the display will adjust layout based on screen size) dependent upon the design and layout

Sometimes, a developer might choose to combine both methods if they deem it necessary. We recommend starting by grouping typical device sizes together.

If you are a developer and are looking to generate the necessary styles to handle mobile or responsive styling, below we’ve included a snippet of CSS that could help. It’s important to note that these breakpoints are not fixed for all sites, and should only be used as a guide to get started:


/* start of desktop styles */

@media screen and (max-width: 991px) {
/* start of large tablet styles */

}

@media screen and (max-width: 767px) {
/* start of medium tablet styles */

}

@media screen and (max-width: 479px) {
/* start of phone styles */

}

Most Popular Screen Resolutions

Knowing that it is key to accommodate for the many different devices when designing websites, we have compiled a list of the most up-to-date devices with their respective pixel sizes and viewports below. We have also put this information into a handy downloadable PDF.

Desktops & Laptops

1024×768 pixels or higher

Got anymore tips or suggestions on how to handle different screen sizes and resolutions? Share with us on Facebook!