HTML email design and coding can be tricky. Support for web standards in email programs is sketchy at best. Imagine today’s email programs like browsers were in the late 90′s. Yeah, not pretty.
To code for HTML email your best bet is to build as if you are building a site in 90′s: use tables for layout and don’t use any CSS that’s too fancy. CSS shorthand? Fuhgetaboutit.
It’s easy to design an amazing looking email marketing campaign, and completely screw it up because the code is bad. Or maybe the code isn’t bad, but you’re haven’t built your HTML email for the lowest common denominator.
Case in point: Marvel Entertainment’s email. Beautifully designed and always filled with awesome illustrations of their intellectual property.
Pretty nice, eh? Colorful, big headline, grabs your attention. Makes me want to click it.
A successful email design, right?
Take a look at it now:
A bit different, huh? This is how the email looks when it loads in many email programs — images do not load by default. So the user is left with these huge blocks of white space, and itty-bitty alternate text for the image.
FAIL. This is exactly how emails should NOT be coded.
All of the text in this email is an image. Big no-no. The ONLY time you should make text into an image is if the style of the text is more important than the words themselves. This is rarely the case, but it does happen. The majority of the time, you should use real text in your HTML emails.
The text and the graphics are also lumped together into these giant images that don’t give any indication of what they are when the images do not load. Again, a huge mistake. This email design should have been split up into smaller sections. The text and buttons should have been split up from the images for maximum impact when the email is received and images are not loaded.
Let’s take a look at how Marvel could vastly improve their email campaigns by correctly building their email newsletters. If this email were built correctly, this is how it would look with images off:
See how almost all of the text in the email is readable either as actual text or as alt text of the image? The 2 paragraphs of black text are coded as actual text—not images (remember, that’s a big No-No!). The bulleted list in between those 2 paragraphs has the full text coded as alt text (something that should always be done). Note that the Buy button alt text is nice and big, even with images off. This is done with CSS (granted this won’t work in all email programs, but it will in some!). Even the copyright info at the bottom is readable here. This is how Marvel should be building/coding their HTML emails. (and if Marvel would like some assistance in getting their emails up to par, we would love to help! Please contact us!)
Of course, Cygnet Midwest offers full email marketing services. We can design and code your email campaign plus manage your list and send your emails for you! We also offer full CAN-SPAM act compliance so your emails will not land you in hot water. Contact us today to find out how Cygnet Midwest can help with your email marketing campaigns!
Please note: Again, the email design and content shown above, plus all of Marvel’s characters, art, graphics, etc is all © and TM Marvel Entertainment and its subs. This post is for educational purposes. Cygnet Midwest claims no ownership of anything that is Marvels.