So, what do you look for when hiring an email designer? Here’s a short list of key factors to help ensure you have the right folks on the job.

Web Design Experience

This first point is an easy but important one. The pool of applicants who will come in the door with the right email experience already in place is small; so, make sure your potential hire has front-end Web design experience, which will allow them to wear multiple hats once they join the team.

Web experience isn’t required to be a good email designer, but it’s always a benefit, and those without it – either because they have a print background or are fresh out of school – are hard to find anymore.

The resume and portfolio both help determine this, but the portfolio is where a designer demonstrates expertise so be sure to look at work samples.

Code Guru

Still pretty easy and combined with the above point, this ensures you have a front-end designer/developer who can take ideas and initiatives from concept to implementation. True enthusiasm is important here because email code is a finicky beast, and a bleeding-edge dev may be frustrated by email’s relative frumpiness.

Make sure you have someone excited by the experimentation of iteration that defines one of email’s key strengths.

User Experience History Or Interest

It’s not traditional website UX, but email plays a key role in your brand’s overall digital marketing UX.

Email messaging requires a particular eye for layout and messaging and an understanding of how programs are consumed over time. Beyond a keen eye for the immediate task, you want a designer who can step back and understand subscriber perceptions over the course of a discrete set of interactions and the program as a whole.

Passion For Numbers

Remember that email and design both operate best in an openly iterative environment. A designer combining both should be energized by this fact and by the opportunity to have a rapid feedback loop on design decisions.

Doing short term tactics analysis and making long term messaging decisions will ultimately create a more effective designer and a wiser problem solver. Ensure your hire is aware and driven by this aspect of the role.

Digital Marketing Awareness

Our space is simultaneously ADHD and case study-obsessed. We’ve processed half a dozen new approaches and techniques before most industries have acknowledged a change on the horizon.

You’re looking for someone with far-reaching awareness who can employ gamification, debate app vs. responsive site, put together a social campaign in a pinch and who can also argue the transience or validity of an emerging technique before it’s proven.

Operational Or Artistic Relevance

Lastly, I love finding a candidate with seemingly unconnected experiences that have perfectly prepped them for our space. Newspaper or magazine experience is a great example – that pace is fast, the publication cycles are short, the need for instant innovation is significant.

I’ve written about how my comics experience taught me email, which was surprising but in hindsight, also quite logical. Once you’ve learned the thought processes required by a fast, complex, collaborative environment, the diversity of experience produces strength and innovation in a team.

In closing, killer email hires can be surprisingly difficult, but using the above points you’ll be on the right path to hiring a great email designer. Have your own hiring story or think there’s a key point I’ve missed? Drop a line in the comments.

Stock image courtesy of Shutterstock.com.

Image via Shutterstock

The Valentine’s holiday had me wearing the customary rose-tinted glasses and thoroughly enjoying it, from the candy to the life adventures (our first daughter was born the in wee hours of the 14th). [Editor's note: Congrats, Chris!]

It was a reminder, too, that email design is often discussed only in the context of its big brother (Web design) or as an enabler of the great marketing panacea (optimization). We spend a lot of time talking only about challenges in email design, but we can do better than apologetics.

So, in a post-Valentine’s and week-old-baby haze, here’s a short list of what I genuinely love about designing email.

1. Solving Communication Challenges. It’s at the core of any design process, but working through email messaging at a tactical level is just a lot of fun. Content, layout and data are our primary weapons, and our medium’s fast and furious pace make this process a blast.

Establish clear, catchy hooks, headlines, content structure and calls to action. Get in the subscriber’s head and get out. Drive action. We get to mobilize audiences immediately, through a surprisingly organic combination of visual design, user experience and optimization data, and plain old creative problem solving.

2. Data As An Asset & Feedback Loop. Data’s big right now, and the conversation around it evolves daily. I like data’s role in email because of its importance as both an input and output. Data as a design element is one of our primary tools for shaping user experience.

Smart use of this tool can elevate a visual designer from playing Photoshop jockey to developing truly creative solutions. As an output, data informs emails designers in ways that can inform tactics with a speed and clarity rarely available in other media.

3. Design Affects The Bottom Line. Design always impacts the bottom line. But the reporting available in email gives us the ability to rapidly act upon and improve those numbers. To be fair, this wealth of data can seem scary at first. Some non-designers even interpret the availability of performance data to suggest there’s a “magic formula” which designers have consistently failed to guess!

Obviously, unthinking optimization isn’t the answer, but rather than reject the numbers, we need to embrace the wisdom which can be found there. Designers have the ability to make a material impact on the revenue of any email program and are better positioned to enact change than most. It only requires you be willing to dive into the numbers enough to understand how your visual design impacts the business.

If you’re tired of feeling like design isn’t valued appropriately, it’s the single biggest step you can take toward changing that perception.

4. Iteration.  As a designer, iteration is the component of email that’s both the most powerful and most difficult to manage. All of the ideas above ultimately relate to iteration.

How do we communicate, stay engaged, and use data to drive value over time? The impact of iteration in email can mean many things: creating exciting visuals week to week, improving conversion month-over-month, driving CTO day-to-day, and more…

The most notable constraints in email are around antiquated code and the transactional nature of the work. That said, our freedoms are impressive and under-utilized. We can explore, prove out options and test decisions faster and more effectively than any other medium. It’s remarkably cheap to experiment, and in many organizations the designers hold the keys to innovation and need only realize they can own the initiative for innovation, as well.

As a community, I think we’re finally moving past the apologetic phase of email design. The business case has been proven many times over, but it’s time for us to take more pride in our work beyond its ROI. Email’s a lot of fun and I love working in this crazy medium.

Agree? Disagree? Drop me a line in the comments.

Stock image provided by Shutterstock. 

Image via shutterstock.com

There are a lot of supposed monarchies when it comes to email marketing. Depending on the conversation, content rules one day, the user holds the crown on the next, and data picks up responsibilities on weekends.

With that many claims to the throne, you’d think messaging would be easier!

In reality, they’re multiple facets of the same challenge: aligning content to balance sender and subscriber needs. So, how should we think about constructing messages that a subscriber finds interesting and meaningful?

This post isn’t meant to be a mediation on content strategy or content marketing, but rather a simple look at ways to organize content that subscribers are likely to find valuable.

Distilling Messages From Diverse Content Sets

Content that stands well on its own — an interesting foundation, compellingly written and aligned to audience interests — is obviously an ideal starting point for individual pieces of content. Even independently-compelling content is only a starting point, though, and may not be enough to sustain an audience over time.

Any source of online content goes through a development process in regard to that content. With limited volume, the mere presence of content creates value. As the amount of content expands, value partially shifts to the ability to navigate that content. As both content and navigation expand, volume becomes overwhelming or mundane, so the value add becomes pathfinding (guiding subscribers through content) or curation (which lends meaning to the content).

At this point, both organic and manufactured methods of navigation are available, so value returns again to quality. Now, though, it’s about both the quality of navigation methods and the quality of content itself.

Let’s think about pathfinding and curation for a moment – what mechanisms can we introduce to help subscribers traverse content? This can happen at the highest and lowest levels, from a creative contact strategy to dynamic recommendations to curated messages. A few specific methods jump to mind:

• Timing – content relevant via the contemporary nature of its subject or publishing. Primary method of news and editorial content.
• Category – content unified via a shared trait (product type, price, brand, etc). Primary method of navigating retail.
• Search – user defined pathfinding based on specified parameters.
• Reviews – pathfinding defined via qualitative user response.
• Behavior – pathfinding defined via past user activity. Examples include content sets such as “users also bought…”, “users also viewed…” and so forth.
• Curation – manually created content sets, either anonymously or themed.

All of these, except perhaps search, have direct translations to email. Among those, most can even be automated or data-driven, if desired. Think about timing, category, reviews and behavior – all make very natural transitions into a data-driven model.

Curation, though, is notably manual – in fact, the whole attraction of this approach is the idea that even in a data-driven world there’s a place for messages and content that are specially constructed.

With that idea in mind, let’s jump into a few specific examples of how you might use this kind of approach to guide message content. I’m thinking about messages that compel me to act, and am using a few easy starting points to get us moving.

Using Themes To Structure Content

Independently themed content is one of the hallmarks of promotional calendars. More generally, centering content around a theme helps create a purpose for communications. Taken even further, themes can help subscriber navigate, whether it’s a full path through content or simply a comfortable starting point.

• Categories – product categories are a natural starting point for theming, but the content planning shouldn’t stop there. Push beyond and use supporting information to give the theme additional meaning or intrigue. This can be done with a unifying element like color, and element of timeliness like season, or another unifying characteristic. This approach is readily apparent when you look at how retailers construct promotions, but many don’t use it or have never brought this kind of thematic presentation to their email programs.
• Holidays – there are plenty of themes already on the calendar. Some come with a clear expectation (Christmas, Valentine’s, etc), but others can be used for interesting alternate promotions, or to present brand-building opportunities. Variety can also be created via invented holidays, whether they are tongue-in-cheeck, small scale messaging tactics or fully realized promotions.
• Curation – the next step is actually providing a guided tour through content. This can be as simple as carefully selected content to actually promoting the personalities that select message content. This is the basic idea behind blogging and the idea can translate quite well to marketing communications. The key is that the content and/or curator must hold meaning for the audience. Many retailers have dabbled with this kind of content, and sites with significant variety (such as Etsy) thrive on it.

Leveraging Social Content

Let’s move past general ideas and think about ways to use non-standard sources for individual content elements. Social content can come in a few varieties, from the interactions taking place on social networks to the socially-impactful content you may already possess. All are based on the same idea, though – customers’ opinions and behavior related to your products create value to other customers.

• Highlight comments – use a post, tweet, or other comment to highlight a product or service (assuming this makes legal and contextual sense for your brand). These can take a lot of flavors, so some creativity may be required to work it into the message, but there’s strength in that variety. It’s one of the most genuine pieces of information about your brand, so there are lots of possibilities here.
• Let popularity drive – basing a promotion on a theme as simple as “our most popular…” is very compelling, with instant social validation. Some data work may be required, but it’s not required to happen in the email – this can be a static promotion. It’s a great theme for a message or a compelling CTA.
• Feature reviews and the highly rated – leverage review information, from “top rated” to quotes from individual reviews. It makes great individual content, and can easily translate to an entire message.

The question of how to create content and messages subscribers will find compelling and valuable sits at the forefront of every email marketer’s mind.

Do you have examples or a compelling approach to your own content? Drop a line below.

Any examination of responsive layout patterns must first point to the work of Luke Wroblewski. Wroblewski has written a wonderful series of posts on responsive layout patterns on the Web, which informs many ideas and images (the column drop, layout shifter and associated images port very directly from his web observations). His work is geared toward the Web but a number of the patterns he identifies translate quite well to email.

When thinking about email, these patterns help designers understand the way subscribers are learning to interact and the way brands are working to create sustainable investments in the new approach.

Responsive Email Layout Patterns

1) Shrink wrap

This is the pattern immediately adopted by letter format messages and many newsletters. Basically, the message container becomes skinnier (shrinks!), and the content within reflows (wraps!).

The value of letter or newsletter format messages is usually based in text content, so scaling up headlines and copy is a no-brainer to ensure that value remains instantly accessible. Full width images scale within the container, and images associated with other text content resize to fit.

The shrink wrap has a clear benefit due to ease of implementation. When a message has a simple structure and the value is largely text-based, this is the responsive path to choose.

• Message width shrinks
• Text and images reflow within the smaller container
• Text scales up
• Other elements scale to fit

2) Column drop

One of Wroblewski’s web patterns, the column drop, is very common in email, as well. In multi-column layouts, one or more of the columns drop down to sit beneath other columns. Depending on the number of columns, a little additional manipulation may be required, as individual columns in an email design are often well suited for viewing on a mobile screen.

The benefit of the column drop lies in allowing readability and the flow of ideas in a message to remain very strong with relatively low effort, assuming the execution has been properly planned. The PlayStation Network and Amazon emails in this previous post are excellent examples of this pattern.

This is the pattern we’re going to see most consistently in email, as it closely aligns to ways we already think about email layout. You’ll see this pattern much more frequently in email than Wroblewski’s “mostly fluid,” due to the relative rarity of fluid email layouts.

Column drop layouts have potential for “boxy” emails if lazily designed. The real “wow” of a column drop email comes from a natural look in both states and graceful transition between them. Check out the ModCloth example in this post for one of the most seamless transitions I’ve seen in an email.

• Multi column sections stack content to become to single column on mobile
• Newly stacked elements may or may not resize, as the new layout might not require it

2.5) Grandfathered column drop

A small subset of the column drop, this pattern appears with senders who pursue a column drop layout in the interest of a quick win for mobile readability. Seen mostly in cases with an even split two-column layout already in place, the effect is that entire right column drops below the left column. These emails are often long in their original format and extremely long in their mobile view.

It’s a viable choice for making messages more readable and potentially more readable, and it’s a path of de facto content priority choice for those unwilling to commit to content decisions. That said, it’s usually an obvious retrofit, as well. Not recommended, but it’s a starting point for those unwilling to start from the ground up. See the Salesforce.com example in this post for an example.

3) Layout shifter

Borrowing from Wroblewski again, this pattern is the one least frequently seen in email. It features the most dramatic layout changes, so it’s to be expected that fewer senders would be making the largely aesthetic investment.

There have been a few notable examples, though, including Litmus’s recent invitation to their Responsive Workshop.

There isn’t a singular benefit, and in email, this pattern is more likely an impressive demonstration or built for effect.

• Largest investment, most impressive
• Layout reshapes
• 1 set of content, potentially 2 layouts

The Question Of Nav

Navigation holds a unique question on responsive email: how should we handle an element traditionally in an email’s most valuable real estate (the top of the message!) but which offers low direct value?

To start, Brad Frost has an excellent examination of nav patterns in responsive Web design. Like Wroblewski’s work, the specific implementation doesn’t always apply to email, but there’s a lot to learn from the ideas.

Refined for email, I see two common and two uncommon nav options that most responsive email designers will end up employing to avoid the inefficient nav “net” of 5-10 categories.

Common:

• Hide – hide the nav entirely in the mobile view
• Reduce – hide all except the top 2 highest performing nav links; this approach achieves a balance of offering the highest proven click opportunities with minimal layout needs

Uncommon:

• Move it – nav jumps below primary content or to the bottom of the message
• Roll it up – use a rollout menu (that expands when tapped) to preserve real estate but offer immediate access

Also bundled at the top of an email, the preheader similarly consumes prime real estate, but provides little value on mobile. Standard components of the preheader – a snippet, view-as-web-page (VAWP) link, add to address book message, social sharing links, etc. – all plummet in value when viewed in a mobile context.

Senders are trending toward hiding the entirety of the preheader, and I have yet to see an email that wouldn’t benefit from following suit to give faster access to hero content.

Getting Started: Responsive Reference Material

There are 3 particular resources I reference when researching and planning responsive messages.

• http://mediaqueri.es/ – The quintessential catalog of responsive sites. There are more responsive techniques and ideas demonstrated here than will ever make sense for email, but it’s a great place for examining state transitions, priority decisions and layout shifts. The perfect first stop to understanding responsive layout in action.
• http://pttrns.com/ – This site catalogs screens from iOS apps and it’s a great place for exploring UI and organizational patterns in apps. Even if ideas don’t port directly to email there are lots of valuable visual cues and organization ideas.
• http://onepagelove.com/ – My single favorite site for email inspiration also provides a great starting point for responsive messages. Email content, especially when consumed on a mobile, is often best when rooted in an elevator pitch. To that end, these single page sites are the perfect balance of message flow, education and pitch to be a point of inspiration and learning for email.

Have you seen patterns emerge that differ from those above? Have another favorite resource? Drop a note below.

It’s important that we all be looking at examples of what’s happening in the space. There are few best practices established, and fewer quick fixes. The phrase “mobile optimization” is being tossed around a lot, but the idea is new enough that I don’t think we quite know what it means yet. There’s no light switch for addressing mobile inboxes, but these examples are a great place to keep learning from those who are paving the way.

Let’s jump in.

Note: The only edit I’ve made to these images is to cut off footer text on some messages, as it took up space without providing additional insight.

1. Campaign Monitor Newsletter

Campaign Monitor was one of the first to embrace responsive email, and their newsletter remains one of the most graceful examples of transitioning from a desktop to mobile state. It’s a perfect example of maximizing readability.

Notable tactics used in transition from desktop state to mobile state:

• Preheader (and a few footer) elements hidden
• Email shell (usually called the “template”) resized to be narrower
• Text reflows in skinnier layout

2. Hilton HHonors

I mentioned a Hilton HHonors email in my previous post, too – they’re consistently using responsive email and slowly trying new things. What’s interesting here is the hero image. It’s the same across both views, but used in a slightly different way. Note the image appears to wrap around the body column on the desktop view, while it’s simply full width on the mobile view.

Notable tactics used in transition from desktop state to mobile state:

• Preheader hidden
• Account module hidden
• Shell resized
• Footer logos hidden

3. Salesforce.Com Developer News

This Salesforce email is notable because it represents an emerging trend among responsive emails. A number of elements are adjusted in the mobile view, but the main point to note is how the right column of the body floats under the left column. No other significant adjustments are made, so this is purely a readability move.

Notable tactics used in transition from desktop state to mobile state:

• Right column floats under left column

This approach is one of the ways brands are retro-fitting old designs to be more mobile-friendly without redesigning. It certainly shouldn’t be labeled as “optimizing” for mobile, but it’s a step forward on improving readability.

4. Rewards Network | Delta SkyMiles Dining

This email shows a restrained use of the mobile view. Again, the primary goal here is readability on mobile. The main tactic in place is simply hiding images to provide faster access to directly actionable information.

Notable tactics used in transition from desktop state to mobile state:

• Images hidden for easier reading

5. HTC Newsletter

Another simple but effective example can be seen here. A single image is hidden and the width is adjusted to ensure readability on small screens.

Notable tactics used in transition from desktop state to mobile state:

• Hero image hidden
• Shell size adjusted

6. AT&T: Add A Line Promo

Here’s a slightly more advanced version of the floating we’ve seen in other emails. There’s been ample planning for both a wide-format/desktop view and a narrow-format/mobile view so no content needs to be hidden.

Notable tactics used in transition from desktop state to mobile state:

• Content floats (hero info under hero image, body info blocks next to body images
• Phone number call-to-action (CTA) becomes a button
• Footer links float and become full width

7. Seagate: Windows 8 Announcement

We see more of the same in the Seagate email. There’s one instance of floating in the hero content, and images are hidden to keep the content readable. The notable difference here is in the hero image – look closely at each view. See how the external drives shift their position? There are two different images here: one for the desktop view and one for the mobile view.

Notable tactics used in transition from desktop state to mobile state:

• Hero content floats
• Hero image replacement
• Body images hidden

8. Starwood Preferred Guest News

SPG provides another example of floating, hiding and replacing, this one slightly more complex. In the mobile view, the header loses an image that wasn’t particularly impactful and reads much faster. The changes made to the footer – simple, distinct and made for touch – make for a great closing to the mobile view. As brands are starting to develop mobile-friendly templates, I think we’ll soon start seeing a lot more headers and footers of this type.

Notable tactics used in transition from desktop state to mobile state:

• Header and hero elements hidden
• Right body column floats under left column
• Footer links reformat to be instantly readable and easy-to-tap

9. ModCloth

I like this example not because ModCloth has done anything particularly different from the other examples or employed a tactic not seen elsewhere, but because the transition is so seamless. In many responsive emails the mobile view feels forced or an obvious retrofit, but this mobile view looks every bit as well planned and constructed as its desktop counterpart.

Notable tactics used in transition from desktop state to mobile state:

• Preheader stays, but the nav is reduced
• Scaling and floating throughout
• Some hidden elements in the body and footer

Looking Forward

The ModCloth email, especially, is a good indicator of where we’re heading. Strong consideration is paid to both states of the responsive layout, and content is designed for the transition rather than one state or the other.

I’ll be back next month to take a step back from the examples and start thinking about layout patterns and trends. If you have thoughts on these emails or are seeing other emerging ideas on responsive messages, drop a line in the comments.

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:

1. Inventory content and data
2. Identify block and line level elements
3. Define minimum and maximum variants
4. Wireframe priority and variable functions
5. Design for maximums
6. 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.

Preference centers revolve around a central idea: choice. This is the subscriber’s control center, the place where big decisions are made – the level of personal info they offer, the programs in which they participate, the kind of content they want, and whether they want to cut ties. The vast majority of brands are doing a capable job of offering this set of options, and a few may be doing them well.

Overall, though, many preference centers are designed to be barely functional. Some are no more than a couple of headlines and an army of checkboxes. “Designed” might even be generous, in some cases! Here are a few of my favorite ways to make a more interesting and effective preference center.

How Much Is Too Much?

Frequency options are a regular on lists of preference center best practices, and they’re a requirement for high frequency senders. That’s not to say frequency options are easy to pull off from an operational perspective – it can be hard work. That’s often represented in the presentation of this option. Its presence may be strategic, but its design is almost always an obligatory bullet list of options.

Jetsetter is one of the few positive examples when it comes to giving a frequency option the care it deserves. The page promotes the value of each option via a name and short paragraph of explanatory text.

The text outlines frequency, value and content differences between choices – the daily “inspiration” option uses the most desirable language, but as frequency (and thus conversion opportunities) decreases we move to “update” and finally “reminder”. Unsubscribe even has a place in the frequency list, rather than being set aside. It’s easy to find, but also at the end of a list that implies declining benefit.

The initial highlight on daily is another point to note. Jetsetter has given a clear choice of frequency and clearly suggested a starting point. They’ve also made the list usable, with all options visible and arranged in a scale of declining frequency/value. The purpose of a frequency choice comes from comparing options and choosing one that most closely aligns to a subscriber’s interest, yet I’ve encountered many dropdowns that hide options and unnecessarily disguise choices.

Saying Goodbye Isn’t Easy… So Don’t Make It Difficult

It happened. I’m done, I’m ready to unsubscribe. In the email it’s important to have easy and direct access to an unsubscribe link, and resolving that experience painlessly on the preference center is just as important. That doesn’t mean giving up, though. Here are two subscriber-friendly ways to make them rethink the departure:

1. Remind the subscriber of the program’s value proposition. What do you promote at signup? Are there other reasons subscribers choose to join or stick with the program? These are a starting point for restating the value prop.

You can even tell them how the value proposition has changed or expanded over time to indicate they’ll be missing the future growth of the program. A great variation on this idea can be seen on Facebook’s old deactivation page.

If a user chose to deactivate an account, the confirmation page presented a very effective take on value proposition via the user’s social data, which forms the core value of the service. The page uses both network size (“your x friends…”) and immediate personal connections (the individuals displayed are the last three to whom you sent messages) to encourage the user to stay.

2. Revisiting the earlier topic, frequency or volume can be an issue for subscribers, so make decreasing frequency an option. Check out the Fab example below – this unsub page first offers a very immediate and direct option to unsubscribe, then presents a great frequency control panel. The visual alone is interesting enough to at least give pause, and may remind the subscriber on forgotten aspects of the program.

Also notice the email address displayed at the top of the page, to confirm the action will be taken for the correct user. A certain amount of banner blindnesss may come into play here, so reiterating the email address in the button text would be the sure-fire way for correct identification.

The last point to note here is that little link below the frequency panel. It links to the full preference center – this page is just for unsubscribes. While the full page isn’t wildly different, it does have more options and a slightly different focus. Fab recognized that a user trying to unsubscribe needs a slightly different message than one viewing the preference page in other circumstances and appropriately messaged to those needs.

A Clear Picture Of The Options

Expectation setting is key at signup. That applies to more than the initial submission of an email address — expectations should be revisited with any change. Let’s look at subscription options for both multiple in-channel streams and representing multiple channels.

Pillsbury provides a nice example taking a step beyond the checkbox army of communication stream options. Their subscription page, though not technically on the preference center, gives a clear indication of each communication with a helpful headline, two-sentence description, and an indicative visual that becomes a full sample.

The samples themselves look clean, colorful and friendly, providing the right emotional cue for what a subscriber would receive.

That’s a great setup if we’re only looking at email, but we also need to think multi-channel. Looking at the Papa John’s preference center, you’ll see email and mobile immediately next to each other, making both easily and centrally available to the user.

Many brands don’t manage these options in the same place – SMS, especially, is often ignored in preference centers. Combining channel interaction options in the same preference center is much friendlier to the end user, and acknowledges that while corporate structure may dictate how channels function, it’s all the same brand to a user.

What’s missing here is a statement on the value and differentiation of the channels – I get a general idea with “offers and alerts”, but it’s a statement rather than a pitch.

Preferences or multiple communications within a channel is one thing, but giving permission to contact me in multiple ways requires a serious amount of trust and interest. What do I receive from each channel? Is it purely a channel preference with duplicate messaging, or does channel-unique value exist?

A Matter Of Preference

Whether it’s frequency, goodbyes or options, preference centers are a powerful point of control for users. As marketers and designers, we need to remember that even a page with a technical or functional focus still needs a creative and critical eye.

Everyone loves a good preference center example, and they’re not always easy to come by. Encountered a great one? Drop a note or link in the comments.

The energy and variety was incredible, and I had the opportunity to be part of projects ranging from adaptations of blockbuster movies to an IT-themed daily webcomic for the world’s largest software company (there’s much more to comics than superheroes!).

Looking back, I recognize remarkable similarities between the media of comics and email. Both industries are notably similar in the energy and pace of operations, the tight feedback loops, and even the professional communities. The work itself varies wildly, of course, but creative execution is defined by one simple point in both media: publishing schedules.

Comics and email work on a periodical, even serial, schedule. Character arcs and delivering the adventure of the month taught me more about email programs and delivering the promo of the week than I could have guessed.

So, from the funny books to the inbox, here are four lessons I learned from comics on successfully delivering a periodical.

Live By The Deadline (And Respect The Team)

Comics and email are daily proof that life in periodicals inherently revolves around deadlines. Both media typically use waterfall workflows, which only enhances the need for a timeline-trumps-all approach.

Strong planning and close-knit teams help avoid last second crunches, and then help overcome crunches when they do occur. In comics, as in email, ongoing success comes from creative timeliness before creative genius.

That said, as deadlines come and go, we do need to pull our heads out of the sand and look at the way we communicate.

By engaging with a periodical, audiences give their time and attention with regular frequency on the premise that we’ll deliver an experience to delight, intrigue, and keep them coming back. Those drop dead dates typically maintain a reputation only for their severity, but they also drive iteration, which is a foundation of the creative process.

Specialization Requires Collaboration

I love that email, like comics, is a visual medium where hooks, detail and lightning pace define the experience for both creator and audience.

Stories are told in comics via a series of individual drawings, or panels, with dialogue written over top. These elements must work both individually and cohesively to form a successful final product. Email, similarly, has a host of common elements in design, code and data which must function independently and collaboratively.

In our deadline-driven creative and production processes, the need for efficiency becomes crucial. As formalized process increases, specialization becomes a natural way to breed efficient execution.

It’s important to remember, though, even a waterfall requires collaboration unless it’s hyper-regulated. The collective output of the group is drastically improved when they recognize the context and needs of the steps before and after. That fact is vital for a great comic artist considering the final lettered page when composing layouts, just as it is for an email designer considering the code and rendering of the final functional email.

Recognizing that collaboration creates makes multi-discipline processes successful, specialization still drives excellence at each step. There’s a rule of thumb in comics that says your visual storytelling is effective if the reader can understand the basic plot without words. There’s even a similar rule in film, suggesting a viewer should understand the basics without audio. Sound like anything you’ve heard in email?

No matter the medium, there’s a great lesson here: the final creative output may be impressive, but to achieve a truly successful whole you must ensure each element fundamentally communicates value and action.

Content Story is King

We don’t traditionally think of email as “serial,” but adopting this perspective can teach us a great deal. In ongoing media like an email program or superhero comic, the flash-bang tactics of cliffhangers and other attention-stealing gimmicks quickly lose their luster. We have to think about content differently.

Content is still king — it’s why we signed up and come back every issue — but in a serial it’s more complicated than just content. As frequency and/or duration increases, the impact of content decreases, no matter how important it is.

Subscribing to an indefinite program means you understand the potential recurring value. Over time, though, the initially clear value turns into a wall of content, and the story around content becomes king. Why is the content special? How is it crafted? Who’s crafting it? Why this content?

While it’s not necessarily curation, in a periodical it’s imperative to recognize that a structured emotional journey with ups and downs will beat never-ending narrative or promotional one-upmanship. Just as narratives rise and fall, so too should promotional calendars.

Audiences Have An Emotional Response To A Publishing Schedule (Even If You Don’t)

Repetition creates a weakness famously common in both media: fatigue. The aforementioned cliffhangers are cliché due to a lack of self-awareness in serial publications – a gimmick may hook an audience short term but the long term effect of overuse is just the opposite.

To be fair, though, repetition is part of why we signed up: we know the ride will be a good time. Fatigue happens when the original benefit becomes so tired we no longer accept the base premise that value will be found along the way.

How to combat it? Recognize that publishing schedules have an emotional rhythm. In a low-frequency schedule, simply the time between publications can establish a healthy rhythm. Higher frequencies require more energy but also more self-awareness – steady is boring and even high energy normalizes if it never changes.

In 2013, Superman will see his 75^th birthday. He’s seen at least monthly publication that entire time, sometimes with wild success and sometimes simply surviving month to month. Sure, comics are notorious for recycling tired ideas and exploiting past success, but they’re also known for wild imagination. Like no other medium, comics embrace the idea that high volume and ever-looming deadlines aren’t a restriction but an iterative playground.

Email has a lot to learn there. The times we see email visual creative and content strategy break the mold are wonderful but far too infrequent. Those are the times our medium rises above simply executing on a promotional calendar, and they’re essential to our growth. As you think about the story or emotional tone of a calendar, remember that variation in energy and moments of punctuation create the interactions we remember, the ones that define a relationship.

To Be Continued…

Comic books are probably the last topic you thought you’d be connecting to email today, but the similarities don’t end with the above. The youth and pace of our industry yield countless adventures, and everyone in email has an interesting background.

Have your own back story or learned a noteworthy lesson from another medium? Drop a note in the comments. I’d love to hear it.

Recognizing the industry needed a scalable design strategy that acknowledged the growing stable of web-enabled devices, Ethan Marcotte coined the term “responsive web design.”

Designing responsively means planning for a site to span and appropriately adjust to a range of screens and resolutions, rather than creating unique interfaces or experiences for each.

Marcotte’s recent book, also titled Responsive Web Design, defined the idea as having three key pieces:

1. Flexible, grid-based layouts
2. Flexible images (and media)
3. Media queries

Responsive Email

Their powers combined, those components allow for (web) experiences that respond to the viewing environment – but what about email?

Flexible/fluid grids pose a problem for email marketers – while possible, complexity and consistent rendering are going to be at odds. Flexible images can be a different story, though the rigidity of table structures can lessen their impact. Media queries, however, work quite well and provide a safe fallback.

That said, in email we have a spectrum of screens and a spectrum of email clients on each of those screens. A desire for consistent function and rendering across those spectra means responsive email will likely focus on either a fluid layout or a media query.

Further, with a media query we’re likely focusing on a single breakpoint around 480-500px, which results in two layout states — large/desktop screen (1024+px wide) and small/mobile screen (480-px wide).

A number of folks have written on the topics of media query support in email quite nicely, so let’s look at a few of these messages and explore how the layouts transition from desktop to mobile.

I should note these messages are simply a selection of the responsive emails that have hit my inbox the past few weeks. I’m viewing all of them in Gmail on a Macbook Pro, and on an iPhone 4 with iOS 5.1.1.

PlayStation Network

The modular setup of this PSN email is apparent from the start, with all content divided into rectangular blocks. This responsive layout doesn’t specialize the presentation but does a basic 2-to-1 column restructure, so it’s a perfect example of using the same content elements in two states. Here are the key differences between the states:

1. Full width elements are re-sized from 600px to 300px (see the hero content).
2. Existing 300px elements are set to block level (via display: block) on mobile, causing them to stack to become single column.

Gilt

Rather than stacking content to achieve a single column, this Gilt email hides its left column for similar effect. Beyond the left column housing lower priority information, it’s also worth noting that the presence of imagery in the right column makes it easier to absorb in at a glance, and easier to tap, on mobile.

When content is hidden in email, it’s typically accomplished by setting the display property to none for a given element.

This hides but doesn’t remove content — it still loads but isn’t seen. It’s a viable tool for addressing usability in the mobile view by hiding low-priority or mobile-unfriendly content, but it doesn’t address bandwidth concerns.

Again, here are the differences between states:

1. Left column disappears (allowing the remaining column to center align). The left column is ~220px, leaving behind only the ~450px right column.
2. The preheader (including VAWP and add to address book) disappears.
3. The right half of the nav disappears (the left half presumably being the core offerings).
4. “Invite your friends” banner disappears.
5. Full width app ad resized to fit the new column size.

Hilton HHonors

This Hilton HHonors rewards message employs a combination of tactics from the previous two messages — content is hidden, and the message becomes both thinner and single column. It’s easier to read, but, in this case, hiding some content has actually hurt the message.

Two of the elements that disappear are the account module in the top right, which offers personalization and legitimacy, and the logos in the body, which are the most compelling aspect of the offers. While some of the responsive choices do make the layout easy to read on mobile, it has lost the two main components that interest me in the content of that easy-to-read message.

Here’s the state comparison:

1. The layout shifts from ~600px to ~300px wide.
2. The preheader (snippet, ATAB, VAWP) disappears entirely.
3. The account module disappears.
4. One of the nav choices disappears.
5. The header image resizes to ~300px.
6. All images in the body disappear.
7. Two of the content blocks disappear.
8. The logo bar disappears.

Amazon.com Rewards

Lastly, I want to quickly revisit an Amazon email I shared last time and take a closer look at how the layout responds. This particular email transitions from 750px to 320px and it’s a great example for wireframing a responsive email layout.

First, begin to think in rectangular content blocks. Go back through responsive emails you’ve seen and identify how the rectangles transition from desktop to mobile states. Generally, blocks will resize, stack, disappear or some combination of those effects. For this message, I’ve labeled each content block in both states to show how they transition into single column.

Here are a few important points to note about the transition:

• Every individual content element becomes block level and stacks when viewed on mobile (as with the PSN example).
• Wide elements undergo a few simple transformations:
• Blocks 1 and 11 become thinner. Both are header bars that act largely as visual dividers, so excess space is eliminated and little scaling is required.
• Blocks 2 and 3 scale to become smaller images.
• Blocks 4 and 9 resize and allow the text they contain to reflow.
• Blocks 5-8 have been designed to read easily in a horizontal or vertical format, so the reading order transitions as naturally as the layout.
• The final section of the email, initially appearing to be 6 product images, is actually three  separate 2-product images. This keeps the mobile view truly single column and much easier to manage, even if the images give a different appearance.

Responsive Growth

The number of responsive email layouts in my inbox has grown dramatically across 2012, and that’s not going to change any time soon. Some of those brands are using these possibilities quite while, but the majority are still learning how to think and execute in a responsive fashion.

Are you using responsive emails, or seeing good examples in your own inbox? Share examples you’ve seen in the comments below.

To illustrate that point, I nabbed a few messages from my inbox. Amazon has been making impressive strides towards a mobile-friendly email program over the past few months.

I’m seeing skinny messages, responsive designs and an overall move toward greater mobile awareness. The set of messages presents a great opportunity for learning, so I’d like to share visuals.

All emails in this article come from the past month (~May 8 – June 4, 2012).

Promotional Email

Here’s a straight promo email, this one aimed at Father’s Day shopping. This email shows mobile friendliness in two important ways. First, the layout falls into the skinny category, at ~480px wide. Second, the images are all product shots against a white background, creating easily recognizable silhouettes and natural touch targets.

Cart Abandonment Email

Here’s a more dramatic mobile-focused email. The width sits at a decidedly skinny 320 px with a clear and touchscreen-ready call-to-action (CTA) button.

At the same time, the sheer number of options in the link bunker at the bottom of this message can be difficult to navigate on desktop, and even more so on mobile. A focused set of links, centered around the product category of the hero item, would likely better capture the energy of the abandoned purchase.

 Product Recommendation Email

Besides uncannily intuiting my video games tastes, this product recommendation email expands on the previous message’s format. “Learn More” makes a surprisingly passive call-to-action compared to the experience on Amazon’s site. Still, the buttons create a proper visual hierarchy, with the primary call-to-action on a strong color background and the supporting call-to-action on a neutral background.

Despite my enthusiasm for mobile-friendly approaches, I have to admit that viewing this email on a desktop feels a little off. While the mobile-focused layout doesn’t detract from the desktop experience, it does feel out of place.

An email aimed at desktop users would have larger product images and heavier graphics overall, so, to achieve the optimal aesthetics and experience, a responsive design would be a good solution.

Amazon Local Daily Emails

I include these Amazon Local examples as an interesting point of comparison between the approaches on mobile email (left) and the mobile website (right). The email is fairly standard daily fare and could take a few lessons from the mobile site.

Content consumption occurs daily, so immediate focus on decision-driving info is key – a combo of the emotional/logical drivers of image and price pushing towards an easily-tappable CTA. The email could be improved by placing greater prominence on the headline, price/savings, and CTA button.

 Kindle Daily Deal Emails

This daily program promotes daily deals in the Kindle store. Paradoxically, there’s little mobile friendliness in either the email or the Kindle store site to which it directs us.

There is a mobile-friendly version of the Kindle store that I can navigate to via Amazon.com, but that experience isn’t replicated if I click from an email on the very device where I use the Kindle app.

The email does feature easily-recognized images, but key information — book title, price, savings — is buried in a paragraph of copy. Likewise, the CTA is passive and small, and upon clicking I’m taken to a site that doesn’t recognize my device.

Responsive Emails

Amazon’s also toyed with a few great responsive examples. The image below shows a single email viewed on desktop (left) and mobile (right).  Content remains the same across both versions, but a graceful construction and some clever @media coding allows a wider-than-usual (~750px) email to reformat into an easily readable single column.

Compare the two and you can see how careful planning and modular elements transition between layouts quite easily. That modular nature is as simple as self-contained, non-overlapping rectangles.

So long as content blocks can either easily resize (as with the hero text and image), easily stack (as with the primary and secondary content), or easily reflow within a resized container (as with the date range/CTA content), they make a great foundation for a responsive message.

 Print & Email

Let’s step away from mobile for a moment and look at another channel overlap: the print and email points statements for the Amazon Visa program. Each element, down to the copy, is almost exactly the same but the email design is differentiated in a few ways:

• The contrast in the header graphic, as wells as the white email body on a gray background, anchor the top and bottom of the email. This creates a consistent frame across the multitude of potential inboxes it may be viewed in.
• Contrast and background color in the body also make the email slightly easier to scan.
• As you’d expect, the email features a CTA button rather than a call to visit a URL.
• Unfortunately, the two most important pieces of information — the points total and the CTA — are buried nearly at the bottom of the email. Bringing these up to be immediately visible would have created interest and urgency more strongly.

As a designer, it’s been a blast to see brands experimenting with the convergence of email and smartphones. None of the emails here are graphically complex, but the exploration here is a lesson we can all use.