AMP ( Accelerated Mobile Pages ) is a technology known for developing super fast web pages on mobile clients. It has gained a lot of importance and is being implemented widely. Even Hashnode supports AMP (hashnode.com/post/hashnode-now-supports-amp..)
In the month of March, Google came up with AMP for emails. Giving super powers to developers to at last make emails more interesting. Soon after the release, everyone had mixed opinions on it, but who wouldn't want to power up their emails? I personally think AMP for emails/similar implementations that might pop up in future will be widely used in the coming years and be helpful.
Introduction to AMP email.
According to Google, AMP for email allows senders to include AMP components inside rich engaging emails, making modern app functionality available within an email. The AMP email format provides a subset of AMPHTML components for use in email messages, that allows recipients of AMP emails to interact dynamically with content directly in the message.
There are lots of AMP components, check out amp.dev/documentation/components for complete list of components with many different use cases. Though right now only these are supported in AMP-emails amp.dev/documentation/components/?format=em.. and as they say only a subset of the AMPHTML components will be available for AMPEMAIL.
Just with the components that are available now, you can make your emails interactive, personalized, embed gifs, make remote requests and many creative hacks you wish to do.
Just to give a glimpse. Paste the below code snippet in the playground. You can test it out in the amp-email playground. playground.amp.dev
<!doctype html>
<!-- Either ⚡4email or amp4email is valid -->
<html ⚡4email>
<head>
<!-- REQUIRED -->
<meta charset="utf-8">
<!-- REQUIRED: Hide until the amp script is loaded. -->
<style amp4email-boilerplate>
body {
visibility: hidden
}
</style>
<!-- Custom styles: Hide until the amp script is loaded. -->
<style amp-custom>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#custom-container {
background: #3742fa;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
h1 {
color: #fff;
}
</style>
<!-- REQUIRED -->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Require all amp-component scripts here -->
</head>
<body>
<!-- Custom body -->
<div id="custom-container">
<h1>
Yolo
</h1>
</div>
</body>
</html>
You can find many examples to showcase all respective components that amp-email supports in their official website. But here I have put a real world example. Considering Hashnode's newsletter as an example.
Consider this situation. Instead of performing huge computations to customize and personalize newsletter to all the users, using amp-email what can be done is every user will have a unique identifier and is sent along with a personal email. When the email is opened, the server is requested with the content and list is populated with posts/content personalized to that user. Thats so much load off of the server.
Just not it. You wanna read some post but have no time to open every post in new tab from your email. Bookmark them for later right from the email. Upvote those posts if needed. There is an unlimited number of possibilities that can be implemented with amp-email.
This example showcases
- Unsubscribe/Resubscribe from within the email (Remote calls)
- Get personalized posts
- Bookmark the post (Interaction / Reactivity within the email)
- Upvote the post
You can check out the code here for the Newsletter functionality. gist.github.com/theevilhead/908d9f761a82809.. paste it into the amp-email playground to test it out and see how it looks and works.
Playground URL: playground.amp.dev (make sure you have selected amp for emails from the left-top dropdown) to test the bookmarks and upvotes you can look at the network tab.
Know more about different types of components available right now here. amp.dev/documentation/guides-and-tutorials/..
Of course, there are many things that I have left out. I would suggest you go through this documentation to get to know more about every component that is supported by amp-emails amp.dev/documentation/components/amp-list.h..
The full power of amp-emails is untapped for sure. But this is going to change some things. Maybe make emails not so boring or make emails great again!!
Do leave a comment if you have any creative use case in mind and what are your opinions on AMP for emails.
Warning : many links (and reference links from outside) in the documentation website are broken. If you poke around you will find right links.
But here are some goto links/
Playground URL: playground.amp.dev
All components supported by amp-email
amp.dev/documentation/components/?format=em..
Documentation for amp-email amp.dev/documentation/guides-and-tutorials/..
Link to my demo gist: gist.github.com/theevilhead/908d9f761a82809..
Some keys things.
- AMP email does not support any sort of tracking officially.
- Supports mustache templating in few areas
- A bit tricky to get started. But once you know how things flow everything is back to normal.
- URLs you are requesting/interacting with needs to be CORS enabled.
- In images, base64 src is not supported.
- You cannot write custom scripts, but use pre-provided scripts and their API to get things working.
Cover image source: icons8.com/ouch/illustration/abstract-messa..