We owe this tradition to our dear friend and contributor Jay Oram of ActionRocket who first showed us how to add wintry vibes in email campaigns six years ago. Be sure to check out more of Jay and the ActionRocket team’s work – you’ll be inspired to go further with email.

‘Tis the season for surprising and delighting your subscribers, and this is a fun way to do it.

Can ChatGPT code falling snow for HTML emails?

Just for kicks, we decided to ask ChatGPT if it knew how to code falling snowflakes in an HTML email. Here’s the reply we received:

You’re not exactly wrong, ChatGPT, but you’re not trying hard enough. Sure, we could have used a different prompt and kept trying, but it’s the busy holiday season. Ain’t nobody got time for that.

The AI answer went on to provide a couple code snippets using a GIF as a background or an inline SVG. But we’re talking about something different here.

This tutorial shows you how to get falling snowflakes in the foreground of your email using CSS animations. The result is an email campaign with some depth of field, almost giving it a 3D effect. That may be overstating things just a little – but it’s pretty cool.

How an animated snowflake effect looks in email

Take a look at the email newsletter Jay coded up for us back in the day. We’re willing to bet most of the emails you opened over Black Friday and Cyber Monday did not include little snowflakes gently falling down your screen. If they did… we’re also willing to bet they learned how here.

This isn’t the sort of thing you expect to see in a typical newsletter or email promotion. But here’s the thing… Once you’ve shattered your subscribers’ expectations, you’ve set the stage for even more inbox surprises.

That could very well mean higher open rates and increased email engagement. Now you’re subscribers will be wondering what they might find the next time they check out your email marketing campaigns.

You know how a gift always looks better with a bow on top? Think of this as that finishing touch that makes opening an email come with a little holiday magic.

Email client support for CSS animations

Unfortunately, nothing in email development is perfect. This technique uses CSS animation and keyframes. According to CanIEmail.com, these are only supported in clients using WebKit as the rendering engine, which is mainly Apple Mail and Outlook for Mac as well as Samsung and Thunderbird.

But if you check out your email analytics, that could be significant portion of your email subscribers. You’ll find out how to target clients that support CSS animations

Standing out in the inbox is a never-ending challenge. Putting in a little extra effort in this way makes your emails memorable. But enough with the fluff. Let’s turn things over to Jay Oram and find out how to let it snow. Here’s his animated snowflake tutorial for email developers looking to spread holiday cheer.

Setting up the snowflake CSS animation

The snow effect is essentially a snowflake or shape in a div that you animate using CSS. This technique moves the image from the top to the bottom of a container div you place around your email tables.

CSS animations work on a range of email clients including iOS, Apple Mail, Android Native Mail and Outlook for Mac. The snow animation won’t display on other email clients, so you don’t need to provide a fallback.

First, we set up the media query to detect the webkit, that will support the CSS animation.

                            

                                @media screen and (-webkit-min-device-pixel-ratio: 0) {
}
                            
                        

Next, we set up the container the snow will be in.

                            

                                .snowcontainer{
  position:relative;
  width:100%;
  overflow:visible;
}
                            
                        

Creating your snowflakes

We then need to define the snow. The simplest way to do this is to use a shape that doesn’t need an image, such as a square. You can create a square by setting height: 18px by width: 18px and setting a border-radius that is half the height (to gain a perfect circle), border-radius: 9px. Set the position:absolute  so the snow will be positioned within the container and top: -20px to start the animation before it enters the snowcontainer. Finally, add a background-color to set the color of the shape.

It looks like this:

Here’s the code for the shape snowflake:

                            

                                .snow{
            height: 18px;
            border-radius: 9px;
            width: 18px;
            position: absolute;
            top: -20px;
            background-color: #ffffff;
      }
                            
                        

Another way to add a snowflake is to add a background image. This technique is similar to to the square technique above, but it uses a background-image and no border-radius. With these changes, the snowflake will appear like this:

Here’s the code for the image snowflake:

                            

                                .snowimage{
  /* size of image */
  height:18px;
  width:18px;
  /* absolute - relative to the container div */
  position:absolute;
  /* Where animation starts */
  top:-20px;
  /* image link */
  background-image:url('images/snowflake.png');
}
                            
                        

Setting the background-image as a .png means the snowflake will have a transparent background and show the content through it. If you need some snowflake inspiration, check out the Noun Project’s snowflake icons.

Animating your snowflakes

With the code as is, we just have some shapes within a <div>. To animate them, we can put together a shortened version of an animation. See below:

                            

                                .snow1{
  animation: snow1 5s linear 0s infinite;
 }
 /* animation: Name of animation / length of animation / timing function
(linear = same speed from beginning to end) / delay (time between
animation end and start) / number of times */
                            
                        

This animation is called snow1. We define the length of the animation as 5s (five seconds) and the linear timing function. The linear timing number keeps the animation the same speed throughout – 0s (zero seconds) is the delay before the animation starts again. Finally, we include the number of times the animation will run (infinite).

By creating a few different animations with slightly different lengths and delay time, the snow will fall at random.

                            

                                .snow2{
  animation: snow2 6s linear 1s infinite;
 }
 .snow3{
  animation: snow3 7s linear 2s infinite;
 }
                            
                        

Next, we set up the keyframe animations to dictate where the snowflake will move to and from.

                            

                                @keyframes snow1
 {
  0% { top:0%;left:50%; }
  100% { top:100%;left:65%; }
 }
                            
                        

At the start of the animation (0%), we position the snowflake at the top of the div (0%) and 50% from the left. At the end of the animation (100%) the snowflake is 100% from the top and 65% from the left.

By setting the start and end points slightly different in each animation, the snow will seem to appear more at random.

                            

                                @keyframes snow2
 {
  0% { top:0%;left:30%; }
  100% { top:100%;left:25%; }
 }
 @keyframes snow3
 {
  0% { top:0%;left:70%; }
  100% { top:100%;left:60%; }
 }
                            
                        

HTML for the snowflake animation

Once you’ve created the CSS animation, you’ll need to add this effect to your email using HTML. To create this animation technique, the first bit of HTML you need is a <div> to open the snow container. You can set the height and width of the container to establish where the snow will show. For example:

                            

                                <div class="snowcontainer" style="width: 100%; height: 500px;">
                            
                        

Next, each individual snowdrop needs to be set. To do this, start with a <div> with the class of the snowimage or snow as set up in your CSS. Follow that with the name of the animation (e.g. snow1). The code should look like this:

                            

                                <div class="snowimage snow1"></div>
                            
                        

Then, add in all the snowdrops and animations within the snow container. See below:

                            

                                <div class="snowcontainer" style="height: 500px;">
  <div class="snowimage snow1"></div>
  <div class="snow snow2"></div>
  <div class="snow snow3"></div>
                            
                        

Place all your email content you would like below your snowdrops and finish with a closing </div> to end the snowcontainer.

Get all the code and see it in action from Jay Oram on CodePen.

Other ways to use this CSS animation in emails

Thanks again to Jay Oram of ActionRocket for the tutorial and code snippets above.

Christmas only comes once a year, but you can use this CSS animation all year long if you put your creativity cap on. Here are a few ideas to get you started:

• Autumn leaves for fall themed emails. This could be a way to have fun with back-to-school email marketing.
• Colorful falling confetti to celebrate just about anything, including birthdays, anniversaries, and other milestone emails.
• Matrix-style raining code could be a memorable way to enhance emails to a tech-savvy audience.

It can also be raining cats and dogs, or raining men (hallelujah), or turkeys or frogs could be falling out of the sky. Heck… you can drop tons of little poop emojis in emails if that’s your thing.

Take your emails to the next level…

Of course, this is the kind of things that stops being surprising and could easily start to get annoying if you over use it. So, if you want some other ideas for creating engaging emails, check out these classic episodes of Notes from the Dev: Video Edition with Megan Boshuyzen.

Rollover images are a simple yet impactful way to add interactivity into email. Nout Boctor-Smith shows you how to pull it off.

For more advanced interactivity, Emre Demirel showed us how he gamified an email with a rock, paper, scissors you can play in the inbox.

Jay Oram brought us even more inbox fun with a Wordle game for email. And you can follow along as Megan Boshuyzen explains how she coded her award-winning interactive email for Email Camp: Road Trip Edition.

The post Let it Snow: How to Use CSS Animations in Holiday Emails appeared first on Email on Acid.

Not only does an inaccessible email marginalize some of your contacts and customers, but it’s also going to have a negative impact on email performance, brand reputation, and the overall business.

The reason is simple: If people have trouble viewing, reading, clicking on, or understanding your email campaigns, they won’t take the actions you expect.

Of course, the real reason to focus on accessibility in email marketing is because it’s the right thing to do. So, let’s explore this important topic more. Our complete guide will cover email accessibility best practices and how to design and develop campaigns for every subscriber on your list.

What is email accessibility?

Accessibility is the practice of making things meaningful and easy to use for people of all physical and cognitive abilities. The goal is to let as many people as possible access a resource. That could include a building, a restroom, an event or activity, a website, an application, or an email.

Email accessibility is the practice of writing, designing, and coding HTML emails that people can easily understand and engage with regardless of their physical or mental constraints. That includes optimizing emails for people who use assistive technology to access the internet and their email inboxes.

Improving email accessibility is a big commitment. It takes time and effort. But if you want an effective and inclusive email marketing program, it’s worth it.

Are email marketers focused on accessibility?

For the past few years, the Email Markup Consortium (EMC) has conducted research on email accessibility. Since 2021, the EMC analyzed hundreds of thousands of email campaigns to get an idea of whether brands and marketers are working to make emails accessible.

To put it bluntly, we’re doing a pretty horrible job. More than 99% of the emails analyzed contained accessibility issues considered “Serious” or “Critical,” and that stat has not changed much since the EMC began its annual research.

I spoke with two of the EMC’s administrators about the 2024 findings during an on-demand session of Email Camp MessageMania. Check out my Q&A with Alice Li and Naomi West below.

The point of conducting this research is not to shame email marketers for dropping the ball on accessibility. The idea is to raise awareness about the importance of taking the time to make emails more accessible. Naomi West called it a “glaring issue” and a sign that something was “gravely wrong in the industry.” She feels accessibility is a human right. However, Naomi also admits there was a time when she simply didn’t realize what needed to be done.

When I started learning about email accessibility I was just like ‘Oh my goodness.’ There are all these things I had no awareness that I was doing wrong or could easily course correct.

Naomi West EMC Administrator

There are a bunch of things you can do to improve email accessibility starting today, and many of them are quite simple. We’ll tell you more and show you how to do it throughout this article. But if you want to get right to the good stuff, check out my article on how to code accessible emails.

Why is accessibility in email marketing important?

To paint a picture that illustrates the importance of email accessibility, let’s put ourselves in the shoes of someone with a disability…

Imagine you get an email from one of your favorite ecommerce brands. You’re excited about the offer mentioned in the subject line, but your excitement fades when you open the campaign.

Color contrast issues and a tiny font make it unreadable. You’re not sure where to find the promo code or where you should click. Tap targets on CTAs are too small on your mobile device. You try using software that reads the email to you, and it sounds like nothing but a confusing mess of garbled words and numbers.

That’s the kind of experience a subscriber with a vision impairment or other disabilities could have when senders fail to consider email accessibility. However, people with disabilities are far from the only ones who benefit from a focus on email accessibility. Making it easier to read, click, and comprehend email campaigns improves the experience for everyone on your list. As an added bonus, it also supports better email engagement and overall campaign performance.

While there are plenty of people who deal with a disability, it’s a mistake to think of email accessibility as something you do for a small subset of subscribers. At any given time, an injury, surgery, or temporary situation could mean someone is counting on your email to be accessible. As Alice Li pointed out during our Email Camp panel discussion, accessible digital communication will become even more important as Gen X, Millennials, and even Gen Z get older and start having issues with vision, dexterity, and more.

We are all only temporarily ‘abled’. We need to consider, as our digitally native generations age, how we can all continue to access web-based information like email.

Alice Li EMC Administrator

Accessible emails not only ensure your marketing messages are easy to engage with, but they also support crucial customer communications delivered to the email inbox. That could include anything from transactional emails to messages delivering important health and safety information. Think of how brands relied on email during the COVID-19 pandemic, for example.

Failure to deliver accessible emails may even get you in legal trouble…

Accessibility regulations and standards for email

The most well-known and comprehensive law connected to accessibility in the U.S. is the Americans with Disabilities Act (ADA). This legislation protects the rights of individuals with disabilities, and it has been the basis for many lawsuits in which businesses are sued for failing to provide accessible experiences.

So, do any of the regulations in the ADA apply to email marketing? The ADA became law back in 1990. At the time, the internet, email, and digital media weren’t at the forefront of lawmakers’ minds. There are no specific guidelines for accessible websites, emails, or applications.

However, the Bureau of Internet Accessibility explains that Title III of the ADA “prohibits businesses from discriminating on the basis of disability in places of public accommodation.” Technically speaking, a website, app, or email could also be interpreted as a “place of public accommodation.”

What’s more? Transactional emails such as order confirmations, shipping updates, and password resets, should be always accessible because they’re more than marketing. Those communications often contain very important information that all your subscribers need to easily access.

Various industries have their own regulations and requirements around accessibility. Check out our article on email accessibility regulations by industry to find out more.

While the ADA has no direct technical guidance on digital accessibility, the group responsible for providing global guidelines in this area is the Worldwide Web Consortium (W3C), which publishes the Web Content Accessibility Guidelines (WCAG).

Currently, brands should be trying to follow WCAG 2.2. Updated guidelines are on the way, but WCAG 3 is not expected to be released for a few years.

Statistics on disabilities and accessibility

While it’s not hard to see why email accessibility matters, it helps to have some facts and hard numbers that drive the point home. Consider these accessibility statistics…

Over one billion people are estimated to live with some sort of disability. That’s approximately 15% of the world’s population. To break that down a little further:

• At least 2.2 billion people worldwide have some level of vision impairment. About 217 million of those individuals have moderate to severe vision difficulties.
• Hearing impairment is the third most reported chronic problem among the aged population, but 65% of people with hearing loss are younger than retirement age.
• Globally, 1 in 12 men and 1 in 200 women experience some level of color blindness.
• Around 5-10% of the global population is dyslexic.

So, if your emails aren’t accessible, you may be delivering a poor experience for a significant portion of your subscriber list.

Email accessibility studies

When we surveyed marketers for the “Accessibility in the Inbox” report, more than half of those questioned said they do consider accessibility factors during email production. But further questioning revealed that many weren’t doing nearly enough to truly support email accessibility.

For example, more than 50% of those surveyed said they were doing things like writing short, descriptive subject lines and keeping paragraphs short for readability. However, just 14% said they were using accessibility testing tools, and less than 25% said they were writing alt text for images.

You can also dive into the Email Markup Consortium’s latest research. The 2024 accessibility report provides insights into the most common missteps among email marketing teams while offering some actionable advice on how to fix those problems and make improvements.

Another helpful study comes from ActionRocket and Beyond the Envelope. In 2021, they teamed up to survey everyday people about important accessibility factors. That included asking participants about the types of text, color contrast, links, and layouts they found easiest to interact with or consume. Get the results in the Email for All report.

How email accessibility supports marketing efforts

Ignoring the need for accessible emails is certainly inconsiderate for subscribers with disabilities. But it also means missed opportunities and potential pitfalls for your marketing efforts. Here are six reasons why improving email accessibility supports a brand’s marketing strategy:

1. Accessible design improves usability for everyone on your list

Because human-centered design is at the core of accessibility, the changes you make — from color contrast to font sizes — will benefit every person on your list. They’ll all enjoy a fuller, richer inbox experience, which ultimately increases your return on investing in email accessibility.

2. Email accessibility helps you reach more people

With accessible emails, you can reach everyone on your list, including those with permanent disabilities or temporary impairments. If your emails aren’t accessible, you’re automatically excluding a subset of your audience and reducing your reach.

3. Accessible emails improve engagement and retention

If subscribers can’t read your email content or interact with your calls to action (CTAs), then they literally can’t engage with your emails. They also won’t be likely to stick around for future emails, either. That can negatively impact your email program performance while increasing your unsubscribe rate.

Find out more about how accessibility and email engagement are connected.

4. Following accessibility best practices minimizes legal risk

The number of website accessibility lawsuits filed in 2022 increased by 12% from the previous year.  And there were likely many more unreported state lawsuits and demand letters with out-of-court settlements. Litigation is a serious threat to any company not meeting the needs of its entire audience.

But shockwaves from a lawsuit reach far beyond the economic damage. Even if it doesn’t have merit, when customers hear about these cases, their opinion of your brand is diminished.

5. Accessible email design separates you from competitors

If someone gets two emails from competing brands – one they can read and interact with and the other that isn’t accessible – which email do you think they’ll click on? Who do you think will win their business?

Even if they’ve been purchasing from your competitor for quite some time, if your accessible emails are easier to engage with and understand, they’re more likely to make a switch.

6. Accessibility enhances your brand

Knowing your audience is at the heart of every good marketing strategy. By making your emails accessible to everyone, you’re speaking directly to their needs and showing that you understand their everyday lives.

Thinking about subscribers as people rather than just contacts in a database shows that you care about them and put their needs first. The Association of National Advertisers (ANA) cites a study that found 92% of consumers want brands to practice empathy. That means creating accessible emails that show you understand how people with both temporary and permanent impairments engage with your brand.

Find out more about how to add a human touch to email marketing.

Types of disabilities email marketers must consider

When you focus on accessibility, you’re accommodating a variety of disabilities and impairments. Here’s a list of disability types, along with a few ways you can support subscribers with these challenges when building your emails:

Vision impairments

Vision disabilities go far beyond blindness or low vision. They also include color blindness and those who have sensitivities to brightness, cataracts, glaucoma, and diabetic retinopathy.  Vision impairments are the most likely way a subscriber would have trouble accessing an HTML email. For example, astigmatism is a condition that can make it hard to read emails in dark mode.

There are many ways you can improve the email experience for people with impaired vision. That includes providing appropriate color contrast in your emails, using a readable font/font size, and coding emails so they are compatible with screen reading software.

Auditory impairments

Auditory disabilities include those who are deaf or hard of hearing. Someone with an auditory disability might have trouble with the volume of sound, frequency of sound, or phantom noises (called tinnitus).

In your emails, consider things like video captions and podcast transcripts.

Cognitive issues

People with mental limitations that affect memory, problem-solving, attention, or comprehension. For example, dyslexia is a common cognitive issue that can impact the ability to engage with an email.

When building emails, use a simple layout and presentation, avoid technical language, include clear instructions when necessary, and steer clear of distracting animation.

Neurological conditions

People with conditions that affect the central and peripheral nervous system — brain, spinal cord, cranial nerves, etc. This includes things like strokes, epilepsy, dementia, Parkinson’s disease, and brain tumors. ADD and ADHD are also neurological disorders that may impact how subscribers engage with email campaigns.

Make sure your email is easy to navigate, break up text into smaller sections, and avoid precise actions that would be difficult for someone with tremors or who is using a mouth stick.

Physical limitations

Physical disabilities include those who have weaknesses or limitations of motor control. It may also involve problems like tremors, lack of coordination, paralysis, joint disorders such as arthritis, and missing limbs.

Ensure that your email can be easily accessed with keyboard navigation and screen readers.

Speech impairments

This includes people who are unable to produce speech that is recognizable by others or by software. Muteness and stuttering are just two examples here. Include options in your email to get in touch beyond a phone call, like a contact form, live chat box, or a reply-to email address.

In fact, accessibility is another reason to stop using a no-reply from address in your campaigns.

Temporary impairments and environmental considerations

This includes a wide range of factors that temporarily make it difficult for people to consume your emails: broken arms, missing glasses, slow internet speeds, using a mobile phone in the sun, watching video without sound in a public space, or even using Alexa or Siri.

Remember, the same people that easily consume your content now might have eye surgery or carpal tunnel in a few weeks.

Writing accessible email copy

Accessible email copywriting helps people who may have cognitive, neurological, or visual impairments. But writing content with accessibility in mind makes email copy easier for all your subscribers to read and understand.

Avoid writing too many long, complex sentences. That goes for paragraphs too. Big blocks of text are harder to read. Using active voice and clear language that’s free of jargon is also more accessible, and it’s a best practice for writing overall. While it depends on your target audience, an 8th-grade reading level is considered accessible for 85% of the general public.

It’s also helpful to use things like headings and subheadings as well as bullet points. This helps organize content in a logical and meaningful way. That makes email copywriting easier for both people and assistive technology to navigate.

Alt text (or alternative text) is intended to describe images and graphics online. Every important image in an email campaign should have alt text. It may be a good idea to have copywriters or email marketing specialists compose alt text rather than leaving it up to developers to decide what it should be.

Here are some quick tips for writing alt text:

• Use different alt text for each image, even if the images are similar. Imagine how confusing it would be to someone using a screen reader if all the pictures were described the same way.
• Don’t add image title text in addition to alt text. Most screen readers will read both the title text and alt text, which doesn’t provide an ideal listening experience.
• Use empty alt text when appropriate. If your image strictly serves a design purpose (like a swirl, pattern, or shadow) then alt text may not be necessary.

Designing accessible email campaigns

There’s a lot to consider when you’re designing an email with accessibility in mind. One of the most crucial email accessibility best practices involves something you shouldn’t do.

Any important information in an email should be presented as live text – not as part of the graphic alone. That includes things like promo codes, dates and times, or calls-to-action such as the copy on buttons. Of course, there are still ways to get the look you want using live text, but you may need to get a developer to code it.

Using alt descriptions for images in emails is also beneficial because the alternative text will display when a subscriber has image downloading turned off. Don’t forget, Outlook often blocks images by default.

Other design choices related to text also support email accessibility:

• Choose a readable font
  • San serif is usually preferred for the body copy, but high-resolution displays make a readable serif typeface less of a problem.
• Use a large enough font size
  • A minimum of 16 px is recommended
• Make blocks of text left-aligned
  • Centered paragraphs can be harder to read
• Adjust line spacing and kerning
  • Letters and lines that are too close together can impede readability
• Avoid using color to convey meaning
  • It could be confusing for people with color blindness
  • Screen readers don’t interpret colors
• Use good color contrast between your text and background
  • Normal text should have a contrast ratio of 4.5:1 against the background

Appropriate color contrast in email design is a must for accessibility. That’s why Sinch Email on Acid has accessibility features that evaluate contrast in campaign design. A contrast ratio of 21:1 is black text on a white background, which is the best you can get. A contrast ratio of 1:1 would be like white text on a white background (obviously, that text would disappear).

Speaking of white – using a good amount of white space also supports accessible email design. Email campaigns with a busy design can be distracting and confusing to subscribers with ADD/ADHD. Overusing animations can also be distracting. If they are too intense or flashy (like a strobe effect), it can be a problem for people who suffer from seizures or conditions like epilepsy.

Yet another consideration for accessible design is dark mode emails. When rendering in dark mode, email clients invert colors in different ways, and that could cause accessibility issues. Find out what we learned in our exploration of dark mode and email accessibility.

Coding accessible emails

While your subscribers won’t see the code, there are many things email developers can do to improve accessibility. The truth is – some of the practices we mentioned for accessible design rely on accessible coding. For example, developers may need to include inline CSS styling that ensures there’s a minimum 16 px font size.

Note: Using em units to code font size is preferred because it’s more flexible than using px. Pixels are static while em is relative. Here’s a px to em converter that can help.

A good place to start with accessible email development is making sure you include alt text for images and that you code bulletproof buttons with live text. Both of those steps will improve the email experience for people using screen readers. However, there’s much more you can do to code accessible emails.

Semantic HTML adds meaning to your email code. That’s because semantic markup accurately and intuitively describes the element you’re coding. That helps assistive technology make sense out of everything. For example, using either <em> or <i> will italicize text. But <em> would tell a screen reader to emphasize a certain word while <i> would work better for italicizing a title.

For the same reason, paragraph tags <p> are preferred for email accessibility over line breaks <br>, because a paragraph stands for something while line breaks may only be used for spacing.

The use of h-tags (<h1>, <h2>, <h3>, etc.) for headings and subsections is also good for email accessibility. That’s because, unlike simply using a larger font size, h-tags organize the content in a logical way. They also help subscribers using assistive technology skip between sections using keyboard navigation. Every email should have an <h1> and only one. Then you should follow a logical order with sub-headings.

ARIA, which stands for Accessible Rich Internet Applications, is a set of attributes that help make content more accessible. While ARIA isn’t fully supported among email clients, there are some valuable uses for it.

An important ARIA label for email accessibility is the attribute role="presentation". When email developers set tables to role="presentation", it tells the assistive technology (screen reader) that the table is being used for layout purposes instead of for presenting data.

It makes a big difference. Listen to this video to hear the way a screen reader interprets a table with and without role="presentation".

Another ARIA attribute that proves useful to email developers is aria-hidden= "true". This can be added to hide certain elements of an email from screen readers. That could include decorative graphics and duplicative content that you want the software to skip.

For more tips and examples, check out our article on how to code accessible emails.

Screen readers and email accessibility

We’ve brought up screen reading software several times in this article. If you’re unfamiliar with the term, screen readers are assistive technology that primarily helps people with vision problems, but people with cognitive or mobility challenges may use them too.

Screen readers convert digital content into either spoken word audio or Braille. People use keyboard navigation with desktop screen readers, jumping between elements such as headings. Mobile screen readers allow for swiping and touch navigation.

Here’s a list of some of popular screen readers:

• NVDA: The NVDA (Nonvisual Desktop Access) screen reader is free to download. According to a WebAIM survey, it is also one of the most used.
• JAWS: Another popular option is JAWS (Job Access With Speech), which is a screen reader from Freedom Scientific. It can also provide Braille output.
• VoiceOver: (from Apple): For subscribers using a Mac or iPhone, this proprietary screen reader will likely be their choice. It’s built into devices running on iOS. Find out more about using VoiceOver to evaluate accessibility.
• Talkback: (for Android): This screen reader from Google is part of its larger Android Accessibility Suite. It has more than 2.7 million downloads.
• Narrator: This is the default screen reader in Windows. Assistiv Labs (the software’s developer) claims its usage is growing. There’s been a 150% increase since 2017.

Since Android, Apple, and Microsoft offer screen reading options, you can easily test how your emails are read aloud by these software solutions. In addition, more people are beginning to use digital assistants like Siri, Alexa, and Google Assistant to access their inboxes. Optimizing for screen readers helps improve the experience when artificial intelligence (AI) reads email too.

Check out the following video to learn more about how screen readers work with email:

It’s important to note that screen readers present content to users one item at a time, which is completely different from the way we visually consume emails. While sighted subscribers can get the gist of email content and design all at once, those with screen readers progress through the email in steps.

They can, however, navigate more quickly through digital content using headings, page sections, paragraphs, and “skip navigation” links. These key differences are why it’s so important that your email structure and content are designed specifically with screen readers in mind. 

Smart home devices and digital assistants

The rise of smart home devices and digital assistants such as Amazon Echo, Google Home, and Siri mean more people are using assistive technology to access the contents of their email inboxes. When emails are coded to be accessible, it’s easier for this technology to present information to users in a clear and efficient way.

With voice-activated devices like Google Home, Amazon Echo, and even Siri becoming more popular You’re going to a growing population who are reading their emails with screen readers or screen reader adjacent devices. So, making emails accessible will make it naturally easier for anyone to read your emails.

Alice Li EMC Administrator

You can also expect that emerging tools built with generative AI, such as ChatGPT, will work best when emails are optimized for screen reader technology.

14 email accessibility best practices

We’ve covered a lot in our guide so far. Now, let’s go over some of the key takeaways in a list of email accessibility best practices.

1. Write email subject lines, sentences, and paragraphs that are clear and concise.
2. Avoid complex language and confusing industry jargon.
3. Use headings, subheadings, and bullet lists for better content organization and navigation.
4. Compose and add alt text for every important image in an email campaign.
5. Choose readable typefaces and an appropriate font size.
6. Never place important information inside of a graphic (always use live text).
7. Use good color contrast, especially between the text and background (minimum 4.5:1).
8. Avoid using color in email design to convey meaning.
9. Stay away from excessive and/or distracting animations.
10. Include enough white space for accessibility (including padding and margin) to support readability and comprehension.
11. Code bulletproof buttons for CTAs that use live text.
12. Implement semantic HTML so that your email code has meaning.
13. Use h-tags for subheadings in email content.
14. Add the ARIA label role=”presentation” to tables used for email layout.

If you accomplish all these email accessibility best practices, you’ll be delivering campaigns that people of all abilities can engage with and enjoy.

Accessibility testing tools for email marketing

There’s one more email accessibility best practice we should mention – accessibility testing. The “Accessibility in the Inbox” report found that nearly 40% of marketers weren’t using any accessibility testing tools before launching an email campaign.

Following best practices is great, but the only way to be 100% certain that you’ve built an accessible email is to test it. That’s why Email on Acid includes accessibility checks in our email testing platform.

Our accessibility testing tool allows you to:

• Preview email designs with filters representing different color deficiencies
• See how alt text displays with images turned off
• Adjust and optimize text-to-background color contrast ratio
• Enhance the accessibility of hyperlinks in your email
• See how using the zoom function impacts the experience
• Set the email title, language, and content-type for screen readers
• And more…
• Start Your Free Trial Today

There are also some free online resources that can help you design accessible emails. They include a color contrast checker from WebAIM. The website accessible-email.org provides free reports and helps you adjust your code. If you use Parcel.io for email editing, they recently made their Accessibility Checker free for everyone. Plus, Microsoft made its testing tool, Accessibility Insights, open source and free as well.

It’s not as important which accessibility testing tools you use as long as you integrate accessibility testing into your normal processes. Find out about even more accessibility testing tools in Sinch Mailjet’s comprehensive comparison article.

Beyond tools, consider talking to real people with disabilities and having them provide feedback on how they experience your emails. User testing always provides amazing insights on how to improve emails.

Learn more about email accessibility

Email on Acid takes accessibility seriously, and it’s also a topic I’m personally very passionate about. I had the opportunity to deliver a presentation on email accessibility at UNSPAM in 2022. Check out the video below:

You can also listen to email marketing podcasts that cover accessibility. Recently, I joined Janice Dombrowski on the podcast Marketing Magnified from Streamline to offer some email accessibility advice for developers. The hosts of Email Einstein interviewed me on the topic as well.

My friend and fellow email geek, Najee Bartley, joined me on an episode of Notes from the Dev: Video Edition to offer her insights on email accessibility, including an eye-opening example of what happens when screen readers encounter an inaccessible email.

Here are even more accessibility resources to explore:

• The EMC’s 2024 Accessibility Report: See what happens when you review thousands of HTML emails and learn about some of the most common and critical email accessibility issues.
• Emails for All – Parcel Unpacked: Check out this recording of a great presentation from email developer and accessibility advocate, Najee Bartley.
• The A11Y Project: A community-driven effort to simplify accessibility with lots of great information about the fundamentals.
• W3C’s accessibility overview: A helpful resource including accessibility guidelines for digital content.
• WebAIM’s accessibility training: Virtual and in-person training opportunities around online accessibility.
• Deque’s Empathy Lab: Learn in a hands-on, interactive way and speak directly with those who have disabilities.
• Cards for Humanity: A fun, interactive tool that helps you consider the situations your subscribers may find themselves in and how you can show empathy.

Finally, if you’re committed to email accessibility, and you want to make your existing templates and automations more accessible, check out our article on how to conduct an email accessibility audit and then build those changes into your processes. For more on that, you’ll want to read our tips on creating an accessible email design system.

The post Email Accessibility in 2024: A Complete Guide for More Inclusive and Effective Campaigns appeared first on Email on Acid.

I recently co-hosted an Email Academy webinar on the topic of design with my colleagues from Sinch Mailjet. There were plenty of users from both Mailjet and Email on Acid in attendance. When we surveyed people about their biggest design struggles, responsive email design topped the list.

Most people have been checking emails on smartphones and mobile devices for at least a decade at this point. So, why is designing and coding mobile-friendly emails still such a headache?

It could be because responsive email design is an afterthought instead of your starting point. The first step in changing your ways involves a simple switch in your code. For some email developers, this is a bit of a mind shift. Many of us code responsive emails for desktop first and then add CSS media queries to adjust for smaller screens. But it may be time for you to flip that approach on its head. Keep reading and I’ll explain…

Why responsive email design is important

You don’t have to look far to find email marketing statistics and studies showing the rise in smartphone use for email viewing. At this point, it’s safe to say that at least half of all email opens occur on mobile devices.

A 2024 report on how consumers around the world engage with email found around 71.5% most often use a mobile phone to view emails while just under 4% use a tablet. Less then 25% of consumers said they primarily use a computer to check their email inboxes.

Of course, while a smartphone might be the main device used to check email, it’s not the only one. Many recipients will view an email in one environment and then go back to it later using a different device or application. For example, someone could check an email on desktop while at work, and later, engage with it while chilling on their couch that night.

You need to deliver an ideal experience no matter where the email is opened. That means focusing on responsive email design, which adjusts your HTML email campaign’s layout for different screen sizes.

Even B2B brands with email opens that trend toward desktops and laptops should consider responsive email design. Because you never know when your next big prospect is going to open an email on their smartphone.

A tale of two email campaigns…

Let’s paint a picture of why responsive email design is so crucial:

Scenario 1: Non-responsive nightmare

Imagine you’ve just launched a flash sale, and your email goes out to thousands of subscribers. But uh-oh – the design isn’t mobile-friendly. Your CTA button is tiny, the text is unreadable without zooming, and the image files are so large they take forever to load. The result? Frustrated customers, missed sales opportunities, a spike in the unsubscribe rate, and a collective groan from the rest of the marketing team.

Scenario 2: Mobile-friendly dream come true

Now, flip that script. Your flash sale email is designed and coded to respond to various screen sizes. Some contacts see a single-column layout on their phones while others see featured products in a three column design when it’s opened on desktop. The CTA button stands out and and is easy to tap – not just click. There’s excellent readability and the images are optimized for quick loading. The result? A successful campaign in which your email drove more traffic and sales than any other marketing channel.

Here’s a visual example of a problematic email design. It’s from almost nine years ago, so we’ll give Macy’s some grace (and hope by now they know better). One look at this campaign and you can probably see the big issue. Just imagine trying to tap on those product category buttons not to mention read some of that text on a mobile phone.

If your goal is to optimize emails for conversions, you need to be sure people can engage with what you’re sending. But we should mention… a mobile-friendly email isn’t quite the same as a responsive email.

Mobile-friendly vs. responsive email design

Let’s clarify the difference between mobile-friendly and responsive: A responsive email should be mobile-friendly, but a mobile-friendly email is not necessarily responsive.

While you can follow best practices for mobile-friendly emails, that’s not the same as a responsive email. Responsive email design means your email’s layout, font size, buttons, email content, and more adjust and adapt to deliver an ideal experience on different screens. To make this happen, you either need to know how to code emails, or you need to be using responsive email templates that are already coded adapt to screen sizes while using a drag-and-drop email editor.

Of course, you could also have an email that adjusts to different screen sizes, yet it still doesn’t look or function well on mobile devices. To deliver the best experience you need to take two steps:

1. Make sure your email is responsive.
   • That typically means using CSS media queries
2. Make sure your email is also mobile-friendly.
   • This means following email design best practices for a good mobile experience.

Why is responsive email design a challenge?

Inbox Insights 2023 from Sinch Mailjet found that email senders around the world identified responsive email design as a major challenge. It’s an especially big deal for those who code email marketing campaigns.

While just over 36% of all survey respondents selected Responsive emails as one of their three biggest challenges, more than 42% of email developers selected that option. Find out more in our article on the email developer perspective.

So, what is it that makes responsive email design so challenging and how could a mobile-first approach change things?

For one thing, it’s easy to default to a desktop-first approach to email development. After all, that’s the environment in which we’re writing code. As a result, however, we end up developing emails for larger screens first, and that can make things more difficult in the long run.

For example, taking an email designed for desktop with a three-column layout and re-coding it to look right on various mobile devices is going to require a lot of development work.

• How should those columns stack?
• How will images and text need to change?
• What mobile breakpoints should you consider?

The more code you need to write to adapt for smaller screens, the more opportunities there are for minor mistakes that cause things to break. One missing curly bracket and suddenly the entire email layout is messed up.

On the other hand, when you start with a simple layout for viewing emails on smartphones, and then expand the design for desktop, it’s a different story. If subscribers viewing emails on desktop end up seeing the mobile layout for your email campaign, it will still look fine, and they can still engage.

But you can’t say the same thing about viewing the desktop version of an email on mobile. That’s why mobile-first email coding is a safer bet.

How to switch to mobile-first email coding

Arguably, the most popular way to achieve responsive email design with code is to use media queries.

Now, it’s certainly possible to develop responsive emails without using media queries. Fellow email geek Nicole Merlin has an excellent write-up on her process for coding responsive emails without media queries. However, in this article, we’ll focus on coding with media queries.

At this point, media query support for screen size is well supported across nearly all of the major email clients. (Check out CanIEmail.com for the latest.) That’s what I use for responsive email design. And when you code for mobile first, media queries are fairly foolproof.

The biggest switch for most people will be using min-width media queries instead of max-width. By simply doing that, you’ll be taking a mobile-first approach to email development.

Media queries: max-width vs min-width

When you learned to code responsive emails with media queries, there’s a good chance you were told to use the max-width property, which is essentially a desktop-first mentality. That may have made sense for a lot of senders 10 years ago, but things have changed.

So, what’s the big difference between min-width and max-width?

Desktop-first = max-width

When you use the max-width property, you are essentially telling email clients that your desktop styles are the default, and you use media queries to adapt for smaller screens. The max-width describes the maximum width before your mobile styles stop being applied. So, your styles should be ordered from largest to smallest.

In other words, max-width indicates that: If the screen size is less than or equal to X, then do Y.

Here’s how you might code a basic two-column email for desktop using a max-width media query that would stack the columns for mobile viewing:

                            

                                <style> :root { color-scheme: light dark; supported-color-schemes: light dark; font-size: 16px; font-color: #222; } h2 { margin: 0; } .column { width: 50%; display: table-cell; padding: .5em; } @media screen and (max-width:480px) { .column { display: block !important; width: 100% !important; } .column:last-child { margin-top: 2em !important; } } </style> 
                            
                        

View this code on Parcel.

Basically, what we’re saying is that any code nested in the max-width media query should only trigger if the screen size or viewport is less than 480 pixels. When the screen for a mobile device, or a browser window on desktop, is under 480px, the columns will stack.

The class .column sets each div’s display property to table-cell, which allows the columns to function like a table. The media query says to use these styles when the screen size is above 480px. (Note: the parent div’s display property needs to be set to table for this to work.)

Then you need to change the display property to block for mobile and set the width property to 100%. You also need to use !important to override the code above the media query.

Mobile-first = min-width

When you use the min-width property, you are telling email clients your mobile styles are the default, and you use media queries to adapt for larger screens. The min-width defines the minimum width before styles start being applied. So, you’d list your styles from smallest to largest (AKA mobile first).

In other words, min-width indicates that: If the screen size is greater than or equal to X, then do Y.

Here’s the same basic code for a two-column email layout. Except, this time we are using a min-width media query and coding for mobile first. It’s still set to 480 pixels, but now it will apply desktop styles when screens are larger than 480 pixels.

                            

                                <style> :root { color-scheme: light dark; supported-color-schemes: light dark; font-size: 16px; font-color: #222; } h2 { margin: 0; } .column:last-child { margin-top: 2em; } @media screen and (min-width:480px) { .column { width: 50%; display: table-cell; padding: .5em; } .column:last-child { margin-top: 0; } } </style> 
                            
                        

View this code on Parcel.

One thing you may notice with the min-width example is that the code is actually a little cleaner and more concise. You only have to set the .column class in the media query to a width of 50% (instead of 100%) so that two columns display when desktop styles kick in. You don’t have to set it as a block element, you just use display: table-cell.

I’m also using a pseudo-class .colum:last-child to add some spacing around the mobile or stacked version of the email, which gets overridden and removed within the media query.

When you take a desktop-first approach, you end up overriding a lot more than that in those media queries. However, if you do mobile-first email coding, most of the mobile styles you set will transfer to desktop.

Plus, if your media queries don’t work, the mobile styles will be displayed by default. Things may look smaller than you intended for desktop screens, but the layout won’t break, and subscribers may not even know the difference.

That means you actually have to change less when you do things mobile first. Plus, your desktop styles end up being much shorter rather than having really long mobile styles that override so much from desktop.

Using min-width is also helpful for those using the Gmail app with non-Google accounts. Those so-called GANGA accounts can have lots of rendering issues in which media queries break.

The truth about mobile-first email development

While I am a big believer in coding for mobile screens first and using min-width to make thing responsive, I seem to be in the minority, which is a bit surprising.

When we conducted an informal, unscientific poll of Sinch Email on Acid’s LinkdedIn followers, we found that most email developers are using max-width media queries. Only 11% take the mobile-first approach and use min-width. In fact, more people are using the fluid hybrid email coding method, which practically skips media queries altogether.

This could be one of those “But that’s how we’ve always done it” sort of situations. If you learned to code emails using max-width, that might be a hard habit to break. But if you ask me, the advantages of using min-width for mobile-first responsive emails outweigh the challenge of updating your code.

7 tips for a mobile-first email design system

Before you start coding emails with a mobile-first mindset, you may have to rethink the way your campaigns are designed to begin with. Responsive email design is faster and more efficient when you’ve got a defined system to follow.

If you’re not already using an email design system, this would be the perfect opportunity to start. And if you already have a defined system, you’ll simply need to make some adjustments. Here’s some essential advice…

1. Email design mockups

If you’ve been scaling down emails designed for desktop in an attempt to make them more mobile-friendly, you’ll need to rethink your approach.

It may be easiest to switch everything to one-column email layouts no matter the screen size. Simplicity is definitely important in mobile-first email creation. However, it’s not the only way.

Try rethinking your responsive HTML email templates with the beginning and the end in mind. In other words, how should an email template be displayed on the smallest and largest screens? Instead of thinking about how elements of a desktop layout will stack on mobile, consider how a responsive, single-column email could “unstack” or expand on larger screens.

Create mockups for mobile and desktop while keeping breakpoints in mind. The most common mobile breakpoint is 480px, but some smaller iPhones are 320px.

2. Font size

Take a close look at your primary font as well as any others you’re using in your font stack. Make sure the text size is readable on handheld devices.

While 16px font is generally considered a best practice for accessibility, I chose to bump up the font size for mobile emails to 18 pixels in our design system. With the fonts our brands use, it felt like 16px was just too small for smartphones, especially with the high-resolution displays on some devices.

Remember that “best practices” aren’t hard rules, and they sometimes need to be adjusted for different situations.

3. White space

Give your mobile-first emails room to breathe. Adequate white space in email design is important for a good mobile experience.

Space between elements makes it easier to consume information and understand the message you’re delivering. Leaving white space around important features like calls-to-action or product images helps draw the viewer’s eyes to that part of the design.

Keep paragraphs nice and short because big blocks of text are harder to read on small screens. If you have text links that are very close together, it can be difficult for recipients to tap the right thing.

4. Tap targets

Speaking of tapping, that’s one of the biggest differences between the mobile and desktop user experience. Your subscribers are tapping with a finger or thumb – not clicking with a mouse and cursor. No matter how compelling and creative your CTA button may be, if the touch target is tough to tap, your click rate is going to suffer.

The minimum recommended size for accessible tap or touch targets is 44px x 44px. That size is based on the average adult finger pad, which is around 10mm. You may want your buttons to be even larger than that. There are some email developers who recommend using full-width CTA buttons because it makes them easier to tap with a thumb if someone is using one hand to operate their device.

5. Columns

While a single-column layout is going to provide the most mobile-friendly email design, there could certainly be situations in which you would use columns without stacking all the contents.

I once did this in Email on Acid’s newsletter for April Fools’ Day, which mimicked the look of a Myspace page as a fun throwback. For the section of the email displaying the “Top 8” friends, I used a two-column layout on mobile and four columns for desktop viewing.

It wouldn’t have looked quite right if that Top 8 was single profile photos stacked on top of each other. But since these were just small, thumbnail-sized images, two columns worked fine.

You could also do something like this in an ecommerce email featuring a spread of product thumbnails. Or two columns could work as a mobile-friendly photo gallery in an email. What you don’t want to do is put body copy in columns on mobile emails as that would most likely be difficult to read.

For each campaign you create, carefully consider the subscriber experience on different screen sizes.

6. Retina displays

Most computer monitors have high-resolution displays as do Apple devices using Retina display technology. For these screens, you’ll want your images to look nice and sharp.

For that to happen, use images that are twice the size at which you want them to ultimately display on the largest screens. So, in our example from earlier, an image displaying at 600 pixels wide should be 1200 pixels for its actual size.

Doing this provides a greater pixel density, so that the images don’t look blurry on Retina screens.

7. Image file sizes

While you want those images to look crisp, you shouldn’t slow down email load times with huge image files. This is especially important for mobile-first email development because you never know when recipients could be somewhere without high-speed internet. Plus, it’s good to be mindful that people may have limited data plans as well.

What you don’t want is to have subscribers staring at a blank screen waiting for the images in your email to load. So be sure to compress images and try to keep their file size to 200kb or less. Using too many animated GIFs in emails can also cause slow load times. Each frame in a GIF is its own image. Try to keep GIFs to less than 1mb.

Benefits of the mobile-first approach to responsive email design

As we wrap up this deep dive into mobile-first email design, let’s recap why this approach is worth your time and effort:

1. Simplify your workflow: Starting with mobile designs and expanding for larger screens is often easier than the reverse.
2. Improve user experience: With more people checking email on mobile devices, a mobile-first approach ensures your message looks great where it’s most likely to be seen first.
3. Future-proof your emails: As mobile usage continues to grow, your emails will be ready for whatever new device hits the market.
4. Boost engagement: When emails are easy to read and interact with on mobile, you’re more likely to see higher click-through and conversion rates.

Remember, responsive email design isn’t just about making things look pretty (although that’s a nice bonus). It’s about creating better experiences for our subscribers, boosting engagement, and ultimately driving better results for our email campaigns.

Test your responsive email designs before sending

There’s only one way to be certain your email campaigns are rendering the way you want on mobile devices – and that’s by testing and previewing them before hitting the send button.

If you’re updating templates to support responsive email design, you can use Sinch Email on Acid to see exactly how they will render on the most popular mobile operating systems and devices. Take advantage of our Email Previews to see how the most important clients render your code.

While there are plenty of platforms that let you see how an HTML email looks on mobile and desktop in general, our solution goes much further. You’ll get screenshots from actual email client renderings. So, for example, test and preview how your email looks in Outlook on an iPhone, or how it looks on the on the Gmail App in dark mode. Customize your own testing profile for the clients and devices you want to see.

Our email quality assurance platform also provides checks for accessibility, deliverability, inbox display, URL validation and more. It’s an ideal tool for optimizing campaigns and simplifying the complexities of email marketing. Every paid plan enjoys unlimited email testing. Take Sinch Email on Acid for a test drive with a one-week free trial.

The post Responsive Email Design Challenges? Try Mobile-First Email Coding appeared first on Email on Acid.

Dark mode throws yet another wrench in the gears of email development. However, if you know what you’re doing, you can optimize the inbox experience for both light and dark mode emails.

If you’re ignoring dark mode, it’s likely that some of your subscribers are opening your HTML email designs only to find an unreadable mess. So, let’s shed some light on this shadowy subject and explore how to create emails that look great, no matter the mode.

What is dark mode anyway?

Dark mode is a display setting that can be turned on and off for many devices, applications, and operating systems. Essentially, it changes the user interface so that instead of seeing the traditional dark text on a light background, there’s light text on a dark background.

So a background with hex code #FFFFFF and text color hex code of #000000 switches.

In dark mode, the background hex code becomes #000000 and the text hex code switches to #FFFFFF.

Here’s how that might look when viewing an email in light or dark mode on a mobile device:

Dark mode UI was the norm back in the ‘70s not long after email was invented. Picture those old, boxy PCs with black screens and glowing green text. Light mode eventually became the standard along with LCD screens in the ‘90s.

Twitter and YouTube were among the first popular services to offer dark mode. In 2019, Microsoft, Google, and Apple followed the trend and began offerring dark or “night mode” options for their programs and operating systems.

In 2023, Twitter/X made the move to make its dark mode UI the default. At first, Elon Musk said it would be the only option. Apparently, he believes dark mode is “better in every way.” But backlash from users prompted the company to bring back a light mode setting for the platform.

Once Gmail, Apple Mail, and Outlook started offering dark mode, email marketers began paying attention too. Here’s how an old Email on Acid newsletter looked when we first started testing our own stuff in dark mode four years ago. It’s not terrible. But it’s not ideal either.

Why dark mode matters in email

Remember when dark mode was just a niche preference? Those days are long gone. Dark mode has rapidly become a mainstream feature, with recent studies showing that a significant portion of users prefer dark mode for at least some of their digital interactions.

Of course, those studies on consumer usage of dark mode settings vary. What you really want to know is how many of the contacts on your list are opening messages in dark mode. Advanced Email Analytics from Sinch Email on Acid let you do exactly that. Find out more about tracking dark mode opens on our platform.

But we digress… Why do people love dark mode so much? Let’s break it down:

1. Eye comfort: Many users find dark mode easier on the eyes, especially in low-light conditions. This can be particularly beneficial for those who check their emails late at night or first thing in the morning.
2. Reduced blue light exposure: Some studies suggest that reducing exposure to blue light, especially in the evening, can help with sleep patterns. Dark mode is one way users try to achieve this.
3. Battery life: For devices with OLED screens, dark mode can significantly extend battery life. This is because OLED screens can turn off individual pixels when displaying black, consuming less power.
4. Aesthetic preference: Let’s face it, some people just think dark mode looks cool. It can give a sleek, modern feel to interfaces.
5. Reduced screen glare: In certain lighting conditions, dark mode can help reduce screen glare, making it easier to read content.

Whatever the reason, there’s a good chance a significant portion of your subscribers are viewing your emails in dark mode. As email professionals, it’s our job to ensure our messages look great in both light and dark environments.

The challenges of dark mode emails

Before we jump into solutions, let’s break down the main challenges of dark mode emails. Understanding these hurdles is the first step in overcoming them:

Color inversion in dark mode: When your design flips

One of the primary challenges with dark mode is color inversion. Many email clients automatically invert colors when switching to dark mode, turning light backgrounds dark and dark text light. While this sounds simple in theory, in practice it can lead to some unexpected results:

• Your carefully chosen color scheme might be completely altered, affecting the overall look and feel of your email.
• Important design elements, like buttons or call-to-action areas, might lose their impact or become difficult to distinguish.
• Subtle color differences that worked well in light mode might become indistinguishable in dark mode.

In this example, purple may be a primary brand color you use for calls-to-action in emails. But the inverted green button may not fit your brand at all.

Brand consistency in dark mode: Logo visibility issues

Your brand’s visual identity is crucial in email marketing. However, dark mode can mess up your email branding efforts:

• Logos designed to stand out on a light background might suddenly become invisible on a dark background.
• Brand colors carefully chosen for light backgrounds might clash or become unreadable when inverted.
• The overall “feel” of your email might shift dramatically, potentially disconnecting it from your brand’s usual aesthetic.

Here’s what can happen if your logo isn’t optimized for viewing emails in dark mode:

For a bunch of options on how to handle this, check out our tips on fixing dark mode logo problems.

Accessibility and dark mode: Unexpected contrast issues

While dark mode can benefit some users with visual impairments, it can also create unexpected email accessibility issues:

• Color contrasts that worked perfectly in light mode might become problematic in dark mode.
• Text that was easily readable on a light background might become strained on a dark background, especially if the font weight isn’t adjusted.
• Important visual cues or separators might disappear or become less noticeable in dark mode.

Email clients and dark mode rendering

Like usual in the world of email development, it’s never as simple as having a dark mode and non-dark mode, all email clients that feature dark mode will handle it slightly differently.

As explained in this excellent article from our friends at Parcel, you can break down the different dark modes to three different modes; full inversion, partial inversion and no change.

Full inversion will change both your font colors and your backgrounds, partial inversion is very similar but will largely leave your backgrounds untouched, no change won’t inverse any of your content.

Apple Mail and dark mode

In Apple Mail’s dark mode, it tends to invert pure black (#000000) and pure white hex (#FFFFFF) codes. Apple Mail will completely disregard contrast or other-such rules if you have those hex codes and invert them regardless.

We advise to choose slightly different hex codes, such as #000001 or #FFFFFE, the difference in color is not noticeable and it’ll help you avoid any surprises.

Gmail and dark mode

As is often the case, Gmail can often throw a bit of a curveball when it comes to how it handles our dark mode emails, simply because there are so many versions of Gmail, ranging from iOS to Android to regular old Gmail, nailing down a solution can be quite tough. Previewing your campaigns in dark mode on Gmail helps you understand how to build the best experience for those subscribers.

If you’re struggling with Gmail on iOS dark mode, you can try this insanely clever solution by Rémi Parmentier, utilizing blends (which are supported in Gmail) to control how your email looks when dark mode has its way.

Outlook and dark mode

Ahh, now we get to it, the elephant in the room; Outlook. One significant issue is how Outlook handles color inversions. In dark mode, where backgrounds become dark and text becomes light, Outlook might struggle to accurately invert colors, leading to unexpected and sometimes undesirable outcomes. This can result in poor readability, visual inconsistencies, and an overall less-than-ideal user experience.

Additionally, Outlook’s dark mode implementation might not fully align with standard development practices, introducing quirks and challenges for email developers. These issues can range from the rendering of background images to the handling of certain styles, making it crucial for email designers to employ specific strategies to ensure their emails look as intended in Outlook’s dark mode.

If you’re struggling to get text readable in Outlook, Nicole Merlin has an amazing guide on tackling font colors in Outlook’s Dark Mode, includin

Illuminating solutions for dark mode emails

Now that we’ve outlined the challenges, let’s dive into some strategies to help you navigate the murky waters of dark mode email design:

Setting the stage for dark mode: Meta tags and CSS

The first step in creating dark mode-friendly emails is to tell email clients that your email supports both light and dark modes. You can do this by adding specific meta tags to the <head> section of your email:

                            

                                <meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
                            
                        

These meta tags essentially say, “Hey, email client! This email is designed to work in both light and dark modes.”

To complement these meta tags, you should also include the following in your CSS:

                            

                                <style type="text/css">
  :root {
    color-scheme: light dark;
    supported-color-schemes: light dark;
  }
</style>
                            
                        

This CSS reinforces the message that your email supports both color schemes.

Detecting and adapting to dark mode: Media queries

Once you’ve set the stage, you can use CSS media queries to detect when dark mode is active and adjust your styles accordingly. Here’s an example:

                            

                                @media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
  }
  h1, h2, h3, p {
    color: #f1f1f1 !important;
  }
}
                            
                        

This media query says, “If dark mode is on, use these colors instead.” It’s a powerful tool that allows you to create a tailored dark mode experience.

However, it’s important to note that not all email clients support this feature. It works great in email clients that support media queries, like Apple Mail and Outlook for Mac. But some clients, like Gmail, don’t support this feature, so you’ll need to have fallback options.

Making your logo visible in dark mode: Image swapping techniques

Your logo is a crucial part of your brand identity. So, ensuring it’s visible in both light and dark mode is essential. Here are some strategies:

• Use transparent PNGs: This can work well, but be cautious of dark text or elements disappearing against a dark background.
• Add a light outline or glow: This can help your logo stand out in both modes but be sure it doesn’t affect the logo’s appearance in light mode.
• Create a dark mode version of your logo: This is often the best solution. You can use image swapping techniques to show different versions based on the mode.

Here’s how the code might look if we wanted to display different logos in dark and light mode:

CSS:

                            

                                @media (prefers-color-scheme:dark) {
    .dark-mode-hide{
        display:none!important;
    }
    .dark-mode-show{
        display:block!important;
    }
} 
                            
                        

HTML

                            

                                  <img src="https://marketing.emailonacid.com/hubfs/NORMAL-EoA-Logo.png" width="150" alt="Email on Acid" border="0" style="display:block;max-width:150px;font-family:Arial,sans-serif;font-size:9px;line-height:12px;color:#ffffff;font-weight:bold;" class="dark-mode-hide">

  <!--[if !mso]><!-->
  <img src="https://marketing.emailonacid.com/hubfs/images/logos/DARK-MODE-EOA-Logo.png" width="150" alt="Email on Acid" border="0" style="display:none;max-width:150px;font-family:Arial,sans-serif;font-size:9px;line-height:12px;color:#ffffff;font-weight:bold;" class="dark-mode-show">
  <!--<![endif]-->  
                            
                        

Note: the code under <!–[if !mso]><!–> is Microsoft Office conditional code that tells Outlook to ignore the dark mode logo. With Outlook,  you can also use the tag “mso-hide:all” to keep elements hidden in dark or light modes.

This code tells email clients to use the dark mode logo when dark mode is active, and the light mode logo when it’s not. You can use this same technique for other important graphics in your email design.

Of course, there are simpler solutions, like the glow or outline trick.

Here’s how the Sinch Email on Acid logo would display in dark mode with a white stroke that outlines text and fills in gaps (Note: Graphic designers often hate this technique):

Optimizing images for dark mode emails

Images play a crucial role in many email campaigns, but they can be tricky to handle in dark mode. Here are some tips, many of which are similar to handling dark mode logos:

• Use transparent backgrounds: This allows your images to blend seamlessly with both light and dark backgrounds. Otherwise, you could get an unsightly white background around images in dark mode.
• Add a subtle outline: For images that might get lost on a dark background, consider adding a light outline.
• Create dark mode versions: For key images, you might want to create dark mode-specific versions and use the image swapping technique we discussed for logos.

Ensuring accessibility in dark mode emails

Email accessibility should always be a priority in your design choices, and dark mode adds an extra layer to consider:

• Check contrast ratios: Use tools to ensure your text meets WCAG guidelines for contrast in both light and dark modes.
• Use sufficient font sizes: Smaller text can be harder to read in dark mode, so err on the side of larger, clearer fonts.
• Don’t rely solely on color: Use other visual cues (like icons or underlines) to convey information, not just color differences.
• Test with screen readers: Ensure your dark mode optimizations don’t interfere with screen reader functionality.

Handling dark mode across different email clients

Given the inconsistent implementation of dark mode across email clients, it’s crucial to have a strategy:

• Design for the lowest common denominator: Ensure your email looks good in clients that don’t support dark mode or advanced CSS.
• Use progressive enhancement: Layer on dark mode optimizations for clients that support them.
• Test extensively: Use tools like Sinch Email on Acid to preview your email across different clients and modes.
• Have fallback options: For elements crucial to your message, consider providing alternatives that work in all scenarios.

Best practices for dark mode email design

Now that we’ve covered the technical aspects, let’s look at some overall best practices for designing dark mode emails:

• Start with dark mode in mind: Don’t treat dark mode as an afterthought. Consider it from the beginning of your design process. If you have an email design system, dark mode should be part of it.
• Use a dark mode color palette: Develop a set of colors that work well in dark mode and align with your brand.
• Avoid pure black backgrounds: Very dark greys are often easier on the eyes than pure black.
• Be careful with shadows: Shadows that look great in light mode might disappear in dark mode.
• Test, test, test: Always preview your emails in both light and dark mode across various clients and devices.

Testing: The key to dark mode email success

Here’s where we put on our problem-solving hat. Testing your emails in dark mode across different clients is crucial. That’s where Sinch Email on Acid comes in handy. Our email quality assurance platform lets you test and preview your emails in dark mode across various clients and devices, helping you catch rendering issues before they reach your subscribers.

With Sinch Email on Acid, you can:

• Preview your email in both light and dark mode
• Test across multiple email clients and devices
• Identify and fix rendering issues quickly
• Ensure your emails look great for all subscribers, regardless of their mode preference

Plus, track dark mode email opens in with our analytics so you can see exactly why optimizing for dark and light mode is worth the effort.

Don’t be afraid of the dark (mode)

Dark mode in email doesn’t have to be a headache. With these tips, techniques, and testing strategies, you can create emails that look great whether your subscribers prefer the light side or the dark side.

Remember, the key to mastering dark mode emails is thorough testing and a willingness to adapt your design process. By considering dark mode from the start, using the right tools and techniques, and testing thoroughly, you can ensure your emails shine in any setting.

So go ahead, email pros! Embrace the challenge of dark mode and create emails that look fantastic no matter how they’re viewed. And when in doubt, test it out with Sinch Email on Acid. Your subscribers (and your peace of mind) will thank you.

More dark mode email resources

Dark mode is an ever-evolving problem that email developers are tackling every day and new and exciting solutions are cropping up all the time. It’s impossible for us to cover everything about dark mode in just one article, so we have a great selection of other resources.

• Video: Email After Dark: Coding For Dark Mode
• Video: How To Prepare Your Email Design System for Dark Mode
• Webinar: Expert Advice: Designing Dark Mode Emails
• Article: Dark Mode vs. Light Mode: Which Is Better?
• Article: How to resolve issues with email dark mode

The post Master the Art of Dark Mode Email Design and Coding  appeared first on Email on Acid.

Fun, right? This kind of inbox experience not only grabs your attention but also makes you want to spend more time with the email. Not to mention – that particular brand probably earned a few bonus points in your book. That’s the power of interactive emails.

For brands, adding interactive elements to emails is a great way to stand out in a sea of sameness. Not only do interactive emails create a unique and engaging experience, but they also boost engagement and brand recall. In this article, we’ll explore some ideas for interactive email campaigns that you can use to captivate your audience and make your emails the highlight of their inbox – and maybe even their day.

Why send interactive emails?

Let’s be real: Standing out in an overcrowded inbox is tough. But interactive emails can give you a leg up. They aren’t just about looking cool. They’re about creating a more memorable touchpoint with your brand.

It’s like the difference between watching a movie and playing a video game; one is passive, and the other is an experience. When subscribers can interact with your email, the campaign comes to life. People will be more likely to remember your brand and engage with your emails the next time.

Interactive elements can even make your subscribers feel special and valued because they become an active participant. Interactivity in emails provides a sense of novelty and fun, making the email not just another piece of promotional content but an event. Plus, these emails can help gather useful data about what your subscribers like, helping you tailor future communications.

Hear more about why interactive emails are the future of the inbox and how they can freshen up your email strategy in this video interview with developer Mark Robbins.

9 ideas for interactive email campaigns

Sometimes we all need a little inspiration to get the creative juices flowing. What we’ve got here are some of most common ways to bring interactivity into an email campaign. Take these ideas, use your imaginations, and make them your own.

1. The basics: rollover and hover effects

Starting simple is sometimes the best way to go, and rollover or hover effects are a perfect entry point into the world of interactive emails. Use these effects on buttons, images, or text, giving your emails a subtle yet engaging twist. For instance, a CTA button might change color when hovered over, or an image might reveal a different version when you mouse over it. It’s a small touch, but it can make your emails feel dynamic and polished.

Why bother with these effects? For one, they make your emails more visually engaging and can highlight important elements, guiding the user’s attention. Plus, they’re a great way to give a sneak peek of something more. The only catch? These effects work best on desktop. Mobile devices, which don’t have a hover state, won’t get the full experience. So, always have a solid fallback—like a different image or a clear CTA that stands out on its own.

Example code snippet for email button hover effect:

                            

                                <a href="#" style="display:inline-block; text-decoration:none; background-color:#007BFF; color:#ffffff; padding:10px 20px; border-radius:5px; transition:background-color 0.3s;" onmouseover="this.style.backgroundColor='#FF0000'" onmouseout="this.style.backgroundColor='#007BFF'">

  Hover Over Me

</a>
                            
                        

For another way to pull off rollover effects in email, check out this episode of Notes from the Dev featuring tips from Nout Boctor Smith. In this case, you have two images and hide one of them on rollover. It ends up looking something like this interactive email, which uses the effect to reveal clues and play a little game with subscribers.

2. Interactive product previews

Imagine being able to showcase your products in different colors or styles directly in the email. That’s what interactive product previews can do. They let subscribers play around with options, like choosing different shades of a t-shirt or trying out different lenses for sunglasses, all without leaving their inbox.

A good example of this kind of interactive email at work comes from this Google campaign for Pixel Buds. It allowed users to see different angles and colors of the product.

Why is this awesome? It makes shopping feel more personal and hands-on, even in the inbox. It’s like giving subscribers a mini e-commerce experience before they visit your website. This can boost engagement and help move subscribers further down the purchase funnel, as they’re more likely to click through and buy after interacting with the product options.

3. Interactive longform content

Got a lot to say but don’t want to overwhelm your readers? Interactive elements like accordions and dropdowns are your best friends. They let you pack a lot of information into an email without making it look like a wall of text. Users can click to expand sections they’re interested in, keeping the email clean and scannable while still providing depth.

The BBC nailed this with their “A Perfect Planet” email, which our friends at ActionRocket designed and developed. They used expandable sections to provide additional content without overwhelming the reader.

This approach is fantastic for newsletters or educational content where you have lots of information but want to keep the design sleek. It also gives subscribers control over what they see, making them feel more involved in the experience.

The code below uses a popular email development process known as the checkbox method. It should work in Apple Mail and Gmail, but you’ll need to figure out another solution for Outlook.

Example Code Snippet for Accordions in an Email

                            

                                <!DOCTYPE html>
<html>
<head>
    <style>
        /* Container for the accordion */
        .accordion-container {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            border: 1px solid #ddd;
            border-radius: 5px;
            overflow: hidden;
        }
        /* Hidden checkbox */
        .accordion-toggle {
            display: none;
        }
        /* Label for the checkbox, which acts as the accordion trigger */
        .accordion-label {
            display: block;
            cursor: pointer;
            padding: 10px;
            background-color: #007BFF;
            color: #ffffff;
            text-align: center;
            font-weight: bold;
            border-bottom: 1px solid #ddd;
            position: relative;
        }
        .accordion-label span {
            float: right;
            font-size: 32px; /* Larger icon size */
            line-height: 32px;
            width: 32px;
            height: 32px;
            text-align: center;
            display: inline-block;
            border-radius: 50%;
            background-color: #ffffff;
            color: #007BFF;
            margin-left: 10px;
            transition: background-color 0.3s, color 0.3s;
        }
        /* Content of the accordion */
        .accordion-content {
            display: none;
            padding: 10px;
            background-color: #f1f1f1;
        }
        /* Show content when checkbox is checked */
        .accordion-toggle:checked + .accordion-label + .accordion-content {
            display: block;
        }
        .accordion-toggle:checked + .accordion-label span {
            background-color: #007BFF;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <div class="accordion-container">
        <!-- Hidden checkbox -->
        <input type="checkbox" class="accordion-toggle" id="accordion-toggle">
        <!-- Label acting as the clickable header -->
        <label class="accordion-label" for="accordion-toggle">
            Click to Expand <span>+</span>
        </label>
        <!-- Content to be shown/hidden -->
        <div class="accordion-content">
            <p>This is the expanded content. It can include text, images, or any other HTML elements.</p>
        </div>
    </div>
</body>
</html>

                            
                        

The tried-and-true checkbox method works for a few different interactive email purposes. To learn more about how to use it, watch this episode of Notes from the Dev where Megan Bushoyzen shows us how she coded an interactive campaign for Email Camp.

4. Image carousels for email

Another simple way to add a little interactivity while simultaneously saving space is with an image carousel. It’s surprising that you don’t see image carousels used more often in emails. There are plenty of ways to put them to use.

For example, let’s say you’d like to feature multiple photos in the hero image space of your campaign.  You could use a carousel to showcase different product angles.  You could feature a collection of photos from a big event. Get the idea?

Here’s a tutorial on coding animated image carousels for email like the one above, which uses a fade effect to transition between the images. We also have some tips on coding an interactive carousel with clickable navigation. Plus, check out this handy tool from FreshInbox that generates image carousel code for you.

5. Forms, testimonials, and product reviews

Why not let your subscribers do a little work for you? Including forms directly in your emails is a great way to collect feedback, testimonials, or even product reviews. You can ask for a quick rating, gather suggestions, or even collect zero-party data (like preferences and interests) that helps personalize future emails.

This interactive element makes subscribers feel heard and valued, which is crucial for building loyalty. It’s a win-win: you get valuable insights, and they get to share their opinions without having to jump through hoops. And let’s be honest, who doesn’t like giving their two cents?

Coding an interactive form for emails is a bit more advanced. So, we’ll save that for another tutorial another day. However, while they won’t work everywhere, the good news is that interactive forms are fairly well supported among the major email clients.

You can also use AMP for Email to include forms as well as comment boxes and star ratings in in your emails.

6. Gamification for interactive emails

Gamification is like adding an unexpected jolt of fun to your emails. Whether it’s a mini-game, a scratch-off for a discount, or a little quiz, adding a playful element can significantly increase engagement. For instance, a “spin the wheel” game can entice subscribers to click through to see what prize they might win.

Games and quizzes aren’t just fun – they also encourage subscribers to spend more time with your brand, increasing the chances they’ll take action, like making a purchase.

Plus, if you do them regularly, gamified emails create a sense of anticipation, making subscribers look forward to your next fun-filled campiagn. And if the interactive element isn’t fully supported by the email client, you can always include a link with a “view in browser” option to ensure everyone gets to play.

Our old friend Jay Oram cashed in on the Wordle craze and figured out a way to build the game for email inboxes. Check out his episode of Notes from the Dev for more.

For more ideas on email gamification check out these articles and videos:

• Notes from the Dev: Rock, Paper, Scissors
• Scratch-off game for email
• Magic 8-ball for email
• Tic Tac Toe with AMP for Email

7. Animations in email

Animations can add a touch of magic to your emails. Whether it’s a subtle fade-in effect, a bouncing CTA button, or a more elaborate animated sequence, these elements can make your emails feel more lively and engaging. You could even trigger animations on click, giving subscribers a little surprise when they interact with certain parts of the email.

Animations are great for drawing attention to key areas, like new product launches or special promotions. They can also make your email feel more modern and polished. Just be sure to test them across different devices and email clients, as not all support animations equally well.

For a festive touch, check out this tutorial on creating an email with a falling snow animation.

8. Quizzes and surveys

Quizzes and surveys in emails are not just for fun – they’re powerful tools for engagement and data collection. Whether you’re testing your subscribers’ knowledge, gathering opinions on new products, or simply trying to learn more about their preferences, quizzes and surveys can be a great addition to your email strategy.

They’re engaging because they require active participation. Subscribers aren’t just passively reading; they’re interacting and sharing their thoughts. This can lead to deeper engagement and provide you with valuable insights. Plus, people love quizzes! They’re a great way to make your emails feel more interactive and personalized.

Check out our tutorial on building interactive email quizzes or find out how to use AMP for Email to build polls and surveys.

9. Interactive email hotspots

Hotspots in email are often clickable elements that reveal something such as an image or additional information. This type of interactivity is sometimes called a “positioned information overlay.” But come on – hotspot sounds way cooler.

Here’s how Jay Oram used hotspots to help people learn about leaves. Get his advice on coding interactive hotspots for email.

One use case for hotspots in interactive email could be exploring a product’s features and benefits using an image. Interactive maps are another way you could use hot spots to enhance an email. You could also use them on charts and graphs or in an infographic.

Interactive email challenges

Interactive emails are awesome, but they come with their own set of challenges. Not all email clients support interactive elements, which can lead to a less-than-ideal experience for some subscribers. For example, Outlook has been known to be a bit of a stickler for interactivity, often stripping out some of the cooler features. Even Gmail can have limitations, depending on the complexity of the interactive elements.

That’s where fallbacks come in. Interactive email fallbacks are a backup plan for when an element doesn’t work. It ensures that even if the fancy interactive parts don’t display, the email still functions and communicates its message. For instance, if an interactive carousel isn’t supported, you can show a static image instead. Fallbacks are crucial for maintaining a consistent experience across different platforms.

Tools and solutions for interactive emails

Creating interactive emails doesn’t have to be rocket science, thanks to some handy tools and frameworks. One of the most exciting developments in this space is AMP for Email. AMP (Accelerated Mobile Pages) is a framework initially developed for faster web experiences, and it’s now making waves in the email world. With AMP for Email, you can create dynamic, interactive content directly in your emails. Think of it as bringing a bit of the web into the inbox. You can use it for things like real-time data updates, interactive forms, and even in-email shopping experiences.

Apple Mail and other clients using WebKit as their rendering engine generally have good support for interactive elements, including CSS animations and basic JavaScript-like functionality. This makes them fertile ground for trying out some of the more advanced interactive features. However, always remember to test thoroughly, as each client can behave slightly differently.

Tools like MailModo make creating interactive emails more accessible, offering drag-and-drop interfaces that simplify the process. Our team has also enjoyed using NiftyImages for features like countdown clocks, polls, maps, and other types of dynamic email content.

Test your emails to gain send-button confidence

Investing time and resources into creating high-quality, interactive emails is great, but none of that matters if they don’t work as intended. That’s why thorough testing is essential. It ensures that your emails look and function correctly across all devices and clients, giving you the confidence to hit “send” without worrying about potential issues.

While Sinch Email on Acid provides an excellent way to test email client rendering, we should point out that testing interactive emails still requires some manual work. That’s because platforms like ours deliver screenshots of emails. To effectively test an interactive email, you’ve got to interact with it in different environments.

However, automated email testing can help you take a quick look at a static version of your email, and it lets you know if your fallbacks are working in clients where your interactive campaign isn’t supported.

Sinch Email on Acid provides a comprehensive platform for testing your emails, helping you catch any problems before your subscribers do. Whether it’s checking for rendering issues or ensuring that your interactive elements have proper fallbacks, testing is the key to a successful email campaign.

The post Unleash Creative Ideas for Interactive Emails appeared first on Email on Acid.

People have been checking their email on mobile devices for decades, yet developing mobile-friendly emails remains a challenge for many senders.

Sinch Mailjet’s report on email engagement found that 71.5% of consumers say they primarily check their email on a mobile device. That’s why we strongly encourage taking a mobile-first approach to email development.

No matter if you are a B2B or B2C company, your emails need to look their best and function properly on both desktop and mobile. That’s why in this article, we’ll give you the information and code snippets you need to code your own responsive HTML email template.

What makes an HTML email responsive?

Mobile responsiveness refers to the capability of an email to adapt its layout and content dynamically across various screen sizes and devices. This ensures that emails are readable and function correctly on smartphones, tablets, laptops, and desktops.

Depending on the size of the screen on which a subscriber is viewing your email, you can code things so that the size of the text, number of columns, size of images, and other factors adjust accordingly.

Responsive HTML email design ensures your campaigns are not only easy to read but also easy to engage with. Your subscribers can avoid excessive zooming or scrolling and instead view the email in a way that’s ideal for the screen they’re staring at. This delivers an acceptable user experience and ensures your engagement rates don’t plummet.

Emails that are not responsive will always perform far worse then those you’ve optimized for mobile. If people can’t read it, they won’t get the message. If they can’t click, they probably won’t convert. If the layout is a hot mess, it’s going straight in the trash – because the cute garbage-can-shaped delete button in their email app is definitely optimized for mobile.

Mobile-Responsive vs. Mobile-Friendly vs. Fluid-Hybrid Emails

What’s the difference between a responsive email and one that’s mobile-friendly? Where do fluid-hybrid emails fit into the picture? You may hear these three terms used when discussing ways to optimize emails for mobile. Here are some quick explanations to clear things up…

Mobile-responsive emails: These typically use CSS media queries to adjust the email layout based on the device’s screen size. This method ensures that the email looks great on all devices by dynamically changing its structure.

Mobile-friendly emails: Designed with mobile users in mind, these emails are generally simpler and use larger fonts and buttons but do not adjust to different screen sizes dynamically. The key difference is that you can code and design an email for mobile, but that doesn’t make it responsive.

Fluid-hybrid emails: This is a way to develop responsive HTML emails with minimal use of media queries and breakpoints. Instead, fluid-hybrid coding involves using percentages for widths so that elements of the email expand to fill the screen. A max-width media query is still used to limit how much things expand on larger, desktop screens. This is a more advanced approach, but it also an effective and consistent way to develop emails. Check out Nicole Merlin’s guide for some expert advice.

In this article, we’ll explain how to build a responsive HTML email template using min-width media queries. Doing it this way, rather than using max-width, means you code for mobile first and expand the layout for larger screens.

3 steps to create a responsive HTML email template

Let’s start looking at the code you’ll need to build a responsive HTML email template. We asked Megan Boshuyzen to show us how she’d develop a mobile-first email that expands to two columns on desktop.

Of course there’s more than one way to do it. But if you need an easy (and dare we say lovely) way to code a responsive email, this is all you need.

1. Start with HTML <table> structure

Begin with a clean, table-based layout, which is widely supported across email clients. Use nested tables to control the structure and layout of your email content. Using <div>s instead of <table>s is also a valid way to approach this. However, we’re using tables in our tutorial to make sure your template works in desktop versions of Outlook.

For more on the email geek debate over tables vs divs, check out a fun “Battle of the Devs” between Megan Boshuyzen and Anne Tomlin at Parcel Unpacked.

                            

                                <table class="container" role="presentation" width="600" cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse;max-width:600px;width:100%;">
	<tr>
		<td align="center">
            <!-- Email content goes here -->
        </td>
    </tr>
</table>
                            
                        

Don’t forget to set the table role to presentation (role="presentation"). This makes your email more accessible because screen readers will know the <table> is being used for layout purposes and not to display data.

2. Add your mobile styles first

Many people still use a max-width media query to code emails for desktop first and then apply mobile styles for smaller screens. We recommend flipping that process on its head and starting with code for mobile.

Megan often points out that coding for desktop first requires more code. Plus, when you use a min-width media query for responsive email design, if your desktop styles don’t work, the design will still look fine. You can’t say the same for how desktop styles display on mobile.

Here’s code that makes mobile styles the default in a responsive HTML email template:

                            

                                <style type="text/css">
    body, table, td, a {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }

    body, html {
        margin: 0;
        padding: 0;
        width: 100% !important;
    }

    h1, h2, p, a {
        font-family: Arial, sans-serif;
        line-height: 1.3;
    }

    img {
        max-width: 600px;
        width: 100%;
        display: block;
    }

    .container {
        width: 100%;
        padding: 10px;
    }

    .content {
        display: block;
        padding: 1em;
    }

    h1, h2 {
        margin: 0;
    }
</style>
                            
                        

Be sure to use display:block; for the content in your columns. This ensures email elements in the table layout will stack on top of each other for mobile viewing.

3. Add your desktop styles

Here’s where the media query comes into play. Once again, we’re using a min-width media query so that, beneath the hero image, our mobile styles expand into two columns for desktop.

Basically, what a min-width media query does is define what to do when a device’s width is greater than the breakpoint. We’ve set the breakpoint below to 600px, which is an ideal width for most mobile phones as well as tablets.

                            

                                @media only screen and (min-width: 600px) {
    .container {
        width: 100% !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        display: block !important;
    }


    .content {
        width: 50% !important;
        font-size: 16px !important;
        display: table-cell !important;
    }
}
                            
                        

For desktop styles, you’ll need to change display:block; to display: table-cell; in the media query. This makes it so the content expands to two columns. Of course, setting the content width to 50% ensures what’s in the two columns fits neatly side-by-side.

You can also use media queries to make other enhancements for mobile or desktop viewing. That includes resizing images, adjusting text size, and modifying the email’s padding and margins for certain viewports.

If you ever need to target a range of screen sizes or a specific device, like a smartwatch for example, you can use both min-width and max-width media queries. Discover some other ways to use media queries in email.

The complete code for a responsive email template

Finally, here’s a look at all the code you’d use to build exactly what we showed you at the start. You’ll need to customize this code to meet your needs. That includes adding your own font stack for email, replacing the placeholder image, as well as updating the information and links in the email footer.

                            

                                <!DOCTYPE html>
<head>
	<title>Responsive Email</title>
	<style type="text/css">
		body, table, td, a {
			-webkit-text-size-adjust: 100%;
			-ms-text-size-adjust: 100%;
		}

		body, html {
			margin: 0;
			padding: 0;
			width: 100% !important;
		}

		h1, h2, p, a {
			font-family: Arial, sans-serif;
			line-height: 1.3;
		}

		img {
			max-width: 600px;
			width: 100%;
			display: block;
		}

		.container {
			width: 100%;
			padding: 10px;
		}

		.content {
			display: block;
			padding: 1em;
		}

		h1, h2 {
			margin: 0;
		}

		@media only screen and (min-width: 600px) {
			.container {
				width: 100% !important;
				max-width: 600px !important;
				margin: 0 auto !important;
				display: block !important;
			}


			.content {
				width: 50% !important;
				font-size: 16px !important;
				display: table-cell !important;
			}
		}
	</style>
</head>
<html lang="en">
	<body>
		<div lang="en" dir="ltr" style="padding:0; margin:0;">
			<table class="container" role="presentation" width="600" cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse;max-width:600px;width:100%;">
				<tr>
					<td align="center">
						<h1><img src="https://fakeimg.pl/600x300/" alt="" width="600" /></h1>
					</td>
				</tr>
				<tr>
					<td>
						<!--[if mso]>
						<table role="presentation" align="center" width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
							<tr>
								<td>
						<![endif]-->
									<table role="presentation" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;max-width:600px;width:100%" width="600">
										<tr>
											<td class="content">
												<h2>Lorem, ipsum dolor.</h2>
												<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, consequatur itaque? Quaerat sunt, repudiandae magnam ipsum atque officiis, fuga molestiae itaque vitae tempore sit iste aut expedita similique consectetur repellendus?</p>
											</td>
											<td class="content">
												<h2>Lorem, ipsum dolor.</h2>
												<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, consequatur itaque? Quaerat sunt, repudiandae magnam ipsum atque officiis, fuga molestiae itaque vitae tempore sit iste aut expedita similique consectetur repellendus?</p>
											</td>
										</tr>
									</table>
						<!--[if mso]>
								</td>
							</tr>
						</table>
						<![endif]-->
					</td>
				</tr>
				<tr>
					<td>
						<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" align="center" style="border-collapse:collapse;">
							<tr>
								<td class="content" style="border-top:thin solid #000;">
									<p>123 Main Street<br />Main City, USA 00000</p>
									<p><a href="#">Unsubscribe</a></p>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>
                            
                        

A responsive email template like this could be modified for a newsletter that showcases your articles in two columns on desktop and stacks everything for mobile. It could also be useful for an email featuring multiple products and descriptions or for an email listing speakers and bios at a webinar or live event.

Test your responsive email templates before you hit send

While you can fire off a test email to a few colleagues to see if your responsive emails respond as expected, there’s a better way to find out if they look good on mobile devices.

Sinch Email on Acid is a top choice for marketing teams when it’s time to conduct quality assurance on an email campaign. Use it to see previews of how your email renders on more than 100 clients and popular devices like iPhones and Google Pixels.

As a complete pre-send email testing platform, you’ll also have access to tools that check deliverability, validate images and URLs, and test email accessibility. Enjoy a 7-day free trial to give Sinch Email on Acid a spin. See how it could help you put your best email forward.

The post Code a Responsive HTML Email Template in 3 Simple Steps appeared first on Email on Acid.

If that sounds crazy, I get it. But just wait.

You may have come across Mark Robbins thanks to his appropriately named website, GoodEmailCode.com. Besides being an accomplished email developer, Mark is also a software engineer who’s worked for Salesforce and is currently working with our friends at Parcel.io. Plus, he’s a founding member of the Email Markup Consortium (EMC), which is advocating for email industry standards that improve inbox experiences.

While those of us who code emails know that desktop versions of Outlook can be a major pain, Mark managed to find a silver lining in this cloud of frustration. Get ready for a little nostalgia from the early aughts. Check out the episode below and keep reading for more.

Word rendering engine: The big problem with Outlook emails

Email rendering refers to the way different email clients support and process the HTML and CSS code in your campaigns. The use of different rendering engines often leads to inconsistent results in various inboxes. For example, Apple Mail uses WebKit for its rendering engine, which has some of the best support, and allows for more interactive elements in emails.

Desktop versions of Outlook, however, use Microsoft Word to render emails. The Word rendering engine is what causes many of the most common email coding challenges. That includes everything from random white lines in Outlook to issues with animated GIFs.

MSO styles for Outlook emails

One way email developers address issues with HTML emails in Outlook is using Microsoft Office (MSO) style attributes using the <mso- > prefix. This allows us to create fallbacks for desktop versions of Outlook using conditional code.

Note: Outlook for Mac, iOS, and Android do not use the Word rendering engine, which means MSO styles are not supported.

Mark’s website has a collection of code snippets featuring MSO styles, including ways to format text for Outlook emails. That’s where we’re heading next…

Using WordArt to easily enhance Outlook emails

Ready to create email designs like it’s 1999? 25 years ago, if you were using Microsoft Word to design an invitation to your birthday party or wanted to make your homework assignment snazzier – you probably used WordArt.

If that only sounds vaguely familiar, maybe this will refresh your memory:

In this episode, Mark shows us an easy way to go into the word processor and quickly generate code that turns the Word rendering engine into a sort of superpower. You can use it to add WordArt inspired typography and more into your Outlook emails.

Why would you want to do this? Well, my friends, the 90s are back. You’ve probably noticed graphic design trends reminiscent of commercials that aired during your favorite Saturday morning cartoons. Those looks are showing up in email marketing campaigns too. Check out some of the most-popular selections on Really Good Emails and see for yourself.

5 steps to use the Word rendering engine for cool stuff

While you can always use MSO styles to manually code stylized text for Outlook emails, there’s a faster way to generate the code. Believe it or not – you basically design it right in Word.

Here’s how Mark explained the process in five steps:

1. Open Microsoft Word and create some stylized text.
   • Mark chose an embossed yellow typeface with a reflection.
2. Save the Word doc with your stylized text as a web page.
3. Open that HTML file up in a web browser so you can view the code.
4. Right click and select “View Page Source” to find and copy the MSO styles and text from the HTML file.
5. Paste the code into your email editor where you want it to appear.

After that, you’ll need to send a test email to Outlook or generate email previews with an email testing tool to see how your stylized text gets rendered. Here’s what showed up in Mark’s test email:

Mark points out that the snippet you grab from Word will include a bunch of unnecessary code that you can and should get rid of to clean things up. He also adds that, because it is still live text, screen readers pick it up just fine for recipients with accessibility concerns.

You may have noticed that the little WordArt icon in the latest versions of Microsoft Word doesn’t exactly give you the same options as those fantastically funky ‘90s fonts did. Don’t worry. You can also turn back time and relive your early days of design.

Justin Pot wrote an article for Popular Science explaining how to get back to that retro WordArt. It’s simply a matter of saving a file as a Word 97-2004 file (or .doc instead of .docx) and opening it in compatibility mode.

Bonus: easily create VMLs with MS Word

That’s not where Mark’s tips end either. He also showed us how you can use shapes and drawings in the word processor to generate Vector Markup Language (VML) images for the Word rendering engine to display in emails.

Most email developers include a VML namespace declaration in the HTML tag of every email to support the use of vector images in Outlook emails. With Mark’s trick, you can use Word to quickly add shapes like stars to an Outlook email, but you can also try adding icons, charts, and more.

Mark says he’s only begun to explore what’s possible with the Word rendering engine, and he encourages you to play around with it too.

See what you can do and experiment with it a bit more, because Outlook just gets forgotten so much. You’re just trying to make something passable. But actually, we can enhance it and do something kind of cool with it.

Mark Robbins Software Engineer, Parcel

Why the Word rendering engine’s days are numbered

We should mention that the future of email may eventually bring an end to the use of the Word rendering engine. That’s because a new Microsoft Outlook for desktop is using a web browser engine just as other email clients do.

This doesn’t mean the versions of Outlook that use the Word rendering engine are disappearing anytime soon. We all know how long it takes people to update software, and legacy Outlook installations will be around for years.

Mark talked about this in his presentation at Email Camp in 2023. The session also encouraged email developers to “stop putting Outlook first.” That’s because it can limit you from achieving everything that’s possible inside the email inbox. However, even if you don’t prioritize Outlook, you can still design a cool experience for Outlook users.

More from Mark Robbins and Parcel.io

Look for Mark at email industry events, follow him on Twitter/X @M_J_Robbins, (he recently switched to Mastodon instead). You’ll also find him helping out devs like you and me in the Email Geeks Slack community.

Here are a few other videos from Mark to check out:

• Email Odyssey: Journeying Across Email’s Present & Future – Email Camp 2023
• Registration Email Breakdown at Parcel Unpacked 2.0
• How I Learned to Stop Worrying and Love Email – Smashing Conference 2023
• 2019 dotmagazine interview on interactive emails

And finally – here’s a special treat for NFTD viewers from the folks at Parcel.io:

As you heard at the end of the episode, Mark Robbins and Parcel are offering free trials of Parcel Pro for our fans. Parcel is one of my favorite email development tools, and I highly recommend checking it out.

Sign Up to Start Your Parcel Pro Trial

How Email on Acid can help with Outlook emails

While we’re talking about tools for email developers, I’ve got to mention how Email on Acid can be a big benefit, especially when it comes to optimizing emails for Outlook.

When you want to test how an email renders in Outlook or any of the most popular clients and devices, our Email Previews deliver accurate screenshots for you to review. With unlimited testing on every plan, you can play around with Word and preview as many emails as you want.

If you’re wondering if coding emails specifically for Outlook users is worth your time, our advanced Email Analytics can help with that. You’ll get a breakdown of the clients and devices your subscribers use to view your emails along with many other advanced insights like Read, Skim, and Delete rates to measure email engagement. Plus, our Email Accessibility checks ensure every subscriber can engage with what you send.

Finally, thanks for being fans of Notes for the Dev. We love making the show and we’re planning to revamp and relaunch in the coming months. Make sure you subscribe to Email on Acid’s YouTube channel so you don’t miss it.

The post Notes from the Dev: Use the Word Rendering Engine to Enhance Outlook Emails  appeared first on Email on Acid.

We probably don’t have to tell you that a lot of people use Gmail… but we will. According to Sinch Mailjet’s new report, The path to email engagement 2024, 71% of consumers in its global survey said they have a Gmail account. That’s why mastering the art of crafting emails tailored specifically for Gmail is non-negotiable.

In this article, we’ll delve into the specific hurdles encountered when coding HTML emails for Gmail, shedding light on practical strategies for overcoming these Gmail obstacles.

Gmail CSS Support

Despite its popularity, Gmail presents unique challenges for email developers, particularly in its support – or lack thereof – of certain CSS properties. But before we get too far, it’s important to understand that there are different some types of Gmail users.

Understanding GANGA and Its Impact on Gmail Email Rendering

Whenever we’re discussing Gmail’s CSS support it’s important that we make the distinction between GANGA and non-GANGA.

GANGA (Gmail Android with Non Gmail Accounts) represents a subset of Gmail users who access their emails through non-Gmail email accounts on the Gmail app. This distinction is important because the Gmail apps render emails differently compared to the Gmail web interface, often leading to variations in email display and functionality.

Gmail’s CSS Support: Navigating the Limitations

It’s essential to consider Gmail’s CSS support and its implications on email rendering. Here’s a breakdown of a few key Gmail CSS support notes, and the challenges they present:

1. Embedded CSS – Gmail does support embedded CSS, allowing for styling within the <style> tags directly within your <head> section of the email, but it’s not supported on the GANGA accounts we mentioned above.
2. Dark mode limitations – Unfortunately, Gmail does not support the prefers-color-scheme media query, which many developers use for dark mode optimization. This limitation can affect the readability and visual appeal of emails for users who prefer dark mode settings.
3. Gmail doesn’t support web fonts – Despite Google owning the largest repository of web fonts, using their own Google fonts in an email is not supported. The only two fonts that are supported are Robot and Google Sans.

13 tips for coding HTML emails for Gmail

We’ve compiled our top tips for coding HTML emails for Gmail. If you’re having issues or you just want to optimize your email creation process for Gmail, this list has you covered!

1. Gmail clips messages larger than 102kB

This is by far one of the most common Gmail tricks utilized for email developers. If your email’s size exceeds 102kB, Gmail will display the first 102kB along with a message that reads:

If you’re close to 102kB, you can save a few bytes by removing any unnecessary spaces, line breaks, or comments. You also want to avoid embedded images and documents when sending HTML emails.

Additionally, if your email has special characters that aren’t properly encoded, Gmail will clip it. Make sure all special characters are encoded correctly to prevent this from happening. Below are a couple of examples of special character encoding.

• Copyright symbol ©: ©
• N dash: &ndash;

If you’re working with larger emails, you’ll want to make sure you condense your code as much as possible. If you need more help getting your email under 102kb check out our Gmail clipping guide.

2. Gmail has several email clients

Usually when you’re coding emails, you’re only worrying about the differences between Desktop and Mobile clients, the GANGA issue with Gmail that we discussed earlier adds an extra layer of complexity.

While Gmail has simplified its interfaces over the years, there are still several different email clients with different levels of CSS support and other quirky variations when rendering HTML emails.

3. Gmail apps for non-Gmail accounts (GANGA) does not support embedded styles

Whenever the Gmail app is accessed with a non-Gmail account, embedded styles will no longer be rendered.

Luckily, in 2017 Google added support for background images. Although we can’t use the background-size CSS that we utilize for a lot of email clients we can use short-hand CSS like so:

                            

                                background: url(‘image.jpg’) center / cover no-repeat #3ab97d;
                            
                        

If you test this and see that your background image is still not rendering for GANGA emails in Gmail’s Android or iOS app, it may be because of another little rendering quirk. On both apps, images are blocked by default for GANGA emails.

Normally, you will see a link to display the blocked images, but if your email only uses a background image and doesn’t include any other images, this link will not display. Make sure that if you’re using a background image you also include a regular image so that the “display images” link will appear.

4. Gmail only supports <style> in the <head>

Gmail does support embedded styles (<style>). However, Gmail style tags support is limited to the head of your HTML document. Gmail, Android, and iOS apps do not support <style> at all when rendering emails retrieved through non-Gmail accounts (GANGA).

5. Gmail removes your entire <style> block if it encounters an error

Gmail will strip all of your <style> block if it encounters anything it considers an error. The most common occurrence of this is when you’re nesting @ declarations (placing @ within @s), this is often used when declaring web fonts or declaring a viewport for Windows mail.

If you’re using these declarations in your code, wrap them in their own style tags and put the styles that are Gmail-safe in the top block.

Gmail also eliminates your style block if it exceeds 8192 characters. If your style block exceeds this character limit, split it into two parts. Gmail will remove the first block that exceeds the 8192-character threshold and any blocks after it (the character count includes all of your style blocks).

6. Gmail doesn’t support web fonts other than Roboto and Google Sans

It might seem crazy, but Gmail does not support its own Google Fonts. Gmail exclusively supports Roboto and Google Sans as web fonts. While this limitation may come as a surprise, it’s essential to adapt by utilizing font stacks to declare preferred fonts in emails. This approach ensures compatibility across email clients.

Read our complete guide on utilizing font stacks for cross-client font support.

7. Gmail lacks support for attribute selectors and pseudo-classes

If your Gmail CSS is not working correctly, check whether you’re using attribute selectors and pseudo-classes in your code.

Although attribute selectors (like the one below) allow for more flexibility when selecting elements in CSS, Gmail doesn’t support them.

                            

                                div[class="content"]{ color: red }
                            
                        

Gmail also doesn’t support pseudo-classes like :checked and :active and only supports :hover in their webmail client. Therefore, interactive email support in Gmail is very limited or non-existent unless you use AMP for Email.

8. Avoiding image download icons in Gmail

If an image isn’t wrapped in a URL, Gmail will overlay an icon that lets recipients download the image. At worst, this icon could obscure important information in your image. At best, it just looks unprofessional.

The best solution for removing this annoying icon is to ensure all your images have a link. There are a few other solutions if this isn’t doing the trick for you, including setting the image as a background image or using something known as a sibling selector. Find out more in our handy guide on preventing Gmail from displaying the image download icon.

9. Gmail does not allow negative CSS margin values

Using negative margin values in CSS is a very common web development technique to overlap page elements. Unfortunately, it’s not supported at all in Gmail.

To achieve this overlapping effect in your emails, you’ll need to use the Faux-positioning technique, though this itself is not supported in GANGA. Make sure you take a deep dive into your analytics before you employ any of these techniques.

10. Coding phone numbers and emails in Gmail

Gmail streamlines user experience by automatically converting phone numbers, email addresses, and URLs into clickable links, enhancing convenience. However, for email developers, this feature adds to the catalog of elements that may not display as intended in Gmail. For instance, Gmail transforms “name@test.com” into:

                            

                                <a href=“mailto:name@test.com”>name@test.com</a>
                            
                        

Worse yet, the links will be default blue and underlined. Mostly, this auto-linking issue is just a bit of an eyesore, but it can cause problems if you’re using fake domains for the purpose of creative expression (e.g. dabomb.com) or if you simply don’t want a piece of information to be clickable.

Here are three potential fixes, depending on the results you’re after:

Use an HTML entity that Gmail doesn’t recognize

If you don’t want certain phone numbers, emails, or URLs in your email to be automatically wrapped in a link, use an HTML that Gmail does not recognize, such as &#173;. This will keep Gmail from recognizing the text as something that should be auto-linked.

For phone numbers, you would insert this entity before each dash. So the phone number 212-389-3934 would be coded as:

                            

                                212­-389­-3934
                            
                        

For an email address like name@test.com, you can add the entity before the period preceding the domain type:

                            

                                name@test­­.com
                            
                        

To prevent a URL from being automatically converted to a link, you would code it like you would an email address and add the entity to the period preceding the domain type and after the https://. So https://www.mydomain.com would be written as:

                            

                                http:­­//www.mydomain­­.com
                            
                        

Insert an anchor tag around your text and style it

If you just want your text to look as if it hasn’t been converted to a link, you can always wrap it in an anchor tag and style it to match the surrounding text. For example:

                            

                                <a href="#" style="color:#000; text-decoration:none">name@test.com</a>
                            
                        

It will still be a clickable link on hover, but it won’t look like a link and will be much less likely to be clicked on.

11. Gmail uses the HTML5 DOCTYPE

If you specify a DOCTYPE other than HTML5 in your email, you’ll find that it won’t render the same way in Gmail as it does in a browser or in an email client that respects your DOCTYPE. This is because Gmail renders all emails using the HTML5 DOCTYPE.

This is an issue that is not exclusive to Gmail. Many other email clients force HTML5, including Yahoo! Mail, Outlook.com, and Yandex on Mobile and Desktop Webmail; Inbox and Yahoo! Mail on iOS; and Inbox on Android. Apple Mail and Outlook both support whatever DOCTYPE you want to use, but since most other email clients support only HTML5, it’s best to just stick with the HTML5 DOCTYPE for your emails.

If you’re interested in reading more about how Doctypes affect your email code, you can check our guide here.

12. Gmail DOCTYPE causes extra space around images

Gmail’s HTML5 DOCTYPE can create extra space under your images. This is especially problematic if you’re using sliced images (although it’s probably best to avoid using sliced images anyway). Extra spacing where it’s not wanted can also detract from your email’s aesthetic and make reading it more difficult. 

To avoid this issue, here are a few workarounds (these work in Outlook.com and Yahoo! as well):

1. Add style display:block to the image element
<img src=“test.jpg” style=“display:block”>

2. Add align absbottom in the image element
<img src=“test.jpg” align=“absbottom”>

3. Add align texttop to the image element
<img src=“test.jpg” align=“texttop”>

4. Add line-height 10px or lower in the containing TD
<td style=“line-height:10px”>

5. Add font-size 6px or lower in the containing TD
<td style=“font-size:6px”>

Still having image spacing issues and the above fixes are not working? Learn about other workarounds for image spacing.

13. Gmail’s dark mode inconsistencies

Gmail encounters several challenges with dark mode compatibility across Android and iOS platforms.

Among these, a significant concern arises when Gmail compels light-colored text to transition into dark text on iOS. For instance, if an email is composed with white text against a black background, iOS’s dark mode reverses it to black text on a white background, undermining the essence of dark mode.

This behavior isn’t limited to white text but extends to any light-colored text, leading to potential accessibility and readability complications.

Rémi Parmentier wrote a very thorough article about how to combat dark mode inconsistencies in Gmail for Android and iOS using CSS blend modes. His example code is included below:

                            

                                <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixing Gmail’s dark mode issues with CSS Blend Modes</title>
    <style>
        u + .body .gmail-blend-screen { background:#000; mix-blend-mode:screen; }
        u + .body .gmail-blend-difference { background:#000; mix-blend-mode:difference; }
    </style>
</head>
<body class="body">
    <div style="background:#639; background-image:linear-gradient(#639,#639); color:#fff;">
        <div class="gmail-blend-screen">
            <div class="gmail-blend-difference">
                <!-- Your content starts here -->
                Lorem ipsum dolor, sit amet, consectetur adipisicing elit.
                <!-- Your content ends here -->
            </div>
        </div>
    </div>
</body>
</html>

                            
                        

The solution is limited to white text only, but it should still be helpful if you need to come up with a workaround for the dark mode issues in iOS.

Learn more about dark mode email development challenges and how to tackle them.

What about Gmail and AMP for Email?

AMP (short for Accelerated Mobile Pages) is an open-source framework launched by Google in 2015. It provides a straightforward way to create web pages that are fast, smooth-loading, and prioritize user-experience. AMP for Email was publicly released for Gmail Web in 2019, allowing users to include AMP components within emails.

AMP for Email functions via a novel mark-up and infrastructure which allows interactive elements like carousels, forms, dynamic data, and APIs to be inserted in the email body.

Email developers seeking to elevate their campaigns beyond traditional static content can harness the power of AMP for Email to deliver more engaging and personalized experiences to their subscribers. With AMP developers can create emails that dynamically adapt to user interactions, providing tailored content and functionalities based on recipient actions. This not only enhances user engagement but also enables email marketers to track and analyze recipient interactions in real-time, facilitating data-driven campaign optimization.

If you’re interested in experimenting with AMP for email you can read our post about it here or check out the official AMP documentation.

Gmail’s sender guidelines for 2024

In early October 2023, Gmail and Yahoo announced new requirements for bulk senders looking to deliver mail to those using their services. While the strictest standards mainly impact those who send thousands of emails every day, even those with lower send volumes should consider updating their practices.

The new bulk sender requirements mainly deal with the following areas:

• Implementing stronger email authentication practices.
• Providing an easy way to unsubscribe in one click.
• Monitoring spam complaint rates to keep them under specific thresholds.

We took a deep dive into what you’ll need to do to get delivered to Gmail and Yahoo.

If you’re looking for an email deliverability solution that can help you reach Gmail inboxes, check out Mailgun Optimize. It’s a complete deliverability suite that integrates with Google Postmaster Tools, helps you monitor authentication protocols, and much more.

Conquer Gmail with Sinch Email on Acid Testing

Between GANGA, image changes, link styling, doctypes and more we covered a lot of Gmail CSS support intricacies that can affect the way your email campaigns render in subscribers’ inboxes.

That’s where Sinch Email on Acid testing comes into play, it’s crucial that you run extensive tests for everything we’ve discussed in this article. Our testing tools allow you to quickly and efficiently check these different versions of Gmail and ensure your emails are rendering as you intend.

Our Email Previews include Gmail options on a wide range of Android operating systems and devices as well as dark mode previews. Looking good on Gmail matters and Email on Acid helps you deliver your best.

The post Gmail HTML Email Development: Why Your CSS Is Not Working (and More)  appeared first on Email on Acid.

In this article, we’ll explore how you can add background images into your email designs, enhancing the overall design. You’ll find how to make your email background image responsive and make sure it renders correctly on problematic clients like Outlook.

Why use an email background image?

Adding a background image in your emails can significantly enhance their visual appeal because it opens up a lot more options for unique designs. There are several compelling reasons to use email background images.

1. Background images grab attention and contribute to a visually appealing design, making your emails stand out in crowded inboxes.
2. Strategic use of background images helps reinforce your brand identity, fostering recognition and trust among recipients. They can help your email designs match more to your overall website/marketing designs so users get that instant brand recognition.
3. By using background images, you can draw attention to specific sections of your email, emphasizing key messages or calls to action.
4. Background images provide a canvas for creative expression, allowing you to experiment with different themes, styles, and artistic elements to make your emails more memorable.

Background images in email marketing can range from subtle textures and patterns to more elaborate visuals, such as product images, scenic landscapes, or lifestyle shots.

Below you can see an example of a subtle background texture compared to the version with no background image. Notice the darker blue wave behind the CTA button. The background image here helps to add a bit of depth to the design, so it’s not just a large block of one shade of blue. Of course, that solid blue background is better than the alternative.

What we’ve done above is code a solid background color behind the image that works with the design and shows up as a fallback when needed. For example, when Outlook blocks images the email is still readable. If the background image were blocked, and the background was white, a lot of this email would be unreadable.

Here is an example of an email background image that uses more striking lifestyle photography to add layering to the design:

Although it’s totally fine to just use solid blocks of color as your background, you can also use bulletproof backgrounds like these to add a bit of flair to your designs.

What does “bulletproof” mean?

You’ll often hear email developers refer to certain elements as “bulletproof”, simply an email element that is bulletproof retains its functionality on any email client, regardless of the level of HTML and CSS support that client has.

It’s worth noting that bulletproof elements may vary visually across clients, but the element’s functionality remains bulletproof.

When email developers refer to a background as bulletproof that means it’ll look good on every email client. Bulletproof backgrounds utilize Outlook-specific code to achieve background imagery on Outlook and have a nice solid fallback color so that whenever images aren’t loaded the email still looks great.

Email client support for background images

Historically, background images have had varied support across email clients. In modern times, the vast majority of popular email clients will render your background images just fine, as long as they’re coded correctly.

The one outlier for this, as always, is Outlook. Outlook does not support background images in the traditional sense but by using Outlook-specific VML code we’ll be able to get background images looking great on Outlook too!

It’s worth noting that Windows 10 Mail will not render background images using either method, so make sure you check your audience numbers with this client before using the techniques below.

How to code HTML email background images 

Let’s break down how to code a background image in an HTML email. The snippet below is ready to use if you want to just copy and paste and change the image and color values, but we’ll also be breaking it down and explaining how it works.

We’ll be referencing this snippet throughout this section:

                            

                                <table role="presentation" width="640" style="width:640px;" cellpadding="0" cellspacing="0" border="0" align="center">
    <tr>
        <td align="center" bgcolor="#000000" background="https://via.placeholder.com/640x400" width="640" height="400" valign="top" style="background: url('https://via.placeholder.com/640x400') center / cover no-repeat #000000;">
            <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 480pt; height: 300pt;" src="https://via.placeholder.com/640x400" />                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 480pt; height:300pt;">
            <v:fill  opacity="0%" color="#000000”  />
            <v:textbox inset="0,0,0,0">
            <![endif]-->
            <div>
                <div style="font-size: 0;">
                    <table role="presentation" width="640" style="width:640px;" cellpadding="0" cellspacing="0" border="0" align="center">
                        <tr>
                            <td height="400" align="center">CONTENT</td>
                        </tr>
                    </table>
                </div>
            </div>
            <!--[if gte mso 9]>
            </v:textbox>
            </v:fill>
            </v:rect>
            </v:image>
            <![endif]-->
        </td>
    </tr>
</table>
                            
                        

Coding your background images

We can break this code down into two sections, the first is our standard background image code. This is how we get our background images working in all the non-Outlook email clients:

                            

                                <td align="center" bgcolor="#000000" background="https://via.placeholder.com/640x400" width="640" height="400" valign="top" style="background: url('https://via.placeholder.com/640x400') center / cover no-repeat #000000;">
                            
                        

This is a pretty simple section of code, we’re setting the background image on our TD element with both CSS and HTML, we’re also using CSS to center it, telling the client to not repeat the background and adding a fallback color for any instances where images aren’t loaded.

The part of the code where we’re telling the client to not repeat it and instead using a background-size property of “cover” may not always fit your design. There are several other background-size properties to consider, such as contain. Check out this breakdown of the background-size property.

Using Vector Markup Language (VML) images

Now that we have our standard background image working for our non-Outlook email clients, let’s start breaking down the Outlook specific portion of this snippet.

We’re using VML here to achieve our Outlook background images. What is VML?

VML (Vector Markup Language) isn’t a standalone coding language like HTML or JavaScript. Instead, it operates within the framework of XML, serving as a tool to integrate 2D vector graphics, such as shapes, into email or web design. These graphics can then be customized with colors, content, and other elements according to your preferences.

When setting up your email, if you are going to be using any Microsoft-specific comment or code along with VML, you need to ensure the correct HTML tag is included in the head of the document, as follows:

                            

                                <html xmlns="https://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
                            
                        

Now, to add our Outlook background we’re using this conditional code:

                            

                                <!--[if gte mso 9]>

<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 480pt; height: 300pt;" src="https://via.placeholder.com/640x400" />                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 480pt; height:300pt;">

<v:fill  opacity="0%" color="#000000”  />

<v:textbox inset="0,0,0,0">

<![endif]-->
                            
                        

The first section we’re just targeting the clients we need, in this case our opening tag of <!--[if gte mso 9]> and closing tag of <![endif]-->, tells us that the contained code will only take effect for, or target, versions of Microsoft Office (mso) greater than or equal to (gte) version 9, Outlook 2000.

Next, we introduce an image using the <v:image> tag, we’re defining the image, telling it to fill the space and also setting the width and height.

Please note: For VML you’ll need to use PTs (points) rather than Px (pixels) to define your sizes, but it’s very simple to do the conversion; just multiply the pixel value by 0.75:

Then we’re adding our image source which is just the src=”link”.

We’re also adding a rectangle below the image as shown by the <v:rect> code, which has the same size dimensions and a fallback color that matches our non-Outlook specific code. This ensures we have control over the styling of the email when the background images don’t load, for example if a user hasn’t yet clicked the “Load images in this email” button.

Finally, you can define the v:textbox positioning to show you’ll be layering additional content over the above rectangle (v:rect) and image (v:image). In this example, we defined the position starting from the top left at "0,0,0,0".

Formatting the VML code

Now, we open the <div> containing the image and VML. Make sure to follow it with <div style="font-size: 0;"> to stop the automatic 20px gap that appears after the image in Outlook.

As the final HTML table tag we used was a <td>, we need to use correct syntax here and either fill the <td> or start a new <table> to add the content.

                            

                                <table role="presentation" width="640" style="width:640px;" cellpadding="0" cellspacing="0" border="0" align="center">
    <tr>
        <td height="400" align="center">CONTENT</td>
    </tr>
</table>
                            
                        

Input the closing tags for all of the above, including the VML tags, closing those within an MSO conditional tag.

The v:fill and v:image tags are self closing, therefore not needed after the table:

                            

                                </div>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>

                            
                        

Although this VML code can be a bit daunting at first, after you’ve used it a few times and had a chance to modify some of the values and see how it affects the rendering you’ll be a VML pro in no time.

Coding responsive email background images

Currently this background image is set to cover the 640 pixel width of the table, which itself is not mobile responsive. If you want to deliver the best experience, you definitely need to make the email background image responsive. Sinch Mailgun’s Email and the customer experience study found more than 70% of consumers primarily view emails on a mobile device.

To add responsiveness to this, we’ll want to add a class to the table and elements that need to be responsive (e.g. class=”width100pc”) and include the corresponding CSS in the head of the email. This can be done within a current media query or its own as shown here:

                            

                                @media screen and (max-device-width:640px), screen and (max-width:640px) {
    .w100pc {
    width: 100%!important;
    min-width: 100%!important;
    max-width: 1000px!important;
    height: auto!important;
    }
}

                            
                        

To make the background image responsive and 100% width, we’ll use the vw measurement and set the image width: 100vw.

By setting a class=”bgmobile”, we can change how our background image behaves within the same media query. Most useful here is the use of background-image: url(), which you can then swap to an optimized mobile image for the background:

                            

                                .bgmobile{
    width: 100vw!important;
    background-repeat: no-repeat!important;
    background-size: cover!important;
    background-image: url(mobile-image.png)!important;}

                            
                        

Email background image fallbacks

You’ll want to make sure you have some fallbacks in place, which we handled in the full background image snippet earlier in the article.

There are times your images simply won’t load. It could be that your recipient has images disabled or perhaps they have a spotty connection and the images aren’t loading. Either way, ensure you always have good background color fallbacks.

Luckily, when it comes to background images, we only need a solid color fallback. Just make sure your fallback background color provides appropriate color contrast with text to support good email accessibility.

Don’t use text on email background images

Here’s something you’ll want to avoid in email campaign backgrounds: important text. Live text is always a better option and should be prioritized.

Designing a background image with key messaging or relevant information on it is almost as bad as sending an image-only email. Subscribers who view the campaign with images blocked won’t see that text. It’s also bad for accessibility. The screen reading software that helps people with vision impairments read and engage with emails can only read the image alt text – not the words on an image. However, it’s usually unnecessary to write alt text for an email background image since it shouldn’t include anything that is vital to the message.

Dark mode background considerations

The rise in popularity of dark mode in email clients means we have to consider it when thinking about our background images.

Dark mode can introduce contrast issues with background images, particularly when switching from dark to light text on light-colored background. This shift can affect readability and overall user experience.

To help address the challenge, consider employing the “dark mode image swap” technique. This approach involves creating two versions of an image – one optimized for dark mode and another for light mode. Using the media query prefers-color-scheme, the recipients chosen theme is detected and the appropriate email background image is displayed.

Test before the next big send

Now that you’re armed with the skills to use background images to take your HTML emails to the next level, it’s important to remember the final step of any email build; the test.

It’s absolutely crucial that you run quality assurance on email campaigns, including for everything we’ve discussed in this article. You’ll want to make sure you’ve added your VML correctly, that your non-Outlook backgrounds are looking great, and that you have no contrast issues with your background images and/or fallbacks when dark mode kicks in.

With unlimited email testing from Sinch Email on Acid, you can preview how your code renders on more than 100 of the most popular clients and devices. Check the background and every aspect of your email in different versions of Outlook, in dark mode, with image-blocking on and off, and much more. It’s the most effective and efficient way to ensure your teams always puts their best email forward.

Credit goes out to our friend, Jay Oram, who wrote the original version of this article back in the day. We’ve reused his solid email code here. You can see Jay’s work and learn more from him over at ActionRocket.

The post HTML Email Background Image Optimization Guide   appeared first on Email on Acid.

In this case we’re looking specifically at one of the most infamous bugs with Outlook; the seemingly random white lines that can get added to your email. The cause of many a headache and frustrated Google search for email developers and marketers alike.

The inconvenient truth is that there’s no magic wand to wave and make those lines disappear, but there are steps we can take to minimize the impact of this bug on your meticulously crafted emails. 

Here we’ll take a dive into what causes them to appear and how we can quash those pesky lines.

In the Trenches: A Dev’s Battle with the 1px Line Bug 

I first encountered the line bug whilst working on an Email on Acid Newsletter. Design was approved, the code was finished and we were running final QA checks. After testing on my live devices and the Email on Acid testing platform, every test looked good to me and I handed it off for the final set of tests. That’s when I got the Slack ping: 

“Hey Alex, what are these lines in Outlook?”

I was perplexed, checked my tests and everything looked a-okay. It was only after re-testing the same code three times that I could replicate the issue. That’s where the headaches began. “Should be a simple fix,” was my first thought. I shuffled a few background colors and figured that’d be the end of it. My new tests looked good but after a few re-tests the issue persisted. 

And it’s been a persistent rendering issues for email developers everywhere.

So, why do white lines appear in Outlook?

Despite Microsoft being fully aware of this head scratching bug no official word has come in the years it’s been plaguing the email development community. It tends to creep up on Windows desktop versions of Outlook, but the white lines can also be a problem for Outlook 365.

Although we can’t be sure, the leading theory is that it comes from the pixel to point conversion that Outlook does, when a line-height, height or font-size is converted from px to pt and ends up as a decimal, the leftover decimal point is added as an ugly white line.

6 methods for fixing white lines in Outlook emails

The flexibility to create emails in a diverse variety of structures and formats is a boon for developers, granting us the liberty to code according to our preferences. 

However, this versatility comes with the inherent challenge of navigating through trial and error when it comes to resolving bugs like the one at hand.

If you’re experiencing these dreaded white lines, you may need to try a few of the fixes below to get rid of them in your emails.

1. Adjusting Heights, Line-heights and Font Sizes

This is the first fix that anyone struggling with these lines should be adjusting your heights, line-heights and font-sizes.

Because of the aforementioned conversion and decimal problem, you’ll want to set all of these to even numbers. Even better if they are divisible by 4. So using font-sizes of 16 or 20 will generally be safer than 18, for example.

Make sure that you’re changing these everywhere, not just the problem section, you don’t want to fix the lines in one area of your email just to have them crop up again later.

2. Adding Outlook-specific Ghost Breaks

If changing your heights and font sizes doesn’t do the trick, you can try adding Outlook-specific ghost breaks into the problem sections to smooth out the heights.

Much like ghost tables, the ghost break is a way to force a line break that is only for the problem clients.

                            

                                <!--[if gte mso 12]><br /> <![endif]-->
                            
                        

3. Using Microsoft-Specific Code in the Head

Although Microsoft-specific code (MSO) can get quite complicated, this snippet of code is fairly straight forward.

                            

                                
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {
border-collapse: collapse;
border-spacing: 0; }
</style>
<![endif]-->

                            
                        

We’re telling the client, in this case Outlook, that we want to collapse all the borders in the email to zero. You’ll want to add this to your Head section. Even though the default border value is already 0, this can still sometimes solve the issue – bizarre!

It’s worth noting that you should be sure to test after trying this code, depending on how your email is structured it can have an adverse effect on your email rendering in Outlook. 

That being said, I’ve used this a few times when the other fixes haven’t alleviated my white line headaches.

4. Using Non-Breaking Spaces

Some email developers have reported that the issue is down to Outlook converting white space, rather than uneven heights. 

The suggested fix for this is to include a non-breaking space ( ) before you close your table cell (<td>).

                            

                                
<table border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
		 </td>
	</tr>
</table>
                            
                        

This will, of course, add some extra white space below your copy, so when trying this fix make sure you’re aware of how it’ll impact your designs.

5. Covering up with Background Colors

The white lines that Outlook adds inherit the color from the <body> tag. So, by setting the background color of the <body> to the same color as our problem section, we essentially cover up the lines. They’re still there, yes, but your subscribers won’t see them. We also want to only target the problem clients. 

There’s no need to change the background color of clients that render the email correctly.

Simply add this code to the <head> of your email with the background color changed to match the problem section.

                            

                                <!--[if (gte mso 9)|(IE)]>
		<style type="text/css">
			body { background-color:#123456 !important;}
		</style>
                            
                        

6. Nest the problem area

If all else fails, add tables. Although this is said half in jest it can help to fix the issue. The white lines can sometimes stem from table structure ending up with uneven scaling behind the scenes.

Simply, wrap the offending area with a new table and see if your line problem disappears.

Troubleshooting Outlook emails

Hopefully one (or a combination of a few) of the fixes above have helped you defeat the random white lines from Outlook. Although this can be a frustrating bug to wrangle, we’re hoping that the new version of Outlook that’s scheduled for 2026 will put an end to these rage-inducing Outlook bugs in the future.

In the meantime, if you need more help with Outlook we’ve got you covered with our Outlook coding guide and our Outlook resource hub. If you want to take a deeper dive into the technical aspects of what causes the white-line bug, you can check out this fantastic thread.

Of course, if you’re not previewing your email campaigns before you launch, you may be unaware of any problems at all. That’s where Sinch Email on Acid comes in. Our pre-send testing platform is designed to simplify the complexities of email and help teams conduct quality assurance (QA).

From annoying white lines in Outlook to previewing dark mode for Gmail to improving email accessibility for your subscribers – with unlimited testing you can be confident you’re delivering your best.

The post How to Get Rid of White Lines in Outlook Emails appeared first on Email on Acid.