Photo Galleries That Trap Phone Visitors

Tap a photo, lose the page

On a computer, clicking a thumbnail opens a larger photo over the page, with an X in the corner and arrows on either side. With a mouse, it works well.

On a phone, the same gallery often opens a photo wider than the screen. The X sits somewhere off the edge, swiping moves the page underneath instead of the photo, and the back button leaves the site entirely.

The visitor came to see your work. Now they are trying to escape it.

How galleries trap phone visitors

• A close button outside the visible part of the screen.
• Arrows that appear on hover, which touch screens do not have.
• No swiping from one photo to the next.
• A back button that leaves the site instead of closing the photo.
• Pinching that zooms the page behind rather than the photo.
• Full-size originals that crawl in over mobile data.

The fourth loses people for good. Pressing back is what phone users do when they feel stuck, and a gallery that responds by leaving the site returns them to wherever they came from.

Why galleries built for a mouse fail

Many gallery scripts date from when photos were viewed on desktop screens. They assume a pointer that can hover, a window wider than the photo, and a keyboard with arrow keys.

A phone has none of those. It has a narrow screen that changes shape when turned, browser bars that appear and disappear, and fingers that expect to swipe, pinch and tap.

Themes bundled with an older gallery carry it from one redesign to the next, and because it works on the office computer, nobody checks.

What a touch-friendly gallery does

It fits each photo to the screen, in both orientations, with a close button inside the visible area that is large enough for a thumb.

It moves between photos with a swipe, lets the visitor pinch to zoom into the photo itself, and closes with a tap outside the photo as well as on the button.

Pressing back closes the gallery and returns the visitor to the same place on the page, not to the top and not to the previous site.

Captions sit below the photo rather than over it, where they stay readable on a small screen.

And it loads a version of each photo sized for the screen, not the original from the camera.

A worked example

A packaging designer runs a two-person studio and shows her work as a grid of thumbnails: boxes, labels, bags and bottles, each opening in a pop-up gallery.

Prospective clients often reach the portfolio from a link in an email, on their phones. One of them mentioned on a call that the gallery had frozen, and that she had closed the browser to get out of it.

The gallery had come with the theme several years earlier. It opened each image at full size inside a frame with its close button above the top corner, off the screen on any phone, and it ignored swiping entirely.

The studio replaced it with a gallery built for touch, and made smaller versions of every image for phones.

Each project also got its own page with a few photographs and a short description, so the gallery is no longer the only way to see the work.

Sometimes no pop-up at all

On a phone, a simple column of photographs at full width, with captions, often works better than any pop-up. Scrolling is the one gesture every visitor knows.

A responsive layout can show a grid with a pop-up gallery on a computer and a scrolling column on a phone, so each visitor gets the version that suits the device in hand.

Separate pages for each project also give search engines something to find, which a gallery of untitled thumbnails does not.

Image sizes and loading

A camera original can run to several megabytes. A gallery of thirty of them is a long wait on mobile data, and a visible drain on the visitor's data plan.

Since version 4.4, WordPress has offered phones smaller versions of images inserted through its editor. Many gallery plugins bypass that and load the full file anyway.

Thumbnails need the same care. A grid of forty thumbnails that are really full-size images shrunk by the browser downloads all forty originals.

Ask whoever looks after the site to check what a phone actually downloads when a gallery opens.

Testing on real phones

Test on at least one iPhone and one Android phone, including a small screen. The four-inch iPhone SE is the hardest common case.

Open a photo, swipe through a few, pinch into one, close it, then open another and press back. Turn the phone sideways and repeat.

Do it over a phone connection, not the office Wi-Fi, and check that you land back where you were on the page.

Better still, hand the phone to someone unfamiliar with the site and watch them try. Where they hesitate is where the gallery needs work.

Choosing a gallery

Before installing a gallery plugin or script, open its demonstration page on your own phone and try everything above.

Check that it is still maintained, with updates in the past year, and that it does not depend on Flash, which phones have never run.

Ask, too, whether it lets you give each image a title and a description, which help visitors and search engines alike.

A web designer who tests on phones as a matter of course will catch these problems before your customers do.

The counter-case

Some galleries are rarely opened, and some sites draw most visitors from computers, which Analytics will confirm. For them this is a lower priority, though still worth ten minutes.

A site built recently on a current theme may already behave well on phones.

The only way to know is the test. Open a gallery on a phone, try to leave it, and replace it if leaving is hard.

Trying it on a phone

1. Open a gallery on your own phone.
2. Tap the first photo and find the close button.
3. Swipe to the next photo.
4. Pinch to zoom into a detail.
5. Press back and see where you land.
6. Turn the phone sideways and repeat.
7. Try it again on mobile data.

Step five is the one most older galleries fail, and the failure costs you the visitor rather than merely annoying them.

Testing at the smallest common screen size is covered in designing for the four-inch iPhone again.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.