I Got a Speeding Ticket However, I learned a great new trick in the process! The holidays are over, and apparently, I was in a hurry to get home from Christmas dinner. This was evidenced by one last Christmas card that arrived from my car leasing agency: Dear Mr. Van Brakel, Below you will find a link with important information regarding a traffic violation. This concerns the vehicle with registration number X-XXX-XX. If desired, you can pay for the traffic violation quickly and safely with PayPal. You can view your traffic violation via this link: Click here Sincerely, Car leasing agency Of course, I was not too happy to see the picture included with this email since it was clearly of me. So, being the good citizen that I am, I paid the bill — and I did so immediately since there was a big chance I would forget otherwise. After paying, I reopened the email and noticed that the question mark icon had changed to a green checkmark. This caught me by surprise since I always presumed emails are static. How did they manage to include live content that changes based on the payment status? Let's find out together what exactly is possible in an email and what the different methods are to incorporate these methods in your own emails. How It Works The first thing I did to find out how the changing icon works was look at the email source code, and it really looked quite normal. Just like any other image, the icon is fetched from a server. No JavaScript or any other tricks are being used. The only thing that set it apart was that the path for the email contained a unique identifier: https://example.com/a30e1708-d9fe-45b5-a9aa-f165466898f7/status.png This identifier is probably linked to my invoice, and when I paid my invoice, a background process replaced the question mark with the green check. The background process, in combination with the caching policy, which is set to the following: cache-control: no-cache, no-store, max-age=0, must-revalidate means that the icon can’t be saved on the client’s device and instead needs to be fetched from the server. This ensures that each time the email is opened, the newest version of the image is displayed, and you can therefore see the current status of your invoice. My speeding ticket incident provided a clear example of how changing email content can be used and why. It helps to give the user either a sense of urgency (with the question mark) or confirmation that the invoice was already paid (with the checkmark). Countdown Timers The example I shared uses a static image to show live content, but while researching how all of this works, I began to wonder if there are other options to show live content. It turns out there are! One example that appears all over the internet is the countdown timer. This is primarily used in marketing emails, to indicate the end date of a sale, for example. As seen above, GIFs are used for countdowns. This makes the email feel even more alive; however, if you have seen such a countdown in the wild, you probably didn’t notice that the timer resets itself after a minute (or a few minutes — it varies). As with everything on the web, it needs to be optimized for slow connections. And by using a limited timespan it keeps the file size low. Since the more frames the GIF contains, the bigger it gets. That’s why the rules of the status-showing icon apply here as well. Each time you open the email, a request is made to the server that hosts the GIF, and it quickly generates a new version containing one minute of a countdown. That’s what you see in your email. Some platforms even offer options to show specific images for when the timer has run out or different times based on the user's time zone. Images and GIFs Now we’ve seen how one simple technique is used to add live information to emails that could previously only contain static information from the moment they were sent. This technique can be used in infinite ways. Things like live weather reports, poll results, and even inventory updates are all possible. But if you’re feeling brave and want to see even more complex solutions, I would recommend you read the following . It is a great post from the marketing platform Litmus where they explain how to include a live Twitter feed that uses CSS files to update their tweets. They roughly use the same principles that are described in the previous paragraphs. blog One drawback of the implementation described above or the one explained by Litmus is that the images, GIFs or CSS files are only loaded once. If a user keeps the email open for a long time, it can show a countdown that is out of sync or the wrong status icon. However, this is not a problem for most use cases, since emails are normally only opened for a brief period of time. Conclusion I’ve only dipped my toes into the world of email development, but it’s been great to learn more about this topic. Because of the many limitations set out by email clients, developers have created a number of innovative solutions for displaying live content. I can’t wait to dive deeper into this topic myself. From third party tracking pixels (images) that notify the sender when an image was loaded and thus opened by the receiver, honeypots to see if your inbox is compromised, serving different kinds of images based on screen formats or a image in case you need to rectify something in an already send the email. plan b If you have any questions or would like to read something else on a related subject,, feel free to place a comment below, and maybe it will be addressed in my next post. Cover image by: Michael Schwarzenberger Also published at: https://nielsvanbrakel.com/blogs/live-email-content#i-got-a-speeding-ticket https://dev.to/nielsbrakel/displaying-live-status-updates-in-emails-29g4
