Gallery

12 Comments

1. SarahJ
   June 9, 2010 5:15pm

   I really like the design (minus the lack of links). Takes what is a pretty simple email content wise and makes it stand out. I would think if you received it & viewed in a preview pane you’d want to view it. Love the texture!

2. berni_ball
   June 9, 2010 6:08pm

   Nice design, but surely that’s just one big image?

3. Mike Bowzeylo
   June 9, 2010 6:28pm

   @berni_ball

   Nope…it appears that everything is text other than the logo, coupons, and forward to a friend button. (And the background images of course.)

4. Mathew Patterson
   June 10, 2010 3:29am

   Berni_ball, you can actually click on the screenshot above to view the actual campaign as an HTML page (same goes for all our gallery entries)

5. berni_ball
   June 10, 2010 10:56am

   I thought Outlook didn’t support background images?

   It is a nice design though.

6. Davida Fernandez
   June 10, 2010 5:52pm

   @berni_ball The top of the tag is a foreground image but the main part behind the content is a background image. If you hide background images it does look a little funky but it’s not terrible and the viewer will still see the tag metaphor and the product images, and of course the content.

7. Jeff Miller
   June 10, 2010 7:53pm

   @berni_ball
   @Davida Fernandez

   “A Little Funky”?!  Wow, I viewed it in Outlook2007 and would call it Unacceptable. The missing <td> background images in Outlook just breaks the design too much.

   Email design is a game of compromises. This design utilizes a Body background image that drops out in many email clients (hotmail, gmail, yahoo, etc). When *that* image drops out, it leaves the design changed but not what I would call “broken”. *This* is something I would consider “a little funky, but acceptable.” The missing <td> images however are just too much.

   I personally feel displaying this in your gallery is a dis-service to your readers, VERY few people will see the layout in their email client exactly as presented above.

   P.S. This layout also has the same image margin problem that I suffered with on a recent design. Campaign Monitor helpfully had a solution: http://www.campaignmonitor.com/blog/post/3132/how-to-stop-gmail-from-adding-a-margin-to-your-images/

8. Mathew Patterson
   June 10, 2010 9:43pm

   Jeff,

   You do have a point, that it is not great in Outlook 2007 and perhaps we should note that in the post.

   However our gallery is not a collection of campaigns that look great in Outlook, sometimes we feature items which have great ideas that could be improved in execution.

   Other times, people (like Panic) have audiences that barely use Outlook. What we’re trying to do is give designers not the exact code to use, but some inspiration for different ways of tackling email design.

9. hmmm
   June 11, 2010 12:15pm

   how does that work as an email with an image background? I guess it doesnt…

10. hmmmmmmmm
    June 11, 2010 12:17pm

    oh sorry already mentioned :P

11. Jeff Miller
    June 12, 2010 7:01pm

    @Mathew Patterson

    Point Taken. I routinely justify web designs that might break in ie6, because “the intended audience just doesn’t use ie6”, so I understand your argument.

    It might be helpful if I explained how I use your gallery. I routinely direct designers here for inspiration and a good overview of what is and isn’t possible with HTML email. Invariable they come back to me with examples such as the one above and say “but they used background images, why can’t I?” I then have to run through the caveats of using background images, and show them the analytics revealing significant Outlook usage.

    Outlook has just too many users to ignore (I would argue even for Panic). Truth be told I loathe the %@#$ing program and was truly heart broken about the outlook2010 announcement. But the fact of the matter is that it is here to stay and we need to be designing for it.

    -Jeff

12. Chris
    June 22, 2010 6:20am

    Kick ass design emily! Love it!

Got anything to add?