Anne Willis provides the design and coding prowess that holds all of our emails together. She’s an exceptionally talented designer and a self-taught HTML email coder. This blend of creative and technical skills allows Anne to conceptualize, design and program dynamic, mobile-friendly and mobile-responsive email templates that clients love.

We picked Anne’s brain on the joys and frustrations of designing for email, and she shared some valuable tricks of the trade for email marketers.

What advice do you have for email marketers who want to design and code their own HTML for email?
I always recommend that email marketers start with a professionally designed, custom-built email template. An experienced email coder can build all the different modules you think you might want to use for different email pieces — a short and sweet e-card, a newsletter and a product promo, for example — into a single master template. Your coder can help you anticipate what modules you’ll need in your master template and what will work best for you based on your individual design and programming skills.

I also recommend a thorough template check at least once a year. Email is a rapidly changing medium. An email template designed in 2014 likely needs a refresh today to ensure it looks great on the new devices people use to view email. You’ll want to send a test of your template to as many email clients — iPhone, Android, iPad, Outlook, Gmail, AOL, etc. — as you can. Carefully check to make sure your template renders well in these environments and doesn’t break. There are programs available to help you check rendering, but we recommend checking email in a live environment whenever possible.

If you don’t have the time to keep current on email design standards and the devices people are using to check email, it’s best to partner with an email coder who can help you with your template design and updates.

What’s your secret to making sure the emails you create will pass the stringent quality assurance checks we have in place at Katey Charles Communications?
When I create a new email template, I’m definitely thinking about the HTML code as I’m designing in Photoshop. Email code relies on tables, so I design in terms of rows, columns and nested tables. I conceptualize the design horizontally and use only one column because I know columns introduce more rendering challenges.

Also, I try to keep my design simple but highly functional. I’m always scaling my Photoshop view from actual pixels to 50 percent, so I can ensure all copy is readable on a small screen.

I generally draw my design inspiration from the client’s website — if our client likes their website, that is! Your email template is your website’s best friend because it drives traffic to your site, so you want to be sure the branding is consistent.

Aside from that, I’m not sure there’s any secret to the work I do. Sometimes I feel like I’m completely immersed in email. One thing I do is intentionally sign up for a variety of marketing emails. I check them on my phone and my computer, and then I look at the code, too. I learn just as much from an email that renders terribly as I do from the most beautiful email in my inbox.

Honestly, there is a lot of trial and error involved in email coding.

What are the biggest mistakes you see in email code?
I often see email marketers trying to accomplish way too much in one email. They might be trying to pack too much information into their template, they might have way too many links, or their email might just be way too long. The more complicated your email design is, the more likely it won’t look good in the inbox. Complicated design is expensive to maintain, too!

General sloppiness in HTML code can create big rendering issues. An unclosed span tag could cause your email to display the wrong font style or size. Or maybe you’re using a bad attribute. Anytime I make a change to HTML, I run a W3C validation check. It just helps me make sure every “i” is dotted and every “t” is crossed.

Aside from that, I often see missed opportunities. For example, many marketers don’t set their alt tags. An alt tag is the copy that appears in place of an image if the subscriber has images blocked. Marketers should be using alt tags as a call to action or a teaser.

What do you find most frustrating about designing for email?
There are so many variables in terms of where people are checking their email. You have to think about the person looking at your email on an Android, an iPhone 5, an iPhone 6s, an iPad, a desktop computer. Technology changes frequently; just when you’ve mastered Outlook 2013, they’ve released Outlook 2016 with new rules. But that’s also what I love about email design and coding! It’s challenging, and there’s always something new to learn to ensure emails look great in the inbox.

Aside from loving a good challenge, what else do you enjoy about designing for email?
Email has a lot of design restrictions. In many ways, you have to think of email like a website from the early ’90s. The HTML code we can use for email is all table-based. That said, the restrictions almost allow for more creativity. I always like a challenge!

I also love the immediateness of email. I can design an email and it could be sent to subscribers in the same day. I’ll know that day how many people have opened the email and clicked on the links. Using A/B testing for design aspects of the email, I can see how my design impacts conversions. With print design, it could take months for the design to reach its intended recipient, and I’ll never know if it goes in the recycling bin or gets hung on the fridge. It’s incredibly rewarding to see my design help marketers sell their products and services.

See where Anne draws some of her email inspiration from!

When it comes to email design, these are Anne’s favorite brand emails: Fitbit, J.Crew, Karma Go, Litmus, Movember, NatureBox, Ralph Lauren, REI, State Farm, Scholastic, Target, TOMS, Uber and YOGASMOGA.

Need Anne’s help?

Anne and our team of email designers and coders can create a beautiful and functional email template for you or perform a health check on your existing template. Email us at or call 314-918-8088, ext. 106, for details.