2

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!

4
  • 1
    The first thought that comes to mind is design several wireframes, one for each target platform: phone, tablet, laptop, small monitor, large monitor. — Could it be your analytics show 75% use of 1920 x 1080 because that's what you're designing for, and other screen sizes don't work as well? Apr 7, 2023 at 18:10
  • Good thought, thanks for your response! Per management, we're only supporting 1 desktop and 1 mobile screen dimensions. Nothing in between due to time constraints. So, the developer has to be good enough to figure out the in between states. We're also B2B, so we currently have more desktop customers. Hope this helps clear things a bit.
    – iuuiuui
    Apr 7, 2023 at 21:17
  • 1
    You're welcome. At the risk of belaboring the issue: "We're also B2B, so we currently have more desktop customers", may be an assumption, unless you've surveyed your customers, independent of web traffic analysis, to determine what computer platforms they use. Alternatively one can put equal effort into designing and testing multiple platforms then determine customers' preferred platform use through web traffic metrics. Apr 9, 2023 at 16:12
  • Thank you again for your insight!
    – iuuiuui
    Apr 10, 2023 at 18:27

2 Answers 2

2

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.

1
  • Thank you for your response and more great points. I agree!
    – iuuiuui
    Apr 10, 2023 at 18:26
0

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.

1
  • More great points. We do use a responsive framework, but it's up to the dev to know how to use it properly for the in between dimensions. Based on everyone's comments, I believe the most important part is making sure the design represents the content's max-width of 1440px wide. Beyond that it shouldn't matter if the figma frame is 1920 wide. I typically start my desktop frame at 1920 wide, as your recommendation. I like Chloe's recommendation as well to have the frame at 1600px wide and the content no wider than 1440px wide. That seems like a good balance. Thank you for your insight!
    – iuuiuui
    Apr 11, 2023 at 15:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.