Skip to content

The 4 levels of website mobile-friendliness

If you run your site through Google’s Mobile-Friendly Test, you either get the green light, or you don’t.

In reality, your website can be more or less friendly for mobile users, it’s not a binary thing. Even if you pass Google’s test, it’s not a given that users find it very easy to navigate your site from a phone.

So let’s review the different levels of mobile friendliness, which all come down to offering a good user-experience (UX):

Level 1: minimum mobile usability

This is where you DON’T pass Google’s mobile-friendly test because it’s not responsive at all, but at least it’s usable.

website not mobile friendly in Google test

First of all, that means not using flash, of course. I can’t believe I’m still recommending against flash after all these years, but I still see photography websites out there that haven’t transitioned to HTML5 templates.

When loading such a site from their smartphone, users should at least be able to pinch and zoom to move around. It’s cumbersome and annoying, but it works.

Another scenario here is if your site’s desktop version has some really complex elements (which rely heavily on Javascript or Ajax), which simply wouldn’t fit or work well on mobile screens:

Photography website feature showing tabbed and scrollable gallery thumbs

On mobile, it can default back to a simple text-based list:

photo website quick gallery links

Sometimes your site is responsive, but there are just a few pages which have mobile issues. Be sure to use Google Search Console, it will notify you when it finds mobile usability problems:

google search console email notification about mobile usability

 

Level 2: adaptive theme/template

At this level, the website uses a mobile-friendly template that automatically refactors the content on smaller screens.

example of a mobile friendly photography website

Multi-columns layouts switch one below the other. Thumbnail grids only show 1-2 images/row on mobile devices (and maybe 3-4 on tablet).

Adaptive themes simply use specific breakpoints (= website widths in pixels) based on popular mobile screen resolutions, to know when to switch to a “mobile layout”.

It’s somewhat limited, but it’s definitely a UX improvement. Users are no longer required to zoom in on your content, they can simply swipe up and down to see your page.

Almost all popular photography websites out there work this way. And it’s great that all website platforms out there have been offering mobile-friendly templates for years already.

 

Level 3: responsive/fluid mobile experience

On top of your adaptive site theme, website owners add custom CSS code to further improve how the site “behaves” on smaller screens.

fluid photography website design sample

It’s no longer by using fixed breakpoints, but by thoroughly testing the site and deciding, for each piece of content, how it should be displayed as screen size decreases.

Here’s a simplified example of a small About page:

animated preview of photography website about page at smaller browser sizes

As you make the browser window smaller, it’s fine for the text block to shrink a bit, while the portrait image stays in place.

But as you reach a certain point, text readability gets affected (with text width becoming too small), so the website then switches to a single-column layout instead.

 

Level 4: mobile-first approach

The most advanced option (usually implemented by large websites and which requires a lot more development work) is to start with mobile users.

The website is built, from scratch, by designing the mobile experience first. And as screens get bigger, more features & content are added to the site.

The side benefit here is that you end up creating a cleaner design overall, which eventually helps you desktop design as well.

 

Conclusion

It’s clear these days that without a mobile-friendly website, your organic traffic can plummet:

For many photographers, mobile visitors make up more than 50% of the entire site traffic. And mobile usage is only going to get bigger in the future.

So, how is YOUR website’s user-experience on mobile?

Recommended reading:

This last article brilliantly explains mobile concepts with clever animations like:

 

 

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

Search for other articles:

Or explore these related categories:

Level up your photography website
with the free guides & resources!

ForegroundWeb free resources preview

You'll get a free eBook (on photo website mistakes), many checklists and guides about improving your site's design and SEO, video recordings of website reviews, podcast interviews, and more. Plus... fresh free articles, actionable tips and curated links from around the web - sent directly to your inbox (twice a week).

No spam ever. You are free to unsubscribe at any time.
Already subscribed? Check the first email to access the resources.
Subscribe to the ForegroundWeb newsletter

Web-design tips & best practices for photographers

Get instant access to all of my exclusive resources:

No spam ever. You are free to unsubscribe at any time.Β 
Already subscribed? Check the first email to access the resources.

πŸŽ™οΈ My interview on the Hair of the Dog Podcast Free SEO course for photographers Wedding photographers need to be different πŸŽ™οΈ New podcast interview The market is selfish Google hates seeing repeated content! How to develop your soft skills as a photographer 7 quick principles for creating a great website 4 ways to make your photography website more trustworthy What are famous photographers doing right on their websites? Or better yet, what are they doing awfully wrong despite being successful?