What screen dimension would you choose to design your wireframe width?

Question

I'm trying to figure out which is the best width dimension for our designs that will eventually get handed off to developers. Our most popular screen dimension is 1920 x 1080 by like 75% over others. It's been this dimension for years (based on analytics). Our max-width for content is 1440px. I find designing at 1920 x 1080 with the max-width in place represents our customers screen more than a smaller size like 1440px wide. Some designers prefer designing at 1440px wide. We do use a 12 column grid system based on Bootstrap.

When designs are set at 1440px wide, then the content isn't as wide as if it's designed at 1920px wide due to the flexibility of the grid. There's about an 80px margin difference on each side of the content on 1440px wide designs. I also do some development work and based on my experience, I prefer to reference wireframes that more accurately show what I'm looking at in the browser when checking my code. If there are any other developers out there reading this, then please offer your advice as well. Some of the feedback I've heard from other designers are, "designing for 1920 is too wide" and "it doesn't matter if it's at 1440 since the grid is flexible".

To summarize my questions…

1. Which screen width dimension would you design for, 1920 or 1440 based on the info provided above?
2. Is it easier to develop referencing a more accurate screen width wireframe?
3. Are the designer's feedback valid points?

Please let me know if additional information is necessary.

Thanks!

Answer 1

1920px is far too wide.

Remember that pixel density plays a significant role here. For example, my large laptop's display is 3024px wide, but when I inspect websites that take up my whole screen, they are rendered at 1512px wide since my display is 2x.

When analytics shows that your most popular screen width is 1920px wide, that relates to the number of pixels on the screen and not the number of pixels at which a website on that screen is rendered.

In general, it's useful to create desktop designs/wireframes at a width that is a little wider than your content area. You want to see what the screen will look like with some margin on either side of the content area. In your case with a content area at 1440px wide, something like 1600px wide would be a nice width for the design.

Answer 2

Based on the information provided, it's clear that there are pros and cons to designing for both 1920px and 1440px screen widths. Here are my thoughts on your questions:

Which screen width dimension would you design for, 1920 or 1440 based on the info provided above?

Since 75% of your users have a screen resolution of 1920 x 1080, it makes sense to prioritize this screen size in your designs. However, it's important to ensure that your designs are responsive and adapt well to various screen sizes, including 1440px wide screens. You can start with designing for 1920px width, but make sure to test and refine your designs for smaller widths as well. This approach is known as "progressive enhancement," where you start with a broader screen and ensure that the design works well on smaller screens.

Is it easier to develop referencing a more accurate screen width wireframe? As a developer, it's generally easier to reference wireframes that closely represent the end product, especially when checking your code against the design. Designing for 1920px width with a max-width of 1440px for content gives a more accurate representation of what the majority of your users will see. However, it's crucial to ensure that the designs are adaptable and responsive for various screen sizes.

Are the designer's feedback valid points?

The feedback from the designers has some validity. Designing for 1920px width can be challenging due to the wider layout. But, as mentioned earlier, since the majority of your users have this screen size, it makes sense to prioritize it. The argument for designing at 1440px because of the flexible grid system is also valid, but you need to ensure that the designs scale well to the larger screen widths. The key is to strike a balance between designing for the majority screen size (1920px) while ensuring the design works well for other screen sizes (e.g., 1440px).

In conclusion, you should consider designing for the 1920px screen width while ensuring that your designs are responsive and work well on smaller screen sizes like 1440px. This approach will cater to the majority of your users while providing a good experience for users with different screen sizes. It's essential to collaborate closely with developers and testers to ensure that the designs are implemented accurately and perform well across various devices and screen sizes.