Serving big screens with upwardly responsive web design

Serving big screens with upwardly responsive web design

The growth of mobile devices has led to a revolution in website design and the terms 'responsive' design and 'mobile-friendly' have become synonymous. However, in the stampede to appeal to mobile device users, many web designers have neglected to cater for screens that are bigger than the average laptop or desktop.

Upwardly responsive web design addresses that oversight by ensuring that websites make the most of the extra space available to them on big screens.

This can be particularly valuable for e-commerce sites looking to maximise the number of products visible 'above the fold' or for vision-rich sites (e.g. fashion blogs, travel agents, etc.) who want to make every pixel count.

The case for upwardly responsive design

A question you might be asking right now is, 'if the trend is towards mobile, why waste time designing for big screens.'

Although mobile browsing is undoubtedly on the rise, many website owners will be surprised at how small a portion they actually form. The actual picture will vary depending on the business's target market (e.g. age, industry, gender, etc.) but in some cases, the proportion of screens above 1,280px wide is actually larger than all mobile devices combined.

Rather than deal with assumptions, the best plan of action for businesses interested in an upwardly responsive design is to use Google Analytics or similar to display the actual user count for different screen sizes.

Monitoring screen resolution using Google Analytics

Screen resolution (number of pixels) is not one of the default reports on Google Analytics but is simple to set up via the 'Customization' section.

Business owners or data analysts will need to click 'custom reports,' choose a sensible title and replace the tab 'name' to 'Overall.' They should then select Users from the blue Metric Group list and Screen Resolution from the green Dimension Drilldown list before saving.

This report will detail the screen resolution settings on all devices used to access the business's website.

Screen resolution

In the example above, screens above 1200 pixels in width only account for 15% of overall traffic, so the case for an upwardly responsive site may not be as strong as others.

This will present a broad brush view on popular screen sizes but it is possible to drill down even deeper if the situation warrants it. For example, customer spend can be compared across screen sizes to see where the most revenue is being generated. If a small percentage of visitors are using a screen over 1,680px but they are bringing in 80 per cent of trade then a focus on upwardly responsive design would be wise.

Technical challenges in upwardly responsive design

Even those not in the web design trade may be aware of how images can be made responsive by defining their dimensions in terms of percentages (i.e. relative values) instead of absolute values. However, effective upwardly responsive design means playing around with many different layout and function factors to get just the right effect for a big screen.

For example, columns can be widened to fill extra space or the column structure itself can be altered (e.g. four to six columns). Responsive typography may or may not be required depending on the amount of text included and how it looks once columns have been adjusted. Animations which might not look great on a small screen can be set to only run at certain screen resolutions.

All of these design factors and more must be carefully considered in the upwardly responsive design project until the client is satisfied that they are making the best use of the space involved.

Conclusion

Advances in web design now make it possible to create very different user experiences depending on the device used to access a website. Much of the popular focus in this area has been on adapting for mobile devices but if your customers are using big screens to access your website, particularly if your content is rich in visual appeal and/or you have a large product range to showcase, upwardly responsive design is just as – if not more – important.

Topic: Mobile and responsive websites


© Copyright 2018 Eyes-Down Limited