top of page

Forum Posts

sifatahmed
Jan 13, 2022
In Self Help Forum
In-app notifications are messages sent to a user while he/she is active in your app. When done right, they show higher efficiency of engagement over other methods like Push Notifications, SMS or Email. That said, creating visually pleasing in-app notifications with images is an increasing problem due to the varying resolutions and screen sizes of devices launched by Apple, Google, Samsung and other major mobile phone manufacturers. This post will help you design the best possible in-app messages that can be used across multiple devices, irrespective of the screen resolution of the device. In-App Notification Templates with CleverTap First you need to understand how CleverTap fits a given image within different types of in-app notification templates. Currently we offer 4 different types of templates – Interstitial – a portrait container in the middle of the screen Cover – a portrait container covering the whole screen Half Interstitial – a container in the middle of the screen Sticky – a landscape container on the top/bottom of the screen The basic rule applied to all of the above templates is that the image will be center-aligned and fit to the longest side of the container. The following sections describe the impact of the rule above depending on the type of image you want to use for creating the in-app notifications. Using a landscape image Let us see what happens when we put a landscape image in each of the above mentioned templates. For three of the templates ( Interstitial, Cover and Half Interstitial), the longest side of the container is the height of the container. Applying the basic rule, the image will hence fit to the height of the container and will center align. The portions of the image outside the container with this alignment will be cropped out. For the Sticky in-app template, the longest side of the container is the width of the container. Applying the same rule, in this case the image will fit to the width of the container and center align and crop accordingly. Using a portrait image Now let us see what happens when using a portrait image for creating our in-app notification within every template. The basic rule remains the same that is, the image is center-aligned and fit to the longest side of the container. Once again for three of the templates (Interstitial, Cover and Half Interstitial), the longest side of the container is the height of the container. So the image will fit to the height of the container and center align. For the Sticky template, the width of the container is the longest side, hence the image will fit to the width of the container, center align and crop out the rest of the image. Using a square image When using Colombia Phone Numbers List a square image the basic rule remains the same and the image cropping is dependent on the notification template selected. For Interstitial, Cover and Half Interstitial templates, the image will be made to fit to the height of the container and will be center-aligned cropping out the rest of the image. For the Sticky notification template, the image will fit to the width of the container, will be center-aligned and cropped. The following images show the rendering of the notifications when using square images. Using Text within In-App notifications We’ve seen that any image used within in-app notifications will be center-aligned. If you have text as part of the image, it is advised that the text is in the center and hence won’t be cropped out. However, a healthy tip is to avoid using a lot of text in an image and if text is needed then the CleverTap dashboard has a provision to add fully customizable text on top of your image while creating an in-app notification campaign. This ensures that all the text that the user should see is visible and not cropped out due to the different sizes of multiple devices. Advanced In-App notifications with Custom HTML CleverTap also allows the use of custom HTML to be rendered in the in-app notification campaigns. If you are using a custom HTML of your choice, consider the template container as a web page where all text and images are top-left aligned. If you are using a back
0
0
16
Forum Posts: Members_Page

sifatahmed

More actions
bottom of page