Designing for Optimum Web Performance Across Devices

Back in the Internet’s good old days, website design was relatively easy. Sure there were different browsers and operating systems to account for, but virtually all users accessed your site from desktop or laptop computers.

Today’s web design game is a bit more challenging, thanks to the proliferation of smartphones and tablets. Mobile device usage of the Internet exceeded desktop computer usage for the first time in 2014, according to Comscore. Similarly, Comscore said mobile web traffic was nearly double desktop web traffic during last year’s holiday shopping season. But for online retailers, these numbers come with a caveat as more than 80% of e-commerce transactions were still made via desktop computers during last year’s holiday shopping season.

Thankfully, there are different approaches retailers can take rather than build a separate site for every device a customer could possibly use. Responsive Web Design (RWD) allows web pages to adjust to the operating system and layout of any browser, be it desktop or mobile. The same HTML code is served to all devices, but Cascading Style Sheets (CSS) are used to change the appearance of the page based on the end user’s device. For example, a 3-column content layout on a desktop, becomes a 2-column layout on a tablet and a 1-column layout on a smartphone.

Adaptive Web Design (AWD) goes a step further, allowing the web server to determine how to optimally render pages based on the user’s platform by only delivering elements which are necessary for the experience on that specific device and operating system. Images are resized, elements like JavaScript or Flash may be discarded entirely, and ads can be adjusted, culminating in the user getting a much different version of the site than they would if accessing it from a desktop browser. Unlike RWD, which delivers the same codebase as your desktop site, AWD relies on the same codebase, but delivers different batches of that code, optimized to the user’s device.

Which is better for online retailers? That depends. AWD will deliver a faster site on mobile devices, which is all-important for search engine rankings. But RWD will generally provide a richer, more interactive, albeit somewhat slower experience. To read more about how the two approaches differ in web performance, which design technique works better for your site, and how you can use Catchpoint’s digital experience intelligence technology to make the best design decisions, download our new ebook, Is Your Site Designed for Optimal Performance?