With more businesses transitioning to the online marketplace every day, it’s important to remember the little things. First impressions matter and the shop keeper cleaning their windows knows it, but what about online? It’s just as important. With current events keeping people indoors, the “virtual” store front is now Facebook, Instagram, LinkedIn and more.
So how do we get it right?
Recently, we found there was a social media “Danger Zone”. While creating an array of social media assets, we came across a hurdle – the “New Facebook” interface. When designing to pixel perfection, designers need the right dimensions to avoid any primary content from being left out of frame, otherwise leaving the social media presence in, the “Danger Zone”.
What does it look like?
Ever tried fitting your foot into a shoe three sizes too small? It’s not pretty. Since the launch of the “New Facebook”, layouts, colours and dimensions have changed throughout the social media platform. So now, your current content is that foot, while the “New Facebook” is that shoe three sizes too small.
Why doesn’t it still fit?
Facebooks ‘Group’ or ‘Page’ banner sizes have been the same for a while now. Desktops are 820 pixels wide by 312 pixels tall, and smartphones are 640 pixels wide by 360 pixels tall (https://www.facebook.com/help/125379114252045). While these dimensions have been successful in previous Facebook versions, keeping the same content in the “New Facebook”, has proven unsuccessful, leaving content missing due to the new sizes being used, as seen in the following example.
So how do we fix this?
After further inspection of the “New Facebook” interface, it was evident that the banner size had changed on both Facebooks ‘Group’ and ‘Page’ options. This means we now need to find the right dimension for both desktop and mobile view, but without leaving anything out.
On a desktop, the “New Facebook”, ‘Group’ and ‘Page’ dimensions are: 940px wide by 348px tall. On mobile, we estimate that the remaining visible dimensions are: 640px wide by 348px tall.
But those are two different sizes?
To ensure your Facebook banner is not too big and not too small, we use “guides” to ensure all primary content is visible across, no matter the viewing device. By combining the largest measurements and then creating “guides” to keep within, there really can be, one to rule them all. As seen in the example below, by placing primary content only within the guides, the content is safe and out of the “Danger Zone”.
How do I know if I’m in the “Danger Zone”?
To check if your social media is “safe” or not, look at your Facebook Page or Group on both a Desktop and Mobile. While there, thoroughly check that everything that’s meant to be there is visible across both devices. Also keep in mind who your primary customer or audience base is and what device you believe they may primarily benefit from.
Still having trouble? Have you found yourself in the social media “Danger Zone”?
We’re here to help.