When it comes to the design and user interaction (or ui) of a website, browser size accommodation and adaptation is all the rage. Although the web design/development world has been predominately focused on going smaller and smaller (which is of utmost importance), what I want to talk about is 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, it is the maximum width that your site content will span then usually a background color, image or whitespace will take up the rest of the browser window. Most likely, 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, driving 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 the width of your site, you have two main options and one in-between.
Option 1: Give your site a more contemporary, wider max-width.
Now you may ask me, “Terez, what is the ideal, not-make-my-site-look-like-a-dinosaur width?” To which I will say, there is no “ideal” width. 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 resolutions 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, 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 believe 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 like neighbors in the countryside if it is being viewed on a mammoth-sized screen.
Cons: If the above is not done, then your content may become those estranged neighbors. Who will they borrow sugar from? Other common mistakes are super long line lengths and wide, 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.
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.
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 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. In the end, you’ll end up with a site that you and your audience will be happy to view.
For additional insight on various screen sizes, read this article by our Digital Marketing Director, Daniel Kedinger.