Image Galleries With Tiny Thumbnails

A wall of squares

The gallery page was built on a desktop screen, where forty thumbnails sit in neat rows of six. Each is small, but there is enough of each to recognise.

On a phone the same grid folds into rows of three. Every thumbnail shrinks to roughly the size of a fingernail, and the page becomes a long wall of coloured squares.

Nothing in the wall says what anything is. To find out, the visitor taps a square, and a full-screen view opens with a photograph and no words.

After five or six taps, most people have learned how the gallery works rather than what the business does, and they leave.

What goes wrong on the phone

• Thumbnails too small to show the detail the work is judged on.
• Square crops that cut the top and bottom off tall subjects.
• No order, so last month's job sits beside one from 2011.
• Close-ups mixed in with no sign of what they are close-ups of.
• No captions, in the grid or in the full-screen view.
• A close button tucked into a corner a thumb rarely reaches.

The second is the one owners rarely notice, because they know what the whole photograph shows. Many gallery plugins crop every thumbnail to a square from the centre, and a tall subject loses both ends.

Thumbnails were made for a desk

A thumbnail grid is a desktop idea. On a large screen it lets a visitor scan many images at once and choose which to open.

On a phone, scanning needs size, and the grid gives every image the same thin slice of a narrow screen. Forty images at that size tell a visitor less than six shown across the full width.

Making the thumbnails larger only lengthens the wall. The fix is fewer images on the first screen, chosen on purpose.

Group by project

A visitor looking at your work is asking whether you can do something like their job. One photograph rarely answers that. A small set from one project usually does.

Give each project a cover photograph, the clearest view of the finished work, and gather the rest behind it: the whole piece, a close detail, the setting, and a before photograph where one exists.

The gallery page then shows covers, one per project, each large enough to see on a phone. Behind each cover sits a short page for that project, with its photographs in order and a few lines of text.

Captions that say what you are looking at

A photograph shows what something looks like. It rarely shows what it is, how big it is, or what was done to it.

The caption carries that: the object, its size or setting, whether the work was new or a repair, and anything a visitor could not tell by looking.

Write it the way you would explain the photograph to a customer standing beside you. Project 14, or a number from a camera, explains nothing.

Captions belong in the full-screen view too, since that is where the visitor is looking when the question occurs to them.

A worked example

A two-person stained glass studio in an older commercial building restores windows in heritage houses and makes new panels for doors, transoms and cabinets.

Its gallery held fifty-two photographs in a grid, added over six years. The newest sat at the bottom, and restorations were mixed in with new work.

On a phone, every tall arched window had been cropped to a square of coloured glass from its middle, so the shape that made each one remarkable was gone.

A homeowner who phoned about a cracked transom mentioned that nothing on the website had shown her whether the studio did repairs at all.

The gallery became twelve projects, each with a cover cropped to show the whole window and a caption such as restored leaded transom, 1912 house, three cracked panes replaced.

Each project page now runs from the before photograph through the work on the bench to the window back in its frame, with a line of text under every image.

Full-screen views on a phone

Many gallery plugins open a photograph in a lightbox, a full-screen layer over the page. On a desktop it works well. On a phone it often does not.

The close button is small and high in a corner, swiping may or may not move to the next image, and the phone's back button can leave the gallery altogether instead of closing the layer.

A project page avoids most of this. Its photographs simply follow one another down the page, which uses the one gesture everybody already knows on a phone: scrolling.

One project per row on a phone

On a phone, show one project per row, its cover running the full width of the screen, with the project's name in text just below it.

Size the covers so the top of the next one peeks in at the bottom of the screen. A visitor who can see that more follows will scroll; one who sees a single complete picture may assume that is all.

Load only the covers on the gallery page. Each project's other photographs belong on its own page, which keeps the gallery quick to open on a weak signal.

Crops that keep the subject

Set each cover crop by hand rather than letting the plugin cut from the centre.

Tall subjects suit a tall crop. A gallery can use one consistent shape, tall or wide, as long as every subject fits inside it; the square is a convenience for the grid, not a rule.

Check every cover on a phone before publishing, since the crop in a desktop preview is not always the one a phone shows.

The counter-case

Some galleries should stay as grids.

A photographer's portfolio, a print shop's catalogue or a store with many similar products may need visitors to scan many images quickly, and a grid serves that, provided each image is large enough on a phone.

A business with only a few projects may need no separate gallery at all, with each photograph placed on the service page it illustrates.

For most businesses showing their work, though: fewer images, larger, grouped by project and captioned.

Rebuilding the gallery

1. Open the gallery on a phone first.
2. Sort every photograph into projects.
3. Choose about a dozen projects worth showing.
4. Pick one cover photograph for each.
5. Write a caption for every image.
6. Build a short page for each project.
7. Set each cover crop by hand.

Step five is the one most galleries never get. The photographs show the quality; only the captions tell a visitor whether the work is the kind they need.

What sits below the gallery, at the bottom of every page, is the subject of footers that repeat the entire menu.

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.