Oct 5, 2006

How AOL Designs Their HTML Emails

We’ve talked in the past about designing for AOL’s extremely tiny (194 pixels!) preview pane.

So we thought we’d post an actual HTML email that AOL sent to its members. Considering it’s from their CEO, you know it’s going to be optimally designed for AOL, right?

Here’s what the email looked like in their preview pane:


Notice they made their logo aligned left, and it fits completely within the narrow preview pane. Also notice how they didn’t use any fixed-width tables (like most of us do these days). It’s just a couple of simple paragraphs that happen to wrap fluidly within the window. His entire message can be read in their itty-bitty preview pane.

Here’s how it looked when opened up in full view:


Kinda ugly how the text goes past the logo at the top, but hey—it works. We like simple. You might consider making a template like this just as your own "company letterhead." Use it to send quick alerts to customers and stuff. No need to go crazy with HTML and graphics and tables within tables within tables (not all the time, at least).