A Case for Tabling HTML Email

Table Data Graphic

A successful HTML-based email campaign
may mean tabling the whole idea.

Back to the Future

Many of today’s email clients function like mid-90s browsers. To consistently display HTML-based, asset-laden HTML email designs and layouts, we often turn to font tags and tables instead of Cascading Style Sheets (CSS) to finesse creative boundaries and ensure consistent browser display.

Web-based and desktop email clients interpret HTML-based email differently. Some even strip CSS styles altogether, necessitating extensive testing and modifications during the development process.

Cheaters Never Prosper?

Beyond the arcane cheats and excessive work arounds, there are other concerns that may dissuade the faint of heart or non-technical professional from embracing the medium: Email authentication, white-listing, audience acceptance, and—should it actually run the gauntlet unscathed—trust, proper brand messaging, and design.

For all its idiosyncrasies, delivery issues, and purists like Jeffrey Zeldman who deplore graphically enhanced email, ours is a visually responsive culture. And HTML email response rates bear that out.

To Table or not to Table

Like any marketing medium, proper strategy, integration, appropriateness and understanding of design limitations are key.

We sometimes advocate the use of text-based email to drive recipients to a landing site where graphically intensive design is more appropriate. And yet, we’re just as likely to use HTML email when the circumstances warrant it.

Whether HTML or text-based, never table the idea of integrating permission-based email into your brand marketing planning.


 

Comments

  1. Stephen James Says:

    As the most passionate anti-table coder I know, it is sad that tables still need to persist in email. A few months ago I discovered the Email Standards Project and know that at least someone is carrying the flag standard. For a quick summary of Average or Poor clients go to HTML standards in email clients: Oh, the horror!.

  2. Tim Altman Says:

    Standards make life so much easier, but when they don’t work or aren’t followed they become pointless (to some extent).

    At this point there are certain realities about email clients. I have to put on my ‘1998 coding hat’ when dealing with html emails. I don’t particularly like it, especially since I love CSS and it’s power. But an email client is not a web browsers even if it is in a web browser (like gmail, yahoo, hotmail, ect.).

    @Stephen - thanks for the Email Standards Project link. It sums the situation up real quick - “poor”. It would be nice to see a multi-column acid test result. A “solid support” mark with a single column design may not reveal the multi-column challenges each email client presents.

    We need to push (and hope) for standards compliance but that doesn’t change the current playing field.

  3. Tim Altman Says:

    @Stephen - not sure why the link didn’t make it through, but nice post and thanks for the link to the vitamin tutorial.

    HTML standards in email clients: Oh, the horror!

    Ensuring your HTML emails look great and get delivered (via smjdesign.com)

Leave a Reply

Name (required)

E-mail Address (will not be published) (required)

Website

Comments

Alas, yes we moderate comments. Please endeavor to add value.
Thank you.


More Thought

.THINK now listed on Alltop.com

under Branding. Grouped by topic, Alltop aggregates stories from “all the top” sites across the web (that’s their story and we’re sticking to it). View our .think listing, here: branding.alltop.

RapidoStart (Mac)

Here’s a free Mac app allowing you to call up, via customized abbreviations, any text string you copy and paste frequently. Best of all the text is placed pre-formatted - returns, bullets and all. It’s become a staple here at Brainstorm. You can download your own at app4mac.

PimpMyNews

If you can get past the vapid brand identity and UI, PimpMyNews, the talking social news site, is an interesting concept. The site will read your RSS feeds to you over your mp3 player, iPhone, etc. or computer.
[via: PR-Squared]

The iPlanet

NPI’s personal cosmos transport. Like Ray Bradbury’s Dandelion Wine Happiness Machine, the iPlanet, a holiday product parody, promises a “thoroughly self-absorbed social media experience.”

Twitter Unseat Email?

Robert Scoble explores the notion in this BusinessWeek piece re: the running debate over where we’re headed with aging, albeit ubiquitous, email paradigms versus spam-free Tweets.
[via: Scobleizer]

Track the Hive’s Buzz

Aggregate the aggregators at Popurls.com—simultaneously follow the most current posts from all the top sites like Digg, Newsvine, YouTube and Flickr. Or, “find your favorite thing,” over at Buzzfeed.

Fountain

Peter Bruhn’s Swedish type foundry is preparing a new freshet of fonts to flow forth and flourish among us—according to Typographi and Bruhn himself.
[via: Sheer Brick]

Design by Metaphor

A word from A List Apart about design based on simile.

Master’s Color Palettes

Looking for a digital color scheme that will last the ages? Colour Lovers explores masters inspired color schemes.

Visualizing Volumes

Can’t see how your two soda bottles a day are impacting the environment? Chris Jordan’s images will help you visualize it. View his amazing statistical depictions at Running the Numbers, An American Self-Portrait.

Steve Jobs Unveils the Apple iRack

Regardless of your geopolitical views you’ll likely appreciate the satirical humor of this product parody sketch run amok.

Qbesq

Okay this would just be a goofy flash-based Spirograph-esque toy if it didn’t generate downloadable .svg (Scalable Vector Graphic) files—which it does. Pattern enthusiasts, meet Qbesq.

Those Funny Googlers

Here’s Google’s take on the phrase, “Across the pond.” Visit Google Maps, enter New York to London in the search field, scroll to step #24.

Tip: Reducing Firefox Memory Usage

How to reduce Firefox from a memory hog to a piglet. Caught this Firefox usage tip over on Ade Olonoh’s blog (see comments).

CSS Developments

If you’re a developer or just interested in CSS, check out this article entitled, #IEroot — Targeting IE Using Conditional Comments and Just One Stylesheet,” over on the PIE site.

The History of Branding

An iconic-rich, one-click site on how hundreds of the planet’s most noteworthy brands came to be. Updated daily.

The Hexafluoride Float

From the Bonn Physikshow—A lesson on YouTube regarding the denser than air properties of hexafluoride (likely sulphur hexafluoride) gas.

Worst Website Design, Ever?

Enter at your own risk. A proof of concept that design does matter. Havenworks.com hailed on Digg recently as perhaps, “…the most poorly designed website in the world!”

50 Essential Bookmarks

Originally published in Communication Arts November Design Annual 2006, here’s their list of 50 essential bookmarks. Conspicuously missing, sites such as Delicious, Technorati and Lifehacker.

Greetings Earthling

Sure to appeal to the megalomaniacal extraterrestrial in all of us. World, meet geoGreetings. When you care enough to send a satellite image.

A Modern Medium

An interactive glimpse into the the random and spontaneous feedback Jackson Pollock once realized in his medium—sans the clean up.

Impressive Product

Pressed toast with panache. From the, “Table Manners Collection,” Delfts Toast Pan by Minale Maeda. As seen on “ohmygooshness.”

Other Thoughts

Items we find compelling, of late.

Our latest top 20 list of inane musings from the Brainstorm office white board: Top 20 Thoughts on What No.15 Means

(at right)

.think Flickr

Objects of interest, engaging designs, diagrams, downloadable visuals and any other imagery we felt worth sharing.

Top 20 Top 20 Things to do (we did)
on the 4th of July

  1. Enjoy an apple pie in a Chevrolet…or a nutrition bar in a Smart Car
  2. Wax my upper lip
  3. Overdose on televised sports
  4. See Wall-E
  5. Midnight Parade – Anderson
  6. Read the Declaration of Independence (first part anyway)
  7. Blow off steam, or digits
  8. Enjoy the neighbors’ fireworks, late at night, for weeks
  9. Populate FunctionFox
  10. Rest my dogs
  11. Wax the car
  12. Wax nostalgic
  13. Watch fireworks…Just a thought
  14. Groove to the sounds of Baghdad (try Quantum Sonic Orchestra…or the Bamboos–nostalgia circa 1977)
  15. Fret all night that Homeland Security doesn’t run a keyword analysis and cough up #16
  16. “Celebrate the independence of your nation by blowing up a small part of it”
  17. Grill some burgers & dogs cats
  18. Hope it doesn’t rain cats, burgers and dogs
  19. Grill the Burgher – and his dog – get to the bottom of this “independence”
  20. Join the kids in the bike parade
  21. Celebrate with the Katzenbergers
  22. See the entire board