Back in February, Google announced that they were going to use mobile friendliness as a ranking factor for websites:
Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results.
Basically this means that if your site is not mobile friendly you are going to lose traffic. By mobile friendly Google just means that your content is optimized so that it can be seen on small displays typical of a smartphone. In general, you want to ensure that
- Your website’s text is large enough to be readible.
- Your website’s touch elements are spaced far enough part to be easily selected.
- Your website’s content is sized to the device display and doesn’t require horizontal scrolling.
Over the past week, I recoded my site to pass Google’s mobile friendly criteria. You might wonder why should a photographer care since most image buyers are probably working on desktop or laptops (I strongly suspect this but I haven’t polled any clients to see if this is true). One reason is that more traffic helps with visibility and a substantial portion of traffic is mobile (even for an image based site) and it’s only going to increase.
Passing Google’s mobile friendly test.
Another important reason is that making a site mobile friendly can improve usability for other devices (laptop, desktop, tablet) if you follow what is known as responsive web design. In this approach, your website dynamically changes its layout according to size of the users screen. For example, your site might automatically switch from 3 columns on a wide screen laptop to 1 column on a phone. Your images are automatically resized so they fit within the screen instead of having them go off the right edge (Google considers horizontal scrolling to be very bad, but vertical scrolling is okay).
For example, here’s what my homepage looks like on desktop screen with adequate resolution:
Three column layout for my homepage when the device has enough horizontal pixels.
When the code behind my website realizes that there is only a limited amount of horizontal space (such as on a smartphone) it changes the layout to be single column:
Single column layout for constrained devices like a smartphone.
For more examples you can go to my main website and try changing the browser width and /or viewing it on a phone or tablet. In most cases the changes are very small as I tried to keep my site simple and uncluttered from the beginning.
You can check to see if your site is mobile friendly using Google’s test site. If you’re using a platform like WordPress there’s a good chance that your theme is already mobile friendly and even if it is not, it’s easy to switch to a theme that is ready.
Many photographers also uses third party sites like Photoshelter or Smugmug to serve their images on the web. Testing a few sites with Google’s tool indicates that Photoshelter fails but Smugmug passes. I suspect Photoshelter will update their platform to be mobile friendly soon enough.
I coded my website from scratch (there weren’t any other alternatives when I started it) and hence I was on my own. I won’t go into the details of how I updated my code but I will list a few very useful resources:
- Bootstrap a CSS and JS framework for mobile and responsive design.
- Tutorials on using Bootstrap.
- If you have problems with image reflow (the page contents jumps up and down when images are loaded) look here and here.
- Emulators that show what your website looks like on a smartphone.
My only regret in making my site mobile friendly is that I didn’t do it sooner.
Leave a Reply