Responsive or mobile friendly;
what’s the difference?

A number of studies show that loading speed is one of the most critical elements for the success of websites and apps. Both Nielsen (2017) and KissMetrics (2017), as an example, state that 47% of website visitor expect a web page to load in two seconds or fewer, and that 40% of web visitors are likely to abandon a website if it takes over three seconds to load. Besides this, a mobile website also needs to have a 0.1-second response rate, meaning that users should be able to integrate with the content immediately after a site loads (Nngroup.com, 2015).

According to Google (2015) more searches now are performed on mobile devices than on desktop, and companies finally have come to understand the importance of adapting their websites to work properly—not only on desktop—but also within the technical- and size-limits of mobile devices.

While it is difficult to find reliable statistics on the adoption rate of mobile design strategies (Meunier and Meunier, 2017), it is clear for anyone working with web-marketing that the concept of ‘responsive’ has been on the top of the agenda in most organisations with mobile sales- and marketing strategies for the last few years. The problem, however, is that many of these companies fail to understand that responsive is not the same as mobile friendly.

Mobile friendly, definition.

A ‘mobile friendly’ site not only looks great on all kinds of devices and screen sizes but also loads fast. The following list states some of the main metrics that a mobile friendly site needs to conform to:

• A design that adapts to any screen size.
• A page load of maximum 2 seconds, also on slow connections (Kissmetrics, 2017).
• A response rate of 0.1 seconds (Nielsen, 2017).
• That the site work also on old devices with limited JavaScript capabilities; including all UX-elements such as buttons, menus and navigation.

The problem with the concept of ‘responsive’ is that it mainly covers the first point of the list above, and that many agencies and companies due to incompetence or laziness fail to make sure that their web experiences not only look good on mobile devices—but also are functional and load fast.

A few of the reasons why many—or arguably most responsive websites—in fact are not web friendly (Meunier and Meunier, 2017), is that the process of adapting today’s modern websites with advanced image galleries, video backgrounds, cool animations, and stunning photography to the mobile eco-system takes effort and often demands major changes in design and the codebase of a website built from a “desktop first” perspective.

With the growing number of organisations and smaller agencies lacking in-house competence in evaluating web code, and instead of building their web experiences (mobile and desktop) from a specification grounded in their own or their clients business goals choose to buy ready-made web templates, it is obvious why today’s web is full of beautiful but useless mobile experiences.

What many of these organisations fail to understand is that most templates sold on marketplaces like ThemeForest (2017) have a terrible codebase, which in many cases also can be explained by the fact that many of the developers behind these templates simply have copied other templates—including the badly written code.

With an increasing number of companies with no competence of evaluating web code and who in their efforts to save a few bucks choose to buy templates, it is also obvious why many of these organisations fail to understand that their new shiny website template which on the marketplace where they bought it was listed as “responsive” and “with code that validates”, in fact performs terrible on mobile and most certainly are detrimental for their own- or their customers business.

A litmus test for mobile friendliness

While a complete guide for creating mobile friendly websites is a topic too big to cover in this text and also the subject of many great books; evaluating whether a website is mobile friendly or not is fairly easy, and one tool for doing a quick mobile-friendly test is to use Google PageSpeed Insights (PageSpeed Insights, 2017).

There are some companies and agencies claiming that the Google PageSpeed should be seen just as an “indicator,” and that generated recommendations using this tool do not have to be followed. For any company that wants to compete in today’s competitive market, however, this is definitely not true! There is a reason why Google has stated these guidelines, and all parameters in the Google PageSpeed tool are part of Google’s ranking algorithm. Any company in a highly competitive market segment which chooses not to follow Google’s recommendations is least to say foolish considering that fixing most the errors found in a Google speed test, in most cases, does not involve more than a few hours of work.

Two exceptions

There are, however, two notable exceptions to optimisation efforts recommended by Google that, in most cases, should be avoided:

1. Compressing and minifying HTML

With compressed HTML bringing a lot of complications for web projects with external stakeholders and with very little impact on page performance, this is an effort that in most client projects, arguably, can and should be avoided.

2. Image optimisation efforts—except for size and dpi.

Making sure that images are optimised for the size of the viewer’s device is one of the most important optimisation efforts that always should be performed. However; image optimisation efforts including stripping images of all their meta including colour profile data, not only have a very small impact on page loading speed, but also can lead to unwanted and unexpected results (Friedl, 2017) and therefore should be avoided.

Conclusion

With mobile internet use now having surpassed desktop, most organisations have come to understand the importance of adapting the design of their websites to smaller screens which have become known as ‘responsive design’. The number of responsive websites that have serious usability problems on mobile, however, bears witness to a general lack of understanding of the differences between ‘responsive’ and ‘mobile friendly’. This text has outlined some of the main differences between these two concepts and why the concept of ‘mobile friendly’ is poorly understood by many organisations.

References

Friedl, J. (2017). Guetzli doesn’t seem to respect PNG color profiles · Issue #64 · google/guetzli. [online] GitHub. Available at: https://github.com/google/guetzli/issues/64 [Accessed 12 Jun. 2017].

Google. (2015). Building for the next moment. [online] Available at: https://adwords.googleblog.com/2015/05/building-for-next-moment.html [Accessed 12 Jun. 2017].

Kissmetrics. (2017). How Loading Time Affects Your Bottom Line. [online] Available at: https://blog.kissmetrics.com/loading-time/ [Accessed 12 Jun. 2017].

KissMetrics. (2017). How Loading Time Affects Your Bottom Line. [online] Available at: https://blog.kissmetrics.com/loading-time/ [Accessed 12 Jun. 2017].

Meunier, B. and Meunier, B. (2017). 82% Of Sites Use Responsive Web Design In 2015? Try 11.8%. [online] Marketing Land. Available at: http://marketingland.com/82-sites-use-responsive-web-design-2015-try-11-8-114050 [Accessed 12 Jun. 2017].

Nielsen. (2017). Website Response Times. [online] Available at: https://www.nngroup.com/articles/website-response-times/ [Accessed 12 Jun. 2017].

Nngroup.com. (2015). Website Response Times. [online] Available at: https://www.nngroup.com/articles/website-response-times/ [Accessed 12 Jun. 2017].

PageSpeed Insights. (2017). PageSpeed Insights. [online] Available at: https://developers.google.com/speed/pagespeed/insights/ [Accessed 12 Jun. 2017].

StudioPress. (2017). Fast WordPress Hosting + Mobile Responsive Themes by StudioPress. [online] Available at: https://www.studiopress.com/ [Accessed 12 Jun. 2017].

ThemeForest. (2017). Website Templates & Themes from ThemeForest. [online] Available at: https://themeforest.net/ [Accessed 12 Jun. 2017].