By now, you are sure to have heard about the continuous rise of mobile internet usage as a share of overall web traffic. After years of projections that foretold it would happen, the use of mobile devices for web access surpassed that of desktop earlier this year. And though apps continue to dominate mobile usage (as opposed to web browsing), having a strong mobile web presence has become a vital component of businesses’ internet strategies.
However, the practice of having separate mobile landing pages under separate URLs (m. sites) is no longer the most efficient method of maintaining that presence. In its place, the Responsive and Adaptive Web Design formats have come into vogue in the past few years, though their different characteristics and effects can make for a difficult decision as to which to implement.
Responsive Web Design (RWD) creates a structure in which the page layout automatically adjusts itself based on the size of its display. So if used on a desktop, you can adjust the browser window to any size you want, and the page will still be laid out efficiently. The same principle applies for mobile, where the windows generally cannot be adjusted, and obviously are restricted by the size of the device being used (smartphone, tablet, etc).
The biggest advantage of a Responsive site is that it can be created through minimal development work, and even added onto an existing site, as the code is built into the existing CSS code. This makes for a far smaller investment in both time and money. However, because it only changes the way that the existing data is displayed, the size of the page and number of objects on it remains the same regardless of how the site is being accessed.
Adaptive Web Design (AWD), while more complex and expensive to implement, compensates for this drawback. It requires entirely new code to be written, but once it is in place, it creates proportionally-sized sites based on the type of device on which the site is being used. Therefore, if you access the site on a smartphone, you will see a version that has been optimized for better performance – that means smaller and/or fewer image files, less third-party content, etc.
While the difference in performance for the desktop versions of RWD and AWD sites is usually negligible, the advantage of AWD is considerable on mobile devices, since there are often bandwidth constraints on mobile networks. As there are fewer bytes and objects that have to be downloaded on AWD sites, they usually load much faster and experience far fewer errors than their RWD counterparts, which deliver everything on mobile that a desktop user would receive.
Catchpoint has conducted several tests over the past few months on many of the top US-based Responsive and Adaptive sites. The results have consistently shown AWD to deliver significantly better performance on mobile. We also ran custom tests where we compared an identical website using both designs. The results: first connect times on AWD were twice as fast as RWD. In addition, web page response times, which were close to five seconds on RWD, were less than three seconds on AWD.
The difference in mobile performance between the two design formats is clear, which can in turn lead to very real financial effects. For companies that rely heavily on web traffic to drive their business, a slow or unresponsive mobile site can turn customers away and send revenue spiraling downwards.
As technology improves, people expect their sites to be faster and faster regardless of whether they are on desktop or mobile, and the cost of failing to meet those demands can be great. According to studies done by both Google and Bing, slower load times leads (even by fractions of a second) lead to a noticeable drop in users, and even after problems get fixed, consumer confidence in the site is difficult to rebuild. For companies as big as Amazon, for instance a delay of just one-second could cost them $1.6 billion in revenue over the course of a year.
As you can imagine, a fast, reliable website is an essential component of a performance marketing or advertising strategy. Often in these models, purchasers of advertising space on major sites only pay when there is a click on their ad, or in some cases a completed conversion. If you advertise on any of the major web portals, you do not want to be paying significant money for click-throughs, only to bring potentially interested consumers back to your poorly performing site which ultimately may turn them away. Similarly, if you are a major retailer who advertises products and gets paid only when ads are clicked through and purchases are completed, you have got to make sure your site is as fast, reliable, and conducive to driving conversions as possible. Otherwise, you may be missing out on a major revenue stream.
Therefore, determining which design format is best for your site depends largely upon the goals that you have for that site. If your site does not have much in the way of advanced functionality, or perhaps focuses more on simple content that transitions easily to mobile, then RWD is likely the best and most cost-effective way to create a mobile presence
However, for eCommerce sites with a significant percentage of mobile users, while the investment in AWD may be costly, it is also the surest way to prevent latency problems and the corresponding revenue pitfalls that come with them. Even with Adaptive, however, the DevOps teams still has to take steps to optimize the user experience to the max, which means making the transaction process as simple and efficient as possible for mobile users.