Dynamic email, also known as data-driven email, has been around for a long time, but planning this type of complex messaging is still a daunting task to many designers and marketers.
It’s not so different from the usual design challenge, though: we have a set of assets, rules and restrictions to which the visual design must adhere, and addressing this challenge is mostly about adopting the right process and mindset.
To help overcome those initial hurdles, let’s walk through the basic steps to successfully designing a dynamic message:
Inventory content and data
Identify block and line level elements
Define minimum and maximum variants
Wireframe priority and variable functions
Design for maximums
Color outside the lines
Inventory Content And Data
Even though the final product will be variable, we still have a set of standard assets – images, text, content blocks – but also a few new creative assets, in the form of logic or rules. Data and logic are a huge component of a dynamic message and they’re pieces in which the designer may or may not be involved. Today we want to focus on visual design, so let’s assume they’ve been provided.
When considering a dynamic framework, I find it easiest to start with a single element and build outward. Imagine an email with a static product promo – say, a new smartphone. That piece of content has several key elements: an image showing the shiny screen, an exciting product name, a cheaper-than-it-was-yesterday price and a link to purchase.
To make it dynamic, abstract each element. Rather than an image of a specific product, it becomes a placeholder for an image with dimensions of X pixels by Y pixels. The product name and price become strings where any text could appear. The link could become any URL. That’s the foundation of inserting variable content – identify data and content elements that can change. Once we separate specific product or content assets from formatting we can insert any similar content.
Step back once and another choice appears – we established that the data points can change, so now let’s also choose whether to show the product content, a different kind of content or nothing at all. For example, the content could describe an exclusive feature that only appears to customers who meet a certain criteria.
With those ideas in mind, it’s relatively easy to inventory all the possible content which could appear, and the basic data points associated with each piece of content.
Identify Block And Line Level Elements
We just saw there are multiple levels of variation in a dynamic message. The two basic instances of this are block level, which is essentially a collection of individual items or data points, and line level, the pieces where a data point may appear or change. Block-level dynamic elements may include line-level dynamic elements.
In our example above, the entire product promo (with its component parts) would be considered block level, while each of the data points, such as product name, price and URL, would be line level. This distinction allows us to determine if a piece of content is present, and if so, which components can change.
Wireframe Priority And Variable Functions
Wireframing plays a vital role in any project with variable visuals. Wireframes are the step where you should confirm that data, rules, content and visuals are aligned in a format that will yield a successful final product.
Variation in structure is the key topic here, rather than variation in specific content. Just as with any other wireframe, the goal is to determine the priority and presence of each element in the overall layout.
The added layer of dynamic content should be represented generally, but not specifically. For example, it’s important to note that a block level element can change or disappear, but the line level data points aren’t necessary at this stage. Dynamic areas can be represented through color or other identifying means.
It’s worth noting that multiple wireframes may actually be needed to show all the possible states. You may have one wireframe which denotes only a static vs variable function, and several others which show major content variations.
Design For Maximums
As we move to the visual design, we next must consider the number of content pieces present. No matter what the default or “ideal” content state may be, plan for the possibilities of few, one or even zero content being available. On the flip side, also plan for the maximum allowed.
Mix/max block level elements can affect layout, so it’s important to mock up and test these variants to ensure the integrity of the email layout stays intact. Min/max line level elements can have a similar effect on the integrity of their block level parent. Think back to the product name, which could easily range from 20-100 characters. Depending on the layout, this can dramatically affect visuals.
To be successful as you start working through visuals in Photoshop (or your weapon of choice), remember to plan visuals for both extremes to ensure minimal surprises as the design becomes functional.
Now That You Have The Rules, Start Breaking Them
As you’ve seen, steps 1-5 have been about creating structure from variance. With established formats, rules and elements, it can be tempting to completely homogenize content. Efficiency doesn’t have to be sterile, though, and a few variations on existing elements can introduce a welcome touch of warmth without requiring endless versions of custom creative.
Take the example above, where the product name may have 20-100 characters. Rather than creating a single format to accommodate every possible variation, consider 2 simple variations that treat the content with slight differences. A simple piece of logic can check the character count and supply an appropriately sized container – one version might work well when the name is under 60 characters, while a second has been resized to gracefully accommodate 60-100 characters. This can be a great way to overcome awkward combinations and maintain a cohesive layout while keeping tight control over versioning.
Also, consider dynamic blocks both individually and cohesively. Just because elements are dynamic doesn’t mean they have to be self-contained. Plan or look for patterns in the data and content that create opportunities for visuals to interact, overlap, and otherwise bridge the sometimes “boxy” look of a dynamic message.
Putting It All Together
Designing for variable messaging can seem overwhelming at first. With some context, though, you can see how data, logic and dynamic elements are simply additional assets around which designers must plan. Whether you’re preparing your first dynamic message or simply starting the next one, the steps above will get you started on the right foot.
Are there other points you find important, or planning techniques you find helpful? Drop a note below and let us know.
Comments