Maximum Page Width in Fluid Responsive Design

The responsive website design movement provides an optimal website viewing experience across many devices and screen sizes. Because of the movement’s infancy, some of the more specific details describing how responsive is actually done haven’t been fully explored and documented. I’d like to share a recent experience I had while attempting to determine “how wide is too wide?” when it comes to fluid responsive design.

Breakpoints

Responsive design uses set breakpoints to shift layout and/or functionality to provide a better user experience for the device being used. For the implementation of any site, it’s safe to assume that the typical user will view the site on a screen 320px and larger (320px corresponds to the iPhone in portrait view, the smallest commonly used screen width). I like to refer to the screen sizes between touch devices and those that use the keyboard and mouse as the “middle bound”, and is usually set somewhere in the range of 600px to 800px. Because of my love of set theory, and the fact that we have a lower and middle bound, I start to wonder if we needed an upper bound, and what that screen size might be.

Very-Wide Screens

We recently built a design for a client that fluidly let the content expand to infinity. The client didn’t like the look of their site on very large screens, and wanted a recommendation on how wide we should let the content go before restricting it. We usually arbitrarily set the maximum width to 1600px, so I decided to do some research to see what other responsive sites were doing on the very large width screens.

Determining the ideal maximum width means looking at the 2 different scenarios that we could encounter.

• When the max-width is larger than the screen size, the content simply takes up the full width of the screen, and acts as we would expect any full-width breakpoint would.

• When the max-width is smaller than the screen size, we get a centered column of content and “whitespace” on the outside (even though it may have background color or images).

The whitespace in the second scenario can help the user focus on the centered column of content, making the content seem more organized and succinct. Too much of this white space can have a negative effect by shrinking visual elements and making the user wonder why there is so much wasted space on the outside.

So what is the ideal amount of whitespace? It’s hard to set a specific number, as the design can influence the decision greatly. I looked at a few websites to find the maximum width column in both the higher education industry and popular general sites, and found a wide range of values, most of which were between 900px and 1600px. (I’m sure I could find an even larger range, but this range seemed to be the trend) I then used the StatCounter website to get an idea of what screen sizes a typical user browses the web on (as of November 2014):

• 1366px  –  27.81%  –  Rising
• 1024px  –  14.3%  –  Falling (includes both landscape and portrait views for 1024 x 768)
• 1280px  –  13.26%  –  Falling
• 1920px  –  9.92%  –  Rising
• 1440px  –  5.85%  –  Stagnant

Comparing a sampling of the maximum column widths to the widest common screen (1920px) showed me:

• 1000px max width is 52% of the screen width, and almost all users will reach the “max-width” breakpoint, making visible white space along the left and right of their screen.
• 1200px max width is 62.5% of the screen width, and overall most users will reach the “max-width” breakpoint.
• 1400px max width is 73% of the screen width, and ~84% of overall users will never reach the “max-width” breakpoint.
• 1600px max width is 83% of the screen width, and over 90% of overall users never reach the “max-width” breakpoint.

Now that we have all this data, what conclusions can we draw? As I mentioned above, we want a good balance of having the content fill up the visible space with the focus that is obtained by wrapping the content in a centered column, but design still has an influence on what is required, so I’ll offer a range of between 1200px and 1400px as our optimal “max-width”. The smaller end of this range gives more users the focused center column, and would be more impactful on text-heavy content, and the larger end of the range gives more screen real-estate to fit more visual-heavy content on the page. This number should be re-evaluated every year or so to accommodate wider screens coming to market.

Responsive design is a relatively new and constantly changing practice. We’d love to hear more about your experience with very large screens and how your website displays across a variety of platforms. Feel free to contact us to talk tech anytime!

Note About Developer Experience

There are many opinions on what breakpoints should be included (as this stackoverflow forum post suggests), and many developers believe each design’s functionality dictates what breakpoints are needed. Most responsive frameworks come with default pixel width breakpoints, usually corresponding to specific devices (mobile, tablet, desktop). I believe that all the answers above can be correct (if implemented correctly), but the experience level, skill set and comfort with the approach that the developer has should be the ultimate determinants. Those new to responsive design should follow what responsive frameworks such as Bootstrap, Foundation and Skeleton provide by default, designing around set default breakpoints. After some experience, these defaults should be tweaked in order to provide a better experience per design layout. An ideal situation has the developer choosing breakpoints for an already developed set of designs.