Skip to content

What to do if your website is not mobile-friendly?

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:

google_search_result_mobile_friendly_label_example

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.

site-not-mobile-friendly-example

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:

analytics-april-21-google-mobilegeddon-preview

You can download this entire article in ebook form (along with many other resources) in the free Member Area: “Web-design tips and best practices for photographers” (PDF)

Get free access


 

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.

example-responsive-photography-website

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):

responsive

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.

chrome-devtools-device-simulation-preview

4. Google Search Console (formerly called Google Webmaster Tools) is another great tool you can use. Head over to “Search Traffic > Mobile Usability” 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: 

Off-topic or inflammatory comments may be moderated.
Please add VALUE to the web, thanks!
 

Join thousands of photographers and get my free guides & resources:

ForegroundWeb free resources preview

You'll get my free eBook (60+ Photography website mistakes) and many PDF downloads, as well as weeks of free email training that will help you build an amazing photo website. I want to add value to your business, plain and simple.
Register now (at no charge) or choose to sign-up for the newsletter only:

Get the free resources Already registered? Log in here.