How to avoid Google’s mobilegeddon

Avoid disappearing from Google. Make your site mobile-friendly.

Vlad Magdalin
April 29, 2015
Entrepreneurship

Google has begun penalizing sites that aren’t “mobile-friendly." What does that mean, and how can you address it? This post breaks it down in simple terms.

Over the next few weeks, millions of sites worldwide could start seeing a massive reduction in traffic from smartphone search results – an event nicknamed “Mobilegeddon.”

Why is this? One word: Google.

Two months ago, Google announced that it would soon be overhauling its search-ranking algorithms to give significant smartphone search preference to websites that are “mobile-friendly.” That means that sites whose content is more easily viewed and usable on mobile devices will have greater visibility in smartphone search results. (Tablet search results will not be affected.)

Google recently predicted that the number of search queries performed on mobile devices will soon outnumber those done on computers, and they want to ensure these users are seeing content they can easily digest. Now, content and link building are no longer the only cool kids on the SEO block, but usability as well.

If your site currently ranks on the first page of results for a search on Google, and your site does not pass Google's "Mobile-Friendly Test", then your site will disappear and be lost in the mass of millions of other search results on mobile devices. Considering that 71% of all clicks happen on the first page, that's a huge loss in traffic.

The overhaul happened recently: April 21, 2015. If your business or blog relies on Google search traffic to attract users, and your site isn't "mobile-friendly," it will be affected by these changes. Here is the full FAQ from Google.

Am I Affected?

Mobile-friendly Tag in Search Results

The first thing to do is find your site on Google using a mobile device. Look for a "Mobile-friendly" tag below the title. If the tag is there, congratulations, your site passes the test and will not be gravely affected (start at Step 2 below to help improve your results further). If the tag doesn’t appear, then follow these three steps:

Visit Google's Mobile Friendly Test page and enter your site's URL. This will tell you why your site doesn't meet the requirements.

Visit Google's Page Speed Test, to see how you can speed up your site. This is an additional factor in determining ranking.

Fix the above problems, either by yourself or with the help of a professional developer.

How do I fix these problems?

You need to make your website "responsive," specifically in the areas listed in the test results. Responsiveness is the term used in web design to describe the process of making a website "respond" to the device its being viewed on, and changing its content and styling to best suit varying screen sizes.

The steps you need to take to make your site responsive vary in complexity and difficulty depending on what's wrong, and how your site is hosted. If your site was custom built by a developer, and there's significant issues, this could cost you weeks, and thousands of dollars in developer time. Making a website responsive once it’s already built is not always easy.

What's involved with making a site responsive?

The overall goal in making a site responsive is ensuring that it is usable on a variety of devices. This can mean modifying your site by: increasing text and button sizes, adding additional space between clickable items, having the page width match the screen width, changing the layout of elements, and speeding up the page (for those on slow 3G connections).

Screen sizes used to access web pages can vary from 3" all the way to 30" and above, and can be in landscape or portrait mode. Having a one-size-fits-all site is definitely not going to work across the board.

Quite often, when a site is not responsive and is loaded on a phone, the content is extremely tiny, and the user has to pinch-zoom and pan to find what they need. This is not an ideal user experience. The first step is to make the site width match the device width.

After doing this, elements that are normally adjacent to each other may become visually cramped. Consider stacking elements vertically on smaller screen sizes: if you have three article summaries side-by-side on desktop, try having only two adjacent articles on tablet, and down to one article per row on mobile, giving each one enough room to breathe.

‍Example of a responsive site design (desktop, tablet, and mobile).

How do I fix these problems?

The nature of a mobile device is that it’s portable -- it’s always on the move, and it can be operated with one hand. Having larger text for mobile devices is important since glare and other environmental conditions can affect screen visibility.

Further, mobile users navigate using their fingers, which are much larger and less precise than a mouse cursor. Having multiple tappable items close together, such as links and buttons, could result in the user accidentally tapping on the wrong one. This can be a very frustrating user experience.

Many mobile phones are connected via 3G, which is slower and less consistent than most Wi-Fi connections. This means that you should do everything you can to make your site also load faster. Not only will users abandon your page if it's too slow, but Google’s ranking algorithm actually penalizes slow sites. Speeding sites up generally involves reducing its overall size (the file size of images, fonts, etc.), and/or delivering the site via a fast web host. Some of the reductions in size can come from compressing images(by lowering their resolution or using a compressed file format such as JPEG).

While we're on the subject of images, consider taking advantage of smaller screen sizes, and have your site serve smaller (in terms of visual area covered) image files for those devices. After all, whereas a laptop might need a 1600px-wide image to look good, an iPhone with a screen width of 320px can get away with a much smaller image since there are fewer pixels to cover.

There are a lot of changes that can be made. It may take days or weeks worth of tweaking to get it right. If using a platform such as WordPress, as one example, you may be able to switch your site’s template to a new, responsive one then spend your time making sure the content still looks good in its new format. Otherwise, consider hiring a developer, or – if you're tech-savvy enough – modifying your site's code manually to make all the necessary changes.

Is there a quicker way?

This wouldn't be the Webflow blog if we didn’t point out that responsive web design is a natural part of the Webflow site designing process. If you like to work with templates instead of designing from scratch, you can also start with one of our fully-responsive templates, which are all compatible with Google's updated search-ranking algorithm. One of the best mobile-friendly aspects of Webflow is that its designer tools allow you to quickly swap between virtual device previews so you can instantly see what your site looks like on varying mobile devices. Further, from a site performance standpoint, Webflow-hosted sites are heavily optimized for speed-- using blazing fast servers and GZIP-compressed files. 

What if you’re not tech-savvy and you need a developer to perform the work for you? Or, perhaps you want a designer to help give your site a custom look above and beyond a template? Consider visiting Webflow's designers section to find a Webflow professional that’s right for your design needs.

Defeating Mobilegeddon

Mobilegeddon demonstrates that Google is truly one of the most powerful companies in the world. A simple change in their search algorithms can affect hundreds of thousands of businesses and blogs overnight,

As outlined above, to adhere to the new requirements, it comes down to making your website responsive – prioritize the user experience above all else. Don’t treat responsiveness as an afterthought or a “nice have.” Treat it as a pivotal component of web design, as we do at Webflow.

Whatever way you proceed, act quickly as Google’s changes are live and you could already be losing mobile search traffic.mo

What else should I consider?

While speed, reliability, scalability, and security should be your chief concerns, Webflow offers a host (pun sheepishly intended) of other features that have a significant impact on SEO and performance, and may not be offered by most hosting services.

HTTP/2

2015 saw the release of the first new Hypertext Transfer Protocol since 1999: HTTP/2.

This new standard promises faster websites across the web — but not all hosting platforms support it yet. Because Google has always cared about page speed, there’s a good chance that HTTP/2 will become a component of their ranking algorithm soon.

Here are some benefits of HTTP/2 support/compatibility:

  • Multiplexing: Your browser can receive requests over multiple connections, not just one. Think of it like switching from a one-lane road to an interstate.
  • Header compression: Your browser loads the top of your pages first, before the rest of the page, which means your site visitors see content faster. On mobile especially, this is a big improvement.

Webflow’s hosting has been HTTP/2 compliant for a couple years now, unlike services out there. (And even hosts who do offer it typically only do so on higher-tier packages.)

Today, all assets published to a Webflow site are served via HTTP/2 — increasing page load performance when a large number of assets need to be downloaded.

Other powerful features of Webflow hosting

Everything above is more or less essential, but there are many other features that can make managing your website a lot easier and more convenient. These include:

  • Automatic backups and version control (you can also save and name a site version whenever you’d like with the key combo Command + Shift + S on Mac or Control + Shift + S on Windows)
  • Site-wide and per-page password protection
  • Simple publishing workflows
  • Responsive images
  • Protection against distributed denial of service (DDoS) attacks

On top of these features, Webflow hosting includes:

  • Form submissions (manage lead gen and let us store your data for you). It’s like Wufoo, but built into Webflow!
  • SEO and social tools: manage OpenGraph and SEO meta tags in one convenient interface. Easily combine it with the CMS to automate your metadata optimization.
  • Dynamic embeds: integrate Webflow CMS with Shopify for ecommerce, SoundCloud for music, Eventbrite for events, and anything else that uses custom code embeds.

Webflow combines all these elements in a first-class global hosting infrastructure that’s available at the click of a button. This means that when you publish with Webflow, your site’s files and assets are published across the globe and immediately ready for any amount of traffic, from any location.

Want to know how much we believe in Webflow hosting?

We put a lot of thought and effort into making Webflow hosting one the the best hosting services out there. We’ve seen Webflow-using businesses like Kisi grow their organic traffic by over 300%, while also supporting thousands of requests per second for businesses like Eventbrite.

In fact, when Eventbrite launched their Amstel Live festival page with Webflow, they received over 10,000 requests a second — resulting in over 3,000,000 page views in just one hour. Webflow hosting was able to handle it without a hitch.

But above all, we believe in our hosting platform so much so that we use it for our own websites, which see hundreds of thousands of visitors from around the globe every day, and have seen nearly perfect performance over the last year.

Vlad Magdalin

Vlad is the founder and CEO of Webflow.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.