Email redesign

Our weekly email was not displaying well across email clients - so I decided to redesign the whole email template. I've been doing research on layouts for a few months at that point - when I got an email that I thought was clear I would sketch a quick boxy-wireframe of the email message and stick it in a folder.

But when I finally got the go ahead on the redesign it turned out other people really liked the current design so all my plans were foiled.

I read a lot of documentation about designing for email (mostly using the Litmus Blog) and relearnt html tables. In the end it was really satisfying looking at all the nested tables - in the end even with our reasonably simple template we ended up with 13 tables. And then I transferred my template to MailChimp. It's actually easy to make an area editable in MailChimp - you just wrap the bit you want to be editible in a

. There are other things you have to do which MailChimp have listed.

My first design. Different tables are highlighted in different colours

I did miss a few things. That's my fault because I did a lot of research on what's popular in email design and the problems that our users were having but when I decided to remake the current template rather than design a new one I didn't spend enough time looking at the old templates. For example I used #color1 rather than #color2 for the links which I had to go back and fix.

But the new template seems to be working. All the images that were reused (such as the header and social links) have been updated and resized, everything is nested properly and W3 compliant. The colour palette was reduced so everything looks a lot more simple now. More importantly I stripped out lines and lines of header css and moved them inline. The only css in the head now is the link color, image display and some @media queries (which mobiles apparently read but desktop clients don't).

Here's the head of the old template -  see the full email

Here's the head of the new template -  see the full email

To be honest it's a lot more blocky now - I can't really explain it but I assume it's because the width is very fixed. There was also a lot of white space at the bottom of the email so I moved things around to get rid of that scrolling space that I don't think anybody was scrolling through - it was pretty obvious that the email had finished by then so items like our social links and the 'donate' button weren't getting seen.

Designing for email was pretty fun in the end! Once I got into the nested tables drama I found it really satisfying. I didn't have to use a clearfix anywhere! But unfortunately that's the end of that project and now I'm back to working with floats....