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 92% 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.
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.
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.
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.
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.
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.
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
Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.
In your inbox, every other week. And it only takes a click to unsubscribe.