How can I style/optimize Rich in-app messages for different screen sizes?

Question

How can I style/optimize Rich in-app messages for different screen sizes?

Answer

This is a list with best practices on how to achieve a good looking, responsive in-app message across multiple different devices and screen sizes:

  1. Use relative units for size, instead of absolute units wherever possible.
    Good relative units are percents (%), but could also be any relative CSS units like remem, etc.
      Example: Set Width/Height: 100%/100% to achieve a full screen Rich(Floating) Interstitial message, instead of trying to set absolute sizes like 1800px/700px

  2. Minimize content 'baked in' images as much as possible.
    Don't render title/text/button text and other similar elements inside your image, as when setting its size in percents (%) which will result in inconsistent font size across devices. The best approach is to have a centered image and type your text in the proper fields.

  3. Fullscreen images need bigger safety margins for cropping.
    Different devices might crop your image differently - from the sides or from the top and bottom. Ensure your content is distanced enough from the edges. Also ensure it has enough empty space to allow for buttons to render in their expected places, without obstructing anything.

  4. Always test your in-app messages on emulators or real devices.
    This is the best way to ensure your template looks and plays nice with different screen sizes. See how to preview an in-app message here.

  5. Advanced styling is possible through HTML/CSS.
    Check out how you can style your in-app messages even further in this article.

Was this article helpful?
Have more questions? Submit a request