Contents
Mobile usage dominates web traffic: most website owners can check their Google Analytics reports to see that mobile visitors now often take up more than 50% of the entire traffic, sometimes even 80%+. And mobile usage continues to rise.
Without a responsive website, both your organic traffic and your website conversions can plummet.
And user experience (UX) is at the core of this issue, as visitors expect a website that “just works” seamlessly even across all their devices.
A poor mobile experience leads to visitors who abandon eCommerce carts, ignore call-to-action buttons, stop scrolling (resulting in higher bounce rates).
In turn, this also significantly impacts SEO. Google confirmed mobile-friendliness as a strong ranking signal even back in 2015, and more recently with its mobile-first indexing approach. Not to mention the countless ways they now evaluate website UX as ranking signals. So having a responsive website is a must-have these days.
And don’t forget about brand credibility: caring about your customers’ online user experience conveys professionalism and attention to detail, builds trust, all of which translate into repeat visits and conversions.
Mobile-friendliness is not a binary thing. Even if you quickly switch to a new responsive template, it’s not a given that users find it very easy to navigate your site from a phone.
There are multiple levels of mobile friendliness you should be aware of, which all come down to offering a good user-experience (UX):
Level 1: Minimum mobile usability
Static websites that are not responsive at all, that require pinch-and-zoom to browse. Yes, these sites do still exist, common among outdated portfolios or niche blogs.
When loading such a site from their smartphone, users should at least be able to pinch and zoom to move around. But it’s cumbersome and annoying.
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:
On mobile, it can default back to a simple text-based list:
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:
Level 2: Using an adaptive theme/template
At this level, the website uses a mobile-friendly template that automatically refactors the content on smaller screens, usually using specific breakpoints based on popular mobile screen resolutions. Multi-column layouts switch to one below the other on mobile. The majority of sites are like this.
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: Having a responsive/fluid mobile experience
On top of your adaptive site theme, theme builders (or even website owners) add custom CSS code to further improve how the site “behaves” on smaller screens. 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.
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:
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: Taking a mobile-first approach
This is the most advanced option in which the website is built, from the start, 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.
Take action
If you’re currently around levels 2 or 3, start by auditing your site and test it thoroughly on a series of mobile devices or at least through online emulation tools like BrowserStack or Responsinator. Prioritize important functionality issues (popups or cookie notices blocking normal website viewing or scrolling, broken mobile contact forms, major performance issues, etc.)
Then, ideally, go through each page on your site and consider how the content needs to be organized for mobile:
- simplify sections that are too long or messy on mobile (it’s normal to even disable sections for mobile if they’re not critical)
- improve typography (readable font-sizes, comfortable line-height, properly-sized heading tags, etc.)
- thoroughly test your all-important navigation menu and any forms and popups
- make sure modal windows, video or script embeds, image galleries or slideshows still load well
- double-check that no weird page elements force horizontal scrolling
- optimize call-to-action (CTA) buttons to help guide people through the site (with large tap areas and ample spacing).
Focus first on the homepage and other high-traffic or revenue-generating pages.
Also test how your site looks on large desktop screens
Some people navigate a photography website on their desktop, and they might have big desktop monitors. If your target audience is photo buyers from editorial stuff or magazines and all of that, why not optimize your website for that as well?
So, whenever you have a gallery of thumbnails, take advantage of the whole width of the page. Use your page builder, make it full width, so you can fit more thumbnails per screen or make them larger.
It’s another way to improve the experience instead of having tiny thumbnails on a large desktop.
Tools and platforms for building a responsive photography website
These days, most modern platforms have responsive themes/templates.
Your platform choice (WordPress, Squarespace, Shopify, etc.) depends on your technical prowess and your specific business needs. But as long as you start with a fairly popular and time-tested one, you’re off to a good start.
But only a start, building a good mobile UX requires more care and attention as you build out the entire site.
Almost any platform you use gives you some control over the design and layout of the site, ranging from selecting pre-designed page templates to using a full-blown page builder (like Elementor or Kadence on WordPress) where you can build any design imaginable.
With greater design control comes greater complexity and a risk to mess things up (due to over-customization, lack of a design sense, or inability to master the page builder features), so consider leaving the fine-tuning to an experienced web-designer. Or at the very least, use the tablet and mobile previews that page builders provide to always check for smaller screen sizes.
In fact, try to spend more time in the mobile-sized editor of your pages, improving the typography, sizing, spacing. That’s how the majority of your traffic will see and experience your website.
This article brilliantly explains mobile concepts with clever animations like:
