16th May 2017 | Blog, Latest Articles

In case you’ve been hiding in a cave since 2012, mobile browsing has overtaken desktop as the number one choice for internet users. Mobile has been winning by a country mile since 2015, and this is dramatically changing the web design and development game.

It really should not come as a surprise, though. Nothing on earth better illustrates our global thirst for connectivity than the mobile phone market and our obsession with the internet.

If you don’t believe it, here are the numbers:

Web usage - Mobile vs Desktop

So, if you’re not adapting your website design for mobile already, then you are creating barriers to your conversions. Also Google, the ruler of the internet, is going to give your website the weary side-eye and thwart any attempts you make at running a successful SEO campaign.

This is obviously because no one has the time to squint into their diminutive phone screens, and then lament their fat fingers while trying to close down annoying pop-up ads, and navigate their way around a screen that is more like a battle of Asteroids, than a calm browsing experience.

They’ll be bouncing right off your page and on to someone else’s faster than you can say “CTR”.

And that is terrible for business. If people aren’t using their phones for messaging, they’re very often using them to shop online. Then, they’re uploading pictures of themselves with your product onto social media for all their friends and relatives to see.

It would be a crying shame to ignore this valuable consumer market with a website that isn’t optimised for any other devices.

As the veritable grandmaster of SEO, Neil Patel succinctly puts it: “All this mobile searching leads to real results, real action, and real revenue for millions of businesses.

It’s not just statistics. This is real life.”

But what about the dawning of the era of huge mobile screens? Surely all of this mobile optimising isn’t really necessary now?

Seriously?

Just because phablets are now a thing (yes, that is a ‘phone’ and ‘tablet’ portmanteau) doesn’t mean that you aren’t doing your business an enormous disservice by assuming your mobile clients are happy to scroll and expand. It’s still bad on a tablet screen, although infinitely worse on a phone.

Almost everyone gets annoyed by that. And annoyed customers are not the kind that create revenue for you.

Next, we discuss “the thumb-zone” and its very important role in mobile web design

Humans are lucky enough to have opposable thumbs which could have been design foresight to align with the current tech rich era, or vice-versa. We’ll probably never know.

What this does mean however, is that designing for touch is not just an add-on option anymore. It is a key consideration for your website. Fingers and thumbs have natural resting places on a screen, and this should not interfere with usability.

In a Venn diagram, the web design element of mobile now falls firmly into the overlap between information and industrial.

These are extremely important ergonomics.

While thumbs are useful for sweeping across smaller phone screens, their general resting area lies at the bottom corner of either side of the screen.

If you sweep your thumbs across the screen, like opposing windscreen wipers, you’ll find the sweet-spot for your main tap targets like CTA’s or search bars. The easier it is to reach, the likelier it is that the person navigating the site will use them.

Instagram, for example, puts their action buttons almost exactly where our thumbs rest naturally on the screen, way down at the bottom.

We barely have to move to make use of the app’s full function.

Have you noticed how the edit functions of iOS sit on the top right hand corner of the screen?

That’s because it’s the least likely accidental sweep area, and no one wants to be responsible for peculiar posts to family members that were accidently added to a group chat. It’s not only clever, but responsible, too.

Now try navigating around that screen with one hand behind your back

Okay, there are people nimble enough to hold a cup of hot coffee and reconfigure their e-commerce store on their mobile phones with the other hand, at the same time.

We live in multitasking times, and not a minute can be wasted on doing one task at a time anymore.

When screens were small enough, one-handed navigation was easy. You could essentially single thumb tap your way across an entire screen. It didn’t matter where the buttons were placed.

With enlarging screens, the thumb zone gets smaller as the screen size increases, and users have had to go back to the two-thumb mobile tango.

Thumb Zone - Designing For Mobile

The problem is that they are not too happy about it, and yearn for their more productive days of mobile one-handedness.

Of course, this has added an extra dimension to the job of web development.

Here the thumb zones get a little trickier. One side is fine. But two creates a potential crossover and a higher risk of difficult stretch zones.

We also adjust the way we use our phones by turning them in our hands and changing our grip to cover the necessary reach.

But this is where web designers and developers need to be creatively mindful of user experience on a mobile device.

What once was web development jargon is now almost part of our natural speech

For a long time web design was appealing only in its aesthetics. It was literally designed to be visually pleasing enough to convert visitors into paying customers.

Like an online brochure.

Not long ago, “responsive web design” was a futuristic term thrown about by crazy web soothsayers.

No one really understood what it meant until tablets and phones became popular browsing devices.

Here is a brief explanation courtesy of Smashing Magazine:

“Responsive Web Design is the approach that suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation…”

So, responsive design is vital in order for people to use a multitude of devices with different screen sizes. Websites now need to automatically adjust the layout of their content or risk losing consumers.

“Design is not just what it looks and feels like, design is how it works” said Steve Jobs, quite rightly.

Consumers want to know what you are doing to create an online experience that is simple and user-friendly no matter where they are or what device they are using.

If you provide them with this, you will be rewarded with revenue and return business.

There is no one true input for the web

In his book “Designing for Touch”, Josh Clarke spells it out.

“There is no one true input for the web.

In other words, web is not just for the mouse.

Responsive: we have to anticipate a variety of displays

New wrinkle: we have to anticipate a variety of inputs, too

Like most truths, this one’s been staring us in the face all along

The web has always been device agnostic.

It embraces text only devices.
Screen readers.
Speech is coming on strong.
Natural gesture, too.

Lots of different inputs coming our way.
But the big input related design transition that were confronting now, and we really started confronting five years ago with mobile,

Is touch.

Because right now our hands and fingers are coming to life on our interfaces…”

This should be read as a warning. We are not finished with design for user interface. Everything is becoming touch orientated. Technology is constantly evolving and it’s not overreaching to assume that significant new additions are introduced every couple of years, or that this growth will ever decline.

There is no reason to design something now that will be defunct in a few years’ time.

Forecasting trends in mobile web design is a skill that could bring long term gains to the designer who creates websites that need only be modified to meet the needs of technological advances, and can exist over a much longer period of time, by understanding current user needs and not ignoring any gripes they have with existing functionality.

Google is not afraid to penalise your search rankings if you are not keeping up with the times

Mobile web design

Granted, not everyone is comfortable browsing on their phones. But the numbers don’t lie and now even Google is acknowledging mobile’s influence on consumer preferences with this update on ad visibility.

Yes, it’s a back-track on a previous rule that would result in problems like AdSense violations, but Google just used their go-to “more user-friendly” explanation. Thankfully, they are still penalising mobile interstitials.

And that was that. Mobile wears the user crown and web designers everywhere shift their focus to accommodate new design requirements.

If you are at all concerned about SEO then you have probably been introduced to Google’s henchmen, Panda and Penguin, who were recently replaced with Fred.

Around November 2016, Google realised that previous search updates were mostly designed for desktop. But suddenly they were faced with around three out of every five searches now happening on mobile.

This wasn’t people using their phones during their lunch hour when they were away from their desks.

It had grown into something much bigger. People had integrated mobile internet use into their home and work life.

So Google introduced mobile first indexing.

Which is exactly what it says it is.

Crawlers will index your mobile site first, and base your website’s search ranking on that.

But here is an outrageously long quote from a post they wrote about it to try and help us make better sense of it all.

“To make our results more useful, we’ve begun experiments to make our index mobile-first. Although our search index will continue to be a single index of websites and apps, our algorithms will eventually primarily use the mobile version of a site’s content to rank pages from that site, to understand structured data, and to show snippets from those pages in our results. Of course, while our index will be built from mobile documents, we’re going to continue to build a great search experience for all users, whether they come from mobile or desktop devices.”

What this means is that your consumer’s experience on your website from a mobile device is more important than your desktop version for ranking.

And the two are not mutually exclusive in their success or failure in this regard. Your mobile optimisation will affect your ranking either negatively or positively on both desktop and mobile.

Desktop may soon count for nothing as far as SEO rankings go.

This hasn’t happened yet.

But with the initial roll-out the mobile first index, which is expected to be completed at the end of 2017, all evidence is leading to mobile being Google’s sole indicator for search rankings.

This is the Forbes SEO checklist for Google’s mobile first index;

  • Ensure full mobile compliance – First, if you haven’t yet, make sure you have a fully functioning mobile version of your site—preferably by using a responsive design on your site that automatically flexes based on the device used to access it.
  • Ensure equivalence between desktop and mobile – If you do end up using a separate mobile version of your site, you’ll want to ensure complete equivalence between your two versions. Make your mobile version your “primary” version, and ensure it’s always updated first in future revisions.
  • Consider app development – Though mobile-first is focused on mobile sites, not apps, it’s worth it to consider developing an app for your business, as I predict Google’s mobile focus will likely lead the company to broader app favouritism (along the lines of app streaming) in the near future.

So, if after all this you are still wondering whether to contact a web developer to update your website.

Then at least keep in mind what Don’t Sweat the Small Stuff author, Richard Carlson, once famously said:

“Ask yourself this question;
Will this matter a year from now?”

Because, clearly the answer, in the case of mobile technology and therefore anything web design and development related, is always a resounding “Yes”.