Avatar Posted by Cameron Francis on in Web Design & Development

The technical world can be pretty ruthless toward the established ways when a new trend emerges. But at a time when mobile devices seem to be taking over, and web designers are expected to ensure their work adapts to tablets and Smartphones, it would be foolish for them to turn their backs on the trusty desktop computer.

Responsive design is already an important phrase in web design. But while attention is firmly focused on the appearance and navigability of e-commerce sites on hand-held devices, statistics continue to show that online sales through desktop units remain the most popular of all methods.

The catch is, with the growth in popularity of 4K monitors, modern desktop users tend to prefer large screens. There is a need to apply the same responsive design values to ensure that websites respond with the new screen dimensions.

So, responsive upscaling should not be overlooked, but unfortunately, it seems it is. In a research carried out by the Baymard Institute, meeting the challenge posed by the larger screen PCs is not really being considered despite such clear indicators.

  • 18% of the 50 leading US e-commerce websites were optimised to respond to large monitors
  • 94% of those same e-commerce websites were optimised for smaller screens on mobile devices
  • Over 75% of sales on e-commerce sites were secured from PCs and not mobile devices
  • Over 33% of visitors from PCs used screens larger than 1350 pixels

What Is Responsive Upscaling?

Responsive Upscaling relates to designing a website to adjust to the dimensions of a large desktop monitor. Basically, every aspect of the website can up-scale to fit the screen and not sit idly in the middle of a large screen with acres of empty space around it.

Responsive design is usually about websites adjusting to fit the much smaller screens of Smartphones and tablets. The problem on mobile devices is site navigability. Site elements such as calls-to-action, tabs to product pages and important marketing links are hidden beyond the confines of the phone or tablet screen. This frustrates users and encourages them to go elsewhere.

The increasing move towards larger screen resolutions by desktop users has brought about different kind of poor user experience. Site elements appear too small, rather than too big. The page is surrounded by white space, effectively increasing the chances of the visitor simply going elsewhere.

Is Upscaling Really Necessary?

The quick answer is yes – and there are 2 reasons why:

  • Most online shoppers still use desktops
  • Desktop monitors are getting bigger all the time

According to an article on MarketingLand.com, desktops still rule online sales, reporting that 76.9% of online sales were completed from a desktop computer, while 12.4% was via a tablet, and 10.7% was via a Smartphone. It was a similar story in terms of traffic to ecommerce sites, with more visitors sitting at their PCs (53.9%) when online shopping than using their mobile. However, Smartphones accounted for a sizeable share (33.7%) with the remaining 12.4% visiting from their tablets.

When it comes to screen resolution, the number of users opting for screens larger 1080p or 1366p is increasing. In September this year, figures showed that screen resolutions of 1366×768 represented an 18.80% share of the market. But this was down from 19.40% just the previous month, and from 20.84% in September 2014.

In contrast, the 1920×1080 is going the other way, growing its market share from 6.26% in September 2013, to 7.27% the following year, and to 8.11% in September 2015. It is now the second-most popular screen size being used.

True, the overall rate of increase in screens greater than 1350p (1440p and 1600p included) has not changed very significantly, growing from 16.28% of the market in 2013 to 16.43% and, this year, to 16.50%. But the figures tell a clear story. Not only is responsive design crucial (both upscaling and downscaling), but designing websites to meet modern desktop trends is similarly important.

Meanwhile, figures from StatCounter.com reveal that up to May 2015, just over a third (34.2) of the 14 top resolutions were accounted for by those greater than1350p (including 1366p, which was the largest at 17.95%).

Advantages of Upscaling

So, what are the advantages in upscaling an e-commerce site?

  • Images are larger, making a bigger impact
  • Additional product columns can be added
  • Better page context
  • Greater visibility for website actions, like filtering and ‘Add to Cart’

Making Use of the Extra Screen Real Estate

The extra space provided by the larger PC screen is referred to as screen real estate. The challenge is to fill this real estate but not in a manner that lessens the quality of the e-commerce website design. There are several ways to achieve this, many of which are subtle – like adding a little space between columns and page features.

The extra breathing space created can make pages more attractive to visitors, thereby improving user experience. However, some considerations need to be made:

1. In-Lining Sign-Up Overlay

One of the main issues with sign-up overlay on regular screens is that it can be quite intrusive, getting in the way of web content and images. Often, an interstitial is used, completely blocking the site behind it. The effect is poor user experience. This is why Google has recently announced that it is dropping them. But with the extra screen real estate, the sign-up can be placed in the available space, perhaps in the left or right column. The advantage is that the call to action can be permanently visible, without being an eye-sore. If it is located above the fold, the CTA can be visible from the moment a visitor arrives at the homepage.

2. Header and Footer Shortcuts

Normally, the header of an e-commerce website contains important links. For example, links to members’ accounts or a login or register box. The footer can feature a site map, and links to About Us, Contact, and FAQ pages or other customer services. These are subtle locations. But with so much extra room, these links can be made more accessible by making them more prominent. There is no need to make them too big, of course. They are not, after all, the most significant for visitors. But they may be placed in larger link boxes, perhaps slightly shaded to match the overall design. This means space can be occupied without having to find extra content.

3. In-Lining Filled Cart

The cart is where online shoppers place various items before finalising their purchase. A cart in clear view is a big advantage, but when sites are restricted the cart is often hidden. A visitor then can only view their purchases by clicking on another page or pop-up box. But with the extra space afforded by the larger screen, that cart can be accommodated on the home or product page. With each item listed in the cart box, it’s much easier for shoppers to re-assess their purchases, check things like brand name or specifics before choosing another item to complement them, or check what they have yet to find. It greatly improves buyer experience.

4. Add Extra Product Columns

Every business wants to maximise its products visually. Use the extra space to add another product column. This is an ideal option on grid-based lists, where images and initial information is presented, before a visitor clicks on the segment to read more. Instead of seeing 6 or 8 products, a visitor can see 10 and feel they are making a more informed decision. However, it’s equally important not to add too may columns to keep the experience positive.

5. Larger Product Images

A product image is one of the most important aspects of selling online. It is the initial attraction to an item. The information in the content is secondary. An effective way to enhance user experience is to provide a viewport space which will scale up the image of the particular product. This would allow visitors to examine the item more closely before buying. Just be careful of the size of the viewport. If it is too large, it will have a negative effect. Alternatively, the images themselves can be scaled up slightly to fit the increased website design.

6. Upscale the Product List

Of course, you can also upscale the list items themselves. This allows visitors a better view of your products. Adding a column to the grid can help fill out the extra space.

Talk to Us

Responsive Upscaling can be hugely beneficial for e-commerce websites. However, it’s important that you get the right advice to get the maximum benefits for your website. At eTraffic Web Design, we offer expertise in Responsive Web Design including Upscaling, as well as other key services.

Get in touch with one of our team for more information. You can fill out our online enquiry form or call us on 1300-887-151.

Leave a Comment

Google Rating
Based on 46 reviews