NOTE; I know there are some questions already asked about this, but most are from many years ago. I’m trying to get the latest and greatest thoughts on the matter… which have probably evolved over the years
My client’s current e-commerce website uses a full-width header (containing global navigation with mega menus attached to several of the shopping category navigation items). The page body for some pages such as product/category listing pages is full-width whereas the body of product detail template maxes out at 1200px. We are doing a review/audit to evaluate whether or not we should convert the product description pages to be full-width as well.
I feel that since the header is a frequently-used method for users to find products and the growing number of users surfing at 4k resolutions with larger monitors that there are probably a good amount of users with a browser window well over 1200px wide… making it harder than it should be to interact with the mega menus in the header.
2 Potential solutions have been discussed:
On pages where the width of the body maxes out at 1200px, apply the
same max-width to the header
Modify the pages using the 1200px max-width body to display at full width (or at least a max-width larger than 1200px
In looking at hundreds of sites selling products similar to my client’s (hair and skin care), it looks like most go with the #1 approach.
I would LOVE to be implement #2 in order to take advantage of some of that horizontal space potentially available these days, but I’ve yet to see it done spectacularly. The ones doing it best display their product images with 2 per row. This is potentially viable however without reshooting (or re-cropping it could be gotten away with), which is not an option), it is very likely that on the initial page load, the product images (side-by-side) would dip below the fold. Is requiring the user to scroll to see the entire product shot considered bad practice?
Even using the 2-per-row-product-image-technique, I still see a bunch of other places where page elements (or the entire UI) potentially would not display ideally. With that said, I am leaning towards #1 (probably bumping both up to max out at 1440px).
Does anyone have any data (or real-life)-based thoughts on either of the potential solutions?
Seems to me, this is an excellent instance where display:flex or display:grid could be used for maximum efficiency.
I’ve seen a couple studies where the human brain can only accept so much content on one line. I can’t find the exact one, but W3C recommends 80 characters, though that’s currently marked as a draft.
But you could create a (display) flex content approach which uses a clamp to set min and max content width, and the number of columns generated would be controlled by that clamp - if it goes over the maximum, it would create a 2nd (or possibly a 3rd) depending on how wide the browser window was set to. If under the minimum, a single column approach would be shown.
It pretty much is built that way… minus the 3-column layout for super-wide windows (2 columns for tablet and above and 1 column for smaller-than-tablet). Your answer seems to advocate for a full-width header and a full-width body - is that accurate? If so, what are your thoughts on using that approach resulting in the product photo becoming so big, it is likely extend beyond the fold in most circumstances?
I’m one for using all the appropriate real estate, so yes I would go the full width within reason. A quick and dirty example (with smaller sizes to see easier) would be :https://codepen.io/davemaxwell/pen/wvXEQar
As for the images, I’d make them responsive as well and size them based on the size of the containers. If you base them off the containers, then they shouldn’t size themselves out of context…
How do you figure? With a full-width body, if the user has their browser sized extremely wide and extremely “short” relative to that, it’s almost a certainty that the product image of any size/orientation will grow taller than the viewport and thus extend below the fold - nothing you can do about that. But even assuming the user keeps the window sized around a 1.25 - 1.75 ish aspect ratio and the left column of the UI takes up 50-60% of the allotted space, a vertically oriented photo will most likely extend below the fold at any size. The only thing that can be done to prevent limit its max-height, but once it stops getting taller, it will also stop getting wider… which will cause weird whitespace issues between or on either/both sides of the columns.
Sorry, I misunderstood your question. I thought you were talking about the images blowing out the CONTAINER they were in, not about the “fold”.
My opinion (for whatever it’s worth - :: adjusted for inflation) is all you can control is the rendering of the page. As long as the page renders correctly (all images stay within containers, no really weird display issues) within “normal” browser displays, you’re fine. You’re not going to get pixel perfection when a completely odd display comes out.
I can’t see the point in fretting over an overly wide but short browser window - seems to me it’s more likely someone is going to have a huge display and have the browser maximized, or have the screen split in half vertically - there’s a reason windows does the 1/2 screen when you drag to the left/right , but not top/bottom because MOST people work in portrait, not in landscape. As long as your site is workable, it may have to be good enough. You’ll drive yourself insane trying to figure out ALL the particular permutations out there.
Container queries MIGHT help with this particular issue, but they’re not ready for prime time yet - not even close.
: