Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Responsive Upscaling: Large-Screen E-Commerce Design

The responsive design revolution is truly upon us (if it hasn’t already happened!), and even though e-commerce websites haven’t picked up responsive design quite as aggressively as in other industries, it’s becoming increasingly popular.

So far, most of the responsive design thinking has revolved around covering the range of experiences from mobile to desktop. Yet little attention has been paid to the opportunities for expanding that range beyond the standard desktop screen, to create an experience optimized for modern large-scale displays. Consider this:

  1. Only 18% of the 50 leading US e-commerce websites1 that we benchmarked earlier this year optimize their design for large monitors (yet 94% of those websites have a design optimized for mobile devices).
  2. Approximately three-quarters of e-commerce sales still happen on PCs, not mobile devices (see here2, here3 and here4).
  3. About one third of those users visit on screens wider than 1350 pixels (see here5, here6 and here7). (Note: There is, of course, a difference between screen and browser width — the actual number of users with a browser this wide will be lower. We recommend that you track browser sizes8 in your web statistics for the most accurate picture of how significant this segment is on your website.)

Based on these statistics, crafting an optimized experience for users with large screens should seem well worth the effort. In fact, designing for big screens might turn out to be the next frontier of responsive e-commerce design.

Further Reading on SmashingMag: Link9

In this article, we’ll explore how e-commerce designers could use responsive upscaling to craft a tailored experience for users with big screens. We’ll cover one core principle, along with 11 ideas for upscaling different parts of the e-commerce experience to deal with the various usability challenges observed during our e-commerce usability studies. This article was originally published15 by the Baymard Institute.

IKEA’s results page16

Many e-commerce sites don’t make use of available space on larger screens. The result: often a lot of white space surrounding a rather crammed search results page. (View large version17)

Notice all of the white space surrounding IKEA’s rather crammed search results page. During our e-commerce product list18 study, it became clear that in aesthetically driven product verticals, such as home decor, users need large thumbnails to accurately evaluate products. Utilizing the extra screen space to provide that is one of many “responsive upscaling” ideas for e-commerce websites to consider.

The extra screen real estate afforded by large screens is typically left unused as vast seas of white, while the actual page content is crammed into a tight design optimized to fit a laptop screen. At a very minimum, content could be given a little more breathing room, with some additional white space between elements on large-sized monitors.

Yet “responsive upscaling” can be taken much further, to provide a superior experience for users on large monitors by using the extra space to provide larger images, additional product columns, better page context and easier access to relevant website actions (filtering and sorting, “Add to Cart” buttons, etc.).

Core Principle Of Responsive Upscaling: Same Content, Different Packaging Link

There are fundamentally two ways to utilize the extra space: insert additional content on the page (i.e. content that’s only available at the large-scale resolutions), and present existing page content in a different way (i.e. reposition elements, change their layout, scale up, etc.).

You’ll notice that all of the examples in this article illustrate how existing page content can be presented differently (sometimes dramatically so). This is because inserting entirely new page content that’s available only at the large-scale resolutions generally isn’t a good idea. There are exceptions, of course, but generally speaking, if content isn’t important enough to show in the “regular” desktop view, then it most likely isn’t important enough to be shown on bigger screens either.


Show the same content for all devices but “package” it differently. (View large version20)

A bigger screen doesn’t mean21 that the user suddenly wants a cramped layout which is difficult to scan, nor does a smaller screen mean22 that the user would never request any kind of information that they’ve seen on the site before. Therefore, show the same content, but “package” it differently so that it is optimized for the screen it is being displayed on.

Unimportant content should never be added to the page just because there’s room for it on the page. Likewise, important content should never be left out just because screen real estate is limited (see our test findings in “How Should Your Mobile and Desktop Sites Differ?23,” which documents this principle). The only time new page content should be inserted at large-scale resolutions is when that content somehow makes sense only on larger displays but not on regular screens.

So, as a general rule, a warning bell should ring when new page content is being added at large-scale resolutions. A few times it will be justified, but most often the content either will be too unimportant to show at regular screens sizes and therefore ought to be excluded from the large-scale versions too or will be actually important and therefore should be included on the page regardless of screen size. Obviously, important content might need to be presented very differently depending on the available space, but it should be available in some shape or form in all versions of the design.

Ideas For Responsive Upscaling On An E-Commerce Website Link

Keeping with this principle of avoiding new content and instead presenting existing content differently, let’s look at some of the many ways responsive upscaling might work on an e-commerce website.

All of the following examples have been illustrated by layering drawings onto screenshots of Wayfair.com24. Now, Wayfair’s desktop design currently isn’t responsive at all (i.e. the page doesn’t scale and the layout doesn’t rearrange based on browser size), neither “up” nor “down” — the page’s width stays fixed regardless of the user’s viewport. It is, therefore, a good case for illustrating how the different types of pages on an e-commerce website could be optimized for users with large screens.

In a real implementation of these examples, other page elements would likely realign and possibly scale, too (especially page elements such as the header and footer), but for the purpose of these basic illustrations, the elements are simply shifted around a little. The examples should be seen as inspiration, and some will obviously be more appropriate to you than others, depending on your website’s product verticals and objectives.

Inlining Sign-Up Overlay Link

Sign-up overlays can be made less obtrusive on large screens by ditching the overlay and instead permanently placing the dialog alongside other “above-the-fold” content. This will make the sign-up dialog less intrusive because it won’t block out the whole page, yet it will still keep the dialog highly visible because it will still be shown immediately upon page load (because it’s placed above the fold).

A sign-up overlay dialog repositioned as inline page content placed above the fold25

A sign-up overlay dialog repositioned as inline page content placed above the fold. (View large version26)

Now, users uninterested in the sign-up will obviously find this dialog easier to ignore because they won’t have to actively dismiss it anymore. However, during our usability studies, most of the test subjects simply closed traditional overlay dialogs without ever reading their content, often referring to these overlays as “popups” (see “Avoid These 5 Types of E-Commerce Graphics27”). It’s a kind of overlay blindness. Those users might actually be more likely to read the sign-up dialog when it is placed inline above the page fold instead, because on seeing the element, they won’t spend all of their attention trying to find a way to dismiss it.

The most popular links from the header (for example, account and ordering links for signed-in users) and footer (customer service and FAQ links) could be displayed in a box on the home page when there’s room for them. Obviously, the links should still be accessible in their original positions within the header menus and footer sections. On large screens, these shortcuts would simply also be available directly on the home page.

Popular header and footer links displayed in a link shortcuts box on the home page28

Popular header and footer links displayed in a link shortcuts box on the home page. (View large version29)

This is a good example of content remaining available on the page but being displayed differently. It’s not new content, but rather existing content being displayed differently, to optimize the experience for users on large screens. In this particular case, the color of the link shortcuts box should probably be lightly faded to make it appear secondary to other content.

Home page carousels are fraught with usability issues and must be implemented very carefully to work at all (see the eight carousel requirements30 observed in our test studies). On larger screens, the carousel could, of course, simply scale up, making the shown slide all that much bigger. However, if the slides are square or even just reasonably tall, then scaling up the carousel slide could actually end up pushing the rest of the page’s content outside of the viewport on large monitors — decreasing the home page overview despite the increased viewport! A solution to this is turning the carousel slide into a multi-column view, with two or three slides being shown at once.

A set of carousel slides is turned into a multi-column layout31

A set of carousel slides is turned into a multi-column layout. (View large version32)

If the total number of slides matches the number of columns, then the problematic interactive features of the carousel could even be hidden away in favor of a static multi-column layout of the slides. If there are more slides than columns, then they will, of course, still need slide rotation features or a grid representation with rows.

Inlining Filled Cart Link

Most e-commerce vendors hope for one of two actions to follow when a user adds an item to their cart: The user goes looking for more items to add to their cart, or they buy the item in their cart. Continuing to browse for other products is obviously great for revenue, but it also means that buyer’s remorse is more likely to set in — especially if the user has a hard time33 navigating the website while searching for additional products.

The regular drop-down cart is inlined when the user has added one or more items34

The regular drop-down cart is inlined when the user has added one or more items. (View large version35)

By inlining the regular drop-down cart (available from the page header), the vendor gives the user an overview of the items already in their cart — reminding them of the great products they have already found (which, of course, they should most definitely purchase before leaving!). This gives the user easy access to the checkout process and thus helps to close the sale.

Furthermore, during our study of home page and category36 navigation, users were frequently observed to reopen their cart simply to glance at the names of previously added items. For instance, they might reopen the cart to see the model name of the camera they just added in order to find a matching camera case. Permanently displaying the cart will make it easier for users to find matching items, because it enables direct comparison between the product list currently being browsed and the items in the cart.

Additional Product Columns Link

One of the most obvious ways of utilizing the extra screen real estate in grid-based product lists is to rearrange the products so that they appear across additional columns. This can greatly increase the number of products visible on the screen. In the example above, the user goes from being able to see six products in their viewport to seeing ten.

The product list grid reflows to fit additional columns on large displays37

The product list grid reflows to fit additional columns on large displays. (View large version38)

This approach can significantly optimize the product list view on large screens, but do it with care. If the number of product columns is excessive, then the grid will ultimately become more difficult to scan because users will drown in information and their eyes will have trouble travelling from one line to the next (there’s a reason text has an optimal line length39).

Therefore, restrict your products to five to eight columns (depending on size of list items and product vertical) to keep users from getting lost in a sea of information.

Larger Product List Images Link

The other obvious way to take advantage of extra viewport space in product lists is to scale up each list item to fit the user’s screen. For example, you could significantly increase the size of product thumbnails, allowing users to inspect the aesthetics of each product in much greater detail. This has palpable benefits in visually driven product verticals because it maximizes the amount of visual information conveyed, making it much easier for users to identify products to their liking.

The product list items are scaled up to provide higher-resolution images, maximizing the amount of visual information conveyed40

The product list items are scaled up to provide higher-resolution images, maximizing the amount of visual information conveyed. (View large version41)

However, discretion is once again advised, because simply scaling up images will often result in a vast increase in list item height (assuming that aspect ratios are maintained), which can actually greatly reduce the number of products on screen. Notice in the illustration above how the second row of columns has been pushed almost entirely out of view.

The tradeoff when scaling images up in product lists, therefore, is an increase in the level of visual detail available about each product, at the cost of limiting the user’s overview of available products due to the lower number of products that can fit in the viewport.

Scaling and Rearranging Product Lists Link

By combining the two previous approaches as the user’s screen widens — that is, by both adding columns and increasing the size of each list item — we get the best of both worlds. Visual information about each product is increased, yet the overview is maintained because the product grid rearranges to show an additional column whenever the list items reach a height threshold.

The product list items are both scaled up and rearranged into additional columns42

The product list items are both scaled up and rearranged into additional columns. (View large version43)

This way, list items can grow to show additional visual information about each product, without ever growing so tall as to compromise the total number of products that fit on the screen. Indeed, because of the additional columns, the number of products in the viewport will increase. Thus, both the total number of shown products and their individual resolution improves.

Sticky Filters Link

Another way to utilize extra screen space is to permanently attach filtering and sorting tools to the user’s viewport via a “sticky” element. This will give the user additional context about the products they’re currently viewing and easy access to manipulate the criteria for the product list.

Filtering tools can be repositioned into sidebars that stick to the edge(s) of the user’s screen44

Filtering tools can be repositioned into sidebars that stick to the edge(s) of the user’s screen. (View large version45)

Fixed content effectively makes the space available for the main content smaller. Therefore, whenever fixing content to the edges of the viewport, do so only on a screen axis that has enough space to keep the fixed content from consuming too much room across that axis. For instance, don’t fix content to the top or bottom of the screen without applying a viewport height rule (for example, a height-based @media query) that checks that sufficient space is available.

However, with appropriate checks in place, the sticky filtering sidebar could even be rearranged to occupy multiple columns, with the tools distributed across two or three columns. If the filtering toolbar is horizontal46, you could attach it to the top of the screen if the viewport is sufficiently high, or if the horizontal space is plentiful, you could reposition it into a sidebar upon scroll. Browser height can similarly be used to dynamically adjust truncation thresholds47 for filtering values, increasing the number of filtering values displayed before truncation sets in as the screen height goes up.

Recently Viewed Items Link

During testing, when the subjects landed on a product page and decided the product wasn’t for them after all, they would either continue browsing or leave the website. Making it easy for the user to do the former is obviously in the vendor’s interests. By displaying suggestions for alternative and supplementary products5448 or a list of recently viewed items in the sidebar above the page fold, you instantly show users an escape route should they decide that the product they’re currently looking at isn’t for them.

Product suggestions or a list of recently viewed items may be placed in a sidebar for easy cross-product navigation49

Product suggestions or a list of recently viewed items may be placed in a sidebar for easy cross-product navigation. (View large version50)

Making it easy for users to navigate from one product to the next can be essential to their product-finding abilities. Of course, product categories51 could similarly be promoted, although be mindful of the user flow — is the user being sent back and forth52 between product lists and product pages, or can they go from one product to the next?

Sometimes the former is attractive because it gives the user a more coherent overview of the website’s offerings, but obviously the back-and-forth flow also introduces a lot more friction. Therefore, make sure the paths you suggest in promoted elements strike a sensible balance between category and product page destinations.

Sticky Product Page Summary Link

Product pages can be long. They can contain images53, descriptions, specifications, customer reviews, suggestions for alternative and supplementary products5448, FAQs, etc.

All of our usability studies have shown that more information is almost always better (so long as the content is of good quality — that is, useful, trustworthy and reasonably accurate). Yet it also means that the user can sometimes end up very far away from the core context of the product (i.e. the name, price, any possible variations and the “Buy” button). To provide a permanent context and always keep the “Buy” button within reach, put a sticky product summary in the extra space on large screens, attaching it to the edge of the viewport as the user scrolls down the page.

A sticky product summary and “Add to Cart” button are attached to the top of the user’s screen as they scroll down long product pages55

A sticky product summary and “Add to Cart” button are attached to the top of the user’s screen as they scroll down long product pages. (View large version56)

This sticky product summary can basically be a slightly modified version of the product’s list item design; or, if it’s attached to the horizontal axis of the user’s screen, it can take on a more slender aesthetic. Either way, the intent is to give the user a permanent product context, enabling them to see the name, price and any variations, even if they’re deep down in customer reviews. And, of course, always keep that “Add to Cart” button within easy reach when the user is reading that rave review from a happy customer.

Sticky Order Summary and Customer Support Link

During checkout, plenty of horizontal space will be unused because the pages tend to be very focused and because multi-column forms57 can cause major usability issues during checkout. On large screens, this vast sea of white space can be appropriated by an order summary and customer support details. The order summary would be a constant element throughout the checkout experience and serve as a constant reminder of the products the user is only moments away from owning.

Order summary and customer support features are displayed in a sidebar when there’s room for it on the screen58

Order summary and customer support features are displayed in a sidebar when there’s room for it on the screen. (View large version59)

Meanwhile, customer support features can be moved up from their common footer position to make them readily available should the user run into trouble during the checkout process. If you’re worried about being overrun in customer support, then you can more selectively promote details based on the cart’s order value and how far into the checkout process the user is and whether they have run into validation errors.

Responsive Upscaling For E-Commerce Link

It’s striking how few e-commerce vendors currently optimize their website’s design for large screens. Even the 18% of leading e-commerce vendors that do offer an optimized large-screen experience have really only taken the first small steps in that direction. Given the large segment of users with big screens, responsive upscaling is an area ripe with potential.

When implementing responsive upscaling, keep in mind the core principle of “same content, different packaging.” Either a piece of content will be important to all users, or it won’t be important enough to bother users on large monitors with either; just because a user has more space on their screen doesn’t mean they want a barrage of low-quality content. Instead, explore ways to present existing page content differently in order to create a better experience for users with big screens.

The 11 ideas covered in this article are all based on this principle of same content, different packaging — taking existing page content and scaling or repositioning it, sometimes significantly, other times subtly:

  1. inlining sign-up overlay
  2. header and footer shortcuts
  3. inlining carousel slides
  4. inlining filled cart
  5. additional product columns
  6. larger product list images
  7. scaling and rearranging product lists
  8. sticky filters
  9. recently viewed items
  10. sticky product page summary
  11. sticky order summary and customer support

Do you have other ideas for optimizing e-commerce websites for larger monitors? Share them in the comments section. It’s time to optimize the e-commerce experience for big-screen users, too.

(vf, al, ml)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59

↑ Back to top Tweet itShare on Facebook

Christian Holst is the co-founder of Baymard Institute where he writes bi-weekly articles with their research findings on web usability and e-commerce optimization. He's also the author of the E-Commerce Checkout Usability and Mobile E-Commerce Usability research reports.

  1. 1

    Yes! I always used the Smashing Magazine website as an example of large screen using. I am aware of your 5 layouts since two or three years ago, and that made me love you guys more. Is a pity I cannot see Herr Friedman in Zürich tomorrow. Anyway I wish a good event.
    Freundliche grüsse aus der Schweiz.

  2. 2

    Excellent points!
    I definitely think this is an area of opportunity for setting new UI/UX design standards…

  3. 3

    These are great points. I recently was involved with an ecommerce site project and definitely will keep these ideas in mind when we unearth the project again.

  4. 4

    Your ideas and findings are always insightful, practical, inspiring and worth a read. This is a great approach to allow more content to speak to user when more screen’s real estate is available.

    Thank you.

  5. 5

    Nice one. I always was asking that myself – why bother only with SMALLER screen sizes, but leave out the bigger ones?

    My new site is supposed to launch somewhere around this week(end); and it’s built with both large and small screen sizes in mind. I just followed the “add a breakpoint as soon as it looks shitty”-principle. That works very well for both directions.

    cu, w0lf.

  6. 6


    Please ignore my novice question. However by responsive upscaling do you mean something like which changes it’s width according to screen resolution?
    Is that recommended?

  7. 7

    Nice post. Been thinking about these concepts and approach lately.

  8. 8

    Christian, thanks for a great article! Forgive me if I’ve missed it in your article; have you run split tests to determine the efficacy of some of your proposed tactics and patterns? What were the results?


    • 9

      Good point Adam, and seconded. Good suggestions here, though the pros/cons are hypothetical. It’d be great see some data in this.

  9. 10

    Designing Studios

    August 30, 2015 8:17 am

    Thanks for a nice article. Is this linked to a W3 new approach, calling as “FLEX BOX” model ?

  10. 11

    Toko Wallpaper

    August 30, 2015 6:04 pm

    Love you is the first time found your blog so we missed the article very helpful to us in the use of large or small rean and despite the new found your blog we will try to understand your article. success

  11. 12

    Awesome post very helpful for all owner of eCommerce site Great Article.

  12. 13

    The article makes some great points, but it’s worth keeping in mind that screen size is not the same thing as browser window size, and fullscreen browser windows don’t represent a typical use case on very large PC monitors. Therefore there are diminishing returns on the time invested in very large responsive breakpoints.

  13. 14

    Hello Christian, thanks for a nice article on RWD. Keep up the nice work.

    You also asked for ideas about optimizing websites for larger monitors. This link can be useful


  14. 15

    Great article Christian. A lot of great stuff from this article. Thanks for sharing this very helpful post, also please visit or reach me on 0434 925 916 or by email

  15. 16

    Great Job Christian! I found this very helpful article, a lot of great stuff from this post. Thanks for this, also I found a related article about responsive design and you may want to look at it

  16. 17

    Some great ideas here that I’ve seen already implemented by some e-commerce sites.

    One thing to consider with larger screens is whether the user actually uses the whole screen for one window, or whether they have a number of windows open – this won’t be revealed through analytics so always look at how users view the site before starting design.

  17. 18

    Great post Christian. However I think you’re misusing the word “responsive”. Most of these are really more “adaptive” than responsive as it would take a lot of code work to add all the sticky sidebars and filters. Examples 5, 6, and 7 are the most likely truly responsive candidates. Not to say the others shouldn’t be considered, just to be aware that the coding impact may be quite different.

  18. 19

    The big problem with the scaling is what we see when using bigger products. Larger screens tend to scale more in width than height and have a horizontally-focussed display, while product schemes usually are more vertically or – in best case – quadratically.
    This leads to the problem of cutting more visible product content in comparion to the smaller layouts. I always watch Amazon in this case. In my opinion they do some things basically wrong or at least dont give too much about responsive design “rules”. In example the wa they scale their product detail pages is a mess for big screens and really harms read- and usability. But they would never resize their products on the listing page. The technology is there and if not amazon, who else could give it a try – or multiple? The relation between a product size and the navigation elements stays the same. This is what I find interesting.


↑ Back to top