April 2, 2019

The Importance Of Responsive Web Design: Living In A Mobile-first World

Go from “just a designer” to a full-blown agency with Unlimited Webflow Development and Support

Built for designers.

Learn More

The Industry Standard That’s Still Being Considered Optional

So here’s the thing:

The original version of this post was published back in early 2015, when our slightly younger, slightly more naive selves would NEVER have thought it would still be a valid topic worthy of discussion 3 years later.

When the post was first published, we figured there were about 6 months left before “Responsive Web Design” became a household name, holding 2015 online street cred on par with “Zayn Malik leaves One Direction”.

We were wrong.

In early 2018, the general public was still cloudy on responsive design’s definition and its advantages.

The internet was still littered with non-responsive websites

And news of Google’s mobile-first algorithm changes failed to rein in the millions of webmasters whose websites have been and will continue to be relentlessly walloped in search rankings.

So then, in 2019, we updated the post a second time...

We decided to revisit this content again after the roll out of Google’s mobile-first indexing, so that we could gauge its effects and whether businesses were taking it seriously and optimizing for a mobile-first world.

Ready to learn everything there is to know about responsive web design and mobile first indexing?

Let’s start by making sure this question never needs to be asked again:

What is Responsive Web Design?

In order to understand responsive websites, it’s important to first know the difference between them and their inferior—and annoying—older brother: Mobile-friendly websites.

Mobile Friendly Websites

Essentially, a mobile friendly website is a website that is designed to function on a phone or tablet.

The key word here is “function.”

mobile friendly vs. responsive design

Mobile friendly sites make the entire site fit on the screen—so you get to waste your time pinching and zooming. Responsive sites create a high quality user experience on all devices.

A mobile friendly website “functions” on any device, but it appears the same way on that device as it would on a computer.

So what’s the problem?

A computer screen has a completely different shape, size and aspect ratio than your average phone or tablet, so it’s impossible to create a mobile friendly website that provides a great user experience on every single device.

Nobody should have to experience that horrible feeling of zooming in and out numerous times to get through a website on their phone.

In fact, nobody will, because there are plenty of options in just about every industry that provide a higher level experience for all devices.

All a user has to do is click on the “back” button, leaving an un-optimized website behind.

Responsive websites

Google defines responsive web design as follows:

“Responsive web design (RWD) is a setup where the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device. Google’s algorithms should be able to automatically detect this setup if all Googlebot user agents are allowed to crawl the page and its assets (CSS, JavaScript, and images). Responsive design serves all devices with the same code that adjusts for screen size.”

We’ve created our own definition—in actual English:

“Responsive websites adjust to the pixel-width of the screen upon which they are being viewed, providing the same level of user experience on every device and preserving all content necessary to maintaining such user experience.”

In even simpler terms—responsive websites are the only website format that should be taken seriously on the internet.

So unlike mobile friendly websites, responsive sites will never have users zooming, squinting (and probably cursing).

A Timeline of Mobile Usage-Based Google Algorithm Changes: Looking into the Mobile First World

2015: Mobilegeddon

Now that we know what responsive web design is and the extent to which the world is becoming more and more mobile-inclined—it’s important to touch on the landscape of search engine behavior with regard to mobile and how it’s changes will affect the digital world.

But we can’t talk about the present until we talk about a major event of the past.

What was mobilegeddon all about?

It’s no secret that the 2015 iteration of this post was launched in anticipation of what many perceived to be a cataclysmic paradigm shift in the world of search engines:

Mobilegeddon.

Mobilegeddon is a media name given to a set of major updates that Google performed to its algorithms on April 21st, 2015.

Long story short, the update was primarily meant to boost the rankings of websites that Google recognized as mobile friendly. Responsive websites—and really all websites optimized for mobile—also fit under this “mobile friendly” description and would be given a rankings boost.

Non-mobile friendly websites, as identified by Google would not necessarily be pushed down in search rankings, but their mobile friendly counterparts would receive favorable treatment.

With that said, Google has many major ranking factors (and they did in 2015 as well), so it didn’t necessarily follow that a mobile friendly website would leapfrog its non-mobile friendly competitor in every case.

There have always been major factors associated with high search rankings, like and quality content, backlink authority—and “mobilegeddon” kept all of these factors into account.

Even so, the paradigm shift was apparent:

Suffice it to say that Google likes websites that care about the mobile experience.

The aftermath of mobilegeddon

Like many concepts that get caught on a giant wave of media, mobilegeddon wasn’t quite as “armageddon-y” as expected.

Bad websites didn’t completely fall of the face of the earth.

But even so, there were some major shifts in the way the mobile experience was perceived by website owners.

The effects of mobilegeddon can mostly be viewed through the general public’s shifts toward taking the mobile experience more seriously.

According to Smashing Magazine, since mobilegeddon, 25% of websites without any previous mobile strategy have become mobile friendly.

Moreover, after the shift, “ecommerce site owners focused on embracing a mobile strategy as fast as possible.”

The statistics in this post also tell the story of a digital world transitioning more and more toward giving internet users what they want and shifting more thought and attention the the mobile experience.

But even with all of this, we aren’t quite where we should be.

Smashing Magazine has found that 3 in 10 websites are still oblivious to Google’s mobile ranking signal.

Clearly, there is a long way to go.

Where exactly do we go from here?

2016: Announcement of Google’s Mobile-First Updates

Something big happened in 2018, and it was less of an armageddon and more of a new beginning, But before we dive into that, let’s look at the motivations for these changes.

One of the major premises of Mobilegeddon was that Google was going to establish a separate mobile index for search results. This tactic was used to differentiate mobile friendly sites from non-mobile friendly ones, but also to label mobile friendly sites as such in search results.

In November of 2016, Google introduced the concept of mobile-first indexing.

The premise of mobile-first indexing is that the mobile index created by Google in 2015 will eventually take the place of the desktop index currently in place.

So what does this mean?

Well, first of all, it means Google is paying attention to the same things we are:

They understand that mobile traffic has overtaken desktop traffic and that internet users prioritize the mobile experience. They recognize that if internet users care more about a high quality mobile experience, the internet needs to put mobile first.

Here’s an excerpt from a Moz article published before mobile-first indexing went live.

“Google is steadily moving to a mobile-only world. Mobile-first indexing seems like the inevitable consequence of a year (or more) almost exclusively dedicated to evangelizing and forcing a change of mindset from desktop to mobile.”

TL;DR: Google is completely flipping the script on how the internet is experienced by the average user. The mobile experience will soon take precedent.

2018: Rollout of Mobile-First Indexing

Don’t freak out—or do—because how it affects your site will depend on how well you’ve prepared

On March 26th, 2018, Google officially announced that it had begun to roll out mobile-first indexing.

Some more details on the motivations behind mobile-first indexing:

At the most general level, the way Google identifies and categorizes your website in search rankings is by crawling, indexing and ranking it.

Traditionally, Google’s “crawlers” would crawl the desktop version of websites, as that was often the most commonly viewed iteration of the average website.

With the rise of mobile search—which has surpassed desktop search in recent years—Google has realized that desktop-first indexing no longer makes sense. As we mentioned above, the company announced it was researching and looking into mobile-first indexing back on November 6th, 2016.

If most people are using mobile devices to search, why should ranking and indexing be decided based on the nature and performance of desktop sites?

Enter: Mobile-first indexing

Ultimately, mobile-first indexing simply means that Google began using the mobile version of a website’s content for indexing and ranking.

Mobile-first indexing was a paradigm shift in how Google analyzes websites.

Google migrated “sites that follow the best practices for mobile-first indexing.”

More on best practices later.

Google chose to keep one search index rather than two, meaning there will be no desktop-first index that applies only to desktop searches vs. a mobile-first index that applies only to mobile searches.

This means mobile-first indexing is here to stay.

So what are these best practices, exactly?

If you have a desktop only website:

Chances are you probably aren’t ranking very well to begin with. Either way, your website will still eventually be ranked and indexed with mobile-first indexing, as the desktop version of your site is the mobile version of your site.

To improve search rankings, the best practice is to build a responsive website so that Google identifies your website as user-friendly to mobile searchers.

If you have a desktop version and a mobile version of your website on two different urls

This is the most complex scenario, but here’s what you need to do:

  1. Make sure your mobile version and desktop version have the same content on them. Regardless of whether you have less content on your mobile site than your desktop site, the mobile site is the one that will be indexed.
  2. Make sure meta titles, meta descriptions and alt tags are the same on the desktop and mobile versions on your site.
  3. Here’s a list of additional minor steps from Google

Once again, the best way to avoid any issues is to build a responsive website.

If you have a responsive website

You’re most likely in good shape! Similar to only having a desktop version, the mobile and desktop version of your website are the same, the website itself is merely optimized to change based on the pixel width of the viewing device.

Remember: Not all responsive websites are created equal. There are plenty of responsive websites that don’t do a great job visually portraying content that looks great on a desktop monitor. Make sure you scour your site for any of these user experience and design issues.

What can I do right now to make sure my website doesn’t slip through the cracks or fall behind in search rankings?

As you’ve learned in this post, responsive web design is a crucial component to come out on top when it comes to Search Engine Optimization and Google’s indexing and ranking preferences. We’re happy to help you out with that.

Time for Action

Where does responsive web design fall in all of this?

Google has shown historically that it’s algorithm shifts are reactions to the behavior and the preferences of internet users.

Internet users have shown not only that they are predominantly choosing the mobile experience, but that they want that experience to be seamless, easy and highly functional.

Responsive design provides the highest possible level of user experience on mobile devices, so being mobile friendly just doesn’t cut it anymore, and will certainly not cut it in another two years.

There’s something we can all learn from Google’s upcoming mobile-first shifts:

Search rankings aren’t the only factor that should cater to the mobile experience.

Websites themselves should be designed with the mobile user in mind above all else.

While we can easily conclude that responsive design is superior to mobile friendly, not all responsive websites are created equal. Designs that truly cater to the experience of the mobile user will prevail in a landscape that is shifting more and more in that direction.

If you’re a business owner, now is the time to take the plunge and create a responsive website for your company.

If you’re a marketer or web designer, think about the benefits to the end user of putting the mobile experience first in all of your work.

It will pay dividends in a mobile-only future that feels further away than it is in reality.

Want to read our posts?

Enter your email to have it sent straight to your inbox!

Thank you! See you on the last Thursday of every month!
Oops! Something went wrong while submitting the form.
website management on a computer
mobile website