[legacy] Creating mobile templates
Please note: This refers to our legacy tools. For information on setting up a standalone action in our current Page Builder technology, click here.
This document gives an overview on implementing mobile templates for your campaigns or donation pages.
There is a growing trend towards mobile devices being used to access our action pages, and there is a significant increase in the use of smart phones as the primary email client, so reducing the barrier to conversion is a good incentive to looking into mobile templates.
There are two methods for ensuring that your pages view well on mobile. The most robust method is to only use one template, and ensure it is responsive - this means it views properly at any width, and this will take into account mobiles, tablets, laptops and larger screens.
The second method is to use our alternative mobile template function. Engaging Networks will check whether a mobile device is being used to view a campaign or donation page, and then switch to this separate template.
Note: If no mobile template is implemented, supporters who use these devices can still take part in your actions - they will just see the standard template. So if this standard template is responsive, your pages will view properly on any device.
Also note: iPads and tablets are not considered mobile devices by Engaging Networks' template switching because of their larger screens.
Implementing the alternative mobile template
All HTML templates can be accessed under the main navigation by browsing to 'Account defaults' > 'Manage HTML wrappers'.
Once loaded, a list of HTML wrappers associated with your account will be displayed.
To preview an HTML wrapper, click on the magnifying glass icon.
It is recommended that you now create a 'duplicate' of the relevant HTML wrapper. This method will make sure you are not editing a live HTML template that is being used by current campaigns. It also provides a backup if the code gets broken.
Clicking on the name of the HTML wrapper will load the raw editable HTML.
Each HTML template has two options, defined by two tabs above the header block.
The 'Standard template' tab is the HTML that will be rendered for non-mobile computers (desktop/tablets). It is here that you can select 'Mobile template' and edit the mobile-specific HTML.
Note: It is worth checking which campaigns use the template you are planning to work with. If there are campaigns using the template, you will see a warning note. It is recommended that you always create a backup before you start working on any template changes.
If you have previously created a mobile version of your template, paste relevant parts of the code into the Header and Footer areas.
If you prefer to use a default template provided by Engaging Networks, click on 'Insert default template' icon, which can be found at the bottom of the Header area.
If you have uploaded a logo to your Engaging Networks account libraries, you can select it from the dropdown. Otherwise enter the image URL in the textbox titled 'from a URL'. The logo will be displayed at the top of the mobile template.
Click 'Insert' to generate a default mobile template.
You can also insert a link to the full template version of the page in either the Header or Footer area.
To do that, put your cursor in the area of the code where you would like to insert the link and click on the 'Insert full template link' icon.
Customizing default styles
The default mobile template generated by the Engaging Networks account will include a default style sheet (CSS) that will be responsible for styling mobile form elements. You can also add any custom styles, as in the example below:
<style>
/*
Your custom CSS
*/
</style>
Example style to update colour and width of a submit button:
<style>
.eaSubmitButton{
width: 100% !important;
background-image: none !important;
background-color: #5b8737 !important;
color: #fff !important;
/*additional styling for submit button to set border, padding and text decoration */
border: 1px solid #4a6b2d !important;
padding: 13px 34px 13px !important;
text-decoration: none !important;
font-weight: bold !important;
}
</style>
Applying the HTML wrapper to a campaign
To view which HTML wrapper is being used by a specific campaign or to apply a new wrapper, head to 'Campaigns' > 'Manage campaigns'.
Each campaign has the following icons associated with it, and clicking on the 'Build' icon will take you to the build area of the campaign.
Once in the build area, select HTML Template. Here you will see the HTML wrappers available for selection.
Technical tips and advice
It is worth reading up on how mobile devices use the 'viewport' META tag. This tag, when used in the <head></head> section of the HTML template, tells the mobile device how to render the web page.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no" />
width=device-width; Sets the width of the template
initial-scale=1.0; No 'zoom' on start
maximum-scale=1.0; Allows for zooming
user-scalable=no Stops the device from rendering an 'entire page' screenshot.
For more information please see: