8

Following Bootstrap 3/4 or other frameworks, we have notice discrepancies in terms of max-width for the main content, for instance:

  • In bootstrap 3 the max width of the container is 1170px
  • In bootstrap 4 the max width of the container is 1140px.
  • In Microsoft website, currently the max width is 1600px

The data from google analytics indicates that most of the users have a screen resolution of 1366x768 about 12.76%.

What principle/rule can we use to determine what is the best max width following standards and screen resolutions?

Thanks

6

The "best" max width is going to depend on your content. The Web Accessibility Initiative suggests aiming for a maximum line length of 80 characters. Depending on your content's layout, design, font choices, and responsive behavior, the optimal width will vary. For example, a three-column layout may be able to take up 1600px while maintaining decent line lengths, but a single column layout will struggle to do the same.

As a general rule, I try to set my max-width based on content, and, like Pectoralis Major mentioned, deliver a different layout based on the viewer's screen size.

3

What principle/rule can we use to determine what is the best max width following standards and screen resolutions?

If your max-width is too large then you will very likely create a horrible experience for your users. Is that something you're willing to live width?

Assuming that you don't want to force your users to horizontally scroll in order to see important data, navigation and UI (such as a purchase button) then you will need to narrow your max-width.

How wide is too wide depends greatly on your design and your user base. Still, you will want to ensure that you don't jettison users because you want to display your fantastic design.

On the flip side if you, or your company, is willing to spend the time and money to create a style for users on 1600+ pixels display go ahead.

3

This is my absolute favorite site to reference for max resolutions: https://www.hobo-web.co.uk/best-screen-size/

The key takeaways are to look at the following:

  • 1. Flexible Max. A bit of a side note, but still relevant: It is highly recommended to use responsive design regardless of your max resolution. This way if your max resolution is larger than a user's display, it will still be accessible for them.
  • 2. Region. Is your site viewed globally or just locally? Hobo provides resolution stats for the US, UK, and worldwide which differ region to region. They update their results every so often so there's no point in me referencing it directly in this answer. Keep in mind this is always changing which leads me to...
  • 3. Every case is different. Although the linked stats are a good starting point, you need to analyze your site visitors. Your own analytics will be able to show you what are the most common resolutions that visit your site. For example, if your site was catered toward PC gamers, a good amount of them are running 4K displays. As such their max resolution would be higher. If your site is catered towards businesses, chances are they're running outdated hardware due to budgetary constraints which would result in older monitors with lower resolutions (monitors hardly get upgraded in the business world). Although this is perfect for a re-design of a site that already has old stats, it's less ideal for a new site. As such the region stats in 2 above would be a good starting point.

Keep in mind that the max width does not need to span the entire width of the user's resolution. Users with 4K displays are used to seeing large blank columns on the left and the right side. Here's a somewhat relevant question regarding these margins.

2

What principle/rule can we use to determine what is the best max width following standards and screen resolutions?

You can provide multiple versions for different screen resolutions so that every user has a good experience browsing your site.

12.76% is not a lot against 87,24% and thats why it makes no sense to use that resolutions for everyone, you should provide versions for phones, tablets and smaller/bigger screen resolutions.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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