Responsive or mobile friendly; what’s the difference?

Posted On 12th May 2020

A number of studies show that loading speed is one of the most critical elements of websites and web 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 less, and that 40% of web visitors are likely to abandon a website if it takes more than three seconds to load. In addition to 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 also are performed on mobile 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 companies with a ‘mobile’ sales- and marketing strategy for the last few years. The problem, however, is that many of 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 and the following list states some of the main metrics that a mobile friendly site need 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 totally useless mobile experiences.

What many of these organisations fail to understand is that arguably 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 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 that in their efforts to save a few bucks choose to buy templates, it is obvious why many of these organisations also 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 horribly 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 want to compete in today’s competitive market, this is definitely not true! There is a reason why Google have 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 Googles recommendations is least to say foolish considering fixing most the errors found in a Google speed test in most cases do 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 past desktop, most companies do understand the importance of adapting the design of their websites to smaller screens which have become known as ‘responsive design’. The number of company websites that have serious usability problems on mobile, however, bear witness of the many organisations, and in some cases, marketing agencies, lacking a basic 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.