Ted Goasis the Principal Product Designer of Stack Overflow, creating better workflows for over 50 million developers. A designer and a front-end developer, he works on website, applications, and HTML emails. He’s also the founder of Cerberus, an open-source platform that helps people design great emails.
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.
Here’s our first podcast featuring Ted, wherein he talks about email design and development, also sharing some best practices.
Also listen to Expert Diaries on:
Audio Transcript:
Aishwarya: Design and development are integral components of an email campaign, and definitely the most time-consuming ones too. But, what if we can tell you in just a few minutes the right design techniques and strategies for creating successful emails? Welcome to The Zoho Campaigns Expert Diaries. I’m Aishwarya and I’ll be your host for today. With me, I have Ted Goas, the Principal Product Designer of Stack Overflow. Ted also owns an online community platform that simplifies email creation and design by providing responsive email patterns.
Hello, Ted! Glad to be speaking to you today.
Ted: Hello, nice to meet you!
Aishwarya:
Let’s get started with one of your favorite lines, “Design is about taking the complex and chaotic and making it accessible to people.” Wow, this is a great thought! So, what made you adapt this principle?
Ted: So, I’m a Product Designer. Designers and developers can be fickle creatures who get lured in by new and shiny things very easily, myself included there. It could be a cutting-edge technology that only works on the latest devices or a cluttered design pattern that most users don’t really understand. So, it’s easy I think, to stay in our bubble and lose sight of actually what we’re making things for, and how we can unintentionally exclude people by making certain design decisions.
I tried to remind myself while working that I’m not the user and that just because I think something is understandable or neat doesn’t mean my end users will feel the same way. And, I firmly believe that the world doesn’t need new and innovative interaction patterns as much as designers believe. It just needs stuff to work, so I started making my work approachable and understandable to everybody.
Aishwarya: Well said! You know, some of the most complex problems have the most simple solutions, right? So, that’s a very interesting concept!
We see that you own an interesting project called Cerberus. Could you give us a little more information about how this project took shape and how it’s useful for email marketers?
Ted: Sure, absolutely! A few years ago, I kind of set a personal goal to give back to the design and email community that has taught me and given me so much over the years. At that time, I’d been creating a whole lot of HTML emails but I really couldn’t find too many resources online that document all of the ins-and-outs of what it takes to get emails render properly across email clients. So, I had these emails I’d been working on, and I used them to create a fairly in-depth responsive email templates that contain a handful of these common email patterns that work in email clients, even including the difficult ones like the Gmail and Outlook. Since I had done this work, I wanted to open-source it on GitHub so that anybody could use it and learn from it. And, I used it as a starting point for all of my personal email projects like my email projects at work, email projects that are there on the side, evolving along the way with the new things I find and learn, bugs that I fix, and things like that.
Over time, I noticed that other folks in the industry started using it as well, adapting it to their own email projects. And, that’s also the basis for Stack Overflow, my employer, and our design systems. We’ll talk about that in a little bit. It’s been a very happy and humbling journey to see how folks across the industries—from marketers to designers and engineers have started using Cerberus and they would start asking questions on how to use this for their own projects or even report bugs, so it’s been a great symbiotic relationship that way.
Aishwarya: Ah, nice! Giving back to the community is such a wonderful concept, and it shows how we as email marketers can help one another achieve success in our respective journeys. And, this whole concept of ‘open-sourcing’ is very powerful, and I’m very very happy for your project, Ted.
What’s that one thing in email design that might look simple but takes a lot of effort and practice?
Ted: I work a lot on web pages and emails as well, so I have a foot in the web-world and another in the email world. And, I’d say that getting email layouts, columns, and spacing, consistent across email clients, is very difficult compared to the web. On the web, achieving layouts like this has become comparatively easier. Most browsers these days have pretty good support for things like the box model, advanced CSS techniques, media queries for making designs responsive, and layout properties like flexbox and CSS grid that allow fine-tune control over layouts.
Unfortunately, the same can’t be said for email clients—email clients do not support any of these CSS properties that I just mentioned, so it requires a lot more effort to achieve the same layout in an email client. We still use tables, if you know tables for layout in emails, we’re pretty clever in using ‘min’ and ‘max’ widths to simulate responsive designs when media queries are not supported. We have to learn to be strategic in including padding in certain locations so that the layouts look good. And, even hacks like using the MSO tags to kind of hack Windows and Outlook. Overall, there’s a lot more clever code to recreate an email layout instead of just taking few lines of code from the web. That’s something that looks simple but takes a lot of effort in emails.
Aishwarya: Yeah, that’s a great point! I think some extra effort and time into designing layouts can make an email campaign go a long way, and I hope email marketers who are listening to us now will learn from this.
What do email marketers commonly overlook while designing templates?
Ted: Well, I won’t say they commonly overlook it, but one thing I might say is copy editing. I heard recently in another webinar that an average adult reader can read only about 250-300 words per minute. So, that means, if the average reading time for an email is 11 seconds, you know because we all get so many emails, that means the ideal length for an email is about 50 words. But, 50 words is not a lot, and it’s hard to get your message across in 50 words. I mean, I can’t even answer this simple question in 50 words! So copy editing is one thing that shouldn’t be overlooked.
And, just one more thing is, don’t forget about the sender name and the subject lines—I feel like those are some of the popular ones that aren’t necessarily forgotten, but there are also finer details like the preview text—some text that’s placed in the inbox and sometimes often forgotten until the last step. Also, things around subscription info that are sometimes overlooked—like how do you list your unsubscribe link, how do you code your email preferences to fine-tune things—stuff that’s often towards the end of an email, away from the primary message and can be overlooked as well. So, don’t forget those things.
Aishwarya: Oh, yes! This concept needs enough attention, and it’s high time we as email marketers understand that emails are meant to be read, and not just delivered effectively. And, as you mentioned, those very small points like subject lines, sender name, or pre-headers can go a long way in helping emails get that attention among the readers and actually be read by them instead of just being there in the inbox, getting delivered.
Ted: Yeah, for sure!
Aishwarya:
In one of your articles, you spoke about how Stack Overflow grew from a low volume to high volume environment, sending nearly four million emails to contacts across 70 categories. What are your personal email marketing takeaways from this experience?
Ted: So, my main takeaway I guess is that at a volume of this scale, get a design system to support email design and production. And, I can share the story about what email design was like when I joined Stack Overflow, about three years ago. At Stack Overflow, three years ago and even today, email production is decentralized in the company. There isn’t a single email team that’s responsible for the company’s emails. Multiple teams work on email, to support their various lines of business, but these teams don’t always talk to each other. They’re empowered to just kind of design and deploy whatever emails they think make sense. So, this created an email environment where the emails were:
- Inconsistently designed and sometimes off-brand because we didn’t have a shared record of email design.
- Very expensive to make—we’d spend a lot of time recreating the same emails. Because Team A didn’t know that Team B created this email a couple of months ago, so they’d just do it again!
- Often broken because nobody at the company really specialized in email and folks never really weren’t sure if they were doing it “right.” Like, things I mentioned about how it takes more effort to build an email layout than it does to build a web layout.
As you mentioned it, at Stack Overflow’s scale, so this was a big problem. Our email design process was completely undocumented and every email was treated as a one-off. This made things like creating emails very slow; they were often inconsistent, difficult to test, and near-impossible to maintain especially as our teams grew and work volume went up even more. Simply put, our undocumented bespoke email design didn’t scale. So, with an email design system in play, it saves time and money by standardizing some of the more common email components and how they should be used, improving email consistency, and educating everyone on the team on how to build proper emails.
Aishwarya: Wow, that’s interesting! So, the way I see is that these email design systems are like patterns that we create, curate, and iterate for successful email performances. Right?
Ted: Yes, that is part of it. So part of it is the components themselves, like say buttons or images or logos and then there is also the guidance on how and when everything should be put together.
Aishwarya: Right. That’s great. I think then there is a clarity among teams and email marketers will know what color to choose or what pattern or what font to take for the text that they are putting in the emails which make it more standardized and more consistent with readers.
Ted: Yes, those are some excellent examples.
Aishwarya:
I know you’ve created some design systems for emails but email design varies according to industries. So does this mean each email design system is unique, or is there a common pattern all marketers can follow?
Ted: I think that there are some common patterns that folks can follow but ultimately every design system will be, and I will go into that in a little bit more detail, but first I think this is a good time to define exactly what a design system is.
Aishwarya: Yes
Ted: So, there are multiple definitions [for] a design system, but I like this one from Marco Suarez who is a design systems consultant, previously at InVision. He defined a design system as a collection of reusable components guided by clear standards, that can be assembled together to build any number of applications.
Now, I think that definition is great.
I think of a design system as a light-weight scaffolding and guidelines to design with, rather than just recreating things from scratch or from plain sight. Another thing that I think separates a design system from something like a framework or a pattern library is those guidelines on how and when the pieces should be used. I think you were hinting at that a couple of minutes ago.
Aishwarya: Yes, yeah.
Ted: And I think that is the part that makes a design system unique to each team, because each team has to make those choices for themselves based on their users, their goals, and their business needs.
It is helpful to do a little bit of competitive research to see what others are doing, but ultimately a design system serves the organization for whom it’s built.
Now, we mentioned that there are some common things, like I think everybody probably has things like buttons, and images and typography; so those are probably some common threads that most teams will want to include in their design system, but ultimately they need to design what that looks like and how and when it should all be used.
The only…the last bit of advice I would say is to not let great be the enemy of good; one way to figure out some of these common patterns for your own team is to kind of ship or release design systems pretty early so that the team can start using it. Because this will help you understand, hopefully, where folks on your team are struggling or what you should build next. Like to give you an example, when we released our first version, our Stack Overflow design system, I think we included only one button, a couple of typography styles and like a responsive-aware wrapper that made a single column of text squish down on mobile and folks started using that, almost right away. And it was after a couple of weeks that folks started asking for things like tags or logos or footers; they were actually asking us “hey, do we have things for this?”. And we said, “no, we don’t. We shall build that next, because that seems like what would be helpful to you.”
So that’s how we decided what things we should build by looking internally, and listening to the team who is using our email design system.
Aishwarya: Yes, totally. I think each brand is unique and as you mentioned teams should learn to test and optimize designs which will in turn lead to some ground-breaking practices.
Ted: Yes.
Aishwarya: Great!
Could you list a few things email marketers who may not be very tech and design savvy can keep in mind while designing emails to get the best output?
Ted: Sure, absolutely! First and foremost, know your audience. What do they prefer, how do they prefer to consume email? Do they generally, like for instance, do they generally prefer text or images? As an example, for Stack Overflow, our users are mostly programmers who tend to be OK with reading long passages of text with very few images.
Know whether your users will read long emails or if we should be keeping it short. Do your users appreciate small touches like little animations or even jokes in emails?
So, just being familiar with your audience and what they prefer helps inform how emails should be designed.
Second, a bit of advice is, don’t forget to QA. You know as I mentioned before, just because an email looks good in a browser, doesn’t mean it will render properly in an email client. And that’s even if your team is using a design system; design systems still don’t replace the need to QA emails. It just kind of speeds the process up pre-testing certain parts of an email. And lastly at some point, it’s, on our team, it’s helpful to loop in a designer. So, you know, if email marketers should feel empowered to build their own emails but it doesn’t replace the need for a designer. You know, designers don’t need to build every email from scratch; but they should at least QA and critique an email to ensure everything is on brand and everything in the email is being used properly.
Aishwarya: Great tips, Ted. Time to note these down, email geeks, because I think some of the key points show the little efforts that email marketers need to take to make sure that the emails are rendered properly for the readers and they also tend to reciprocate by responding to your emails.
Ted: Yes, yeah, they do.
Aishwarya: Here we come to the final question of this session.
What forms of testing can an email marketer adapt to ensure the email design stays intact in various browsers and clients? It is just an extension to what you just mentioned in the previous question.
Ted: Yeah, I feel like I would answer this by taking bits and pieces of other things that we have talked about.
First, I think, emails should start with an email brief. You know, it helps the team align on what the message is going to be, and logistics of content, so this is where we could be writing content and we could also define things like the subject line and things like the preview text, you know things that we may or may not forget down the road. So starting with the email brief is always helpful.
Second, if a design system exists on a team, even if it’s one for the web, it’s helpful to use it. This will help ensure that email designs are on-brand and hopefully render properly in email clients. If a design system does not exist, it is helpful to loop a designer in to help with this.
And a third tip is to find a way to automate email client testing and accessibility, so I think that’s, you know, while it is helpful to send test emails directly to stakeholders, using tools like Litmus or Email on Acid can really speed things up when it comes to testing how emails render in various email clients and how they are experienced by assistive technologies such as screen readers and like the Alexas and the Google, like the voice activated devices that can read email as well.
Aishwarya: Certainly. Again, the best points people can follow for their upcoming email campaigns.
To add on to your point, yes, I think, conversational AI is slowly entering into the market and a lot of people are currently using these voice controlled devices to read their emails. So I think email marketers, along with the traditional practices they follow should also keep in mind the conversational AI techniques that they need to incorporate in their emails to make sure that when read by a bot the email still makes more sense.
Ted: Yeah, absolutely!
Aishwarya: Thank you very much for today’s session, Ted! I’m so glad that you discussed about email design systems which most of the email marketers will find fascinating. Also, your tips on designing templates and optimizing emails for design could help email enthusiasts simplify their work.
Ted: Great, yeah, thanks for having me, and I hope you could find it useful.
Aishwarya: Yeah!
Today’s session is a jump-start to email marketers looking out to create great designs for their newsletters. Thanks to everyone who is listening, and to know more on such exciting email marketing best practices, stay tuned for the next episode of The Zoho Campaigns Expert Diaries. Until then, see you all!
Comments