One of the greatest powers of the Firstup platform is publish once, reach everywhere - mobile, web, intranets, digital signage, email, and more!
With reach everywhere publishing, a single cover image needs to look good on very different devices. Mobile phones, web browsers, digital signs, email templates, embedded Microapps, can have dramatically different sized spaces to display images. We know that the way content appears reflects on you as a communicator. To help you look your best, we leverage smart image cropping for cover images to keep images centered on the focal point - such as a face.
Viewing Article Preview in Web Experience - Smart Cropping Shows Faces
Note, when you open a piece of content, nothing is cropped in the opened view.
Viewing Full Article in Web Experience - No Cropping of Cover Image or Images in Body
However, we know that you sometimes have that one piece of content that needs to look a specific way - maybe it's a picture of your CEO, maybe it's your brand logo, or maybe it's important "just because". In that case, what can you do to control the end result (as much as possible)?
Cover Image - Two to One
If your users are on the web or mobile app experience, then we strongly recommend that a cover image ratio is 2:1, at least 800 pixels wide and 400 pixels tall. Keep any key imagery (faces, text) within the central 2/3 of the image.
The cover image defaults to the first image in the canvas of your campaign, but you can choose from any of the images in your campaign or even upload a separate image.
Why 2:1? If you love details, we're happy to explain. Our web and mobile experience will display the cover image in ratios ranging from 4:3 to 3:2 to 2:1, depending on exactly where the post appears. For example, on the web's landing page the Featured section has a really big "highlighted" post displayed in a 4:3 ratio while the smaller, older featured images below that are 3:2. If your user navigates to a topic view, the image is now displayed with a ratio of 2:1. As you cannot control exactly where the image will appear on the landing page (this is determined by how recently it was published and which section of the landing page it belongs in), the main takeaway we want you to remember is that a 2:1 image ratio will have the most consistent appearance across the web and mobile app.
Within the body of the campaign, on the canvas - if the image is half the width of the canvas, aim for at least 400 pixels wide.
If the image is the full width of the canvas, aim for at least 800 pixels wide. Height can be anything.
Content in Microapps
One possible exception to our 2:1 recommendation is if your content will primarily be consumed through a Microapp. For Microapps, templates like News use a ratio of 2:1 while Banner uses 5:2. You can check the exact ratio in Studio by inspecting the image in the template preview.
If you know that your content will mostly appear in only one endpoint, you can check that endpoint's ratios and use an image with a similar ratio.
However, if your users will consume the content through multiple endpoints including web, mobile, emails, and/or multiple Microapp templates, then we recommend choosing templates for emails and Microapps that tend towards the 2:1 ratio. Then, you can use an image of 2:1 that works across all end-points.
A golden practice when things need to look just right is to actually publish the content and check it out.
You can create a test topic targeted to just yourself (or a select audience of communicators) and publish content to this topic for a "test run". You can use this to test how things appear in the web or mobile app, in emails, or most Microapps (this won't work with Microapps that do not display your targeted topic).
- Create an audience of yourself and any other "testers" that should be able to see this test content.
- Open the Audiences page by clicking on People on the main menu to the left.
- From the Audiences page, select + Audience in the top right. The new audience has no name and automatically excludes Deactivated users.
- Click in the attribute box and select Email.
- On the right, enter or select the emails of the test users (it can be just yourself).
- Click into the Untitled Audience field to name your audience. For example, "Angela's Test Audience".
- Type a description for the audience. You can use this field to communicate with other Studio users about your audience - what is the audience, why it exists, who created it, etc.
- Optional: add tags. Use numbers and letters, and separate multiple tags with a comma. Consider using "testing content" or your name.
- After the audience has been named, click Save.
- Create a test topic.
- Switch to the Topics page by clicking on Configure on the main menu to the left, then click on the Topics tile.
- To create a new topic, select + Topic in the top right.
- Under Target > Audience, start typing the name of the test audience and select your audience from the results list.
- We recommend that you DO check "show in Experience". The targeting will assure that only your testers can see this topic, and we do not want the properties of a hidden topic to impact your testing.
- Select Save to apply changes.
- Publish content to your test topic.
- View the content in the web or mobile experience.
- Edit an email template or Microapp to pull in content from your test topic and see how it looks. With emails, you can even use Send Test Email to see the results in your email client.