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:
Mozilla Foundation : Mobile Web general guides, cross-browser development, optimization...
Caniuse : An essential tool for cross-browser validity checking.
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.)
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
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.
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.
In-App Templates support all formats supported by mobile browsers. Please check this documentation to get a list of supported formats.
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:
- content availability: if your package is too large, and the customer triggers an event which should open your InApp Template, your package might not be downloaded soon enough. Your customer can also have a small bandwidth, which can be problematic for downloading large files.
- your customer mobile subscription plan is limited: using big package can severely burn data plans. You should consider these limitations when creating an InApp Template.
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).
- Create a campaign of type In-App and layout Template.
- Go to the Message step and upload your zip file.
- If there is problem with your files, the interface will inform you of what is wrong or missing. Fix the issues and upload again until the file is accepted.
- Once uploaded, your template will be displayed in the preview. This is a first level of validation.
- If the preview seems right, you can then use the In Device Preview feature of the Message step to send the file to one of your devices and validate that it appears and interacts with your app as expected.
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!