A responsive website is not mobile first

July 28, 2017

Creative ,

0

When most clients approach us for a website redesign (and associated SEO projects) they only care about one thing – what it’ll look like on desktop.

Despite it being the age of mobile, and mobile making up 37 minutes of every hour spent online, we still get asked primarily about desktop designs. Clients want to see desktop mock-ups.

Why is that? Mobile usage is dangerously close to overtaking desktop, yet businesses are still investing heavily in sites that only perform well on desktop.

So, in case you were under any illusion about the importance of mobile, let’s lay down some mobile usage facts:

Let me reiterate. It’s no longer a question of asking whether mobile is important. That ship has sailed. Now, we as marketers are responsible for banging the mobile drum and yelling the words “BUT WHAT ABOUT CONSUMER BEHAVIOUR ON MOBILE” into our clients’ ears.

I thought responsive sites were good for mobile?

Well, I’m here to tell you that you’re wrong. The terms ‘responsive’ and ‘mobile first’ have been used so interchangeably that people start to believe that they’re the same thing.

Even when researching this article, if you Google ‘mobile first vs responsive’, all you get is article after article claiming that mobile first is the same as responsive.

It’s not.

There is a distinct difference between the two. Mobile first sites work amazingly on both mobile and on desktop. Responsive sites work amazingly on desktop, but in a lot of cases, they simply work on mobile.

It’s no longer good enough for sites to just be responsive, they need to start being mobile first.

So responsive design and mobile first designs are opposites?

No, not at all. Responsive design and mobile first design should go hand-in-hand, theoretically at least.

“We understand that the new rule is mobile first. Mobile first in everything.”
Eric Schmidt, Executive Chairman of Alphabet Inc.

Mobile first design simply means a different way of thinking. Instead of starting with a desktop site and chopping bits off until it fits a mobile screen, why not do the reverse? Start with a mobile page and work your way up until it’s filled a desktop screen.

This process is called progressive enhancement, and is the opposite of the process that is typically taken – graceful degradation. Progressive enhancement dictates that designs for mobile should be tackled first, as mobile is the most difficult platform to design for.

Once the mobile design is completed, the other devices will be a lot easier to deal with. Ultimately, though, if you have designed for the smallest device, it is bound to only have the essential features, so the very core of your UX will be complete.

Reversing your thinking about mobile and desktop design can drastically improve your site. You start off with the bare bones and add functionality and styling as you move up sizes. The result is a site that often looks better on all devices – including desktop – regardless of size.

Ok I’m sold – how can I make my site mobile first?

There are loads of ways to make your site more ‘mobile first’. The first is obvious: redesign your site.

This can often cause a lot of problems. Site redesigns can be wildly expensive, especially for larger sites. Even a simple reskin can costs hundreds of thousands of pounds.

But there are some smaller fixes you can look at making to make your site more mobile friendly.

Site speed

Page loading time on mobile is one of the biggest issues we see across clients’ sites. Addressing the load time of your site is one of the best things you can do to make it more mobile friendly, but also to improve many other metrics for your site. Bounce rate, conversion rate and rankings are all affected by site speed.

Graph showing Page abandonment vs. Page loading time

Site speed can be fixed in many different ways. Compressing file sizes, minifying your CSS, JavaScript and HTML, as well as leveraging browser caching where possible can all make a massive difference.

Sometimes, however, addressing site speed can be a larger project. When we needed to fix Bathing Solutions’ page speed issues, we quickly realised that we’d need to rebuild the entire site from the ground up to reduce their reliance on external codes and callouts.

 

Not all sites are like this, and optimising the code where possible can definitely help. The Google Developers have a great set of best practices for increasing your page speed here.

Resize your tap targets

This is one of the biggest grievances I have with responsive sites (and the inspiration for this blog post!)

A lot of the time, when sites are resized, buttons are not taken in consideration. At all. They’re simply kept the same relative size and relative position that they are on desktop.

The only problem is, on a desktop you have a very responsive mouse cursor that can move elegantly and quickly across the screen. A cursor can move pixel by pixel, and hit even the smallest of buttons most of the time.

On mobile, all you have is your clumsy fingers. Clumsy pink sausages that often struggle to hit buttons, especially when the buttons are either way too small or packed too closely together.

Resizing your tap targets can prevent users like me getting frustrated and eventually leaving the site.

Again, the Google Devs have a great read on the optimum size of tap targets here.

On-page content

Having a mobile-first approach can also really affect how much content you can reasonably display on a page. However, when designing a responsive site, you may find that you trim the content down to fit mobile. Often, this can result in eliminating necessary information.

If you take a mobile first approach, you’re challenged to work out exactly what is necessary for consumers and arrange it in a way that will ultimately help the site achieve its goals.

Again, it’s important to remember how to load the content on mobile. Typically, with a responsive site, all of the content is loaded up first and assumed that it should be displayed for the largest platform.

The browser then detects a mobile and starts to remove most of the content.

Doesn’t this seem backwards?

Mobile user scrolling down

Going mobile-first means that the smallest amount of content is loaded first, to include all devices. If larger devices are detected, then the content is added, rather than being removed.

This often gives everyone a better end result and can help improve site speed as well. Two birds, one stone.

Writing for mobile is difficult, but The Content Marketing Institute has a great article on how to write for mobile devices that you can read here.

But designing for mobile makes my toolbox smaller, not bigger!

Many designers will often say that designing for mobile actually makes their toolbox smaller, instead of larger.

That’s simply not true. Often, designers are just used to designing for desktop, rather than mobile. If you think your toolbox is getting smaller, all it means is that you’re not fully aware of all the tools that a mobile toolbox has.

Mobile as a device gives you access to a plethora of specific features that you can’t get on a desktop. These features can really streamline the entire user journey, as long as they’re taken advantage of.

Features like precise geolocation, touch events, or even the use of the camera can make the user journey really stand out from your competitors.

Realistically, it’s just a question of using all the tools you have in your mobile toolbox.

It’s the age of mobile

It’s no longer enough to be responsive, we, as marketers, need to be more proactive. Mobile will soon overtake desktop, and marketers will be faced with questions on how to make their sites gain more traffic, and how to make that traffic convert.

The real winners, as we will soon see, are those that are designing for mobile now. Those that are thinking mobile first.

Comments are closed.