Contents
For people doing a search on a mobile device, Google will not rank your site high if it knows the site is not optimized for smaller screens. So you might be losing almost half of your organic search traffic.
Basically, Google is protecting users from having a bad browsing experience on your site!
The definitive mobile-friendly test
For testing your site, the industry standard is Google’s Mobile-Friendly Test Tool.
There are other ones out there too, but since Google uses this benchmark for deciding how to rank your site, it’s the test your site needs to pass.
Furthermore, when a site passes the test, Google neatly displays a “Mobile-friendly” label in search results:
What happens when your site is not mobile-friendly?
Plain and simple: it won’t pass Google’s test. There are no grades, just a binary yes-or-no result.
Why is it important?
Since Google turned this into a ranking factor in April 2015 (see here why), your site will be getting fewer mobile visitors:
So what can you do if your site is not mobile-friendly?
Option 1: Re-build the site on top of a responsive platform or WordPress theme
Photography website platforms like PhotoShelter have long been offering mobile-friendly solutions. For example, all of PhotoShelter’s BEAM templates look & work great on any mobile device.
If using WordPress (which now powers a quarter of the internet), you can first check if the theme you’re currently using has a mobile-friendly update available. Updating the theme might be all you need to do (besides the security & functionality benefits of keeping your theme up-to-date).
Otherwise, look for a different WP theme; ThemeForest is a great place to start.
Depending on your platform, there are multiple mobile configurations to choose from (responsive web-design, dynamic serving or separate URLs). Unless you have technical experience, leave this in the hands of a development pro, while you instead go out there are shoot more images!
Option 2: Hire a developer to make your existing site responsive
If you have a unique custom theme/design, you might also want to make that mobile-friendly. This however requires advanced HTML and CSS knowledge.
Here’s an animated GIF (ignore the funky colors) of how a fluid design “behaves” when shrinking the browser window (this is an existing website that I worked on recently):
If you have web development experience, Google’s Web Fundamentals are a great starting point.
Testing your site for mobile-friendliness
Besides Google’s test, here’s what else you could to test your website:
1. Test your site directly on mobile devices (iPhone, iPad, Android).
2. Resize your browser or use browser extensions like these ones.
3. If using Google Chrome, you can simulate various devices directly in the browser’s DevTools.
4. Google Search Console (formerly called Google Webmaster Tools) is another great tool you can use. Head over to the “Index Coverage” report to see any usability issues on your site.
5. And finally, search for your site on Google on a mobile device. You should see a small “mobile-friendly” label there (like the example I gave above).
Beyond passing Google’s mobile-friendly test
Making a site mobile-friendly is not just about passing Google’s test or making your site responsive. That’s just the beginning.
Even with a good mobile design, if the site is slow, the browsing experience will still be bad (and users will leave your site sooner, in turn affecting the site’s SEO too). So invest in the site’s performance and use Google PageSpeed Insights to discover any performance issues on your site.
This video from Google is also worth watching: Quick fixes in mobile website performance
Coding quality is important too. It’s not technically difficult to add some quick CSS code to shrink the site’s layout to a narrow screen, thus fake-passing Google’s test. But the browsing experience can still be horrible with a bad design, so make sure you’re properly testing the site on mobile devices.
These Google guidelines might be useful, as well as my notes on designing your mobile navigation menu.
Further reading:
