Making a Mobile Friendly Photography Website

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.

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.

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.

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.

Why Images Appear Blurry on Retina and Hi-DPI Screens

When I moved my main machine to a retina Macbook Pro, I was surprised to notice that the screen made my website images appear blurry. I had thought image sharpness would stay the same (or improve) since the physical resolution of the screen was much higher. I also thought that any resampling by the browser…

Read More »

Safari, Chrome, and Preview (Mac native viewer) of non-retina images on a retina display.

OWC ThunderBay 4 Thunderbolt Enclosure Review

The OWC ThunderBay 4 is a Thunderbolt 2 hard disk enclosure that holds up to 4 drives. The enclosure does not have hardware RAID support (although this is possible with software) and the disks appear individually to the operating system. In other words this is a JBOD (“just a bunch of disks”) enclosure. Note that…

Read More »

benchmark-blackmagic

Serendipity at Santa Monica Beach

I normally think about photography in terms of making pictures, where one carefully plans out the composition and light, but sometimes you just get lucky and a photo just appears in front of your camera. For this picture, I had setup on Santa Monica beach with the intention of photographing the pier and ferris wheel…

Read More »

Couple at walking at sunset on Santa Monica beach.

Last Night in Prague

I took this photo on my last night in Prague. Before visiting the city, I came up with a shooting list and I knew that I want to create some iconic images of Prague’s bridges. I had already shot the Charles bridge but hadn’t yet seen a good location where I could have multiple bridges…

Read More »

Light trails and Prague Bridges.

Baby Sea Turtle Struggles to Reach the Ocean

Went I went to Costa Rica, one of the events I was very lucky to witness was the hatching of baby sea turtles on Tortuguero Beach and watching them make the long crawl from their nest to the ocean. Tortuguero is the largest Atlantic nesting site of the endangered green turtle. Green sea turtles nest…

Read More »

Newly hatched baby Atlantic Green Sea Turtle struggles to reach the ocean. Tortuguero, Costa Rica.