Recommended Screen Resolution for Web Design

Website visitors use a wide range of screens and devices, but designers cannot possibly prepare mockups for every use case. You need to choose what screen resolutions to use for web design files. But what is the best screen resolution for web design? Is there even one?

We work with many digital agencies as their WordPress development agency of choice, and the design files that we receive range in size. In this article, I go through what’s important to think about when you choose the screen resolution for your web designs.

The quick answer

There’s no standard resolution for web design that is best for all cases since websites need to consider how their audience is using the site and what their design concept is.

But to give you a quick answer, the most common design file resolution used by the digital agencies that we work with is 1440px wide, with the main content container that is 1140px. But 1920px is also very common, so read on if you want to know more about which one you should opt for.

“The most common design file resolution used by the digital agencies that we work with is 1440px wide, with a main content container that is 1140px.”

Most common question: what about Retina displays?

The most common misconception when choosing a resolution for web design is that the files need to be twice the size to ensure all files look good on Retina displays where the pixel density (or pixel ratio) is higher.

However, for web developers, this is not a big deal, as long as the images and icons are either supplied in higher resolution (within the design file or separately) or vectorized. For everything else, a developer will want to see the “CSS pixel” dimensions.

CSS pixels is a concept used to standardize web development that disregards what pixel density your screen has and works as a common language for devices and web browsers to read your design. Here’s how it works:

Basic concepts behind responsive websites

To dig deeper into the topic, we first need to cover some basics of how responsiveness works on most websites. If you’re already familiar with the concepts of breakpoints, @media screens, and CSS grids you can scroll to the next section.

The CSS Grid

To position items on a website, designers and developers use a grid with a predefined number of columns and gutter space between these columns. A common setup is to use 12 columns and 30px of gutter, but it’s up to the designer to choose.

“A common setup is to use 12 columns and 30px of gutter.”

Together, these columns make up 100% of the main container of the page, which can in turn vary in size depending on the browser window size. This floating definition of object sizes helps to avoid cropping them on smaller window sizes and having to scroll horizontally to see what falls outside the frame (think of a 900px wide image on a 640px screen).

It’s common to set a maximum width for the main container to e.g. 1280px or 1024px to not stretch the content too much. Instead, the browser window will center the main container and show a background color on each side of it.

It’s very important for web designers to position objects on the grid if they want to remain good friends with their developers. It also helps with consistency in alignment on the page, so it should be in their best interest as well.

Screen sizes and breakpoints

Since the columns of a grid are defined in % and not with a fixed width, the columns will become really narrow on small screens and the content will need to cover more columns to look good. The way to tackle it is to adjust the object size definitions depending on the browser window size.

The types of screens used for viewing websites can roughly be divided into four categories:

1. Large desktop screens
2. Laptop screens
3. Tablets
4. Mobile phones

When developing websites, a developer will define ranges of screen resolutions that correspond to these types, or some of them, that are used to determine how to display the content. The width limits for these ranges are called breakpoints. You’ve probably seen how the content on a website will rearrange itself at certain widths of your browser window. These are the breakpoints.

“You’ve probably seen how the content on a website will rearrange itself at certain widths of your browser window. These are the breakpoints.”

A developer could for instance define a block of text to display across 4 columns on laptop screens and large desktop screens, but then 6 columns on tablets and all 12 columns on mobile phones to ensure the text is easy to read on all screen sizes.

In the CSS files, the developer defines the sizes, or breaking points, using different Media Screens, which are predefined sizes of browser window sizes measured in CSS Pixels. Many standards use only three groups–desktop, tablet and mobile–but some also break desktop into a large and a small version. We mostly use the Zurb Foundation CSS framework, which by default uses these breakpoints:

• Large: 1024 pixels or wider
• Medium: 640 pixels or wider
• Small: smaller than 640px

To display the text box above correctly, the developer would assign multiple classes to the container that control the number of columns it covers on different screen sizes:

<div class="small-12 medium-6 large-4”>

Recommended screen resolution for web design for desktop

I asked some of our developers to tell me the screen resolution of the web design files they were working with right now for their WordPress development projects. Here’s the result, sorted in descending order: 1920, 1920, 1920, 1920, 1920, 1920, 1900, 1600, 1440, 1440, 1440, 1440, 1400

These are design files that we’ve received from professional digital agencies that we work with, and it’s clear that there’s a variety – and that there are two favorites: 1920px and 1440px.

There’s a natural reason to use 1440px, since it’s the width of a MacBook Pro 15” screen, counted in CSS pixels (it’s actually 2880x1800px), and it covers most PC laptop screen sizes as well.

So going with a design file resolution that’s 1440px or 1920px wide is a great start.

The next decision will be to decide what maximum size the main container should have, within which you’ll have your columns. This is even more important than what size your design file has.

You want to make sure it looks good for most people, so let’s have a look at what the most common browser viewing sizes are:

If your max width for the main container is 1024px, it will look like your designs for 94% of your visitors.

The most common max-width among our partners is 1140px, which also covers most cases and makes a bit better use of larger screens to fill it with content.

Recommended screen resolution for web design for smaller screens

A good developer will be able to take your desktop designs, if they’re using a grid, and set up a behavior for tablet and mobile that looks good. However, our partners sometimes want to take full control of how the designs appear on mobile so they create separate design files for the different breakpoints, e.g. 768px for tablet and 375px. These are the most common measurements for resolution on iPhone and iPad.

If you want to check out the screen resolution of your own device, or compare different phones and tablets, you can find a lot of information on mydevice.io.

“Mobile-first” is also becoming increasingly popular as a design method to ensure mobile visitors get a great experience, and Google has in recent years increased the importance of mobile experience when ranking websites in their search. In 2014, all website owners needed to make their sites responsive to avoid falling in the rankings and in 2018 Google announced its Mobile-First Indexing approach.

Two most common issues with screen resolution for web design

The most common problem we’ve encountered when developing custom websites from designs is that the main container width is too large. If the design shows the main content in a container that is 1200px wide, there’s a risk that it will look strange on a 1024px screen since the columns could be too narrow to display the content correctly. Instead, we would have to merge columns and show items on separate rows whereas in the design file they are displayed inline.

Another problem is when the designer uses “Retina resolution” in the design file, and doesn’t inform us about it. Any object would then be built with twice the size, and then be adjusted for smaller screens in what might seem like an unpredictable way. It’s better to send photos and visuals separately, or to insert them with double size into the design file and then scale them to size. That way they can still be exported with double resolution.

“Another problem is when the designer uses “Retina resolution” in the design file, and doesn’t inform us about it.“

Conclusion

Web designers who understand at least some basics about development will have an easier time creating designs that look as intended when developed into live websites. They will also get their sites developed faster if they learn to align objects to a grid and are clear about the intended responsive behavior. As an added benefit, they will probably get along much better with their developers.

Our partners use different screen size resolutions in their web design files, so there’s not a must-use standard that you need to follow. However, we’ve covered a few things that you should keep in mind when setting up your web design file:

1. Use a grid system, e.g. 12 columns
2. Stick to the grid when aligning objects on the pages
3. Choose a pixel width of 1440, 1920 or somewhere around there
4. Define what the maximum container width should be, don’t let the developer guess it
5. Set the max container width to e.g. 1140px or 960px depending on how small size screens you expect your visitors to use (on a desktop)
6. Create separate design files for tablet and mobile if you want to control the result fully
7. Follow the default grid of your developer’s preferred CSS framework, or clearly show how you want to adjust each breakpoint

If you are interested to read more about designing for development, check out our post about Sketch VS Photoshop for web design.

Need your designs coded into WordPress themes? Read more about our services or contact us today and we’ll get on a call to discuss it.