General Guidelines

Multiple device support and best practices for mobile web

Your message can end-up being displayed in many various formats. You have to build a responsive page, that can fit on small to extra large screens, and which adapts to portrait and landscape orientations (unless the app only allows one of both).

Your customers have a wide variety of devices, and those devices also have differents levels of HTML support. This might cause display issues (bad layout, errors, blocked content). You can prevent these problems by following cross-browser development best practices.

Besides technical compatibility and responsiveness, your page should follow the basic best practices for mobile user experience, as outlined here.

The templates provided by FollowAnalytics are designed with all these constraints in mind, so you won’t have to worry about it if you only update their content or design. FollowAnalytics will provide full support for these templates if you encounter issues on some devices. Should you start from scratch, please remember to test both in emulators in browsers like Chrome and on actual devices.

The following resources provide additional information about web technologies on mobile devices:

How to handle the formats with the SDK

You need to use at least version 5.0 of the FollowAnalytics SDK to display in-app templates.

Like other campaigns, mobile developers can define screens where the messages should not be displayed (media player, splash screen, etc.)

HTML capabilities

As any other HTML page, your template can have multiple pages, forms, API calls, animation and more. Please be sure to test this on several devices to ensure compatibility.

Assets and technical requirements

Images

For your images to be properly rendered, make sure they match the resolution of your targeted devices. Mobile devices have a high density of pixels that sometimes enable a 1080p definition or higher on small screens.

A good rule of thumb is to provide a file that is twice the width and twice the height of the frame you define for it in your template. This corresponds to the @2x notation that Apple uses when developing on mobile.

There is no specific recommendation for compatibility with landscape and portrait orientations: This depends on how you position images through your code. Estimate the size your image can occupy and follow the guideline given above for high resolution devices.

Videos

Remote video vs local video and template

Despite the video file can be part of the package.zip, we strongly recommend to play your video from a remote resource, because the bigger the package is, the longer it takes to download, so that you can potentially miss a user trigger to deliver your message to the customer.

Formats

In-App Templates support all formats supported by mobile browsers. Please check this documentation to get a list of supported formats.

Package size

While working with In-App Template, you will have to deal with files sizes and try to optimize as much as possible for several reasons:

Cross domain resources

You may need to download external resources or call remote services (API) in your In-App Template. As support for non-HTTPS on mobile operating systems will end soon, you should point to HTTPS resources any time you can.

Test and delivery to end users

Testing your template

As you develop your template, you can emulate mobile devices in browsers like Chrome to check how the content adapts to size constraints.

Once you have packaged your template, you can validate it by creating a new campaign on the FollowAnalytics interface (no need to save this campaign, this is only to validate your file).

Delivery to users

To deliver your message, create a campaign which has an in-app component of type Template. Once you get to the Message step, upload your zip, and optionally send it to your device for review using the In Device Preview feature. Configure your campaign as usual, defining the delivery mode and audience. Then launch it!