17

Looking at some of the top e-commerce websites (Flipkart, Etsy, Amazon, Bestbuy), I could find that only Amazon utilizes a full-width layout, and that too isn't fluid.

While I understand the demerits of full-width websites as far as reading and content consumption is concerned, why do most of these e-commerce websites have a cluttered and narrow layout?

My points in favor of fluid design:

  • E-commerce platforms rely on rich imagery, and fluid layouts allow usage of bigger images.
  • E-commerce websites have a ton of products to showcase, and full width will give them more room.
  • E-commerce websites seldom have long lines of text and have space partitioned into sections.
  • 960px is oh-so-old and most of the users have a 16:9 monitors now.
  • Fluid designs provide a clean and immersive experience.
  • Grid systems have become very strong and easy to use now, so fluid designs are no longer a pain to create.

Points against:

(Answers!)

Why I think the current scenario exists:

  • Some of these websites came into existence when 960 was the norm, and they have grown too big and they are too lazy, lack innovation, or don't have enough resources to adapt to the new scheme (but they have huge manpower!)
  • They are skeptical that it may drive orthodox users away? (but what about the next-gen user?)
  • They feel that major change in the layout will cause loyal users to re-learn navigation from scratch (but we're talking about changing layout here, the functionality can remain same! And if google/fb have the guts to do redesigns, why don't they?)
  • They want to play safe and stick with the tried and tested.

I've personally seen some modern e-commerce websites using clean and modern layouts (and copious amount of whitespace) and found them to be very appealing. ( can't recall their names right now)

3
  • Not an answer but I do not agree with half of your points in favor if fluid layouts... Dec 6, 2015 at 17:29
  • 1
    @AdrianoRepetti I'd love to hear which and why. Dec 7, 2015 at 13:00
  • "but they have huge manpower!" -- yes, but that manpower is not likely available. Companies would have to divert manpower from other areas (e.g. maintenance), or hire new people.
    – Vivelin
    Dec 8, 2015 at 11:15

4 Answers 4

10

Check your assumptions

There are a few assumptions in your question that require validation (and I assure you that the ecomm giants are testing).

  1. Most people have big monitors now: Maybe. But what about their viewport? And who might you leave out when your target is everyone (like Amazon)? Older users often have their browser zoomed and don't even realize it. And they might still be on IE 8.
  2. Bigger images are better: They're prettier, but that doesn't mean they sell more. I actually tried this on an ecomm site (and I knew I was right) — I bumped the images up about 20% with no apparent negative side effects. We got to nearly 100% confidence that it did nothing for conversion, revenue, bounce rate ... all that good stuff.
  3. Use the space to show more products: I tested this hypothesis as well and conversion actually went down. After some follow up tests and other optimizations we determined that better curation and a narrower set of choices led to faster decisions, more people in the checkout funnel, and more money in the bank.
  4. Fluid designs are "cleaner" and "more immersive": A well-designed site is a well-designed site. I like designing fluid layouts on new projects, but if you have a large site that is doing well on a fixed layout it might be a while before you recover your investment.
  5. Fluid designs are easy to create now: Keep in mind that most ecomm design is rooted in the newsprint circulars of yore. Those creative departments like to have extreme control over their product presentation. Fluid crops and background: cover are very difficult to work with when the crop has to be "just so". And their approach has done a great job of selling junk for a long time.

Experimentation is happening.

Amazon

They are continually testing layout solutions, including responsive pages. Obviously, the Deals page is a hot property for them ...

Amazon's deals page

Ebay

Hasn't gotten very far, but they've been iterating. Some of their curated experiences, like this Collections template, have gone full responsive.

Ebay collections page template

Walmart

They pushed hard on the tech front (even buying up some engineering firms). They've refactored to a full responsive site (no small feat with the size of their catalog).

Walmart's homepage

Fab.com

Fab has been fully responsive for quite some time. Early on they pioneered some really interesting ecomm ideas, mostly around social reinforcement. Perhaps not unrelated, they've also had some financially rough times.

Fab homepage

Bottom line

If I was starting from scratch, or had to refactor for some compelling reason beyond "we really should be responsive by now", I would definitely build a fluid or responsive site.

There's no doubt that the forerunners will eventually carry the crowd along. But with the amount of money on the line, it's not going to happen without a lot of testing and an unquestionably high degree of statistical confidence.

4
  • I agree with point 3,4,5 of yours. Point 1: Most (if not all) of these websites use separate stylesheets for IE9, IE8 and the likes. This means that everyone doesn't have to suffer because of a very few ( < 6% share ) . And a fixed layout will not provide a better experience than a fluid (i.e. responsive) if the viewport is indeed resized. Dec 8, 2015 at 3:52
  • The question they have to answer: Is there enough extra conversion there to convince the business to refactor the front end? You have to be able to make a solid prediction and stand by it. Dec 8, 2015 at 4:37
  • But you were to start a new e-commerce business (say), then would it be correct to take the responsive route? Dec 8, 2015 at 10:03
  • Sure. Fluid at the very least. There is still a good case to be made in ecomm (and elsewhere) for a unique mobile experience, so completely responsive may not answer that need. Dec 8, 2015 at 10:09
3

Full-width and fluid are two distinct things.

If you have a page of text, you would not want it any wider than a comfortable width for reading (52-68 characters per line, including spaces etc). In such a case, white-space helps to give a clean, uncluttered feel and avoids distracting the reader away from the text.

If you have an image gallery, ideally you want it in a flexbox so that it is optimised for different screen sizes. If you are showcasing products, users will want to be able to zoom in, so many e-commerce sites use a lightbox or similar.

There are more and more resources out there to assist with responsive design, but I suppose on a large and complex site, the cost of refactoring the code may be prohibitive.

3

There may be many reason to prefer a fixed layout instead of a responsive or a fluid one. This answer (in my opinion) can not be exhaustive unless it's applied to a specific case: I do not think there is a best solution that should always be used.

You're asking about fluid layout (built using percentage of width) but there are also: responsive layout (built using a fluid grid and media queries), adaptive layout (fixed but with media queries) and elastic layout (fluid until a breakpoint).

Of course you may want to improve user experience at higher resolutions (without jumping into responsive layout, which is also a compromise). That's good but with a fluid layout you have too little control over page appearance and final result may be a too big compromise (because it has to look good both for low-res and high-res displays). In this case you should strongly consider elastic layout (which is BTW what Amazon does, in this moment).

MORE AVAILABLE SPACE MEANS YOU NEED TI REDESIGN YOUR USER EXPERIENCE

Sorry to be so loud but it's important. More, it is fundamental. Stretch few images and randomly zoom your UI won't make your site better. You do not need same UX just doubling products you can see on each page. If you have more space then you should use it better, dropping compromises and decisions you took for smaller screens.


Extended discussion...

E-commerce platforms rely on rich imagery, and fluid layouts allow usage of bigger images.

Of course to have bigger images is pretty but bigger images are also heavier to download and to store. I don't even mention all the code to serve images of required size (and cache them, also don't forget you can't completely rely on browsers because window size may vary).

In this moment Amazon is serving me images at 126×135. It's OK with a fixed width on my 1900×1200 but to increase image size on 4K monitors its resolution has to double (at least). Bigger images are undoubtedly a benefit but they use bandwidth and storage, this may not be a problem for our portfolio site but for Amazon (and the others) it may be an issue to consider. I do not have up-to-date data but:

  • In my homepage it presents ~50 products.
  • Each image is in average 4 KB and if no image is cached it means I downloaded 200 KB of data (with HTTP 1.1 with more than 50 server connections).
  • Amazon has more than 20 million users per day, it means that - just for home page - and for worst case we're using ~4 GB (server-side bandwidth! do not consider storage). Now let's double this and apply to each product image in whole site. You may need to change your hardware only because of this.

Do you want to use 256×256 previews? Now let's consider client-side download time (loudly again):

First of all web-site must be FAST. Give me 128×128 previews but do it as fast as possible. Doubling image size you will also almost double loading time.

From comments: no, you should not scale low-res images at client side. It doesn't matter how easy it is. It will look ugly and unprofessional.

E-commerce websites have a ton of products to showcase, and full width will give them more room.

If you use fluid layout then more room means more white space around each product box. Some may help but too much is useless and counterproductive. If you're talking about a responsive layout then you're right: more space is better but also in this case you would set a limit. Even if your screen is 3840×2160 I doubt you want to fill it with 128×128 images (a decent size for a preview), it means 400~500 products on the same page, for sure too many unless user is scrolling an image gallery.

E-commerce websites seldom have long lines of text, and have space partitioned into sections.

It depends which product you sell! Product description on Amazon (for example) is often very long and a fluid layout (alone) is not best option to handle them. Note that you can handle long lines with a well-done responsive layout.

960px is oh-so-old...

Don't assume this. Statistics are misleading because you should narrow population to your target audience but, generally speaking, most common resolution is now (end of 2015) 1366×768. 1920×1080 is just slightly more common than 1024×768.

...and most of the users have a 16:9 monitors now.

Screen resolution and display aspect ratio are related but separate things. For example a brand new product (Apple iPadPro, released one month ago) has a resolution 2732×2048 and its display aspect ratio is 4:3.

Fluid designs provide a clean and immersive experience.

Also fixed width layouts, it depends how you make it and the type of content you have to present. An adaptive layout (fixed but with media queries) can be often a nice and easy solution.

Grid systems have become very strong and easy to use now, so fluid designs are no longer a pain to create.

I absolutely agree but I'd stress on one word: create.


Some of these websites came into existence when 960 was the norm, and they have grown too big and...

It may be true but we can just speculate.

They are skeptical that it may drive orthodox users away? (but what about the next-gen user?)

I don't think so but it's just my own opinion. Anyway consider that you can't simply make your orthodox users unhappy waiting for the next generation unless you're planning to sell nothing for one or two years. Progressive changes are often the key, unless you don't have users but fans (I do not mention anyone).

They feel that major change in layout will cause loyal users to re-learn navigation from scratch...

It may be true but again progressive changes will help to smoothly upgrade. I saw some governative web-sites with both layouts (fixed and fluid, at that time) as options. It's a pretty common approach: think Microsoft with Windows XP (and it's gummy UI) o Facebook and transition to diary (just to mention two).

They want to play safe and stick with the tried and tested.

I absolutely and strongly agree. To test fluid layout can be 5X times more expansive and long because you have to test at least most common resolutions and aspect ratios plus edge cases (remember that fluid is with percentage). Responsive layout can be even worse (for testing) because layout will change (not just widths).


I think a responsive (not a fluid) layout is pretty often a good COMPROMISE solution if:

  • If your target different devices;
  • If your content requires it.

If you answers yes to both ifs then remember you have to count much (much much much) more testing and a more careful design. It means more money both for first release and for future updates. Bigger sites will carefully balance true needing and costs (think about Stack Exchange, a partially responsive layout may help?). Also note that to make a good responsive layout from XGA to 4K (or even 8K) is all but not easy.

10
  • Some of your points do make sense. I guess I was thinking more from a customer side of things. However 1) Bigger images need not necessarily mean bigger sizes, if the image resolution themselves are responsive to screen resolutions (not hard to do with css). And you're better off not showing low-res images to users on big monitors. 2) My point was that fluid layouts are usually meant for widescreen (16:9) ratios rather than (4:3), and no point giving user a 4:3 feel (fixed layout) when he's on 16:9. Dec 8, 2015 at 3:45
  • Amazon (in this moment) shows me thumbnails at 126x135 (at screen size 1920x1200 on 16:9), to support for example a 4K monitor it has to provide a double size (at least!) image. Of course image may be scaled client side but then you're wasting bandwidth and server storage (for our portfolio site it may not be a problem but for a big site this is an issue). Dec 8, 2015 at 8:09
  • About aspect ratio: not only for 16:9! It is one of the players but also resolution matters (I do not mention PPI but it also plays). If you're a Windows user just pick MS Office and its ribbon. You may call it responsive because layout of its elements changes according to resolution. Moving from XGA 1024x768 (4:3) to UXGA 1600x1200 (4:3) you will have a different layout and bigger elements. Same has to be done in web site but, and I agree with you about this, testing and support is harder. BTW Amazon uses full width just for header, content is still at fixed-width. Dec 8, 2015 at 8:14
  • 4k displays definitely need to be served images at 2x, (and many websites already do/plan to support retina). I think its somewhat reasonable to assume that users on 4k will have better internet speed/data plan than someone on a tablet or a home pc. And all I'm saying is that improvements in HTML5 and CSS have made it so easy to do that you'd rather do it than not. Dec 8, 2015 at 9:07
  • 1
    No no, do not think about client side! Think about SERVER SIDE! Dec 8, 2015 at 9:20
2

I can relate to this, for a long time we've been pushing to go at least partially responsive for our e-commerce website. The main reason I believe is conversions. the fear of something that already works well will be broken in the process.

While Responsive is the trend and probably here to stay with the increasing amount of devices and and resolutions, in Practice responsive is more a solution where compromises need to be made to each layout so that the ui can transform from one to the next. Meaning there is no optimal layout. This is problem for companies that want to optimize their ui's for conversion. means that if tests were done on to decide of a certain ui element and its placement on the page, it would need to be compromised as this placement might change based on the device it's being viewed on. Hope it makes sense

2
  • Thanks for responding. But somewhere I feel that it is us developers who are to blame for trying to find the easier way out for ourselves, rather than focusing on improving customer experience. Also, I'm not pitching complete responsiveness on various devices. I feel mobile websites should be tailor made for the mobile experience (and all the websites I mentioned also use a different layout for mobile and desktop) Dec 7, 2015 at 13:04
  • yes, its true. having two different layouts optimized for desktop and mobile is separately is reasonable. but what about having layouts separately optimized for tablet, widescreen, and everything in between. while that would be an ideal case, imagine the testing and developer work hours needed build optimized layouts for each other these. that's 3-4 unique layouts. compared to that, having a fixed width layout for desktop and a separate one for mobile is acceptable i would guess
    – Blue Ocean
    Dec 7, 2015 at 17:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.