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?