In this age of responsive web design revolution, many sites have already shifted their sites accordingly, but some, especially e-commerce sites, have yet to implement responsive design as widely.
Most of the focus related to responsive design revolves around creating a seamless browsing experience for users on various devices. However, not enough airplay has been given to building a site that is optimized for screens that are bigger than your standard desktop/laptop.
If you think responsive upscaling is not as important, consider the following facts:
- Just 18% of the 50 leading e-commerce sites in the US were found to have optimized their web design for large monitor displays, compared with 94% that have optimized for mobile displays
- About 75% of e-commerce sales are still carried out on personal computers rather than mobile devices
- Roughly a third of users visit e-commerce sites on screens larger than the standard 1350 pixels (Note: There is a difference between screen and browser widths, meaning that the number of users whose browsers exceed the given width is slightly lower. In addition to other metrics, it is advisable to collect data on user browser sizes to gain a more accurate picture of the significance of browser size to your site).
Given the above information, e-businesses stand to gain a lot if they implement optimized design for their users browsing on larger displays in addition to investing in other SEO services. As a matter of fact, large screen optimization could just be the next angle of responsive e-commerce site design.
This article highlights the most important aspects of responsive upscaling, including a core principle behind it and how it can be applied to create a bespoke browsing experience for users on larger-than-normal displays.
How un-optimized content is rendered on a large display
If you browse content optimized for standard screens and below, you’ll notice a lot of white space on either side of a usually-scrammed product listing page. Most e-commerce sites display their content according to a pre-determined, aesthetics-inspired product vertical.
In such cases, users need enlarged thumbnails to be able to evaluate the products more accurately. Responsive upscaling is about utilizing the extra space to offer users that have space real estate a more meaningful browsing experience, rather than just leaving it unutilized and cramming all the content into a fraction of the screen.
At the very least, such content should be designed to resize so that there is a little more breathing room for various elements and as little white space. However, this idea can and should be taken much further to ensure complete utilization of the extra space to guarantee large display users the same superior browsing experience that’s been pushed for their smaller display counterparts.
Core principles behind responsive upscaling: Different packaging for the same content
For responsive upscaling purposes, the extra space provided by large displays can be used in two main ways:
- Insertion of additional content – this is content that will only be seen by viewers with larger screen displays
- Representation of existing elements – the existing elements on the pages are redesigned to use the extra space e.g. changing layouts, scaling sizes etc.
This is almost the same as what responsive downscaling (the more common version of responsive design) is about. Content can be presented quite differently for web design purposes, with sometimes dramatic differences as a result.
As a rule of thumb, insertion of additional content only available for large display users isn't the best idea, though there are exceptions to the rule. If there's content that isn't important for standard screen display, then it’s likely to be as unimportant for large screen display. Having a bigger screen doesn't mean the user wants to see unimportant details just to fill up space.
In addition, bigger screens don't mean users want pages crammed with information to the point where scanning is a problem, just like smaller screens don't automatically mean users are not interested in the extra information not displayed because of size. This is the reason the second method of responsive design is more popular.
When it may be okay to have additional content?
Just like important content should not be left out because the display is too small, unimportant content should not be added because the display allows room. You can carry out our A/B testing to determine which elements are most important for your display, just like you would with a responsive design for mobile devices.
New content should only be added to larger displays when that content only makes sense to have on a larger display, but not on standard screens. For instance, in a products listing page, you can increase the default number of items displayed on larger screens to make use of the extra space, just like you might reduce for smaller screens to allow for good product viewing.
Instead, consider resizing elements – bigger thumbnails of products, bigger sections for layouts, etc., so that the page has all its important content, but optimized to make use of the new space real estate.
Some ideas for implementing responsive upscaling for e-commerce sites
Below are outlines of a few ideas that may be employed to carry out responsive upscaling for larger displays. More details on the same can be found in other resources online:
- Signup overlays – these can be in-lined to become less conspicuous by placing a permanent dialog box in addition to other above-the-fold content.
- Header/footer shortcuts – links to the most sought-after content can additionally be added in panels or on the footers and headers. Of course, these links should still be accessible from their original locations on the homepage and/or menus.
- Carousel slides – have carousels scaling up on larger displays, but do so carefully to ensure other content isn’t affected, or simply have a multiple-image display where 2-3 slides are shown simultaneously.
- Filled cart in-lining – place a user’s cart in a more visible location to remind them of what great products they have already chosen, followed by seamless access to the checkout process.
- More product columns – as described above, have extra items displaying in the extra space, which technically doesn’t serve as ‘new content’ to ensure the product list view is optimized.
Conclusion:
Responsive upscaling should help you to give your large monitor display users the same superior viewing experience your standard desktop and mobile users are enjoying. Please check Insurance template to see a good sample of website that's optimized for both large and small screens. We are doing our best to obey these principles in all other Joomla templates that we have in our large collection.
Author Bio:
Daniel Mattei (@mattedt) is a web Marketing Coordinator at Dynamic Search and a filmmaker and founder of Shotlight Productions. He lives with his wife, Grace, and Pomeranian, Couscous in Phoenix, Arizona.