Design techniques for email newsletters



Crystal Ledesma is a driven and enthusiastic visual designer and email developer, currently working at Zillow Group. She focuses on establishing email design systems, for visual brand consistency, improved email rendering, and operational efficiency.

Expert Diaries from Zoho Campaigns connects avid email marketers to the experts in this space, and help them learn some best practices and tips. Our aim is to connect email geeks and form a community that learns email marketing from one another.

As we sat down with Crystal Ledesma for an interview, here’s a whole lot of things she discusses about designing impeccable newsletters for your brand, that keep up with the current email marketing trends.

1. Hi Crystal, it’s great to have you as a part of our Expert Diaries. Let’s start with a little discussion about your background. How did you get involved in email visual designing and developing?

Like most of us, I ended up in email accidentally. I had just finished going back to school for web design and development, and while at my husband’s company holiday party and chatting with attendees, I met someone who worked at ExactTarget. Turned out they needed someone to work on email development and after being encouraged to apply, I was hired and was trained on how to convert my skills to email on the job.

2. What are some of your favorite email design hacks for budding email marketers?

One of my favorite email design hacks is thoughtful use of transparency in images. I see that being used in a lot in InVision and Emma email heroes, and it gives emails a much more unique look and feel that’s less “boxy” and more organic. I would encourage marketers to subscribe to both companies to be inspired. 

If you are a marketer that also has to code, one of my favorite design hacks is ghost tables for Outlook! Especially if you are in the B2B space. Ghost tables will be your best friend.

3. For a couple of years now, accessibility in email marketing has been a major focus for designers and marketers. Inspite of all the buzz and efforts around accessible designs, do you still think there are some unaddressed challenges?

Time is always the challenge, I think. We are all working and moving so fast and are always facing multiple deadlines and sometimes that means accessibility considerations are skipped or are a “nice to have” and keep getting pushed aside.

Ultimately, it is on us to make accessibility a priority. Whether that means we implement accessibility ourselves by making it part of our immediate workflow, or being the person to speak up and make the case to leadership that accessibility is important and that it needs to become part of our workflow.

As a designer you can incorporate using a color contrast checker and color blindness simulators as you design. For developers, following guidance from resources like Litmus is a great place to start. If you need a place to start, adding the HTML attribute role=”presentation” to tables and always including alt text for images will make a difference for users with accessibility needs. 

Accessibility can also become the default if you have a design system or snippets in place for creating emails. Setting up accessibility needs in the code as the default ensures all emails created using the design system or snippets are already accessible, no additional work required.

4. What in your opinion should a typical newsletter be made up of and why?

It depends on the industry and the subscribers. There are newsletters that list bite-sized information with CTAs that lead to more in-depth information, some with or without images, and then there are newsletter where all the information is in the email itself. The only “should” is that you should test your newsletter and see what your subscribers respond to. 

5. Does an email’s design influence its inbox placement? If so, can you tell us some design techniques that can be used to enhance the delivery of emails to a recipient’s inbox?

There are not any design specific ways to influence inbox placement in the typical sense. That mostly has to do with deliverability, targeting, timing and how engaged subscribers are. However, clean and thoughtful design always helps support engagement, which in turn can help to influence inbox placement.

6. Sending an email and previewing it on different devices or clients are two different stories altogether. Have you come across any experiences of broken links and unsupported fonts in emails happening only in certain ESPs or clients while working perfectly in the rest? What are some lessons you picked up from those experiences?

The concept of experiences being broken in some clients and working perfectly in the rest is the constant push and pull of email design decisions and development decisions. At my current job, the most common email clients our subscribers have are many versions of Outlook desktop, Gmail and iPhone.

Creating designs and coding emails that look good across all of those very different email clients is always a challenge. I always imagine the scene from Star Wars: The Last Jedi when BB-8 is trying to repair Poe’s X-Wing mid-flight, and one fix means something else breaks, and fixing that breaks something else, and so on. 

The lesson I picked up is how to weigh what is a must-have vs a nice-to-have with our designs, and always going with the must-have. The must-have means ensuring our email content is clear and legible across our subscribers inboxes, even if that means we do not get to do the unique and fun designs every time.

7. Can a bad email design lead to more unsubscribes? If so, in what ways?

I definitely think so. The “what, why and how” of your emails are supported by the content of course, but the design is supposed to showcase that content clearly. If it’s always unclear, the subscriber will not see the value in your emails, and will definitely hit the unsubscribe link.

8. It’s time for some email design statistics! In your opinion, what should be the typical numbers for the below attributes?

a. CTA button touch target size

There’s a great article on that discusses optimal size for mobile buttons. At minimum, 42px in height should be the target size. For width, it can depend on the brand’s preference, but I would not recommend anything under 250px wide due to mobile use.

b. White spaces—frequency and height 

White space is a fantastic way to both keep your design looking sleek and guide the eyes around your email. White space should be used anytime you are going into a new concept (e.g. between hero and a secondary), and of course some white space should be used within a hero as well. For Zillow Premier Agent, we’ve found that an average of 20px of white space within a hero itself and either 30px or 40px of white space between concepts.

c. Responsive email width—for desktop, mobile, laptop, monitor, and tablet

We lean toward 600px on desktop due to the email preview pane being limited to 600-640px on many email clients. That being said, there are some awesome responsive emails that I’ve seen start at 900px width for desktop, but we have not been able to explore wider designs quite yet. 

Due to the variety of mobile and tablet devices of our subscribers, we have our media queries break point at 480px, which is generally recommended. However, it should depend on each company and the most common email clients and devices being used by their subscribers.

9. How have you seen technology impact email design and development of late, and what are some challenges you’ve faced?

Most recently, dark mode is the big one. Design decisions in the past did not have to consider the usage of dark mode at all. Now as dark mode becomes more common, we are starting to see via testing that some designs do not translate well. This is a newer and unique challenge we will be facing and working on to improve.

10. As we approach the end of 2019, what are some email marketing design trends to watch out for in 2020?

Design trends that consider dark mode is definitely one to watch out for in 2020. Right now we’re all working in “fix it” mode but eventually I could see designs just for dark mode being very intentional.

The other trend that impacts email design but will be more internal-facing is email design systems. Design systems are a concept and tool that has been used for a while now for product and web design, but it is a newer concept for the email world. The more people keep hearing about email design systems, and especially when they learn about the operational efficiency and potential for major ROI, the bigger trend it will become in 2020.

11. We’re all familiar with some email design acronyms like KISS, which means “Keep It Simple, Stupid.” As a designer, do you have or follow an acronym of your own?

Not an acronym, but I often follow the saying “it depends.”  ¯\_(ツ)_/¯

There is nothing in email design or email in general that is exactly one size fits all. Email design and related decisions all depends on the industry, the brand, team resources, subscribers and the subscribers email client share.

Drilling down even further, even when designing for a specific company and their subscribers, each email design can also depend on the type of message being sent. So, it depends!


Leave a Reply

Your email address will not be published.

The comment language code.
By submitting this form, you agree to the processing of personal data according to our Privacy Policy.

Related Posts