Posted on Feb 28, 2014 in Content Marketing ,  General  | No comments

Author: Tim Stokoe   Date: 27/08/2015

It’s been a much-vaunted statistic that there are now more mobile phones on the planet than there are people. By mid-2014, there were 7.7 billion mobiles v 7.1 billion people. 2014 also saw more people access the Internet via smartphone than by PC/laptop. Little wonder then that Google introduced their mobile-friendly algorithm changes in April of this year in an attempt to ensure that web content is as easily viewed on mobiles as it is on tablets and PCs. Their obvious priority being that all search queries are easily satisfied on all device and platform formats.

Just in case that wasn’t confronting enough, Google also implied that these changes would have even more of an impact on SEO than either the Panda or Penguin updates.

Add into the mix the fact that consumers searching via a mobile device are more results-focused than those using a PC (and therefore more likely to make a purchase decision), and there’s a very compelling reason to step in line.

Inevitably, these changes don’t just affect the user. With the added personalisation opportunities and real-time experience offered by mobile and tablets, marketers also have the added incentive to ensure their digital assets perform across all formats. That isn’t restricted to websites. 66% of all email in the US (according to Marketo; Marketingland, Jan 2015) is now opened/read on smartphones or tablets. One to think about too.

Whilst all of this may appear an ominous threat for those who have yet to respond to the algorithm changes (and make no mistake – it is), ‘Mobilegeddon’ does actually offer an excellent excuse/opportunity to take some huge strides forward for your web presence. And the great news is that it can be achieved by implementing some relatively straight-forward measures.

So how do you become mobile-friendly?

According to Google, what they are looking for are some fairly straight forward functional attributes. To achieve the essential “Mobile-friendly” tag, they require websites to have:
  • Text that is legible without having to zoom
  • Content that doesn’t need the user to zoom or scroll
  • Links and navigational buttons that are easily tapped (far enough apart)
  • Software that works on mobiles (e.g. not Flash, which is generally replaced with HTML5)

Responsive and Responsive Adaptive (RA) design

For all of the above reasons – and many more besides - responsive design has become a must for all contemporary websites. It enables the site to change format based on screen resolution and environment, and hence be viewable on any device.

However, a further consideration here is that the responsive design ideology suggests that every device should receive the same content – which may not always be possible, or practical. In these cases, the burden of culling content that cannot be readily rendered on the device, based on capability or form-factor, is then handed off to the device itself by way of CSS rules or JavaScript.

So, in the case of significant legacy websites with heavy content and often onerous CSS, we would tend to recommend a Responsive/Adaptive (RA - also known as dynamic serving) approach.  RA is a modern interpretation of the responsive design ideology that helps overcome many of the shortcomings of these content-heavy sites (think retail or financial services/banking).  

In our experience, this approach combines the authoring benefits of the responsive approach (for example a single content repository and media library) with the performance and bandwidth benefits of a device-specific site.

So rather than pursuing a blinkered "mobile-first" policy, which can be extremely limiting, we tend to focus on designing, creating and building:

  • A back-end architecture that supports any and all devices, and channels and defines content and functionality
  • A technical and experiential architecture that makes it easy to get a full 360-degree view of your client
  • Interface designs, content and functionality that suit users on whatever device they are operating

We recently re-designed and built the TAL Life website to be responsive adaptive.

And what about mobile-only sites?

Some businesses with larger websites may opt to have a mobile (m.) site, with a separate mobile domain, in addition to their existing desktop site. These would generally be sites that have large amounts of content – both new and legacy - that will not respond so well to being shoe-horned into a mobile screen through a responsive or RA format. Some examples might be large retailers and news organisations. In these cases, mobile-specific content would be created separately, for viewing on a mobile device.

However, there are other purposes. For example, we’ve undertaken mobile-specific sites for a number of clients, including Thrifty Car Rental, KIA Motors, and MAGGI, and each for very different reasons.

In Thrifty NZ’s case, the mobile site formed part of a broader ANZ initiative to enhance the overall vehicle booking experience, which itself was heavily reliant on new reservation systems and corresponding enhancements to business logic and processes. This interim solution utilised existing front-end design and functionality we developed for Thrifty Australia and was then integrated with Thrifty NZ backend services. (BENEFIT)

For KIA Australia, we created a mobile version that was designed to capture a weekend audience who were in the market for a new car. For this we focused on core features relevant to the weekend user, such as ‘Find a Dealer’ and ‘Special Offers’, in addition to vehicle features and benefits.

For MAGGI (Nestlé Australia) we developed a tactical mobile-only version to support new product releases in-store, so that when people scanned an on-pack QR code they received product information and recipe ideas at point-of-sale.

So what are most people getting wrong in the responsive design process?

As you might expect, in view of Google’s stipulations, the three most common usability errors we are discovering for sites undergoing conversion are:

  • “Touch elements too close”: make sure that ‘tap-to-navigate’ buttons or icons are large enough for chunky fingers and are given sufficient space from other buttons or features. The same can be said of internal links.
  • “Small font size”: text needs to be legible in all formats. This is particularly important for mobile content. Simply reproducing your website in its current PC format will render most text illegible at mobile size.
  • “Content not sized to viewport” or having a “fixed-width viewpoint”: the width and scale of the viewpoint needs to be set in the meta data, for iOS and most browsers. Apple recommends using constants instead of numeric values, to accommodate different screen resolutions.

All of these issues can be rectified with some basic UX, meta tag and CSS tweaks, which we’d be delighted to talk you through.

In the meantime, if you’re not sure how mobile-friendly your current site is (pre- or post-optimisation), you can use Google’s free test tool here:

Reference and related reading:

A Cheat Sheet for Mobile Design: Responsive Design, Dynamic Serving and Mobile Sites; John Alexander – Bruce Clay; June 26, 2014

UK and US brands are failing to optimise for mobile, new study finds; Liz Morrell – Marketing Tech News; 25 June 2015

How to Adjust Your Content Strategy for Adaptive Content Personalization; Noz Urbina – Content Marketing Institute; October 27, 2014

Mobile email opens hit record high in 2015 first quarter; Liz Morrell – Marketing Tech News; 10 July 2015