Updated on 3/27/2023
When it comes to the design and user interface (or UI) of a website, browser size accommodation and adaptation is something we have come to expect. Although we now live in a predominantly mobile-first world and have been focused on screens going smaller and smaller, I want to talk about what to do when screens get larger. Responsive website design for larger screens comes with many challenges. Among those is setting a max-width.
If you’re not familiar with this concept, the CSS max-width property sets the maximum width of an element. In other words, it is the widest that your site content will span before a background color, image or whitespace will take up the rest of the browser window. When you pull up a website where all of the content is trapped in a tiny box in the middle of your screen surrounded by a sea of white, it immediately feels super dated and could drive you to seek the information elsewhere. If your site hasn’t been updated to wider and better max-width, then you may be facing the same fate with your audience. When it comes to determining the best width for your website, you have two main options and one in-between.
Option 1: Give your site a more contemporary, wider max-width.
Now you may ask, “what is the ideal, not-make-my-site-look-like-a-dinosaur width?” To which I will say, there is no “ideal” or standard website width, although there are common widths that are designed for, such as 1920 pixels for monitors. I know, I know. It’s a generalized answer, but there’s more to it. The best way to start is by doing a little research. If you have an existing site with analytics, look at what screen resolution(s) your audience is using. If not, visit a site like this to see what the global population is using. If the majority of your traffic, or potential traffic, won’t ever see your website over 1366 pixels (the typical width of a standard laptop screen), then a max-width of around 1400 pixels is a safe bet.
Pros: Having a max-width makes it generally easier to manage the layout of your content, and said content can quickly be absorbed by your audience.
Cons: Those viewing your site on a larger screen will still experience excessive white space on either side of the content.
Option 2: Don’t give your site a max-width at all.
That’s right. Just let your content ebb and flow as the mighty web browser window pleases. This is a growing trend in web design/development. Many designers and developers are focused on the idea that site content should look optimal at any window size.
Pros: An added benefit is that, as your site grows in width, it can also grow in content. While your site may feature four content blocks at 1400px, at 1900px it can feature six. This allows your content to not be stretched out if viewed on a mammoth-sized screen. In addition, you could add things like a sidebar, more navigation items or decorative elements.
Cons: If extra elements/components are not added, then your content may become super spread apart like estranged neighbors in the countryside. Who will they borrow sugar from? Other common mistakes that could be made are super long line lengths, all-consuming images and overcrowded design.
Options 3 (The In-between): Give some of your content a max-width and let some of it span the entirety.
Putting a max-width on text is a good idea, due to the aforementioned terribly long line lengths. There is a growing trend of centering text content in a pretty tight column, like 800px, to improve readability. Section backgrounds, hero images and section title panels are great things to keep at 100% width as long as their heights are managed correctly.
Pros: This can make your site feel full and aesthetically pleasing while still keeping your content controlled.
Cons: If not designed well, the juxtaposition between max-width and full-width elements can get drastic and appear disproportionate. Like option one, this will not follow the growing trend of full, fluid-width website design.
The Best Width Depends on Your Site
So, which option is right for your site? It should be no surprise but here comes another generic, but appropriate answer: it all depends. Before making a decision you should look at your audience, web design, UI ideas and assess your content (after all, content is king). The biggest mistake you can make is to rush into a decision and not do the research. Also, don’t be afraid to take some risks and be progressive. The web is a living, breathing thing that can continuously be altered and optimized. In the end, you’ll end up with a site that you and your audience will be happy to view.
If you’re in need of a consultation on the max-width or other elements of your site, reach out today. Our UI/UX experts have the eye for design and understanding of technical jargon needed to support your website or landing page development.
