Staff Photos Taken in Portrait on a Phone

Tall photos in wide boxes

The team page was designed with wide photographs in mind: neat rectangles in a row, each a little wider than it is tall.

Then the photographs arrived. Each was taken by a colleague on a phone held upright, the way people naturally hold a phone, so each was tall and narrow.

The theme did what it was built to do with the wrong shape, and half the staff lost the tops of their heads.

Neither the design nor the photographs were wrong on their own. They were never planned together.

What a theme does with the wrong shape

• It crops, keeping the middle and cutting the top and bottom.
• It stretches, forcing the photo into the box and distorting faces.
• It adds bars, filling the leftover space with grey or white.
• It shrinks, leaving a small face in a large frame.
• It staggers, giving each card in the grid a different height.

The second does the most harm. A squashed face looks careless in a way a bad crop does not, and visitors notice it before they read a word of the biography.

Why the middle gets kept

Most themes crop by keeping the centre of the photograph, because they cannot know where the important part is.

In a tall photo of a person, the centre is the chest and shoulders. Cut that into a wide box and the frame runs from the chin to the waist, or from the eyebrows down.

A theme can usually be set to crop from the top instead, or each photo can be cropped by hand before upload. Both beat hoping the centre is a face.

Choose the shape before anyone takes a photo

Decide the shape of each photo slot when the page is designed, and decide it for the photos you will actually get.

People are taller than they are wide, so headshots suit a portrait or square slot. Rooms, buildings, vehicles and work in progress suit a wide one.

Then tell whoever takes the photos which shape each slot needs. Most bad crops start with nobody being told.

A worked example

A company that installs electric vehicle chargers in home garages and at small workplaces has eight electricians, each with a short biography on the team page, since homeowners like to see who will be working in their garage.

The theme's team grid used wide rectangles, and every photo was a tall phone picture taken by a colleague in the warehouse or beside a van.

The grid kept the middle of each, so most electricians appeared from the nose down. One photo, uploaded at a fixed size, had been squashed sideways.

The mechanism was a mismatch nobody had planned for: wide slots, tall photos, and a theme settling the difference by cutting.

The slots were changed to a portrait shape cropped from the top. The office manager then retook all eight photos in one afternoon, against the same pale wall beside a window, with the phone upright at eye level.

A few wide photos of chargers on garage walls, taken with the phone turned sideways, went on the service pages. New staff now get the same one-page instructions in their first week.

Instructions that fit on one page

Staff do not need a photography course. They need a few specific instructions, written down.

Hold the phone upright for headshots. Stand the person a step or two in front of a plain wall, facing a window, with the phone at their eye level.

Leave space above the head and below the shoulders, so the crop has room. Step closer rather than zooming, since zooming on a phone only enlarges the pixels.

Take several, with no filters, and let the person choose the one that goes online.

Send the file, not a copy of it

A good photo can still arrive unusable. Messaging apps shrink photos so they send quickly, and a screenshot of a photo is smaller still.

Ask for the original file, by email or through a shared folder. On an iPhone, choose the actual size when Mail offers smaller ones.

The site will make the photo smaller for the web anyway, but it has to start with enough detail to crop and still look sharp.

When the design needs a wide photo

Some slots really are wide: a banner across the top of a page, a photo of the whole team, the front of the building.

Those need the phone turned sideways, and the instructions should say so for each one. A tall photo cannot become a wide one without losing most of it.

Leave room around the subject in wide photos too, because a banner is often cropped differently on a phone than on a computer.

One set, not eight separate photos

A grid of faces reads as a team when the photos match: the same background, the same distance, the same light.

Take them on the same day where possible, and note where people stood, so next year's new hire can be photographed to match.

On a phone the grid becomes a column

On a phone, a team grid usually stacks into a single column, and a tall photo at full width can fill the whole screen.

A square crop or a size limit on small screens keeps the names and biographies within reach. Check the team page on a real phone before calling it finished.

The counter-case

A business whose people are what customers are buying, such as a law firm or a clinic, may be better served by a photographer for an afternoon.

A professional will deliver the shapes the design needs, consistently lit, if asked. The slots still have to be designed for those shapes.

And a team of two may not need a grid at all, since one wide photo of both people can do the job.

Either way, decide the shape first and tell whoever holds the camera.

Before the next photo day

1. Check the shape of every photo slot.
2. Use portrait or square for headshots.
3. Set crops to keep the top of the frame.
4. Write one page of instructions for staff.
5. Pick one wall and one window.
6. Ask for original files, not messaged copies.
7. Check the page on a phone.

Step four is the one that lasts. The redesign happens once, but staff change every year, and a written page means the next photo matches the last without anyone remembering how it was done.

Another small detail that costs more than it looks is covered in the logo that does not go home.

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.