A vast majority of your users access your site using either mobile phones or laptops. These tend to have more or less similar screen size ranges. But some of your remaining customers will also use tablets, phablets, wide-screen PCs, and even the odd smart TV.
For an optimum user experience, your site needs to scale to fit and fill these larger screens. If you don’t scale, you will have a lot of unused whitespace on screen that just looks ugly. But scaling properly can be tricky.
You can’t just make the images and text larger to fit on the wider screen because this tends to paradoxically result in fewer products actually being displayed on the screen. While a wide-screen PC has a screen that is significantly longer than that of a laptop, it’s not that much taller.
A laptop, for example, might have a screen that’s 14 inches long and 10 inches tall. A wide-screen PC, on the other hand, may have a screen that’s 30 inches long and only 16 inches tall. So, the length increase is a lot more than the height increase. Any upscaled image will have fourteen extra inches of horizontal space to fill but only six extra inches of vertical space.
You also can’t just cram more items onto the screen because you have more space. This causes visual clutter and makes your pages harder to scan. A proper responsive upscaling approach utilizes both methods. You can make product thumbnails a little larger while also adding a few more products to the screen (two to four).
But these are not the only ways to implement responsive upscaling. Here are some other things you can do to use up all that extra horizontal space in an effective manner:
- Include snippets from the product description next products on a list. Since you have more space, you can include more information.
- Put header and footer shortcuts in a sidebar
- Put sticky filters in the sidebar
- Have a sticky cart and order summary in the sidebar
- Have a sticky sidebar of recently viewed items