The power of AMP Emails
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 (https://hashnode.com/post/hashnode-now-supports-amp-accelerated-mobile-pageshigh-voltage-cjrv40r0z000njws2k6hf4g64)
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 https://amp.dev/documentation/components for complete list of components with many different use cases. Though right now only these are supported in AMP-emails https://amp.dev/documentation/components/?format=email 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. http://playground.amp.dev
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 1. Unsubscribe/Resubscribe from within the email (Remote calls) 2. Get personalized posts 3. Bookmark the post (Interaction / Reactivity within the email) 4. Upvote the post
You can check out the code here for the Newsletter functionality. https://gist.github.com/theevilhead/908d9f761a82809a33fcede797d06334 paste it into the amp-email playground to test it out and see how it looks and works.
Playground URL: https://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. https://amp.dev/documentation/guides-and-tutorials/learn/amp-email-format.html#boilerplate
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 https://amp.dev/documentation/components/amp-list.html?format=email
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: https://playground.amp.dev
All components supported by amp-email
Documentation for amp-email https://amp.dev/documentation/guides-and-tutorials/?format=email
Link to my demo gist: https://gist.github.com/theevilhead/908d9f761a82809a33fcede797d06334
Some keys things. 1. AMP email does not support any sort of tracking officially. 2. Supports mustache templating in few areas 3. A bit tricky to get started. But once you know how things flow everything is back to normal. 4. URLs you are requesting/interacting with needs to be CORS enabled. 5. In images, base64 src is not supported. 6. You cannot write custom scripts, but use pre-provided scripts and their API to get things working.
Cover image source: https://icons8.com/ouch/illustration/abstract-message-sent