How to make a mobile-friendly site

There are two popular ways that you can make your site "mobile-friendly". Both will result in a site which gets a nice big green tick on Google's "mobile-friendly" test tool - but we can only recommend one of them.

In this article I am going to outline the two most popular methods; what they do, how the differ, the benefits and the disadvantages.

The wrong way: A mobile-dedicated site

This entails creating a second version of your site that is designed specifically for use on small (E.g. smartphone) screens and using some simple code on your main site to detect the device being used. Anyone who's using a smartphone is then redirected to the mobile version of the site.

At the time of writing, this is how the Emirates website works.

  • Non-smartphone visitors see the "desktop/main" site: emirates.com
  • Smartphone visitors are silently redirected to the "mobile" site: mobile.emirates.com

This solution is seductive for a couple of reasons:

  • The desktop website does not change at all, so there's no need for expensive redevelopment work on it.
  • There is a clear separation between the two versions - they are actually different sites with common branding - which means the mobile version can have radically different structure, design and features, without fear of knock-on effects to the desktop site.

But there are serious problems with this approach.

Broken links

The mobile-dedicated solution depends upon there being two versions of the site and redirecting the user to the relevant site based upon their device.

Visits to the desktop site on a smartphone are automatically re-routed to the mobile site home-page. The problem is, this happens regardless of whether it's the home-page that was being requested.

Take as an example the special offers page on the Emirates' desktop website. Visit that link on a smartphone you will be redirected to their mobile site. But instead of seeing their mobile special offers page, you will find a "page not found" screen.

This will be a major problem for e-mail marketing, social media, or any indeed any marketing that relies upon linking to your web content. Links posted in your e-newsletter / Twitter feed / Facebook page will only work for desktop or mobile users - but not both.

The mobile customer journey does not mirror the "desktop" site

Suppose a user visited the site on their desktop, saw some interesting deals on that Special Offers page and are now at home on the iPad and wanting to take a closer look. The link they emailed to themselves doesn't work (see problem 1, above).

In this situation most users will try to retrace their steps: "I remember that to get to the special offers page before, I went to the home-page first, and clicked on a Special Offers link in the main navigation. If I go to the mobile site home-page, I'll be able to find a link there too".

But that's not going to work as there is no such link on the mobile site. In fact the special offers page does not exist on the mobile site at all.

While there is theoretically nothing stopping the business creating the missing page, the fact that content has to be manually copied from one version of the site to the other is in it's self a fundamental problem: If you have to go to extra effort to ensure prime content is even visible to mobile users, then your website isn't constructed properly.

The idea of reducing the amount of content for the mobile user may have seemed sensible at one time, when browsing the web on an iPhone was the option of last resort dependant upon scarce and glacial mobile internet connections. But in 2015 the smartphone browser is the first choice for many people.

Delivering a stripped down version of the site to mobile user is akin to selling people two different versions of a book depending upon where they'll be reading it. At home? Here's the full book. On the bus? Let's rip out all the bits in the middle; you're on the move, so only interested in the start and finish ... right?

Likewise, giving mobile users less content and functionality than desktop users is basically trying to solve a design problem by changing features: No, a desktop visual design is not suited to a smartphone display. But yes, users do want access to the same features and content regardless of their device.

What about other devices?

Splitting your web presence into mobile / desktop versions depends upon there being a binary split between categories of device. Your device fits in one category or the other and there is no inbetween. Back in 2007, when there were essentially two categories of device, that worked.

Nowadays the web-browsing kingdom has fragmented into numerous formats and those convenient distinctions are obsolete. Should a tablet user be directed to the "mobile" version, or the "desktop" version? What about a Kindle, or a Smart TV? Do you have the budget to create a third, and fourth version of the site as each new format drops? 

A more sensible way of categorising visitors is by their device screen size - and this is where "Responsive design" comes into play.

The right way: "Responsive" design

So now we've taken a look at the problems of the mobile-dedicated site, we can see that the right response needs to fulfil a few criteria:

  • There must be the same content, accessible at the same URL regardless of the device being used
  • BUT - there should be different presentation of content dependant upon the display capabilities of the device
  • The navigation structure should be consistent across all devices

What's now considered to be the best practice is called Responsive design.

Unlike the mobile-dedicated route - where all devices are bunched into either a "mobile" or "desktop" category and sent to the respective site - in responsive design, there is just one website and it doesn't care what device you are using, but the display adapts fluidly to the dimensions of the screen.

The Channel 4 news website is a good example. Open up a new browser window and take a look at it now. Assuming that you are reading this on a large screen, what you see will look like a normal desktop site. But now grab the browser window and scale it down, gradually, until it is as small as it will go. As you do so you will see the layout of the site change. The site "responds" to the display size.

Handles multiple devices

With a mobile-dedicated site you are presented with a problem deciding which site version gets delivered to any device that doesn't fit neatly into "mobile" or "desktop" categories.

In responsive design all that matters is the size of the screen, regardless of whether it's attached to a smartphone, laptop, tablet or anything else.

And when a new device comes onto the market there is no need to evaluate which category of device it belongs in and update your site code accordingly. The site will automatically adapt to the relevant display, no need for redevelopment work.

Consistent web addresses

While the site design will be tailored to suit the screen, the web address you use is the same across all devices. You can link to your site on social media, in e-mail, and use specific web addresses in print, safe in the knowledge that the link will work for everyone.

More efficient content management

With a mobile-dedicated site, you are effectively maintaining two versions of the website. Any content published to one version needs to be re-published on the other.

With a responsive site there's less admin overhead. If I change the copy on a page, I don't have to go and update the mobile site separately, because it is the same site.

Summary

Overall that should make it clear that a "responsive" website is the only sensible way to make your online presence "mobile friendly".

It's more user-friendly, works across a wider range of devices, is cheaper and easier to maintain, and provides a better base for future expansion.

That's not to say that creating a responsive site is easy. Depending upon what kind of content your site contains, there may be some interesting choices to made with respect to how certain features adapt to changes in screen size. But that's a subject for another article.

If you've any questions or comments please do not hesitate to post a comment, or if you'd like to discuss the options in more detail with respect to your own site give us a call. Thanks for reading.

Post a comment Get in touch

Further reading

If you found this interesting, here's some related info from elsewhere on the web.

Add new comment