Why does my Facebook cover photo look different on my phone?

Last Sunday I was standing in the queue at a bakery, scrolling to pass the time, and I tapped through to a page I had made a cover photo for about a month earlier. A friend's small ceramics studio, their name set large across the middle, the date of their next weekend market along the bottom. On my laptop it had looked finished. On my phone the last word of the name ran off the right edge, and the round logo that serves as the page's profile picture was sitting squarely on top of the market date, which was the only piece of information the whole banner existed to carry.

I had checked it. That is the embarrassing part. I checked it carefully, on the device I made it on, which it turns out is quite close to not checking it at all.

She had not noticed either. Nobody had said anything. Somehow that is worse: a month of people seeing a logo parked on a date and quietly concluding the date could not have been important.

There were always two covers

Here is what I had not properly absorbed, despite having uploaded more of these than I could count. There is no single cover. There is one image, and each device looks at it through its own window. Facebook's help pages give the desktop display as 820 by 312 pixels and the phone as 640 by 360, and those are not remotely the same shape. The desktop window is a long, low strip. The phone window is squarer, so it keeps more of the height and gives up the sides to get it.

The profile picture makes it worse, because it moves as well. On a computer it sits over the lower left of the cover. On a phone it sits in the middle, overlapping the bottom edge, which in my experience is exactly where the one line that matters tends to end up when you design a banner on a wide screen.

None of this is hidden, exactly. It is just never in front of you at the moment you are deciding. When you drag a cover into place on your laptop, you are dragging it inside the laptop's window. You get a very good preview of half the problem.

When I got home that Sunday I opened the page on the laptop, propped the phone against the screen beside it with the same page open, and just looked at the two for a while. It was oddly instructive in a way reading about crop sizes never had been. The laptop showed a wide calm banner with the name comfortably in the middle. The phone showed a taller, closer version of the same picture, as if someone had walked a few steps towards it and lost the edges on the way. Same file, same page, two quite different objects. I have done that side by side check with every cover since, and I would recommend it before any of the advice that follows.

The default is to believe the screen in front of you

I keep coming back to defaults, because that is where the real design decisions hide. Nobody decided that you should only ever see one crop. It is simply what happens when the upload runs on one device, and the path of least resistance is to believe what that device shows you. There is a version of this where the upload screen shows both windows side by side, and I have never understood why it is not the version we have.

The cover was never one picture. It was one image with two windows cut into it, and I had only ever looked through one of them.

The repair on the studio's page took about ten minutes once I understood it. Understanding it had taken a month and a public mistake, which in my experience is the more usual exchange rate.

A cover is not a noticeboard

The studio's banner failed twice over, and the crop was only the first failure. The second was that I had asked it to carry a date at all.

A cover photo is the first thing on a page and very nearly the last thing anyone reads closely. It is seen at a glance, usually mid scroll, and often smaller than you designed it. It is very good at one job, which is saying what kind of place this is before a single word has been read: warm or cool, handmade or polished. It is quite bad at the job I gave it, which was delivering a specific piece of information to a specific person on a specific weekend.

I get a little sharp about this, because the usual assumption runs the other way. The date is treated as the real content and the picture as decoration around it, something to make the date look nice. For a cover, I think it is closer to the opposite. The picture is the content. The date is a guest, and it belongs somewhere built for information: a pinned post, the page's details, an event, all of which show people the date at a size they can actually read and keep it there after the cover has changed.

Which sounds precious, but it changes what you design. Once the cover is no longer responsible for the date, it does not need text in the dangerous bottom band at all, and most of the crop problem disappears before you have measured anything. The best fix I found for the studio's cover was not a better position for the date. It was taking the date off.

Design for the part both windows share

What I do now is design for the overlap rather than for either screen. Depending on the shape you upload, the phone cuts the sides, the computer cuts the top and bottom, or both happen a little. In every case what survives is a band across the middle. Everything that has to be read goes inside that band. Everything outside it I treat the way print designers treat bleed, as area that may well be seen and must never be needed.

Then the profile picture. Two places are off limits for anything important: the lower left, for the computer, and the lower middle, for the phone. That leaves less room for text than you would like, which is really an argument for less text. A cover that needs a date on it probably wants to be a post instead, where the date can sit at a size somebody will actually read.

And the size. A phone shows the cover around 640 pixels wide, which on a modern handset is a small physical strip of glass. Type that looks generous on a large monitor turns into fine print. I now check the smallest text at phone size before anything else, because if it fails there, nothing else about the layout matters very much.

Photographs are harder than graphics

The studio's cover was type on a flat colour, which is the easy case. Everything I have said gets harder with a photograph, because a photograph has no safe margin built into it. The interesting part of a picture sits wherever the photographer put it, and photographers compose for the whole frame, not for a band across the middle of it.

With a photographic cover I now check two things before anything else. Faces stay well away from the sides, because the sides are what the phone gives up first, and a face cut off at the cheekbone looks like a mistake in a way that a cropped tree never does. Heads and hands stay away from the bottom, because that is where the profile picture lands on both devices, and there is something quietly unsettling about a round logo sitting where somebody's chin should be.

Strong lines deserve a thought of their own. A horizon, the edge of a table, a shelf running across the frame: if it sits in the lower part of the image, the profile picture breaks it, and the eye notices a broken line far faster than it notices a missing corner. I nudge those lines up, or choose a different photograph.

The subtlest trap is a picture with its subject off centre on purpose. A portrait framed with the person standing to one side and space in front of them to look into is a lovely photograph and a terrible cover, because the phone keeps the middle and throws the person away. I have mostly stopped fighting this. For covers I choose images whose subject already sits near the centre, or I use a wider version so that the subject ends up there, and I save the beautifully composed off centre shots for places that show the whole frame.

How I build one now

My process has changed in small ways that add up to a different habit. I start in the phone's shape. I used to design in the desktop strip and check the phone afterwards, which meant meeting the harder constraint last, when changing anything was expensive. Now the first canvas I open is the squarer phone frame, because the band that survives there is the tighter one, and a design that works inside the tighter band usually only needs its edges extended to work in the wide one.

I mark the band before I place anything. Two guides across the middle for the area both crops keep, and a rough circle in each of the two places the profile picture will sit. They stay switched on until the very end. At first it felt like working with half the lights off. Now it feels like the only sensible way to work, and I find myself looking for the circles on covers other people have made.

I make it larger than it will be shown. Facebook scales and compresses whatever you upload, and fine detail and small type are what suffer in that compression. Starting from a bigger file gives it more to work with. I do not pretend to know exactly what it does to each upload, so I look at the result on the page rather than trying to predict it.

I look at it on a phone, in daylight. This one I learned in the bakery queue. A cover that reads perfectly on a bright monitor in the evening can nearly vanish on a phone outdoors, where glare flattens every subtle contrast. Pale type on a pale photograph is the usual casualty. If the cover survives a phone held at arm's length near a window, it will survive most of the places people actually meet it.

Checking both before it goes up

For the studio's second attempt I dropped the image into the social media mockup tool on this site, which draws the Facebook desktop and phone layouts from the same file and has a switch that marks the area both crops keep. It showed me the problem in roughly the time it took to drag the file in. It is also a copy of Facebook's layout rather than Facebook itself, and Facebook changes its layout without consulting any of us, so I still look at the real page on my real phone once it is live. The mockup is for catching the obvious before it goes public. The phone is for confirming it afterwards.

Personal profiles and business Pages are also not quite the same layout, and both have changed more than once over the years, so it is worth checking the kind of page you are actually designing for rather than one you remember. What I have described is how they look to me as I write this. It will drift, and the habit of checking both screens will outlast any particular set of measurements.

When it is someone else's page

Most of the covers I make are for other people, and the studio belonged to a friend, which made the mistake easier to own and harder to feel fine about. She was generous about it. She also would never have known to look, and that is the part I keep thinking about.

The person who owns a page usually sees it on one device, often the one they manage it from, and has no reason to suspect the other version exists. So I now hand a cover over with a short note: two screenshots, one from a computer and one from a phone, and a sentence about what moves between them. It takes a few minutes. It means the owner knows what they are looking at, and it means the next person who edits the page, who may well not be me, knows which parts of the image are load bearing and which are only there to be cropped.

I also tell them, gently, that the date does not belong on the cover. That conversation goes a great deal better with the two screenshots side by side than it ever did as my opinion.

The hour nobody saw

The part I have not quite made peace with is the hour I spent, on that first version, adjusting the spacing between the letters of the studio's name. It looked lovely on the laptop. On a phone, which I suspect is how most people meet a small studio's page, the second half of the name was not there to be looked at. I would like to say I learned to spend that hour differently. What I actually learned is to spend it after checking the phone, and I still spend it.