In: Social Media4 Dec 2013
When most people upload an image for a social media network like Google+ or Facebook they usually go by how it looks on their own monitor, but there’s a problem with that approach when it comes to our Google+ cover photos because there are variables that can affect the actual dimensions of the image on the screen. Unlike Facebook, where the image is a fixed size no matter the size of the viewers monitor, Google went with a responsive design and the image shrinks and expands as the monitor size increases. In addition, depending on whether the viewer sees 2 or 3 columns or the bio in the profile box to the left of the cover image is 2 lines or 3, the sides of the image can be cropped. So, even though your fancy new cover looks great to you on your monitor, it may look different to someone on a smaller or larger monitor, or on a mobile app.
Here are some screenshots showing how my Google+ page looks at several popular resolutions as well as on Android and iPhones. You’ll notice that more or less of the overall width is visible, depending on the monitor resolution. Click on any of the images to view at actual size.
1024 x 768
1366 x 768
1600 x 900
1920 x 1080
Android App. Entire image is visible, unlike on an iPhone. Don’t ask me why.
iPhone. Sadly, as you can see, unlike the Android app, the iPhone shows a very small portion of the entire overall image so trying to design something that works on an iPhone is just a compromise I’m not willing to make.
Here’s a template I created that indicates a safe area that will be visible to anyone. I recommend keeping anything important, like text, inside the safe area. To download the template, click the image below and download the full size image that opens. The maximum size for a cover image is 2120 x 1192 but the size recommended by Google is 1080 x 608 and that’s the size I design for.
For those of you with Photoshop, click here to download a layered psd file.
Copyright © 2013 HughBriss.com
Hugh Briss is the owner of Social Identities.