Creating a Cover image for Facebook pages

I mentioned in yesterday’s post that these were the 4 “requirements” when creating a new “Cover” image for the Facebook profile pages within the Timeline framework:

  • It should be at least 399 pixels wide, but 851 pixels wide is better and 315 pixels tall is recommended.
  • It cannot feature pricing or discount/promotional information.
  • It cannot contain contact information or website addresses.
  • It cannot contain call-to-action statements.

When creating your 815 x 315 pixel graphic, there are some other considerations.  For one,  your avatar is going to appear as an overlay in the lower left hand corner of the graphic, starting approximately 20 pixels from the left edge and 75 pixels from the bottom edge. The box that superimposes over your graphic is 135 pixels wide. So in other words, you shouldn’t put anything important (definitely not any words) in the lower left corner of your graphic, which is defined by a space of at least 160 pixels wide by 90 pixels high. In fact, if at all possible, you should try to “incorporate” this avatar graphic within the design aesthetics of your Cover, in order to give the impression that both elements are a part of the same graphic.

The other area to consider is the upper right hand corner.  For users who are not signed-in to their Facebook account (or don’t have one yet, if there are any of those people left), Facebook overlays a “Sign-up box” over your Cover graphic.  The simplest thing to do, of course, is to not worry about this (and given the spacing variables that arise, depending upon whether this pop-up box appears on a mobile phone, tablet, or monitor, that’s also perhaps the most realistic option). The second easiest thing to do is refrain from putting any content in this area of your cover graphic. But considering the size of Facebook’s Sign-up Box, that’s a lot of real estate to “give-up” just for those people who aren’t signed in.

A trickier, but ultimately, perhaps, more successful approach, is to design some content to fit within the designated space, so that your cover graphic looks complete both with and without Facebook’s overlay. Trickier still, Facebook’s overlay is somewhat transparent, so you cannot have anything BOLD and BRIGHT under it.

In our first attempt at a cover graphic, we added a testimonial in that space.  The graphic (let’s call it our “Survivor graphic” for the sake of identifying it among other graphics) stands on its own when Facebook’s overlay covers our testimonial, and when the overlay is gone, the testimonial supports and further enhances the graphic.

So, given those considerations, and our first opportunity to deal with this new branding opportunity, our first attempt at a cover graphic featured one of our authors holding his book alongside his friend (and subject matter), Benjamin “Coach” Wade from the CBS reality show “Survivor.”

If it helps, below is a graphic representation of the two “trouble spots” I described above, so you can keep them in mind as you design your own compelling cover graphic. The top-right black box is approximately where Facebook overlays their own “Sign-up/log-in graphic” and the bottom-right is where Facebook overlays the “Avatar graphic.”

As we began enhancing other elements of the new Timeline masthead, this Survivor graphic was replaced with something else, and we’ll discuss that next…