How to Design Dynamic and Appealing Email Messages
It is a well known fact that dynamic email is data driven. While this concept has been around for quite some time, the idea of conceptualizing and creating this form of email is a daunting prospect to many experienced designers and marketers. However, in reality, it does not stray that far from general design challenges.
For example, at Webati, we possess a defined set of assets, which are restrictions and rules that the visual design of the email must follow. Half of the battle in meeting this challenge is to adopt the right mindset about the process. To assist you in overcoming these hurdles, let’s take a close look at 3 basic steps to successfully creating and executing dynamic email messages:
Inventory Data and Content:
The final product of the dynamic email that you create is going to be variable, but there is still a defined set of assets, such as content blocks and images, that must follow a logical sequence. When it comes to creating dynamic emails, logic and data are going to be two essential elements to have. Today, we are looking at these assets with a focus on visual design.
Consider the elements of a dynamic framework. At Webati, we find it works well to start with a single element and build upon that. For example, let’s say you have an email that possesses a product promo gone static. Let’s say that this product is a smartphone. There are several key elements of this smartphone you could choose to focus on, from its modern, futuristic design to a price markdown.
To make each of these elements dynamic and compelling, make each element abstract. Rather than choosing a standard image of the product, choose an image that offers dimensions of Y pixels by X pixels. Text could make an appearance where the product name and price are located. A link could be modified to become any URL. The basis to inserting variable content is built upon identifying and content and data elements that can be altered.
Take a step back for just a moment, and you will see that another choice becomes apparent. Data points can change, correct? So now is the time for you to decide if you want to show content for the product, another kind of content, or just nothing at all. For example, the content of your email could be utilized to depict an exclusive feature that is available only to select customers.
Identifying Line Level and Block Elements
As we just discussed, there are a variety of different level variations in dynamic email. These different levels of variation can be broken down into two common instances: line level elements and block level elements. The block level is defined as individual data points, while the line level is defined as the pieces where a data point may be present or change. In some cases, block level elements will also include line level components.
In the example we talked about with the smartphone, the promotion as a whole would be considered block level elements, while the line level elements would consist of the different data points, such as the name of the product, its price, and the accompanying URL. Making the distinctions between the components is important because it is going to enable us to determine what types of content are present and how/if they can be changed.
Focusing the discussion now on elements of visual design, one must take into account the numeric amount of content pieces that are present. While there is an “ideal” state of content, you must plan for the possibility that one or zero pieces of a particular type of content may be present. On the other hand, you should also plan accordingly in case the maximum number is present.
Defining the min/max block level elements is going to influence the layout of your dynamic email. It will be necessary for you to test these different variants through mock ups to ensure that the email layout’s integrity remains intact. In a similar fashion, the line level element values can influence the integrity of the block level cousin. For example, a product name can range from 25-125 characters. Depending upon the type of layout that is being utilized, this could have a dramatic effect on the visuals. To ensure your success, incorporate visuals for both extremes to reduce the amount of surprises you encounter as you move towards making the design functional.
Putting all of these different elements together might seem overwhelming at first; however, taking into account context, it is not difficult to see how data, dynamics, and logic are intertwined with one another. Following these simple steps is guaranteed to get you started off on the right foot.