Safe area guides
We recommend formatting your background images to a specific aspect ratio that renders well across a wide range of screen sizes.
For landscape orientation images (wider than tall), the size is 2560 pixels wide by 1440 pixels tall.
For portrait orientation images (taller than wide), the size is 1080 pixels wide and 1920 pixels tall.
In Title, Text Over Media, Reveal and Background Scrollmation sections, the background images remain full-screen regardless of the size and orientation of the screens on which they are viewed: desktop or mobile, landscape or portrait. To achieve this, the outside edges of the image may be cropped to varying degrees within your reader's browser.
So that important parts of your image are less likely to be cropped out on differently-shaped screens, detail should be kept away from the edges of your images, in a central safe area.
On landscape images, the safe area is approximately 1750 x 1080 pixels, and on portrait images the safe area is roughly 874 x 1437 pixels.
Download image templates of the right dimensions and showing the safe area here:
- Safe area guide for landscape images (png)
- Safe area guide for portrait images (png)
- Combined Photoshop template
The png templates show the image safe areas on a transparent background, so if you use a photo-editing tool that supports working with image layers, you can use the templates temporarily overlaid on your image to see how the safe areas align with your content before having to upload your images to Shorthand.
If you are familiar with Photoshop, the Photoshop template is a single file with two 'artboards' (one for portrait, one for landscape) and a 'smart object' image file on a layer in each artboard. You can replace the smart object layer completely, or replace the image within it in order to have your single image populate both artboards and be independently positioned and scaled..
Within the editor, when you do upload an image, you'll see a rough guide to the safe areas there too: overlaid on your image to give you a quick reference.
If you notice important parts of your uploaded image in, or close to, the dark safe area overlay, consider recreating your image to give it some more padding on the edges.
Consider that on some devices, the safe area may still be very close to the edges of the user's screen. For images that contain text, you may wish to be extra-sure about placing text well inside the safe area, or use a Media Section instead, where the entirety of the image will be shown. We always recommend testing your story on multiple screens and resolutions.
Portrait / tall screens
Many people may access your shorthand story on a mobile device in portrait mode - where the screen is taller than it is wide. In these instances, if you haven't provided a portrait-specific image for the section, your landscape image will be used at an even tighter centre crop, losing more detail on the left and right sides.
If the important parts of your image aren't in the centre, you can specify a focus point that isn't in the middle of the image, or you may wish to upload a portrait-specific image to be used on tall screens.
Shorthand automatically makes additional smaller and compressed copies of of your uploaded JPEG images for multiple device sizes so that your readers will be served an image close to their device ideal. We don't change file type however.
The landscape guide should also be used to check background video for desktop viewing, as this will also be cropped on different aspect ratio screens and browser windows. The fallback image is likely to be shown instead of the video on mobile browsers, so the portrait and landscape guide should both be used to check the at-risk areas of the fallback image(s) on different orientation mobile screens.