Striking The Balance Between Beauty And Function With Your email [Special Guest Anne Tomlin Of Emails Y’All]
Repeat after me, emails MUST be functional. A lot of times, we design and then try our emails like we are preparing for print magazine. There is a lot to consider when developing your email template. Things like how it will work on multiple devices, email clients, its accessibility to those that meet ADA requirements, not to mention if we want Alexa to read the email. There are some staple best practices to follow so that you can still have that beautiful email you want, but most importantly you have that functional email your recipients need (and deserve).
I decided to bring on a very talented, wizard-like email developer, Anne Tomlin of Emails Y'all. I have had the pleasure of seeing her work firsthand so there's no better person to provide you these design/development nuggets of wisdom.
Get connected with Anne at https://emailsyall.com/.
Also, check out her totally cool email swag at https://www.emailloot.com/.
And if you have questions for me, send them my way at email@example.com.
Listen to the podcast here:
 Striking The Balance Between Beauty And Function With Your email [Special Guest Anne Tomlin Of Emails Y’All]
Before we dive into this episode, there are a few things to note first. If you have any questions after reading any of our episodes, remember you can send them my way at Conversations@EmailGrowthSociety.com. I am so excited to chat with a trusted partner on the email design development front, Anne Tomlin from Emails Y'all. She is not only a very talented wizard-like email developer but she also designs and develops with the recipient in mind.
She is well-versed in what to do and not to do when it comes to your email templates as well as an expert in accessibility and diversity, equity and inclusion, which tend to be an afterthought in email. She shares some great tips for anyone to create both beautiful and more importantly, functional emails.
Anne, it is so great to see you and to have you on the show. How are you doing?
Thank you for having me. I'm doing great.
What does your shirt say?
It says email life. It's part of the brand-new store that I created and launched. It's called EmailLoot.com. I have lots of different t-shirt designs, stickers, mugs and a whole bunch of emails swag.
I need to buy a shirt for Monday through Friday now for clients because I'm also about the email life. As we get started, can you tell the readers a little bit about yourself?
I am a freelance email developer. I started as a web developer and was asked to do an email and loved it from the beginning. I dedicated myself to learning everything I could about email. I started getting more experienced with their jobs and somebody asked me to freelance so I did. I got so many clients that I couldn't do my full-time job and my freelancing at the same time. I took the plunge.
You have your own business as well.
It's Emails Y'all. I am from Texas so I say that phrase quite a lot.
At Email Growth Society, we have leveraged your help and coding excellence several times and it's very appreciated. The coding side of things. I'm curious. What made email so much more exciting to you than web development?
When people ask me this, I try to state the spatial element of it. There is a certain particular width of things and there's a layout that you have to keep within. With the web, it felt to me like everything was around willy-nilly. It was floating in the air. I liked the stability of having parameters that I can work with. It's pretty much the opposite of what every other developer enjoys.
That means it's meant to be, which is great. Email is lucky to have you.
I'm lucky I found it.
Most of our readers are eCommerce early startup mode. The whole idea of developing an email is a tricky one because they're not as in tune with deliverability and all of that. The best way to kick off this conversation for them is if you had to list the three things from your perspective that make you cringe most when you get a request for an email to be developed, what are they and why are they not ideal?
The timeframe is one of the more important ones. Being able to do an email in a day is pretty difficult.
Do you mean you can't just create an email?
I could if I tried hard. Sometimes the designs have too much detail to be able to do in one sitting. Most of the emails that I get are very complicated and have brand images or something cool about it. It takes time to build those things. The second thing would be dark mode. You have to design for dark mode now. There's no way around it. Those email clients that don't support dark mode media queries are going to take your colors and invert them either partially or completely. You got to think about what your email's going to look like in dark mode before you start designing it. It has to be in your mind while you do that.
That is such a good tip right there. We find that a lot and some of these colors look so bad. Not to mention that they almost disappear in some cases. It's terrible.
The dark mode is very helpful to some people with low vision and such. It's a great thing to have. It's just that some email clients don't allow me to control it the way that I'm able to control everything else. The last one would be having to maintain brand font to the point of not doing best practices. If you have an image with some text in it and that text is a brand font that you cannot change, that means it's going to have to be an image, which is not accessible at all. If people don't have images turned on, they don't get that message. It's important to be flexible and think of fonts as fluid, flexible and that type of thing. You should always have a web-safe font backup.
For every time I've heard this myself, I reach out to you and say thank you for bringing that up. That leads me now to my question about images. I find that in the more eCommerce retail higher-end, we see these beautiful image-heavy emails in some cases because they want to stay true to the font that the whole thing is an image.
You have the issue where people might not even see the image. In some cases, they could come up completely blank. If somebody is reading and they're sending emails like this, what are the best practices? How does somebody change their mindset? How many images do you use? What are some best practices?
There are brands that use big images that do it smartly. If you possibly can get your text out of the images so that your message will be in front of whoever is opening your email on whatever device they're opening it on. There are people who maybe can't see and have Alexa read your email. If your text is part of an image, Alexa is not going to read that. You get a blank email from whatever brands to you and then read the address of the brand or something like that. It's important that you get your text, app and image. I know that it's hard with the brand font but it's more important to get to your messaging in front of people.
Another one would be image size. Image size is important because most people are going to view your email on mobile. That usually involves some plans for usage like how many gigabytes. If you have a 900-megabyte image, that's going to take a long time to download. You're using up their data and you don't want to do that.
You want to keep your images including animated gifs. I know that one's hard too but you need to keep them below 300 kilobytes if you possibly can. If you go over one gigabyte with an image, that's not a good practice at all. Try and keep them under 300 kilobytes if you can. My absolute top limit is 500 kilobytes and that is if it's an awesome gif. Lastly, don't do one image emails. Combining the last two things I said, even if it's one big image, if you slice it into different parts of the overall image or use an image map, that's so bad. Please don't do that.
It happens so often. They're like, “I didn't use one image. I used seven different ones.”
Your message is way more important than how it looks.
Learning about those three things makes me go back to something I love about email and the fact that there's a human on the other end. We have to remember that. Sometimes we think of it as this vessel to continuously try to drive sales or conversion but at the end of the day, somebody is getting that. I often try to always say, “Put yourself in the shoes of this email and ask yourself, ‘Would you be okay receiving this one?’” If not then we should change it.
I know a couple of the clients I work with and probably a ton that you work with have designers. We know designers come with their own very strong-willed brand. It's all about the brand. From your perspective, from the design side, how can a company preemptively think through how this email could come to life from a design side? I know we talked about fonts and images. What else is there?
I try to tell my clients if I'm helping designers or anything like that is to think of email as a series of boxes or rectangles. You can put a ton of rectangles inside another rectangle but you cannot intersect two rectangles. There is no overlapping of rectangles in email design. You have to keep everything in its own little box. There are things that I can do using background images and such to get the same look while still allowing you to use images in an interesting way.
If you have a diagonal line and there's something that's popping over it, let's say there's a phone image or something over a diagonal line, I can do that because it's a background image and then you have the image on it. You got to think in rectangles and try not to not to overlap anything. It's hard to come up with examples because I'll just bring it up if I see it with clients. I'll be like, “This is a great design but I'm either going to have to do it this strange way or that type of thing.”
It's awesome if people can be a little flexible about their design to make it not easier necessarily but friendlier for all email clients. Everybody is opening your email to different clients and it has got to look great on all of them. The more straightforward you can get your design, the faster I can do it. It'll render well to everybody.
Off the cuff here, what would you consider a simple design? Sometimes designers create something or somebody has a design and they're like, “This is so simple. Maybe because it's got a white background.” What truly makes an effective and simple design in email?
A simple design would be one column. You would have images on top like images, text, image or whatever. You're not overlapping any images or texts. It's one column and usually with a header or footer of some type. Texts or images in blocks is the simplest email design you can get and there's nothing wrong with that. There are big national brands that use that. Famous Footwear is one that I did some work on. They use a single column and it works for them well.
That's a great example. I feel like companies are constantly trying to strike the right balance between beautiful emails and the side of function. Even from my perspective, I'm constantly looking from a deliverability perspective like, “Are we going to fire up spam?” I always see these designs that look like infographics or they're prepared for Print Magazine and you're like, “This is not going to work.” You’re talking about that single column is great. There are brands doing it out there. Are there any other tips you have about how somebody can break out of the mold and strike the right balance between beautiful and functional? I know the web font is one and image sizing.
I would say it's no more than four columns and use that sparingly. You can do some row of icons or whatever that keeps it simple. Let's go for the moon, design for the moon and scale back into what's possible. If you ever need inspiration for beautiful designs that are quite simple, you can go to ReallyGoodEmails.com. That's a resource I use all the time while I'm designing it because there are so many ideas out there and it's this one big depot of all these different types of emails. It's not necessarily copying but seeing for other inspiration.
Sometimes all you need is to see that somebody else did it and it's right. You're like, “It's all right to do this. I don't have to have this thing with 1,800 bells and whistles.” That's a good thought. One thing that came up for me that I want to touch on with you is ADA compliance and any tips here. What do we need to think about when we're thinking of ADA?
You have talked to the right person. I gave a talk on accessibility and such. When you're thinking about ADA, most of the time you're thinking about people with no vision, low vision, dyslexia and those types of thoughts. The things you need to think about are font size. ActionRocket did a survey on what's easier for you to read. Sixteen pixels with an additional four pixels for line height is the easiest for people to read. It's super detailed.
That's great for anyone reading.
Everybody hates Comic Sans. We love to hate on it but Comic Sans is one of the easier ones for people to read. Do not use Comic Sans because somebody tells you they don't like it.
There are all the memes in the world.
I'm all about LiveText. LiveText is absolutely necessary. LiveText being not in an image. Put alt text on all of your images. This doesn't need to be so descriptive like, “Man and woman on a roller coaster.” You don't need that. What you need is something that's appropriate for what that article is describing. You want to use that as an additional place to give more information or make a sale, a donation or whatever you're trying to do.
Make links look like links. This is important. This is such a big topic that everybody wants to talk about that everybody has an opinion on. You need to underline your links and there are reasons for that. Some people like to bold their links. Bold is supposed to be for emphasis. It could be used somewhere else for emphasis. If you are using it for a headline. That's for emphasis. Also, it's harder to read bolded text. It's harder to read it for people with low vision and it's not used for that.
Since the beginning of the internet, links have been underlined. Your audience, from the oldest person to the newest person that's reading your email, know that that's a link. Making the link a different color doesn't exactly work because those colorblind people may not be able to see that change. The only way that you can denote a link and have everybody understand that it is a link is you need to undermine it.
That is such a good reminder, especially for our brand enthusiasts who have a vision for it. They're like, “I don't want that underlined.” That's so interesting.
I totally get that design is super important but get the message in front of them first. That's what I think.
Is there anything in particular about colors? I've noticed and seen a couple of emails come through my inbox of pale colors with white text. It's hard enough for me to read. I'm wondering if there's anything around that.
High color contrast is necessary like light text on a dark background or dark text on a light background. If you end up with a pale yellow screen and you put white on it, that's hard for you and me to read. It's going to be difficult for somebody that has a color thing. High contrast is super important. There's a guide to this from Email on Acid. They have a little graphic that shows you what is a good color contrast and what is not. They go into the big details on that. If you're looking for a general sense of it, keep high contrast between your backgrounds and text.
That's a perfect segue to the other topic that has been on my mind, which is diversity, equity and inclusion, adding these elements into emails. I figured that you may have a couple of tips around this topic. What are some of the best ways to do this especially for brands that are trying to be conscious? What will they do?
You want to be able to show your subscribers that you know them, relate to them and care about what they think and do. You care about them and recognize that everybody's experience is different. We already talked about accessibility. There's so much more I could tell you about accessibility. It's super important to do that. When you're talking about text, you want it to sound human. People respond better to words and phrases that they themselves use. You want to avoid any jargon or euphemisms because euphemisms are polite ways of saying what's offensive. You don't want to go down that way.
Think about your pronoun usage. Think about using they/them or sprinkle it in and change it for each paragraph. Maybe you use he/him in the first paragraph and in the second paragraph, she/her. Images are a big deal with DEI. You want to use diverse images every single time. You got to think about diversity in gender, age, sexual orientation and race. You want to use not just the same people looking over each other's shoulders. You want to use that sort of thing.
There are a couple of resources that I can give you. It's BlackIllustrations.com and OpenPeeps.com. Those are two good places to get a variety of different images. Open Peeps allows you to create your own people. It has a whole bunch of different fashion plates. Do you remember those? It's like fashion plates and you can make a bunch of different people.
What about the companies that always use product images and you never see any lifestyle to that? Do you think that's okay to do? Do you feel like every brand should try to incorporate?
That's a brand preference. There are some things that lend themselves to images of humans, pets or things like that. There are some products that look and function better if you think of them as standalone. I'm not going to tell anybody to use any specific images.
To wrap up, I always like to make sure that we summarize the most important part. If I'm a business owner, I'm trying to design my own templates and I don't have a superhero like you, what are the three most important things that I can consider if I'm working in a tool like Klaviyo, Mailchimp and HubSpot?
First, use the data you have and if you don't have data, get data. It is very important to know who your subscriber is. If you know your subscriber, you can tailor your content to them and get more sales and donations. Also, you can use that data to do dynamic content. You're serving everybody the content they want. You want to think about that and think about your audience. Please use LiveText and do what you can do with the resources that you have or that you can afford.
We talk about best practices like, “They're necessary. You've done such a horrible job. If you haven't ticked every box.” These are best practices. It's not like you must have them. Do what you can and what works for your audience. If you have nobody in your subscriber list that uses Outlook, you don't need to spend time on that and coding for Outlook. Don't even bother with that. That's extra work you don't have to do. Do what you can do within the parameters you have. It's great to do the best but you got to do what you can do.
That was a great way to end. Everyone is so wrapped up in best practices or like, “What is everybody doing?” My favorite thing, I don't know if you come across this a lot is when somebody is constantly sending you their competitors' emails and they want to do exactly what they did. You have to ask yourself like, “You don't have their data. We don't even know if those work.” That was a great way to end. Before you go, let the readers know how they can get ahold of you. Where can they find you?
You can go to EmailsYall.com. That is for talking to me about email design and development. You can go to EmailLoot.com. If you are interested in getting some email swag, you can contact me there too.
Thanks so much for joining me, Anne.
Thanks for having me.
I love Anne. What I love most about her is that she embraces functionality, which is key to email. Remembering that there is a user on the other end that is going to need to be able to interact with your email, no matter what device they are on, what email client they are using and if they're colorblind or need Alexa to read them the email. I hope her tips opened your eyes to lean more on the simple side. Also, always use LiveText. It's time to take Anne's tips and bring them to life in your own email. Until next time, happy emailing.