How to Design Complicated Email Templates

Written by Ben on November 17, 2016

Hey! I’m Ben. I’m Big Eye Deers resident Front end developer. I’m a lover of all things CSS, from animations to a simple layout… but never float, never.

Email templates are a great way to keep in contact with your customers or clients, the issue is lots of companies do it and they all do it the same so don’t stand out!

“When you can be different, be different” – Ben Sheppard, 2016

Our latest mailer has just gone out and as usual, we tried to push the envelope like we do with all our projects. If you didn’t get our latest mailer, you’re missing out – there’s a void in your life and we definitely think the Big Eye Deers mailer will fix that!


How Complicated?

You can make it as easy or as complicated as possible, what you’re aiming for is a large amount of actual text in a mailer because the last thing you want is to put a ton of work in and have it flagged as spam, so how do you avoid that when the design is complicated?

 

animatingmailer

 

This is what I do when I’m creating an email template that isn’t conventionally designed, e.g. just simple boxes next to each other. It gets sliced up so we can have as much content as possible, such as in the green area, you’ll see the images get sliced to fit with a block of content.

 

The Basics

Now the last thing you want to be doing is making it harder for yourself to do something that’s already really painful to do. Mailers can look great in most browsers and applications but if it doesn’t look good in all of them it’s not good enough!

All images should have display: block; otherwise you’re going to be ripping your hair out trying to work out why images are all over the shop, but this should sort them out!

Tables, within tables… within tables – More tables = Easier layout

Keep everything inline, classes are great but leave them to the stylesheets.

border=”0″ cellpadding=”0″ cellspacing=”0″ – Add this to all your tables to avoid the pain of finishing a template and it being broke on outlook and gmail.

At Big Eye Deers, newsletter design and mailing is just another one of our services we can offer to our clients, as a bonus or as a standalone service. We have an in-house designer who can mock up anything design related and experience developers who can build them up.

 

Here are a couple of example mailers in our inbox this week:
some examples of mailers
If you are interested in have a newsletter produced, or if you have any questions about your current website or have a new website that needs to be designed and developed, feel free to get in touch and we would be more than happy to help! Head to our contact page for the details to get in touch with the team in either our Cardiff or Cornwall offices!