E-MAIL DESIGN & DEVELOPMENT GUIDELINES – PART 3

I started a series of posts about e-mail design and development years ago and here’s where I’ll pick up right where I left off…

Unified standards, specifications, and best practices have made it possible for web designers to increase the accessibility and usability of the sites they’re designing while ensuring that the sites look the same no matter what browser is used. Unfortunately, no such standards presently exist for email design which is why emails face a number of rendering issues that differ among ISPs.

Throughout the next few months, these posts will act as a guide, not a strict set of design and development rules, to optimize e-mail performance. There are definitely exceptions. There are very few hard and fast rules and I am a HUGE fan of testing, testing, testing.

Size and Layout:

• Use HTML “non-breaking space” tags in place of multiple spaces ( )

• When possible, use dashes “-” in place of bullet tags, such as <li></li> and <ul></ul> tags. These will not always render correctly with different ISPs.

• Design HTML messages with a maximum width of 600 pixels so the message can be viewed in the preview pane and by your recipients who still set their resolution to 800×600. Also, many ESPs add content around your message, further reducing the amount of space for messaging without side scrolling.

• Keep important messaging, such as the main topics, calls-to-action, navigation (as text), and logos, within the top 300 pixels so they remain above the fold.

• Limit the size of an email to 40k, including images, to prevent long download times and deliverability issues. Ideally, a message will be 5K or less.

• Use tables in your HTML code for maximum control over placement of text, images, and the width of the message. However, avoid nested tables if possible as they might not render properly in all email clients. An e-mail should not contain more than four “levels” of tables (referring to tables within tables).

• Limit the use of rowspans and colspans as they might not render properly in many email clients. Also, avoid row and column heights, especially base on percentages rather than pixels. These rarely render correctly within all clients. However, column widths should be included when possible.

• Set the height and width of your images to help your message maintain its proper layout even if images are turned off. Some browsers will extend the height of an image if the height attribute is missing.

There are also CSS and inbox rendering challenges to consider.

I know I talk about e-mail marketing too much when…

I don’t know whether to be flattered. Disturbed maybe? Like I do an excellent job with personal branding…? When my friends from completely unrelated job fields (teaching, distribution, etc…) send me breaking news about Hubspot’s new e-mail marketing solution. Part of me chuckled. I mean, how great is that? My friends actually listed to me drone on about image rendering and the type of code one should use for font tags. But then part of me (a larger more meaningful part) felt like I let myself down. I have sensed for quite some time that this initiative was on the horizon for Hubspot (along with several other companies) and I stopped paying attention. In a way, it feels like I gave up on something I clearly love. Really, I just took a break since here I am chanting on the interwebs. I know, it sounds dramatic. I am totally being dramatic. But hear me out.

The “e-mail is dying” mantra is the WORST internal societal pressure that we e-mail evangelists face within the marketing industry every day. Seriously, every day. It’s part of marketing culture to form a DEATH GRIP on catch phrases and buzz words, especially ones that hint at a trend that can hurt us – our companies, our jobs, our very livelihoods - like the death of a medium. Remember how everyone wanted social media before just about anyone knew what it was? And then everyone got skeptical? Ah! Frustrating. Even Hubspot has a reputation for capitalizing on this, coining the term “inbound marketing” to describe a new and unique approach to methods for capturing leads and generating engagement. What’s fascinating is that this move into the e-mail space may be viewed by some – if not many –  as a step backwards or as an afterthought. “Why not continue to expand our range of products?” But I am confident that this will not be just another feather in Hubspot’s cap. They are a technology company that is clearly focused on developing integrated solutions.

Be still be heart. It is refreshing to see a positive announcement about developments within the e-mail marketing industry. “A lot of people think that e-mail marketing is dead, but we think it still has a lot of power if it’s done right.” Truer words have never been spoken, Jessica Meher. Go forth and conquer Hubspot. I wish you well!

what NOT to say when you miss work

This is a bit outside of my usual topics, but seriously people. You are too much as a party? Sometimes it’s bes to day nothing, nothing at all. 15 of the weirdest excuses used when calling in sick.

A new relationship between artists and fans – Adam Duritz at #Pivotcon

Session: The Audience Imperative: A New Relationship Between Artists and Fans

Description: No longer must musicians rely upon record companies and rapacious promoters to get their songs into the market and themselves in front of fans. Top selling Counting Crows has long been a leader in using Social to alter the artist-audience dynamic. Here’s the first thing Adam Duritz had to say:

If the video isn’t displaying, use this link. P.S. I love that his notes are had written!

#Pivotcon = the merging of ideals

From old school to new school, I think this graphic says it all…

My favorite part of #Pivotcon: Digiquette

Session: Millennials, Decoded: Inside the Digital Mind of the Connected Generation
Speaker: Britta Schell, Director, Digital Strategic Insights, MTV
Role: Responsible for understanding Millennial digital behavior and insights.

Description: ”Millennials are the arrow tip of Social Consumers. They pierced the armor of traditional marketing and trampled long-held conventions about how audiences are supposed to behave. But, up close and personal, what do the online lives of millennials look like? Are they really as wild and uninhibited as they seem? MTV reveals its massive study of the rising adult generation.”

Synopsis: Britta delivered!

Why millennials? If this generation isn’t part of your current market, they will be (and should be) or they’re definitely influencing your customers today! Plus, millennials are experiencing the greatest convergence of digital and real life. They ARE the early adopters, provoking unique triggers for anxiety, feelings of overexposure as well as perceptions of efficiency and empowerment. Understanding what consumers feel will help any company (big or small) understand what they need and the best ways to meet that need.

The average millennial:
…grew up fully exposed.
…understands “celebrity culture” and the need for savvy personal branding.
…was raised with constant feedback loops from (helicopter) parents, coaches, teachers, etc…
…is always aware of how people are responding to them and gains confidence from feedback they expect.
…is setting the cultural norms.

Flowtown – Social Media Marketing Application

MTV is attempting to understand the implications of this convergence through classic intimacy variance:

• Label = Curate Me | representation = ME
• Label = Publicly Intimate | representation =  Intimates
• Labe  = Like-a-Holic | representation = Friends
• Label = Digiquette | representation = World

Brands can effectively use millennial Digiquette (“the rules”) as a roadmap to virtual engagement :

Rule #1 Learn the Rules

Sounds like fight club, right? The first rule of Fight Club is: you do not talk about Fight Club. Well, this one IS a little different. First rule about managing your online life is the learn-the-rules. Millennials are exploring multiple platforms and observing. Many understand and embrace the idea that one platform may be good for only one thing. Not unlike real life, knowing what is appropriate is the first rule to engaging within digital platforms and community.

• 93% posted veiled language online that few connections in their public space would understand (example: LYRICS)
• 78% know someone who has been in trouble with a parent, school, etc… for something they posted on social media

Rule #2 Pace Yourself

Britta summed up this rule as “James Dean nonchalantness 24hrs a day,” like the three-day rule of dating. By the way, I love James Dean. Got my attention. Millennials clearly exhibit some sensitivity around the perception that their digital lives are completely converged with real life by delaying the gratification of response (or feedback) and demonstrating that a separation of “real” and “virtual” does still exist…for now.

• 48% believe that if you respond too quickly it will seem like you have nothing better to do
• 25% feel alone if they do not receive a response/feedback to public postings

Rule #3 Avoid Controversy

Millennials are cultivating proxy opinions – by association – which they believe is adding value and helping them gaining social currency. But it’s also important to pace these posts just like delaying the gratification of response to avoid flooding social media feeds and exile to “social Siberia” as friends and connections start tuning you out. On a side note: A diner down the street from the conference was referring to a specific section of tables as “Siberia” the next morning. Conspiracy?

• 54% post a video or article they agree with instead of a personal opinion

Rule #4 Guard Your Future

Even the “party guy” thinks you “might as well be remembered in good (meaning positive) terms”. Millennials are using tools like Picnik to edit photos, filtering content about themselves to show an authentic but BEST side of themselves, a side that is associated with the lifestyle template that they have chosen.

• 30% have modified photos before posting
• 75% try not to make mistakes in digital space because they understand the permanence
• 90% are using Facebook as a conduit to personal branding

Bonus: My favorite quote from the millennials in this study was “even if it’s an e-mail it’s like someone is trying to communicate with you”. BAM! E-mail is NOT dead.

For more reading check out Litmus: Digital Millennials and Virtue Live Blog.

how can social media empower artists and designers?

How can you move ahead of the crowd? The videos say it all… Seriously, listen to what Raul has to say (video #2 & #3). You could be just one tweet away.

Genius and the Age of Enlightenment: Part #1

Genius and the Age of Enlightenment: Part #2

Genius and the Age of Enlightenment: Part #3

Speakers:

• Hope Frank, CMO, Webtrends
• Even Grenne, CMO, Grammy Awards
• Raul Penaranda, Fashion Designer
• Jeanniey Mullen, CMO, Zino (wearing Raul Penaranda!)

pasta frittata + heirloom tomatoes + yummy goodness

Since farmer market season is almost over here in Boston, I’m trying to get my heirloom tomato fix DAILY. So I spiced up a bland pasta frittata recipe with veggies and a few surprises. Yum!

Ingredients

• 3 tablespoons good olive oil4-6 eggs (4 is enough, 6 if you want more)
• 10 ounces thin spaghetti
• 1 chopped large (sweet) white onion
• 1 chopped garlic clove
• 3 (farmers market) heirloom tomatoes
• 1 cup MorningStar Farms Meal Starters Grillers Recipe Crumbles
• 1/2 cup Parmesan cheese
• 1/2 cup goat cheese
• 1/4 cup packed chopped fresh basil leaves
• 1 teaspoon kosher salt
• 2 teaspoons freshly ground black pepper
• bed of greens

Directions

Boil hot water and add thin spaghetti. Cook until tender.

While pasta is cooking, heat the olive oil in a very large pan over medium-low heat. Add the onions and garlic and saute for about 10 minutes, until very tender.  Add Crumbles and two (2) of the heirloom tomatoes and saute for another 3-5 minutes.

Drain and cool pasta. Whisk 4-6 eggs in large bowl. Mix all remaining ingredients except one (1) tomato and greens with eggs. Add saute onions, tomatoes and Crumbles and mix well covering all ingredients with whisked egg.

Add olive oil to frying pan to prevent sticking and pour mix into pan. Cook on low heat for about 5 minutes (until bottom begins to brown). Lift up edges of the frittata pushing them gently towards the centre, reduce heat to medium, cover and cook for 2 – 3 minutes or until bottom is golden brown.

When the frittata is cooked on bottom side, set a large, flat lid or cooking sheet over your pan, grip the handle of the pan with one hand, hold the lid firmly against the pan with your other hand and quickly flip the pan and lid. Return the frittata to the pan by sliding it from lid of cooking sheet and cook the other side until golden brown.

Once cooked, loosen the edge of the frittata. Cut into wedges and serve hot or at room temperature over bed of greens and sliced heirloom tomato.

I’m having the leftovers for lunch today….and probably tomorrow. This serves eight HUGE slices. I also recommend adding Olde Cape Cod Vinaigrette & Marinade to the top for some additional flavor!

The week that was.

Here’s a recap of sweet and not-so-sweet e-mail campaigns I received last week.

[Sweet E-mails]

Although no e-mail campaign is truly perfect (even if it was perfect, all the rules will change in about….a minute), these are STAND OUT message (for one reason or another). As always, I welcome comments and suggestions regarding stellar campaigns worth checking out.

RobynsOnlineWorld.com Newsletter on September 19, 2011

+ aside from logo alt tag, completely optimized for images off

+ easy to read and know where to click with use of font size and bolding

+ absolutely no need for pre-header

- social media tags morph together

- as a system generated template w/whitelisting super power, may be impossible to replicate

StudentMags e-Commerce Newsletter on September 20,2011

+ layout is very easy to read

+ design and use of color draws eyes to the prize – what I can, what my offer is and how to get it

- top nav is morphed together

- yellow background = spammy, buy hey who cares if you have a good enough reputation I guess

Petco Campaign on September 21, 2011

+ aside from social media links, all copy is very clear and crisp

+ pre-headers has clear, strong offer statement with personalization

+ great use of alt tags with offer statement – not cluttered by other copy, short and sweet

- social media CTAs and overlapping with images off

- low text to image ratio

PayScale Newsletter on September 22, 2011

+ a lot of personalization in left sidebar

+ whitelist CTA can be very powerful, especially for brands / companies with a lot of room for growth

+ high text to image ratio and intriguing CTAs

- a lot of blue font and background colors can make e-mail look spammy

 

[E-mail Fail]

More often than not, I see e-mail campaigns that fail to deliver value and/or a message of any kind. What a missed opportunity! Here’s YOUR opportunity (and mine) to learn from the past. If you disagree (or wholeheartedly share my opinion), I’d love to hear your feedback.

P.S. I block sender names and domains with boxes to protect “the innocent”. This is not a commentary on brands or companies. I often receive stellar campaigns and epic failures from the same source.

Subject: Net… / Date: September 20, 2011

- almost the entire section above fold is very hard to read with images off

- random alt tags (“separator”) – just leave them empty if there’s no use or way to optimize

- could use a pre-header, especially with this design

+ layout that starts just above the fold is strong and includes targeting

Subject: Pre-order our Exclusive… / Date: September 21, 2011

- almost the entire section above fold is very hard to read with images off

- very low text to image ratio – many e-mails from this brand have gone to spam

- could use a pre-header with offer statement

+ looks like there’s a mobile version, so maybe that’s good….

Subject: … Special / Date: September 22, 2011

- without images on, can’t see a thing – a lot of these e-mails are blocked as spam

pesto + pasta + heirloom tomatoes. yum!

I don’t have a recipe for this one, just eyeballed proportions.

Here are the ingredients:

• pasta (really, any kind)
• maple pesto (from the boston south station farmer’s market)
• walnut oil (mixed with the pasts and pesto)
• mozzarella cheese (under the tomatoes)
• heirloom tomatoes (also from the farmer’s market)