Why responsive design shouldn’t be your goal in mobile
April 21, 2015 11:58 am
We’ve explained before on this site how performance is so important for mobile, and that you will lose traffic and revenue if your site is slow. The quick explanation is that users don’t like to wait around, and especially when on mobile.
The longer explanation, especially for those who like stats and numbers, can be found here; the pronounced effect of performance on conversions has been highlighted in various studies from companies like Walmart, ebay, Amazon and Google, which have shown direct correlation between sales and site speed. Make no mistake, these companies take performance so seriously they spend a lot of time and money trying to shave even milliseconds from page load time.
Which brings us to Responsive Web Design (RWD). Responsive web design is many things, but ultimately, it is a technique, and not a goal!
Responsible responsive design
Responsive sites have a weight problem. According to research, 72% of responsive sites result in the same-sized webpages for desktop and mobile devices. Think about this for a moment: even when a user is on a mobile phone, most of the time that user will get the same amount of data sent to his phone over his slower, more expensive cellular data connection as he would if he was sitting at his desktop computer, with all its RAM and CPU power and network bandwidth.
This is surely not what a mobile user wants; it doesn’t make any sense. However, this strange situation can be explained as the result of having responsive design as a goal, rather than having a fast, performant site as goal, and using responsive design as a technique to achieve it.
Responsive web design isn’t intended to serve as a replacement for mobile web sites
According to Ethan Marcotte who came up with the term Responsive Web Design, responsive web design isn’t intended to serve as a replacement for mobile web sites. That is to say, it’s possible to combine traditional mobile website building techniques with responsive techniques; just because you have a responsive design does not mean you can’t build mobile-specific pages or sites. To the contrary, by using responsive design responsibly can complement other techniques too.
Misunderstanding mobile, by reducing it simply to a problem of different screen-sizes is part of the problem. Responsive design, with fluid layouts and images, can certainly help when desiging for multiple screen-sizes, but there are many other aspects to mobile that need to be considered before the goal of producing a fast performing website can be achieved. The following are some of the things that make mobile development trickier:
- cellular network latency
- time taken to turn radios on when device has been in sleep mode
- CPU, RAM and battery/power limitations
When we consider these things, we begin to get the picture of why responsive design that sends the same HTML to all devices is problematic and actually hinders the goal of keeping users happy and willing (to reach for their wallets) with a fast website. Performance should be a primary consideration in responsive design.
The one-second rule
As mentioned above, Google is obsessed with performance. So much so that it has come up with a one second rule (of thumb):
we must deliver and render the above the fold (ATF) content in under one second, which allows the user to begin interacting with the page as soon as possible
The idea is to get the visible portion of the page rendered and usable as quickly as possible, and the remainder of the page can then be loaded after. If your goal is to have an RWD website, then you can ignore this rule. If, on the other hand, you want to keep your users happy and busy, then you should pay heed.
To achieve this, some common bad practices of RWD must be discarded, and attention paid to performance:
- performance tools should be used to find bottlenecks and optimise for speed
- priority should be given to above-the-fold content, by delivering first and/or inlining
- consider making the responsive solution smarter by adding server-side components (RESS)
One major technique that should be reconsidered is delivering the same HTML to every device. This approach is often used in RWD, and media queries are used to apply different CSS and image files, depending on the users’s exact device, whether it be desktop computer or mobile phone. An important drawback of this approach is that traditionally, browsers will download all included CSS and scripts, even if they don’t apply in the current context.
Responsive sites and same HTML on all device
So, is it a problem for RWD not to deliver the same HTML to all devices? This is a common misunderstanding about RWD techniques. It is a RWD purist’s view, and one that follows from adopting RWD as the goal rather than the technique.
Maximiliano Firtman points to a stark example of this in the recent redesign of the New York Times website.
In the NYT redesign, responsive techniques for fluid layouts, but also delivered mobile-specific templates—i.e. all devices, desktop and mobile were not sent the same HTML.
Although the redesign was criticised for not ‘getting’ what responsive design is all about, it is perhaps more useful to consider that this criticism doesn’t get what web design is about. What the NY Times built was a site that worked efficiently for all users. What they were criticised for was not having a pure RWD site. So, what was the goal again?!
Happy users spend bigger
To summarize, performance should a key concern for any mobile design. Happy users are more likely to convert, and fast sites make happy users. If a technique such as responsive web design is elevated as a higher priority than having a fast, efficient, and performant site, then you may end up with a responsive site, but just not one that will load very quickly, or be good at converting visitors into customers. As pointed out by well known developer Brad Frost, Your visitors don’t give a sh*t if your site is responsive.
Main image: Harold Hollingsworth