AI Email Render-ation Sensation: How rasa.io Makes Emails Look Great - Part II

AI email render-ation sensation, part II

Email can be tricky. The emails you create that look fabulous in your email generation software might not always translate when they are actually delivered. Why is that? The answer is that there are countless email platforms and countless devices, and between those two factors, the combinations are endless.

In the first part of our series we explored coding superior email designs that will render properly, and look good, across all email clients and devices. In this part of our series we will explore how we treat images and then conclude with a very important part of email design: testing.

Images in rasa.io emails - Imgix

Careful consideration of email image treatment is another important part of making our emails look great here at rasa.io. One of the tools we use is an image processing service called Imgix, which helps us format and crop images inside of our newsbriefs.  

As we gather news articles for our newsbriefs, we are storing the images in an Amazon S3 bucket (cloud storage) and then giving Imgix access to that bucket. We can than enhance and crop our image by passing query parameters (filters for image processing) to the end of our images hosted URL.  

In the example below, we have the original image on the left and two examples of cropping using query parameters. Imgix gives us the ability to recognize faces in an image and that is denoted by the “fit=face” query param.

However, as you can also see in the example below, it does not work perfectly all of the time. A setting we later discovered was Imgix’s entropy setting. The idea here is that the most “interesting” part of an image will be the areas of high contrast. By setting “crop=entropy” we can now crop to the most “significant” part of an image. Imgix is a great tool that we use in every newsbrief.

email rendering using imgix for image cropping at rasa.io

Figure 2: Imgix image cropping examples

 

Testing rasa.io email design - Email On Acid

Another great tool we use is Email On Acid (EOA). We use EOA to test the responsive layout and look of our emails across multiple email clients. EOA gives us the ability to quickly view what our email will look like on over 80 email clients.

Viewing our designs over multiple email clients is important because, as I mentioned earlier, the top 3 email clients which are iPad, iPhone, and Gmail are included in EOA’s test summary (Figure 3). Also, there are several versions of Outlook that are included in EOA’s test summary.  Outlook can be troublesome when trying to get an email layout rendering properly. By utilizing EOA’s email client test summary we can ensure that our clients will receive a great looking newsbrief.

Figure 3: Email on Acid Test Summary

 

Summing up our email rendering series

In summary, in part one of our series, we briefly discussed how we build responsive email designs by using a combination of inky and jinja templating languages. We also mentioned some of the techniques we use for image cropping to the most “significant part” of an image. Lastly, we covered the comprehensive test summary offered by Email on Acid.

Why is this important? At rasa.io our core purpose is to better inform the world. One way of informing the world is through our daily newsbrief. The reason we exist is to help people engage with relevant information more frequently. That’s why.

Are you ready to take your association emailing to the next level and leverage artificial intelligence to generate content that your users want to read? Are you ready to give your brand a boost? Contact the experts at rasa.io today.


AI Email Render-ation Sensation: How rasa.io Makes Emails Look Great - Part I

AI email render-ation sensation

At rasa.io we send a lot of email newsbriefs; in fact we send millions of email newsbriefs per month. And an important part of what we do is to help associations, and other organizations, engage with their members more frequently via their AI-curated email newsletters. So, it is important to build and deliver emails that will look great on a user’s phone as well as their desktop.

This blog is the first of a two-part series that will explore: first, the importance around coding superior email designs that will render - which is a fancy word for display - properly and look good for all email clients - which is a fancy term for email systems. The second part part of the series will focus more specifically on image rendering and then conclude with a way to test your designs across multiple email clients.

How people consume their email content

Currently, mobile email clients represent about 54% of all email opens according to Litmus email analytics. iPhone, Gmail and iPad are among the top 3 email clients. Gmail’s 75% of their 900 million users access email via their mobile device. With this in mind, it is important to build an email template that will work across multiple email clients and devices. (For a less technical approach to optimizing your association newsletter, read our blog on 15 ways to give your association news a boost!)

Email template language

At rasa.io, we use several tools to help us build responsive and beautiful email designs. To start with, we use an email templating language called Inky.

Inky provides a responsive grid layout and several out of the box components, and it allows developers to write a small amount of code and that gets compiled to a much larger chunk of code. This is important because the larger chunk of code will help with compatibility across email clients.

For example, in the image below, the image on the left is the precompiled Inky and Jinja syntax, (we’ll come back to Jinja); and on the right is the same bit of code but compiled to its full HTML form. The reason for this is that some email clients do not support modern web html elements such as <div> tags. On the contrary, <table> tags are guaranteed to work across most email clients. From a developer’s perspective, maintaining the bit of code on the left is preferable to the one on the right.

rasa.io artificial intelligence email rendering code example

Inky / Jinja to compiled code example

The Inky grid

Inky’s grid layout gives us the ability to separate and carve out parts of the email. The grid is primarily composed of rows and column components. Rows define horizontal sections of the email and columns carve up the row into side-by-side sections. Inky uses a 12-column grid and column sizes can be controlled via sizing classes. Once again, these inky components will eventually get compiled to a much larger chunk of code and that is what goes out to the email client.

+ Jinja

Let us briefly go back to the image above. All the bits of code inside the curly brackets {} are Jinja. Jinja is a python templating language. It allows us to create variables, insert conditional logic and to iterate through lists such as a newsbrief.

In the example above, we have a basic for-loop that will iterate through each item in the recommendations list. Through each iteration we typically expose attributes such as a recommendations title, description, source, or image, if one is available for the given blog, article, news story, or journal publication. Several of our emails contain images and it is important that we show images that are nicely cropped and formatted.

An email render-ation sensation part II

Next week, in the second installment of this blog series, we will first discuss image rendering. We will then conclude with how to test your code and designs across multiple email clients.

Are you ready to take your association emailing to the next level and leverage artificial intelligence to generate content that your users want to read? Are you ready to give your brand a boost? Contact the experts at rasa.io today.