You resize the browser and a smile creeps over your face. You’re happy: you think you are now mobile-friendly, that you have achieved your goals for the website. Little do you know, however, that usability may have been compromised, and the site may be at risk of loading slowly or crashing. With multiple channels of entry to your business, how do you embrace a coherent digital experience that customers expect across all channels including desktop and mobile?

Why Responsive Web Design isn’t the be-all and end-all

Responsive Web Design (RWD) is a technique typically used to make a site function on a mobile device with minimal resizing, panning and scrolling required making the site easy to read and navigate.

Using RWD alone doesn’t take into account performance, however, and while a site may be viewable on mobile it could take too long to load or even crash. For example, an all too common problem is that mobile sites are attempting to load the same number of bytes regardless of the screen size or the fact that mobile networks aren’t anywhere near as reliable as fixed lines. This will inevitably lead to a poor user experience if it’s not rectified.

Finding a solution

Designing responsively is important because we need to deal with a range of viewport sizes across desktop and mobile; but thinking only of screen size underestimates mobile devices. While the line between desktop and mobile is becoming more blurred, different possibilities are still open to us based on the device type. Some commentators have called this “responsible Responsive Web Design,” while others consider it Responsive Web Design with a modern vision. Without getting into semantics, we do need to understand and be aware of the problem.

While there is no silver bullet and no solutions that can be applied to every type of document, we can gain the benefits of Responsive Web Design, without affecting performance on mobile, by embracing a couple of tactics:

  • Deliver each document to all devices with the same URL and the same content, but not necessarily with the same structure
  • When starting from scratch, follow a mobile-first approach
  • Test on real devices what happens when resources are loaded and when they display. Don’t rely on resizing your desktop browser
  • Use optimisation tools to measure and improve performance
  • Deliver responsive images via JavaScript while we wait for a better solution from browser vendors (such as srcset)
  • Load only the JavaScript that you need for the current device with conditional loading, and probably after the onload event
  • Inline the initial view of a document for mobile devices, or deliver above-the-fold content first
  • Apply a smart responsive solution with one or more of these techniques: conditional loading, responsiveness according to group, and a server-side layer (such as an adaptive approach)

Building advocates for your digital brand with performance

User experience is everything; a good mobile site is seamless from the web, fast, and easy to use, as users are able to find controls on the screen right where they expect them to be. Customers should have the desire to pick up the gadget and use it all the time, but this will be limited if mobile apps don’t perform well enough on the mobile devices of today or those of tomorrow. Sites need to be future proofed by making sure they take advantage of all device functions and users can view pages seamlessly across various screen sizes. In some cases, optimising mobile performance can mean that sites must be rebuilt from the ground up, but creating a good mobile user experience is the key difference between having customers that visit your mobile site and building advocates for your brand.

Customers want immediate access to a mobile site that performs well and is usable. What’s more, as functionalities on mobile increase, the level of sophistication mobile sites will have to deliver will also need to improve; putting sites at greater risk of becoming slow or crashing, which may go unnoticed by the company, if they are not monitoring and testing regularly. Failing to provide a good mobile experience can cost a company financially and in reputational damage, as consumers turn to competitors and repeat custom becomes a thing of the past.


By Joram Cano, solutions consultant at Keynote.

Visit our website to see events that will help you keep up to speed on; Data protection, cyber security, digital marketing and business growth. View upcoming events here!

comments powered by Disqus