Create Highly Dynamic and Interactive Emails
AMP for Email is a web component framework that enables developers to create dynamic and interactive emails with real-time content. Salesforce Marketing Cloud has recently joined the list of over 30 email service providers and platforms that support AMP for Email.
In this post, I focus on the benefits of this framework and considerations for sending AMP emails.
Email Challenges
Despite the pervasiveness of email, the technology behind it has barely changed since its inception. While its format has gradually transitioned from plain text to HTML, there’s still a significant lack of conformity of HTML and CSS support across email clients today. The net result is that email marketers are forced to compromise the layout and functionality of email content by implementing table-based HTML layouts, originally designed to display tabular data.
Email development shouldn’t be hard, but it is. It’s a fiddly process and Microsoft Outlook takes ‘fiddly’ to a new level through the necessity to include conditional comments to display ghost tables, as Word is used to render emails, which ignores several common CSS properties. The end result is that email development requires a lot of patience, effort and ‘hacks’ in order to display consistently across desktop, mobile and web-based email clients.
In addition to the design challenges and functional limitations, email message content is based on time-of-send and can’t be changed after the email has been sent. This can be problematic for volatile content like time-limited offers, fast moving products and customer data. Furthermore, email doesn’t offer interactive capabilities, as any actions require users to be directed away from their email to a web browser. And it’s these challenges that AMP has set out to address.
About AMP
AMP is an open source HTML framework that addresses the many shortcomings of emails today. Initially created by Google, the framework is now maintained by the AMP Open Source Project. Its original objective was to enable web pages to load faster on mobile devices (AMP was originally an acronym for ‘Accelerated Mobile Pages’). However, since its inception in 2015, the framework has diversified from optimizing the mobile web browsing experience into addressing other applications through subdividing the framework to include:
- AMP Websites to enable websites to load quickly
- AMP Stories for delivering news and information in a mobile-focused format
- AMP Ads for delivering online advertisements quickly
- AMP Email (or ‘AMP for Email’) for adding dynamic content and interactivity to email messages
AMP for Email Support
AMP emails are supported by Gmail, Mail.ru and Yahoo Mail, which collectively account for over 30% of email client market share (source: Litmus).
Sending to both service provider domains and custom domains are supported (for example, recipients don’t need to have a gmail.com address). Additionally, AMP emails can only be displayed on supported user agents, which, in addition to Gmail and Yahoo Mail mobile apps, currently include the following web browsers:
- Google Chrome
- Mozilla Firefox
- Apple Safari
- Opera
Benefits
AMP for Email addresses the limitations of HTML email development through a standardized dictionary of HTML tags and CSS properties, which are consistently supported across all web-based email clients and user agents that support the AMP framework. AMP emails provide additional interactive functionality and dynamic content, enabled through AMP components.
The benefits of AMP emails can be broadly categorized into dynamic content, interactive forms and dynamic styling.
Dynamic Content
In regular HTML emails, content is defined at send-time. While there are techniques to retrieve images ‘dynamically’ (where a server will programmatically return an image when it’s requested), some email clients cache images and images won’t change each time the email is opened. Furthermore, this approach is only applicable to image-based content, as text-based content can’t be changed after the email has been sent.
AMP for Email breaks the paradigm of these outdated content scenarios through its ability to download content dynamically at the time of email open. In turn, AMP emails can retrieve and display both text and image content in real-time, ensuring the content is always up-to-date, resulting in a highly relevant user experience.
Dynamic content in Pinterest AMP email
Interactive Forms
Interactive forms (the ability to fill-in fields and submit forms from within an email) is already supported by popular email clients. And Salesforce Marketing Cloud has offered the ability to create interactive forms for some time now, through the Interactive Email feature in Content Builder.
However, one shortcoming of this current support is that recipients are directed away from their email to a web page on form submission, which can be a frustrating user experience. And there’s no method to validate form fields before submission — if a value for a required field is not entered or the value is in an incorrect format (like a phone number), then there is no ability to prompt the recipient to make a correction before they submit the form.
AMP for Email addresses the shortcomings of email forms through:
- Parsing the response data returned from the server (on form submission) within the email, and display custom error or success messages
- Comprehensive field validation options for displaying validation messages when the user attempts to submit the form, and
- Real-time validation of form fields, by sending field values to a remote server as the recipient completes the form.
Google Pixel Buds AMP email
Dynamic Styling
Inconsistent CSS support across email clients requires considerable patience for email developers. The Can I email project indicates the magnitude of the problem and the varying support of CSS properties across popular email clients (in addition to HTML elements and attributes).
AMP for Email addresses this challenge by defining a comprehensive specification on supported CSS features, which, in addition to a list of over 220 CSS properties, also includes support for common pseudo-classes that enable state-based styling of elements (for example, when a user hovers over an element), while also enabling styling based on the location of an element (like setting the background color of odd and even table rows).
In addition to an inclusive and standardized set of CSS features, AMP emails also allow HTML element classes to be set dynamically, based on a user action, including:
- when a link or button is clicked
- when form field values are changed
- when a form option is selected or deselected
- when a form is submitted, and
- on data change — when external data is retrieved, or data is set based on a user action (for example, a button is clicked or value is entered in a field)
AMP for Email Considerations
While the benefits of AMP for email are obvious, organizations need to consider the following before deciding whether to adopt AMP emails:
- Viewability: what percentage of your email Subscribers can actually view AMP emails? Counting gmail.com or yahoo.com addresses alone is not a good indicator, as Subscribers may be viewing the emails in unsupported email clients. Use Litmus Email Analytics or a similar service to get insights into what email clients your Subscribers use. If the majority of Subscribers aren’t able to view AMP emails, then it’s probably not a good fit.
- Return: in addition to building AMP emails, you will need to create an HTML email as a fallback. As a result, AMP enabled emails take at least twice the amount of time to build than regular HTML emails. You need to be confident that you can recover the additional development cost through the campaign ROI.
- Expertise: AMP emails require a specialized skill set that is beyond most email developers. The framework requires experience in JavaScript and also working with server-side languages like SSJS, to build endpoints for exchanging data. And even for developers who have such experience, the framework comes with a steep learning curve.
The Future of Email Marketing
With email volumes increasing globally by 25 percent year-on-year, marketers need to quickly rethink how they can make their emails engaging and cut through the inbox. AMP for Email gives developers the power to create new email experiences, unlike anything we’ve seen before. It might not be a silver bullet, and it’s definitely not for everyone, but it is set to change the course of email marketing.
CloudKettle has extensive expertise in AMP for Email. Reach out to us today to learn more and see how we can help.
