Background are the basis of your Story page!
Background concept
The background is the image that won't move no matter the size of your screen. Think of it as the common denominator between all the different types of phones. This image needs to works for all the different screen sizes. So make sure that there is some bleed area.
Background specifications
To execute the concept of backgrounds perfectly you must adopt the 61:116 aspect ratio. This is defined by the specification of the AMP technology. You can find the source of this information right here.
For your design tools this is the dimension of your design canvas. 1104x1856.
We have created a Figma file for your to make a simulation of your Tappable Story background. Check it out right here. You can use this to create your perfect backgrounds.
If you do not use Figma we've also create a Google Presentation file. Just don't forget to activate the guides.
The sharpest picture will always be shown. The slightly washed out parts will be shown for extreme phone sizes. And finally the white rectangles will never been shown. So make sure you don't put any important information in there.
All foreground layers will be added in the smallest frame. Here is the documentation for the foreground layers.
Background options
On the right hand side of your screen you will find all the background options. You can add and combine the following things.
Background colour
Background video
Background image
Background gradient
Why in that order you might wonder. Well it's because you can only overlay in that order. You wouldn't be able to overlay a video on top of a video. 😉
Tappable Community
Tappable created a community on discord if you have any unanswered questions or you would like some feedback on your design. Join us and we'll happily answer any of your questions.