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!

#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!)

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

e-mail is going strong.

I have strong beliefs about surveying consumers vs. looking at their behavior. Opinions are important, but opinions alone can send marketers (and politicians and parents and just about everyone) on a wild goose chase. Most people (if not all) lack an enormous about of self-awareness around their habits and preferences, especially when it comes to shopping. I mean, isn’t that part of inherited American culture?

However, I do now believe opinions should be INGORED and I DO believe that teen opinions about the future of e-mail are a strong indication that e-mail communication should remain a strong part of your strategic marketing mix. After all, the medium continues to evolve. And I think e-mail will maintain a stronghold for the following reasons (among others):

1. E-mail has clout and authority (in some circles). Think about it. Even if you ignore lots of spam, don’t you feel better when a product you use (even a mobile app) has a nice and tidy website and an easy place to sign up for e-mail? Doesn’t that make you feel like it’ll be easy to find any information you might need about the product in the future?
2. American adults (not teens) still spend A LOT of time online sending e-mail.
3. A lot of very important institutions in the US use (and often require) e-mail for communication, like colleges and banks.
4. International e-mail vendors are optimizing for mobile browsers of all kinds. Companies just need to keep up with their designs and segmenting.
5. Other messaging mediums remain an enigma for many marketers, politicians, parents, etc… This may be part of the appeal for teens, but consumers will put a little effort into getting what they want even if it’s signing up for a future spam trap. It took almost decades for the US to develop regulations (CAN-SPAM) followed by best practices around e-mail marketing…

If you’ve got a powerful mobile strategy, that’s great! My only point is that none of us should forget about e-mail. There’s a lot of opportunity with minimal effort. At least that’s what the kids say.

Data and infographic by AWeber Email Marketing

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.

Fab.com Announces Partnership with Fast Company on Sept 14, 2011

+ great layout. seriously. don’t you want to click on a few links? i bet you clicked on the image.

+ optimized for images off (aside from the annoying “booth” alt tag).

+ good use of “bolding” with font color = clear hierarchy of content.

+ MOST alt tags are used well.

- red font might not be a good idea. it didn’t get spammed, but it could have…

- no value statement above the fold. well, sorta WAY at the bottom.

Jamaica Plain Patch Newsletter on September 14, 2011

+ aside from silly alt tags at the top (“View as Webpage”), you wouldn’t even notice images are off.

+ good use of “bolding” with font color = clear hierarchy of content and easy to read.

- if there’s going to be a deal near the top, may as well make it the pre-header.

Babeland (yes! as in sex toys….) Newsletter on September 14, 2011

+ for a three column (potentially cluttered) e-mail, pretty good layout. still easy to read.

+ optimized for images off (which must be hard to do when marketing sex toys!).

+ clear message (i REALLY want to know what the njoy is….)

+ MOST alt tags are used well.

- no value statement above the fold, but might not be necessary for this e-mail…

Kayak Newsletter on September 14, 2011

+ layout + image optimization + use of alt tags = rocks!!

+ great use of font sizing without getting TOO spammy.

+ clear top navigation for the “browsing” customer.

+ each message is short, sweet and appealing.

- vast white space at top + no pre-header.

SEOmoz Newsletter on September 14, 2011

+ decent pre-header with appealing value statement (for those in niche field).

+ use of numbers as bullets to organize key content.

+ high text to image ratio.

- use of white font over colored background.

Compendium Newsletter on September 15, 2011

+ layout + “bolding” = fairly easy to scan.

+ compelling subject lines and CTAs (for people in the industry).

- could optimize pre-header and eliminate background color for improved deliverability…

Vitalicious Campaign on September 15, 2011

+ give the vast amount of white space and images, good use of alt tag with offer statement.

+ inclusion of text bumps up the text to image ratio.

- too image heavy… do the pictures really SELL the muffins in the e-mails themselves?

Idealist Job Fair Reminder on September 16, 2011

+ these letter style newsletters have been very effective for me in the past.

+ high text to image ratio.

- not easy to scan (but easy to read without images…).

Ticketmaster Newsletter on September 16, 2011

+ calendar visual = stellar!

+ great layout that is easy to scan and digest.

+ personalization with “my favorites” is a nice touch.

- heavy use of background color and what looks like a lot of embedded tables (tables w/in tables).

- white font looks spammy and will not show in some inboxes.

 

[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: Tweed Time / Date: September 14, 2011

- without displaying images, this message is absolutely meaningless to me.

- DO NOT rely solely on the power of your brand. so much missed opportunity.

Subject: Offer Statement + ROCK OF AGES / Date: September 14, 2011

- my eyes hurt!!!

- no meaningful pre-header and WAY too image heavy.

+ offer statement as alt tag (since this is SO image heavy) IF you could actually read it.

+ subject line may be the saving grace of this message.

Subject: Sparkle this September with… / Date: September 14, 2011

- oh my useless alt tags.

- no meaningful pre-header and WAY too image heavy.

Subject: Get set to go Dalmatian-… / Date: September 15, 2011

- this subject line makes no sense to me. maybe i’m not the target demo…?

- oh my useless alt tags.

- no meaningful pre-header and WAY too image heavy.

Subject: BOS: A Jazzy Speakeasy… / Date: September 15, 2011

- WHY is this e-mail 1200px wide? anyone?

- black background = super harsh on eyes and spammy.

- white font over black background will not display in a lot of inboxes.

+ “women want you. bakers fear you.” sweeeeeet.

Subject: Free Shipping Today Only / Date: September 15, 2011

- without images, there’s NOT message aside from the offer statement in the subject

- no pre-header.

- background color give to images = looks more like spam.

Subject: Upcoming Events with… / Date: September 15, 2011

- IF your e-mail MUST be this image heavy, i suggest alt tags.

- only image optimization is for the footer, which seems to have no real value.

- vanity “from” e-mail domain = soooo easy to setup.

- no pre-header.

+ social media links included (when images display).

+ the footer DOES look nice.

Marketing Metrics – Part 1

I just started reading Marketing Metrics: 50+ Metrics Every Executive Should Master (Hardcover). Had some great reviews on Amazon… Here’s a quick overview:

A metric is defined as a measuring system that quantifies trends, dynamics or characteristics. This is the foundation of data-based marketing, which encourages objectivity and collaboration within a firm. As the book claims, if you can’t measure then you can’t manage.

Metrics allow a manager to quantify products, customers and distribution channels under various conditions. A portfolio or dashboard of data can be used to develop triangulated strategies and solutions based on market dynamics from different perspectives. Managers must practice and learn from their mistakes to understand which data points to focus on over time. Decision makers must also appreciate the relationship between these data points and their limitations. The system becomes the precise and operational language of an organization.

The book promises to teach readers the fundamentals of data-based marketing and assist with the development of intuition around metrics. Over the next few weeks I hope to learn how to perform relevant calculations on the fly and under pressure as a means to continue my career development. Stay tuned!

Embed the MailChimp Form on Your Facebook Page

I signed up for MailChimps e-mail service on behalf of Black Cat Rescue, which is free for lists of 100 contacts or less. Black Cat Rescue is a small organization (and currently filing for non-profit status) so I knew the mailing list would initially remain under MailChimps threshold and the organization can’t take advantage of free service from VerticalResponse yet.

Once the setup was complete, I took advantage of MailChimps simple one-click option to generate code of embedding a sign up form on your website. Much to my surprise, the code functions within Facebook’s FBML!

We were able to create a tab on the Black Cat Rescue page on Facebook that hosts the MailChimp form!

This was SO easy to create (and surprising since FBML can be so finicky); however, only the e-mail option will display for sign-ups.

1. Sign-up for MailChimps e-mail service
2. Build a form
3. Customize your design (font colors, etc…)
4. Click on “create embedded code for small form” at the top of the page
5. Add FBML to your page on Facebook (considered an application)
6. Drop the code for your form into the FBML field
7. Add to tab in the FBML application settings