Customer.io Is Planning a Crowdfunding Round

Note: Our crowdfunding round is currently live on Republic

Hi there,

I’m Colin, CEO of Customer.io. In a few short weeks, we’re planning to launch a Regulation-CF (Crowdfunding) round to raise money from our community, customers, and supporters.

We’re a profitable company that over 2600 early to mid-stage companies rely on to send emails, push notifications, and SMS messages to strengthen their relationships with their audience.

I haven’t seen other companies in a similar position do a crowdfunding round, so I wanted to share how we think about it and why we’re exploring it.

Regulation changes unlock a new opportunity

In March 2021, the maximum a company can raise through crowdfunding increased from $1.07 million to $5 million. This change makes crowdfunding more interesting for companies that are established and capital-efficient.

A continued focus on capital efficient growth

We believe better companies are built through struggle. Doing more with less is a big part of how we operate. Customer.io has raised less than $4m to generate $20m in Annual Recurring Revenue.

We started using the term “fundstrapping” to describe our approach to building a capital-efficient company.

This approach took a little longer to get going than spending a lot of cash, but we found that it has allowed us to be more durable in the long run. My goal as a founder and CEO is to build a large independent company that endures beyond me. We’re just at the beginning.

Winning together with our community

Professional investors have had an unfair advantage that gives them access to companies before the rest of us. By the time a company goes public, and its customers and supporters can invest, the professionals with special access have reaped their rewards while the public tries to catch up.

Customer.io has succeeded because people fought to bring us into their company against the better-funded upstarts and established incumbents. Their feedback and passion have helped our team build a product for technical marketers that has earned us a loyal following.

Our customers, supporters, and community deserve the opportunity to share in the upside of the success they help create.

An opening to do more for our customers

Our customers tell us that the data in Customer.io is the most comprehensive understanding they have of their business.

They also ask us to do more for them. Support more ways to talk to their customers. Automate more of their business processes. Leverage more data from their other tools. For early and mid-stage businesses, there’s a demand for Customer.io to play an even larger role in fostering a good relationship between their business and every single customer.

This crowdfunding round will help us accelerate creating the future our customers are asking for.

What’s next?

We’ll be launching our campaign with Republic in the coming weeks, at which point we’ll share all of the details. In the meantime, please let us know you’re interested in this opportunity.


Disclaimer:
With regard to communications by an issuer on the Site to gauge interest in a potential securities offering pursuant to the Regulation CF exemption from the registration requirements of the Securities Act, including opportunities to “reserve” securities as indications of interest in the potential offering, please note that pursuant to Regulation Crowdfunding Rule 206 (i) that no money or other consideration is being solicited thereby, and if sent in response, will not be accepted, (ii) no sales will be made or commitments to purchase accepted until the offering statement is filed and only through a registered intermediary’s platform, (iii) any such offer may be withdrawn or revoked, without obligation or commitment of any kind, at any time before notice of its acceptance is given after the qualification date, and (iv) an indication of interest is non-binding and involves no obligation or commitment of any kind.

How to HTML: Your Guide to Designing and Coding Emails That Deliver

Customer.io

Brilliant subject line, compelling message, stunning layout—all the elements you need for a successful email, right? Nope, not by a long shot. All that work is moot if your emails are a wreck when they hit your customers’ inboxes—or don’t land at all. That’s why a smart approach to design and coding is essential in making sure your HTML emails actually perform.

Of course, you can always use a drag-and-drop editor (we happen to think Customer.io’s editor is pretty nifty). But building your own emails in HTML gives you a level of control that allows you to execute your exact brand style and requirements. Plus, it opens up a lot of options for how you get your message across. 

If you’re accustomed to designing or coding for web, keep in mind that email development is a whole different animal. Many web-design approaches just don’t work in email, and there are mammoth differences in how different email clients handle your code. It’s really a jungle out there when it comes to controlling how clients display your emails. This guide walks you through the principles and practices you need to create HTML emails that get delivered and perform well out in the wild. 

Here’s what we’ll cover:

Part 1: Principles of high-performing HTML emails

Establish internal email standards

Variety and complexity: two things you encounter in abundance when designing HTML emails—and the two main variables that can slow down your workflow and make your life harder. So before you get your hands dirty in the execution, define email guidelines that will save you time and headaches later on. Consider fonts, logo size and placement, header size, image specs, CTAs—any elements you use on the regular. 

An email-specific brand guide gives you a leg up in a few ways:

  • Design and development goes faster for your team because you’re not reinventing the wheel every time
  • If you use contractors or agencies, they’ll give you better deliverables that require fewer revisions
  • When stakeholders float high-effort, low-reward content requests, your email guide can help keep everyone focused on the primary objectives of the campaign

A handy way to organize your guidelines is around an “always/sometimes/never” framework: the approaches you will always adhere to, things you might consider if there’s strong ROI, and stuff that simply isn’t on the table because it doesn’t provide enough value compared to the effort. Check out this article from Litmus to get you started on creating a solid guide for your brand.

Include what matters most—and leave the rest out

Your emails should include the elements that increase the impact of your message, and no more. Adding complexity with special fonts, media, and shiny gee-gaws will dramatically slow your time to market, plus heighten the risk of your email failing on one or more email clients. 

An email client refers to the app or software someone reads their email on. Gmail, Outlook, and Yahoo Mail are common ones, and there are many versions of each. For instance, Gmail for web, Gmail for iOS, and Gmail for Android are all unique email clients provided by Gmail. Every email client has its own quirks in how it handles your code and ultimately displays your emails—quirks you have to account for when you code. 

When you choose features to add to your email, ask yourself, “Does adding this element make my message clearer, more impactful, or better for the recipient?” More often than not, that cool GIF or sliced image will cost you time and money—without improving your open or conversion rates.

It’s easy for a brand to want to showcase all the amazing things that are happening in each email. We all have a lot to say to our fans and visitors! But it’s important to maintain high-level strategies and focus on purposefulness in every email. Let the email speak for itself and create the results your brand wants.

Personalization, engagement, and conversions are focal points for every email marketer. That means giving your audience a structure they can tap into and using code as the tool to reach that objective.

Brooke Hart, Chief Strategist at Bespoke Inbox

Design for the clients your customers actually use

Every email client will handle your message differently—essentially, each one will try to break your carefully designed email in unique ways. That means you need to design for multiple email clients, focusing on those that matter most for your market, and plan for the variations in how your email looks across clients.

Know your audience’s habits

Start by identifying how your audience views your emails. The top four email clients are Apple iPhone, Gmail, Apple Mail, and Outlook, so make sure you’re supporting those at a minimum.


Be sure to keep up with changes in email client market share—this list from Litmus is updated every month. And remember that overall usage trends may not reflect your unique audience (especially true for B2B organizations and certain industries), so consider a reporting tool to identify the most common email clients your customers are using—we’re big fans of the inbox reporting that Litmus offers. 

Focus your efforts on the top email clients

Use your resources wisely by designing for your audience’s most-used email clients. Don’t bother optimizing for clients that only a small percentage of your audience uses—especially if that client is tough to build for. Focusing your efforts on the most important clients for your brand will help you create high-performing emails much faster. 

Make allowances for Outlook (sigh)

Yes, Outlook can be a bear for email designers and developers, and with 10% market share, there’s a good chance you’ve got to work with it. If more than 3% of your audience is using Outlook, take time to test and solve for any issues it presents, like DPI scaling (here’s a good primer for that from Email on Acid).

Aim for your impact, not uniformity

Finally, know that you won’t be able to achieve a perfectly uniform email across every client. Instead of breaking the bank trying to get perfect consistency, determine the make-or-break aspects necessary for delivering your message and brand identity effectively—and design for those, allowing for a little variation. Your internal email standards will come in handy here!

The design we work with for every client always focuses on two goals. First, a brand identity that remains visible, not buried in details that may change across clients. Second, messaging first—in a way that is personalized and reaches a customer.

We’ve found that it’s always constructive to start with best practices across the board for email clients—then narrow the focus to what’s important and what’s not. When we keep this pointed approach, there is a streamlined look that can be refined over time. The best emails for a brand are developed and revisited after laying a firm foundation that is streamlined for all email clients.

Brooke Hart, Chief Strategist at Bespoke Inbox

Build for deliverability and accessibility 

Stay out of the spam filter

You miss 100% of the shots you don’t take—and you can’t take aim at conversion when you’re stuck in a spam filter. A few tips to make sure your emails hit the inbox:

  • Keep your file size under 100KB. If you’re struggling to hit that limit, look for unnecessary styles or spaces you can remove
  • Balance your text-to-image ratio. A 60/40 split between text and images should keep you in the clear for most clients
  • Avoid JavaScript—not only is it not supported in most clients, many filters flag it as an indicator of spam or phishing 

Don’t hide the unsubscribe 

Hard-to-find unsubscribe link = annoyed customer. Annoyance = emails flagged as spam by customers. Spam flags = tanking delivery rates for your future emails. So make your unsubscribe link easy to find and big enough to read. It’s not just the law: it builds goodwill with your brand and purges uninterested people from your audience. After all, why bother building, testing, and sending emails for people who will never convert? Make opt-out easy so you’re more likely to hit the inboxes of high-value people in your audience. 

Leverage preheader text

Once you’ve leapt past the spam filter, it’s time to up those open rates. You’ve already written a killer subject line—don’t follow it with a sad trombone wah-wah by forgetting to customize your preheader. Instead of letting the email client pull in the first bit of email body text (which might not have any valuable messaging), use the preheader to incentivize opens. Here’s how to do it quickly and easily in Customer.io

Use images wisely (and plan for them to be blocked)

Images give your message instant impact and embody your brand—unless they’re designed in such a way that they get in the way of accessibility. You’ll lose audience share if that audience can’t see what you’re trying to deliver. Be smart with images in your design to improve the reader’s experience (and, ultimately, conversion).

  • Never use only (or mostly) images. In addition to the deliverability issues mentioned above, plenty of email clients default to blocking images until the individual allows them—and images are useless for screen readers 
  • Don’t rely on images alone for key content. Again, the info in images will be lost to image blocking and screen readers; make sure important messages appear in text as well as images
  • Use alt text. Improve accessibility with alt text for every image. Write it to sound coherent for a screen reader, and style it to represent your brand. (Email on Acid has a useful guide to styling alt text)
  • Don’t lead with an image. If the first element in your email is an image, you run the risk of your email appearing blank in the preview window if the client auto-blocks images. This is where your pre-header text comes in!
  • Assume images will be blocked. Of course you want to design a visually appealing email—but make sure your email gets your message across effectively even if the images aren’t there 

Our focus is always to take the temperature for good email health. That means a deliverability rate of 90% or more, bounce rates under 2%, and an average of 0.5% complaints. A healthy list keeps a healthy IP and domain. The result is a continuous level of messaging that reaches your engaged users and keeps your list in good standing with email best practices. We simply never allow our emails to go below steady health level—and we monitor it for continuous user engagement.

Brooke Hart, Chief Strategist at Bespoke Inbox

Design for mobile first

Tempted to just design for desktop? Think again—85% of people check email on smartphones (according to 99Firms). Take a look at your own data and you’ll likely see this reflected in the habits of your audience, which is why ensuring deliverability and performance on mobile devices is crucial for the success of your email campaigns.

When you build with mobile in mind from the get-go, you cut your work in half—if your email looks good on mobile, it will look good on desktop too. No need to build separate versions from scratch! Mobile-first design is a good way to design for both mobile and desktop at the same time so you wind up with emails that perform well on every device. 

  • Set your default width to 400px. This size will work well for most desktop clients, and easily scales for mobile as well
  • Use single-column layout. If you use a multiple-column design, you’ll have to create a second mobile version, where table stacking could be an issue
  • Set the target area for links and buttons at 44px by 44px or larger—your customers can’t click a button if it’s too small to touch!
  • For body copy, use a font size of 16px or more to make text readable and avoid the potential for awkward auto-zooming on iOS. And for any other text (like footers) set the font size to at least 13px (the smallest size that will display on an iPhone)—otherwise the email client will increase the size, which alters your design 

One more thing to keep in mind about mobile-first design: it’s the future. Even if your audience is heavily weighted toward people using desktops or laptops, the amount of email opened on mobile is constantly increasing. Designing for mobile first helps you reach the widest possible audience now and sets you up for better practices ongoing. 

If you want even more control over how your email looks on different devices, consider responsive design. Learn more with this guide

We’ve found that, while some emails may evolve into a different format, it’s essential to start with the base. It makes all the difference in hitting the nail on the head for responsiveness. Designing for mobile is foundational to user-friendliness. It’s not only important for mobile, but responsiveness is easier when the email expands to desktop, as opposed to shrinking something to a mobile phone. Once this works, then consider the upgrade to see if other design formats convert better. In most instances, we’ve found that standards are there for a reason and always work best.

Brooke Hart, Chief Strategist at Bespoke Inbox

Tread carefully with CSS 

CSS for email =/= CSS for web

When you’re designing for web, the most efficient way to use CSS for styling is to use a <link> element to link to an external CSS file or a <style> element in the <head> section. But if you do this in email, many email clients will strip your CSS out (in a variety of different ways) and apply the email client’s styling instead—and your email will be a hot mess when it hits the inbox. 

Bottom line: CSS alone for layout just doesn’t work for emails. You’ve got to get comfortable using tables (more on that below).

Use inline CSS 

What you can use for email is inline CSS. Email clients don’t strip inline CSS, so some basics (like font size, folor, and font family) are pretty reliable. Other CSS rules (including element sizing, ordering, and display, among many more) remain tricky. Here’s the tl;dr on best practices: 

  • Avoid using shorthand or three-digit hex color codes
  • Use !important to override email client styles 
  • Use media queries to control font and image sizes on mobile
  • Test your emails thoroughly for issues in different clients

Of course, writing inline CSS by hand is often a pain, so Customer.io editors do CSS inlining for you, along with other preflight actions, using Premailer. In fact, when you test your email, you may notice that it looks slightly different than it did in the editor. This is because Premailer automatically makes changes in your code to make the email deliverable on different clients.

Take a deeper dive into the effective use of CSS within HTML emails with this article

Test, test, test (and then test some more)

It’s critical that you pre-send your email to make sure it’s deliverable and your message gets across on all the email clients that matter to you. You’ve spent the time to design a powerful email that will perform—it’s worth the extra bit of time to ensure it’s delivered the way you intend. 

When we test, do more than preview messages. We expect to go through at least two rounds of QA. If it’s an automation, we leave it in dev testing for at least a week, and more than two individuals are always required to look at the results. It’s better to let the automations or the emails breathe and find their own perfection. Lifecycle within emails is like fine wine: the more you test, the better it gets. This is a palate-pleaser with conversion rates and responsiveness. The small details help deliver an email that creates the personal experience every user wants.

Brooke Hart, Chief Strategist at Bespoke Inbox

This is different from other kinds of testing you might do, like A/B testing of subject lines or content. With pre-send testing, you’re looking for any issues with deliverability, display, and accessibility. 

If you work with A/B testing, set a hypothesis that’s designed to increase conversion rates by at least 10%. In many of our tests, we’ve been able to increase by almost 50%. Stick with one hypothesis per test for best practices—and use that approach as a progressive way to get better results over time. Hypotheses for design, content, subject lines, and CTAs—even as a small detail—all make a difference in how users respond.

Brooke Hart, Chief Strategist at Bespoke Inbox

There are two avenues for testing: do-it-yourself or using a service. DIY can be a great starting point—set up an account with each client you want to test for, send the email to yourself, and troubleshoot as needed. If you want to save yourself the manual labor (and get better analytics), a testing service like Litmus or Email on Acid makes it faster and easier to test your emails on many clients at once.

Test and troubleshoot any issues for the most important clients for your audience—and remember that your emails will never look exactly the same on all email clients. Instead, focus on getting a result that’s true to your brand and your goals. 

Part 2: Put the principles into practice

Now that you’ve got the rules of the road, let’s dive into the nitty-gritty of designing and developing. Read on for deets on the key aspects of building an HTML email that hits your deliverability, open, and conversion KPIs. 

Tables 

Like it or not, the best way to keep your layout consistent is to use tables. If you try to use CSS for layout, every major email client will either strip it out entirely or break it—each client in its own special way. Tables work in all clients, so they’re the best path for layout consistency. 

  • Set widths in each cell individually. This helps manage the chaos of differing widths across various elements
  • Use a container table to set your background color, because some clients don’t support backgrounds on the <body> tag
  • Nest your tables. This will keep your spacing more consistent; using margins and padding will give you varying results across clients (and some don’t support it)
  • Get rid of any whitespace between the closing tag of one cell and the opening tag of the next—leaving it in can cause strange gaps and spacing
  • Replicate CSS floats with the align attribute. You can also use colspan/rowspan, but count carefully
  • Watch out for empty table cells, as some email clients will handle them in unexpected ways (Email on Acid has more details on empty TDs).

Images

While you’ve got to plan for blocked images (as discussed in part one above), you also need to make sure your images work flawlessly when they are displayed.

  • Make sure to use absolute addresses—local is fine for testing, but you’ll need to store those images on the web when you send 

Here’s the difference: an absolute address looks like https://www.example.com/path/to/image.png, where as a local file will often just refer to path/to/image.png—you want the https://... parts!

Tom Buchok, CEO of MailCharts
  • Don’t use image maps. Slicing images and distributing them across a table should work in theory, but in practice it’s a nightmare to get the slices to line up correctly. Save yourself time and money and ditch those image maps!
  • Outlook will mangle background images set using the background attribute and CSS backgrounds. Here’s a trick from Email on Acid on using VML as a workaround
  • Use extra-large (but optimized) images for a crisp look on devices with retina displays. Retina displays have more physical pixels than their CSS dimensions indicate

Here’s neat trick: simply export your images at twice their width and height. So, rather than 200×200, save as 400×400—then, in your HTML and CSS, set the size back down to 200×200…whoa!

Tom Buchok, CEO of MailCharts

One note for Gmail: it’s helpful to wrap your ‘img’ elements in an anchor element (e.g., <a href="/%E2%80%A6"><img src="/%E2%80%A6" /></a>). Otherwise, Gmail will show a pesky download icon over your content. Plus, you’ll be offering more opportunity for the valued click-through.

Tom Buchok, CEO of MailCharts

Want more juicy details on making images awesome in HTML emails? Dig in here.

Fonts and special characters

If you don’t choose an email-safe font, many email clients will strip and replace it with their own default styling—so your recipient gets a Times New Roman throwback! Here’s a quick reference guide on fonts you can count on for HTML emails:

Universally supported:

  • Arial
  • Courier
  • Georgia
  • Helvetica
  • Times New Roman
  • Trebuchet MS
  • Verdana

Widely supported: 

  • Arial Black
  • Book Antiqua
  • Charcoal
  • Comic Sans
  • Courier New
  • Geneva
  • Impact
  • Lucida Console
  • Lucida Sans Unicode
  • Lucida Grand
  • Monaco
  • Palatino Linotype
  • Palatino
  • Tahoma
  • Times

You’ll also need to encode any special characters; otherwise, some email clients may render them incorrectly (often as a black square or diamond). This can even affect quotation marks and apostrophes! To make sure special characters are rendered consistently in most email clients: 

  • Use HTML characters for common symbols like ampersands, bullets, em dashes, quotation marks, and apostrophes
  • Include a content-type tag in the section of the HTML code (usually in the header) to define the character set; UTF-8 is the most commonly used 
  • To save you time, see if your ESP has a tool to automate this (you can use the url_encode liquid filter in Customer.io)
  • Keep in mind that different email clients will handle special characters differently, so test before sending—and if you want to save time, ask yourself whether all those special characters are really necessary to begin with

Many brands question the breaking point between their brand and best-practice fonts. While we always support custom fonts, it’s also important to acknowledge and understand that there will at least be one email provider that will throw the font out. This isn’t a chip to your brand. Use a fallback that is closest to your custom font and allow the rest of the email to speak for itself.

Brooke Hart, Chief Strategist at Bespoke Inbox

Issues with special content

Every element of an email can be treated differently by various email clients. But certain kinds of content are especially tricky. Some things might be worth the effort, while others are best avoided entirely. Here’s a breakdown of things that are high risk for deliverability and performance, require a heavy time investment to get right, or simply won’t work at all in email.

One thing that’s absolutely not supported in email is Javascript; stick with HTML instead. 

These have limited support in email, so proceed with caution:

  • Videos: You’ll have better results with a thumbnail (with a visible play button) that links to your content 
  • CSS Animations: Go with a GIF instead (though some clients will just display the first frame)
  • Forms: Just link to the form; your audience will get a more consistent experience (and better engagement) 
  • Countdown timers: If your ESP provides a tool, go forth and test it out (reach out to services@customer.io if you’d like to try ours!)
  • HTML5 video: Very few clients support it, but it’s doable with a fallback image. (Email on Acid has useful details)
  • AMP for email: It only works for Gmail, but if that’s what most of your audience uses, it might be worth the effort. (Check out Instapage for examples)

If you want to experiment with special content, a best practice solution is to test with split A/B and see if it makes a difference. You also always want to continue to look at your end goal and objective. In many instances, users are looking at emails quickly to get information. The extra juggling and tricks aren’t worth the compromise if they don’t make a difference in engagement.

Brooke Hart, Chief Strategist at Bespoke Inbox

Before going down the rabbit hole on a special type of content, ask whether the risk and time involved will add tangible benefits to your message. If not, head back to the tried-and-true. But if you could get some real value out of special content, here’s a guide on how to implement it effectively. 

How you build is as important as what you build

Conversion hinges on much more than getting the strategy and creative right—how you build an email determines whether your message will make it through to customers in the first place. HTML is your friend; use it wisely, and you can navigate the wilderness of email clients’ peccadillos, chart a sure path to every inbox, and ensure every open delivers an experience that gets the results you’re aiming for. 

Blue Plate Special: How to Add Special Content to Your HTML Emails

Customer.io

Getting fancy can be fun, but just like a gourmet meal, it takes a lot more effort than a fast-and-functional sandwich. When you add special content to your emails—like video, animation, and embedded forms—you’re also adding complexity, development time, and risk. 

Before you decide to serve up these morsels of content, consider:

  • How likely are these elements to drive conversion?
  • How much of your audience will actually see the content?
  • Is the potential engagement worth the extra time and effort?

For most special content, there’s a hard way and a simpler alternative—and the easy way may well get you all the benefit you need. Below we’ll dig into six types of special content—HTML5 video, CSS animations, countdown timers, embedded forms, AMP for email, and dark mode—and how to decide when it’s worth it to cook up something complex. 

Of course, before you add any special sauce, you need a solid base:

  • Know what email clients your audience is using. Start with the Litmus list of client market share, but be sure to mine your own data too.
  • Nail the fundamentals of building HTML emails that perform well.
  • Take time to test and troubleshoot every email—and plan extra testing time if you’re adding special elements.

HTML5 video

It’s a pity that email clients don’t love video as much as customers (and marketers!) seem to. The stats say video is king—Lemonlight has a very convincing roundup—yet embedding video in email remains shaky at best. It’s time-intensive to make it work in the few clients that support it, so weigh the cons against the benefits of other approaches first. 

Alternative options

Much easier and less risky options can have just as much impact as video in many situations. Before you settle on coding a video into your email, consider using a video still—with a visible play button—that links to the video, instead. (Bonus tip: link to your video on YouTube to boost view counts in a public space).

Here’s how an image linking to your video might look:

Here’s a primer on making your images work flawlessly in every client.

When it’s worth the trouble

If seeing your product or service in action is crucial, putting a short video in your email might be a big boost for engagement. Short is the operative word here—anything over a minute tends to lose eyeballs. Some common scenarios when video can make an email particularly effective:

  • Video game release announcements
  • How-tos for apps or SaaS products
  • New feature announcements
  • Product/service use case positioning
  • Before-and-after messaging

Common pitfalls 

Limited support is the primary issue with video in emails. Only about 25% of email clients support HTML5 video playback in emails—the rest will display a fallback image.

Here’s a breakdown of the support by email client (adapted from Email on Acid):

Allows videos to be played
  • Apple Mail
  • Outlook for Mac
  • iOS 10+, Native Client
  • Samsung Galaxy, Native Client
  • Thunderbird
Shows fallback image
  • Android 4, Native Client
  • AOL Mail
  • Gmail Webmail
  • Gmail Android
  • Gmail iOS
  • Outlook 2003-2016
  • Outlook Android
  • Outlook iOS
  • Outlook.com
  • iOS 9, Native Client
  • Yahoo! Mail
  • Yahoo! Mail Android
  • Yahoo! Mail iOS

You’ll need to account for a few other issues as well:

  • Apple Mac clients support video, but have some tricky issues you need to work around
  • You’ll need to use a fallback image for many email clients (and some of those need extra coding to make the fallback work)
  • Media queries are required to make sure you serve up the right experience for each email client

How to code it 

Ready to take the embedded-video plunge? This guide from Email on Acid will walk you through the steps. A few things to keep in mind:

  • Every iOS update seems to have an impact on how video is handled
  • There are so many different Android devices that it’s hard to account for every possible customer experience
  • MP4 is the only video format Apple supports (so it’s unwise to use any other format)
  • If you’re hosting the video on your own servers, you need to configure them to output the correct MIME type (and if you’re unfamiliar with how to do that, it’s a good sign that embedding a video will be more trouble than it’s worth)
  • All the above means that you’ll need to invest the time to put your email through the paces very thoroughly when testing 

CSS animations

When you’re competing for eyeball time in the inbox, dynamic content can snag those extra milliseconds that just might pump up engagement. CSS animations have a lot of appeal: in addition to adding motion, you can use them to create interactive elements, and they have faster load time than GIFs. As is often the case, though, the biggest downside is lack of support in email clients. 

Alternative options

The good ol’ GIF is still the go-to for animation in email—the format is widely supported and has pretty straightforward fallbacks for finicky email clients (*ahem* Outlook). You can often get the same effect of a CSS animation with a simple GIF; here’s how we do it in our email signatures at Customer.io:

Head over to our guide to coding images in HTML emails for a GIF how-to.

When it’s worth the trouble

Video-style slides, hover effects, other elements that respond to interaction… there are so many shiny toys to play with in CSS animations! But what makes it worth the development time is when motion and interactivity have a real chance of driving conversion without tanking performance. Will your animation really get customers to push the big, red, candy-like button?

The other benefit of CSS animations over GIFs is that they’re code-based, making for smaller file sizes and faster load times—especially important for people checking email on their phones. In fact, more mobile clients than desktop clients support CSS animations. So if your emails are most often opened on mobile devices, the animations might be worth your time.  

Common pitfalls

Look deep into your data to see just what portion of your audience will even see your carefully coded animations. Support is limited to the following clients (adapted from Litmus):

Does support CSS transitions and CSS keyframes
  • Apple Mail
  • Outlook for Mac
  • AOL Mail
  • Apple Mail on iOS
  • Android/Samsung
  • Outlook App
Does not support CSS transitions and CSS keyframes
  • Outlook 2007-2016
  • Gmail
  • Yahoo Mail
  • Outlook.com/Office 365
  • Gmail App

Even clients that support CSS animations have some quirks. This extensive list from FreshInbox covers support for tons of kinetic email features and client-specific issues you’ll need to solve for. 

How to code it

CSS animations rely on two key ideas: transitions and keyframes. This guide from Litmus shows you how to use them both (and has some useful examples and links to deeper dives), so start there.

A fairly quick way to try your hand at CSS animations is creating effects on your CTA buttons. Try this Email on Acid how-to on creating a pulsing button. 

Remember that there are extra considerations when you’re including any CSS in your HTML emails. Take a look at our overview for details on how to make it work. 

Countdown timers

Urgency and FOMO—two very compelling feelings that inspire conversion. Countdown timers are a popular method because they really work. One caveat: use them sparingly, and only when there’s a truly compelling reason for customers to click through quickly. If you’re constantly sending a countdown—especially for offers that aren’t actually that great—you risk becoming the company that cried wolf. 

Alternative options

While most countdown timers are pretty straightforward, you can make it even easier on yourself by letting someone else do all the work. So if your ESP has a built-in timer function, use it! Drop us a line at services@customer.io to get access to the Customer.io countdown timer:

When it’s worth the trouble

When urgency truly matters, a countdown timer does the math for the reader. Instead of just an expiration date, readers see exactly how long they have left to hop on an offer. A few great use cases:

  • Pre-sales of tickets or hot products
  • Extremely good and rare offers
  • Event reminders and registration deadlines (especially useful for B2B webinars and conferences)
  • Shipping cutoffs for holiday ordering 
  • Expiring free trials

Common pitfalls

When you use a GIF for your timer, there are very few downsides—they’re generally well-supported. Be sure to account for two possible issues:

  • Many Outlook clients only display the first frame of the GIF, so you’ll need to create a compelling fallback image
  • If images are blocked in your email, your timer will be too—so be sure the urgency message is reflected in text and, of course, include compelling alt text

How to code it

For a compelling GIF timer that’s up-to-date each time someone opens your email, you’ll need a few things:

  • The GIF itself (with a file size of well under 1MB to ensure load time isn’t slowed down)
  • A server resource from which the client can pull an always-up-to-date GIF (check out these instructions from Litmus on using a PHP script for this)
  • Alt text for your image to account for blocked images and screen readers

If your ESP doesn’t have a built-in timer tool, using a service to generate your timer is the fastest and easiest route. There are a lot of free options, and the paid services offer some worthwhile perks like more design customization and personalization. Launchspace has a great review of six top providers to get you started. 

Embedded forms

The fewer the necessary clicks, the higher the chance of engagement—that’s the promise of embedding forms into your emails. From seeking survey responses to encouraging sales contact and beyond, letting people submit the a form without leaving their inbox smooths out a common friction point—and turns what’s usually one-way communication into a real conversation that builds customer relationships. But embedded forms aren’t always SWAK; limited client support and data privacy can send your efforts to the dead-letter office.

Alternative options

The classic approach of linking to a form is ultimately the most reliable way to ensure your audience can actually, ya know, fill out your form. Here are a few ways to implement it effectively:

  • Display an image of your form that clicks through to a landing page (as always, ensure you have alt text and a separate CTA button to account for blocked images)
  • Let readers know how long it will take to fill out a survey
  • Send people to a compelling landing page that delivers actual value (after all, they’re doing you a favor, so reward it!)

Faking a form is another option. If you’re sending a survey with a single question and the option to choose only one answer, you can put your single survey question in text, then use a table with text and background colors in each cell to create response “buttons.”  Head over to Really Good Emails to see how the example below is coded:

When it’s worth the trouble

Reducing friction for certain kinds of messages can have an especially high impact. Embedding forms so recipients can engage from the inbox is particularly useful for situations like:

  • NPS surveys and other singe-question asks
  • Customer-profile update nudges 
  • Subscription preferences management (to minimize unsubscribes)
  • Product or customer service reviews
  • Booking appointments for demos or sales convos

Common pitfalls

In general, support for embedded forms is limited, and even clients that allow it differ in how they support it. Litmus details which clients have support and the variations in the customer experience. 

Forms also raise the specter of security and privacy issues. The form submission is usually unsecured, so people may get a security warning when they hit submit—not only undermining engagement, but also damaging customer trust. This is why plenty of email clients treat forms as spam triggers.  

How to code it

If enough of your audience uses clients that support embedded forms, follow the step-by-step in this Litmus guide. Here’s what you’ll need to pay attention to:

  • The setup for submitting data to your destination
  • Creating your form fields and types of input
  • Passing through hidden information
  • Form submission CTAs
  • Fallbacks for different clients

AMP for email

Lots of layout options, interactive elements, quick load times—there’s a lot to like about AMP for email! AMP started as a Google open-source project to speed up web page loading on mobile devices, and now email developers can integrate some of its features into emails. The catch? It only works in three Google-supported email clients: Gmail, Yahoo Mail and Mail.ru. 

Alternative options

While there’s no other method that does quite what AMP for email does, you can use other methods to achieve some similar functionality. All of the special content listed above is possible, and you can use CSS to replicate some of the layout and styling options.  

When it’s worth the trouble

If the majority of your audience uses a client that supports AMP for email, it’s worth considering if:

  • Your email has a lot of images
  • You need a more dynamic layout
  • Interactive elements enhance your message
  • You’re concerned about load time

Common pitfalls

AMP for email is a spring chicken in terms of development (it was released in 2019, and only for Gmail viewed on a web browser), and with that comes a host of challenges:

  • Email client support is extremely limited (just three clients at the moment)
  • The future of its adoption is uncertain: clients have been slow to adopt it, and Outlook recently abandoned its efforts to support it
  • You need to register with Google to get access to it, and the process is time-consuming
  • Not all AMP components are available, which is frustrating if you’ve been developing web pages with AMP (here’s the supported components)    

How to code it

If you use Customer.io, you’ve got a leg up: our AMP for email functionality is currently in beta, so drop us a line at product@customer.io if you’d like access. 

Otherwise, head over to Email on Acid for a how-to guide that will walk you through the process of:

  • getting registered with Google
  • setting up your AMP HTML document
  • creating your layout and elements (keep this GitHub resource handy for that)
  • testing and validating your code

Dark mode

Dark mode isn’t actually special content you create, but it’s a growing trend that any email marketer should be paying attention to. Individuals can choose this setting (which can be implemented at the app or system level) to reverse color schemes, displaying content with light-colored text on a dark background. 

Here’s a side-by-side of how one of our emails displays in light and dark mode:

While there aren’t solid stats on usage yet, various industry polls report that anywhere from 80% to 95% of people prefer dark mode. Email clients aren’t the only ones enabling this feature—tons of apps are rapidly adding the functionality. Lots of people want the dark mode option, and when they turn it on, you lose a lot of control over how your email displays.

Best practices

Trying to control something that’s truly out of your hands is a recipe for frustration. Save yourself time and sanity by taking a conservative approach: optimize things that will help your email render well in dark mode without requiring custom code. 

  • Use graphics with transparent backgrounds to avoid ugly white rectangles in dark mode
  • Add a white stroke around black text or icons so they don’t disappear on a dark background
  • Test every email in dark mode to ensure your key elements and CTAs aren’t rendered unreadable

Should you join the dark side?

While it’s possible to design and code different versions for light mode and dark mode, it’s not bullet-proof. Some clients (Gmail, for one) apply a brute-force inversion that wreaks havoc with your designs. And trying to hack dark mode can easily result in emails that defy the benefits your customers are aiming for by enabling the feature—not exactly a good look for your brand. 

That said, if you want to try your hand at designing and coding for dark mode (and have the time to devote to development and testing), check out the how-to guide at Litmus

Footing the bill for your fancy feast

If you find yourself salivating over all the exciting elements you could add to an email (or have eager stakeholders placing orders for them), let these three questions guide your decision-making:

  • What’s the business case for spending development dollars?
  • How does it drive improved KPIs for the campaign?
  • If (or when) it breaks, how bad is the customer experience—and can you afford the risk?

Show and Tell: Image Best Practices in HTML Emails

Customer.io

Images in emails can be your best friend and your worst enemy. On the one hand, they engage the audience with compelling visuals, amplify your brand identity, and compel clicks. But on the other hand, they can stab you in the back with unexpected problems and extra complications. Follow these best practices to ensure your message shows up effectively in customers’ inboxes.  

First things first: start a solid approach to coding HTML emails in mind (here’s a primer on that). Without those standards in place, all the care you take with your images is liable to fall apart. 

Once you have a clear approach for coding your email, you’ll want to consider some key aspects of coding for images. Because email often relies so heavily on images, missteps here can cost you audience share, erode your brand identity, and torpedo your engagement metrics. Below, we’ll cover the challenges images can present and smart strategies for overcoming them:

Images in HTML emails: challenges

Images can make or break your emails—quite literally! If you don’t address potential problems when coding your email, your beautifully designed graphics could wreak havoc on performance. Here are the most common issues you might encounter when using images in HTML emails.

  • Deliverability issues. If you send an image-only email, most spam filters will keep it out of inboxes. You shouldn’t send image-only emails for many other reasons (which we’ll cover below), but if someone asks you to go this route, wave the spam flag!
  • Accessibility issues. Images are a black hole for screen readers, translators, and voice assistants. If you put key information in images but neglect to put it in your text, you’re losing audience share. (Alt text is a workaround, but voice assistants don’t usually recognize it.)
  • Usability issues. The search function in email clients also won’t see text in an image. So when you send a compelling piece of content and the recipient goes searching for it in their inbox later, they may well come up empty if the key words appear only in images. 
  • Performance issues. The longer an image takes to load, the more likely someone will just hit delete. Large images can load slowly (or even stop loading) even if a recipient has a fast internet connection. And if a person is reading your email on their phone, your images might not just load slowly—they also gobble up data in customers’ data plans.
  • Display issues. If not coded properly (with attention to how different email clients handle images), your graphics can easily display poorly or mangle your layout—and your carefully designed email lands in the inbox with a depressing thud. 
  • Conversion issues. Images are powerful only if customers can actually see them—and the chances that images will be blocked are pretty high. Many clients default to displaying emails with images off, and plenty of folks don’t bother to turn them on. This is an especially pernicious issue for B2B emails, as corporate firewalls are often configured to block images automatically.

Images in HTML emails: solutions

Okay, you know the hurdles you’ll face with the images in your emails. Now here are the techniques you need to leap over them. 

First, plan for blocked images

You can be certain that images will be blocked for some of your audience, so plan for them from the get-go so that blocked images don’t block your message. That means you need to ensure your key message, value prop, and call to action come through clearly without an image in sight.

  • Put your load-bearing information in the email text, even if it’s going to be in an image as well  
  • Every time you add an image, consider what will happen to your email when it appears as a blank rectangle—did you lose something crucial? If so, you need to get that info into your text
  • Never send image-only emails. As tempting as it is to have the design control afforded by creating one big image, you’re guaranteeing that a portion (possibly a big portion) of your audience will see zilch
  • Images often do the heavy lifting when it comes to context, brand identity, and emotional appeal, so make sure those things are reflected in your text as well
  • Take extra care when planning B2B emails, since image blocking is even more likely. If a corporate firewall gobbles up your images, does your email still have what it takes to make an impact?
  • Create your layout with blank rectangles for the images first, and review it for effectiveness before you add images. And when taking a last look, view the email with images on and with them off
  • Here’s an example of an email that works well even if the images are blocked—this is what you’re going for!
Images Off
Images On

Size images right

Pay attention to both the image size and the file size. 

  • Width: 600px is the most reliable dimension; it works well on screens with 360×640 resolution (which is the most popular screen resolution across both mobile and desktop), and will play well with other resolutions as well
  • Length: you have a lot of leeway here, since email clients are unlikely to get funky with the length of your images. That said, pay attention to how a longer image affects its load time 
  • File size: Because images are downloaded when the recipient opens your email, they don’t affect the total size of your HTML code. What they do affect is load time; anything over 1MB is likely to slow things down, especially for your customers on older mobile networks or slower home internet

Use the best file type for your content

There are pros and cons to every file type; the trick is to choose the one that works best for each individual image. Use this guide from Litmus to dig into the details—here’s the tl:dr: 

  • JPEGs: they’re great for photos and very colorful images, but the downsampling makes images with lots of text or sharp edges get fuzzy
  • PNGs: lossless compression makes for crisp text and logos, but resultant larger file sizes can make for slower loading
  • SVGs: these vector graphics look great on any screen with a small file size, but they’re only supported in Apple Mail and on iOS devices 

Get around GIF problems

As long as you keep the dimensions on point and the file size manageable, there are no downsides to using GIFs, and they’re a fun way to enliven your emails with animation. But Outlook doesn’t play nice with them—it will only display the first frame of the GIF as a static image. You have a couple options for a workaround:

  • Make sure the first frame of your GIF conveys what’s most important (the CTA, a product image, etc) and accept that people using Outlook will just see that 
  • Use Microsoft-specific conditional code to serve a static image of your choosing for Outlook, while sending everyone else the GIF

Maintain good text-to-image ratio

Here’s another reason to avoid image-only emails: spam filters give anything with too many images a major side-eye. So when incorporating images into your HTML emails, aim for a text-to-image ratio of 60/40. This should keep you out of the spam folder—and it’s also a good guideline for ensuring you’ve got the key messages in text so they’ll come through if images are blocked. 

Use absolute addresses

Be sure to give the complete domain address, directory, and filename for every image in your email—just about every email client requires it. Since it can be easier to use local image references when testing, double-check that you’ve changed them to absolute addresses before sending. Here’s an example of what it should look like in your HTML for an image stored at customer.io/img.jpg:

<img src="https://customer.io/img.jpg">

not

<img src="/img.jpg">

Avoid image maps

While email clients generally support image maps (an image where you can click on different areas to go to different links), in practice they’re prone to causing all kinds of headaches. You have to slice your image into parts, put them into different table cells, then get them to line up properly in every email client—no small feat, and one that will take a lot of extra time and run the risk of breaking up. A few other downsides:

  • You can only show a single alt tag, which won’t include the links
  • They don’t work with responsive images
  • They break if the email client autoscales images
  • Link tracking may not work

Beware images at the top

If you use an image as the first piece of content in your email, the inbox experience may suffer. Email clients pull the first piece of content for the inbox preview—and if it’s an image, that preview will be blank. The smart solution is to use preheader text (which is a good practice for improving engagement anyway).

Use alt text

Designing for accessibility ensures you engage everyone in your audience—and alt text is crucial for that. People who use screen readers (which includes those with visual impairments as well as some folks who have certain cognitive challenges or who simply prefer audio content) or an auto-translator rely on alt text to get the information you put in your image. Here are tips for creating awesome alt text:

  • Use unique alt text for every image, even if they look similar. Otherwise your customers are in for a pretty annoying experience as the screen reader says the same thing over and over with every image 
  • Keep it concise. Your picture isn’t worth a thousand words, and the effectiveness of alt text plummets if people are listening to a novel. Also keep in mind that email clients include the alt text when images are blocked—a great opportunity to get your message across even without images on!—but it’s limited to the size of the image container.
  • Use an empty attribute for images that don’t add information, like divider lines, spacer images, or abstract hero graphics. That will look like <img src="https://..." alt="">
  • Style your alt text so that recipients who can’t see images have a better experience. Here’s a guide from Email on Acid 

Images for buttons: hard no

You want your buttons to be irresistible—but you must resist the urge to use images for buttons! When your images are blocked (as you know they will be at times), your buttons will go from irresistible to invisible. 

You can make compelling buttons with a lot of other techniques instead. The simplest method (which is supported in just about every email client) is a padding-based button. You just pad the table cell, then style the button with HTML attributes and inline CSS. 

There are a few other methods that have various pros and cons; head over to Litmus for a breakdown of other options. 

Leverage background images with live text

Background images are one of the best tools for building emails with compelling graphics that don’t lose effectiveness when those images are blocked. Background images are applied to the background of an email element, so you can place other HTML content on top—like text and calls to action. 

It’s a cool design element and, importantly, your text remains readable even if images are blocked. Bonus: you can use an animated GIF as a background image, so you get the engagement of animation without the problems of CSS animations.

There are multiple approaches to coding background images in your HTML email, and, as with anything else, email client support is mixed. The Litmus Ultimate Guide to Background Images in Email will get you started with examples of different ways to use background images, instructions for five ways to implement them, and a breakdown of which email clients support which techniques. 

However you go about incorporating background images, be sure to include a fallback color (one that provides enough contrast for your HTML text to be readable!) for clients that don’t support the background images.

Consider retina-ready images

If your phone or iPad has a retina display, you know how crisp and bright images can look. Creating retina-ready images might be worth it if a large portion of your audience has retina displays—but it also takes some extra work on your end. 

The basic idea is pretty straightforward: retina displays use multiple pixels in an image to create one display pixel. So you can create an image that’s twice the resolution at which it will be displayed, and a retina display will use the additional data to show a more detailed image.

While optimizing your images for retina displays can make your emails look better for some people, there are a few downsides to consider:

  • There’s huge variation in the size of mobile displays (from a little iPhone 5S to an iPad), so it’s tricky to nail the correct image size to leverage a retina display on all devices
  • Some clients—especially Outlook—can throw a wrench into the works, so you have to spend extra time coding for that contingency
  • Retina-ready images have a larger file size, so you risk slow load times and eating up a lot of your customers’ data

So how do you decide if retina-ready images are worth it? Check two boxes: your images are highly detailed and/or colorful and a large percentage of your emails are opened on devices with retina displays. If that lines up for you, Email on Acid has simple instructions for optimizing your images and making them compatible with Outlook desktop clients. 

Optimize your images for every device

Once your email goes out into the wild, there are so many factors affecting the display that are out of your control—the email client, the device, each individual’s settings. So take the opportunity to control for what you can by optimizing your images so they perform the way you intend.

  • Analyze your data to see the clients and devices your audience is actually using (Litmus offers excellent inbox reporting for this purpose). This is especially important in B2B, where trends in each industry can vary wildly from more general usage trends. Believe it or not, some industries still see over 85% of emails opened on desktop—so it would be a waste of time to build complex mobile versions for those audiences
  • Assuming a good portion of your recipients are opening emails on mobile, consider using image swapping to serve a different image for mobile and desktop devices so you can optimize for each experience. Here are instructions on that from Email on Acid
  • Adjust images based on device type to optimize your images across different mobile devices. You can do this using media queries to either re-size images or just replace them; again, Email on Acid has step-by-step instructions
  • Don’t reinvent the wheel if you don’t have to. There are lots of great tools that will optimize images for you. Here are a few of our faves:

Show stakeholders the way

When you’re tasked with translating an email design into actual workable code, you often have to educate stakeholders whose requests don’t line up with the reality of HTML email development. Here are three useful approaches for getting others on board with image best practices:

  • Show them exactly what emails look like with images disabled—and walk through the reader’s experience when images are blocked
  • Test the email across three different clients—including one that’s particularly finicky—to show the range of customer experiences 
  • Run an A/B test to compare the use of images containing text versus background images with live text, and let the results guide your practices

Images are powerful, but they’re a double-edged sword. Implement them well, and they can be the backbone of high-performing campaigns. But they also have the power to tank your email’s deliverability and performance if handled incorrectly. As always, test your emails thoroughly—in multiple clients—before sending. And always consider images in the larger context of how you design and code your HTML emails to ensure the experience you’re delivering sticks the landing.  

Call-and-Response: Using Responsive Design in HTML Emails

Customer.io

Do you check email on your phone? If you’re like most people—85%, according to 99Firms—the answer is yes. And your customers are in the same boat: opening your emails on their phones and tablets as well as their desktops. 

That means your conversion rate depends on your email looking great on every device! There are three main approaches you can take: 

  • Mobile-first design is the simplest, lowest cost method, but gives you limited control over styling 
  • Hybrid design offers lots of control over styling, but requires far more coding expertise—and can get tricky with complex layouts 
  • Responsive design offers more control over styling than mobile-first design and lower cost than hybrid design. When built well, it’s the best of both worlds!

With a bit of time and coding chops, you can build responsive emails optimized for all your audience members’ devices. Read on for an overview on how to do it—and guidelines on when it’s worth it.

Say hello to media queries

Responsive design is powered by CSS media queries. The principle is simple: an if-then query that triggers a set of conditional rules. Basically, the media query calls out to each device and says “Hey, what are you?” and then responds with the appropriate code.

Armed with info about each recipient’s device, you can adjust various elements of your email for factors like:

  • The width and height of the screen/device
  • The screen resolution of the device
  • Whether the device is in landscape or portrait mode
  • If the device is in standard or dark mode (read more on dark mode here)

Benefits of responsive design

Responsive designs deliver styling and layout optimized for each device. Plus, you can eliminate frustrating issues on mobile devices, like horizontal scrolling and mangled navigation, that can harm your conversion rates. Some elements you can code to respond to different devices: 

  • Change email width
  • Change font sizes and colors
  • Convert multiple columns to single column
  • Scale background images for different screen sizes
  • Show or hide certain content (aka, progressive disclosure)
  • Optimize navigation bars and menus

For example, you can send a fixed-width email for easy reading on desktops, while delivering the same email at a width of 100% to people using phones and tablets.

Why not make the column width the same for everyone? The full-width layout will look great on mobile, but it will be too wide to read on desktop. On the other hand, a fixed-width column will look perfect on desktop—but your mobile audience may have to scroll horizontally to see all your text (or, more likely, they’ll just delete your email).

Take a look at this simple responsive email that adapts from a fixed-width to a 100%-width column width for iOS versus a desktop client:  

On mobile.
On desktop.

And here’s the media query that makes it happen:

@media only screen and (max-width: 600px) {
  body {
    width: 100% !important;
  }
}

    @media (min-width: 600px) {
  body {
    width: 400px !important;
    margin-left:auto;
    margin-right:auto;
  }
}

Challenges of responsive design

Using responsive design requires more technical knowledge and longer development time than mobile-first design. If you’re not already adept at using CSS media queries, you may find yourself investing a lot of resources and run into email performance issues.

And while CSS media queries are widely supported by email clients, that support isn’t universal. Check out this list from Litmus and compare it with the email clients your audience is using. 

5 steps to coding responsive emails

Ready to roll up your sleeves and give it a go? Here’s a high-level overview of the steps you’ll need to take:

  1. Decide what elements you want to respond based on each device you’re targeting
  2. Code a standard HTML email with inline CSS. (You’ll need to inline CSS for email clients that don’t support media queries)
    Tip: Make sure to add classes to the HTML elements. Classes help tie the mobile CSS rules to the element itself 
  3. Add a <head> area. This is where you’ll put additional code for media queries and media query styles
  4. In the <head> area, write a CSS media query (@media) to check the recipient’s device and update each element’s styling as desired 
  5. Test your email before you send! This is something you should always do, and the more complex your code is, the more troubleshooting it can require  

Reference this Email on Acid guide for the specific code you’ll need for common media queries and client-specific targeting. 

Media queries and CSS inlining

Since CSS media queries aren’t universally supported, plan ahead to make sure you can deliver an email that performs well for every customer. Clients that don’t support media queries will strip the <head> area (including your media query)—so you’ll need to inline your CSS styling as a fallback. Check out this article for more info on using an inliner to do it.  

For email clients that support media queries, your embedded styles will display as planned. When you add media queries and media query style rules to <head>, mark each style with an !important declaration—this will override your inline styles and apply your media query styles according to the media query rules.

Here’s a code sample to get you started:

<head>
    <style>
        .special-heading{
            color:blue;
        }
        @media only screen and (max-width:600px) {
            .special-heading {
                color:red !important;
            }
        }
    </style>
</head>

One caveat: while most Gmail clients support media queries, there are some extra details you need to pay attention to in your code, because Gmail converts the doctype to <u></u>. You can find the code you need to target Gmail clients (as well as code examples for many other clients) at HowToTarget.email (and FreshInbox has a handy breakdown of the how and why).

3 considerations before diving in 

Responsive design is a powerful way to make sure that your email looks great to everyone in your audience. But that benefit comes at a cost—and it’s not always worth it. Here are three questions to ask yourself when considering a responsive-design approach.

Do you have the time and resources to code a responsive email?

Because responsive design code is more complex, there are more places for it to break. That means more time to write the code, plus additional testing and troubleshooting with your target email clients. If you don’t have adequate time and resources, you’re better off coding a solid mobile-first design—because a rushed, buggy responsive design will only hurt your brand. 

What specific benefits will you get that you couldn’t achieve with mobile-first design? 

Mobile-first designs are cheaper and faster to implement than responsive designs, and they solve a lot of the same problems. It’s a smart strategy to use mobile-first design wherever possible, and shift to responsive design only when there’s a clear benefit that will significantly increase conversions. 

What devices and clients are your audience using? 

You can’t know if the additional costs of responsive design are worthwhile if you don’t know what devices your audience is using to view your emails. If 90% of your audience opens your emails on mobile, it’s probably not worth the cost to optimize for desktops! Make sure you’re mining your data, and do market research if you’re seeking new audiences.

How to make the call on responsive design

Once you’ve answered the questions above, you can do a cost/benefit analysis about whether responsive design makes sense for the email you’re crafting. In some cases, it can make a significant difference in conversions. For example, it may be worth it when:

  • Your data shows a wide mix of desktop and mobile email opens
  • A two-column layout is important for getting more info above the fold on desktop
  • You often use the same layouts and can build responsive templates to reuse 

However, responsive design isn’t worth it for little tweaks that don’t have much impact on the finished product. You’ll just burn up development time—and create more opportunities for email clients to break your email and frustrate your customers!

Responsive design is just one of many tools in your toolbox for building high-performing HTML emails. Always start with a solid approach to design and coding (here’s a primer, including details on going the mobile-first route). Keep the big picture in mind when you choose your approach, and you’ll keep your costs down and your KPIs up!

How to Make CSS Play Nice in HTML Emails (Without Breaking Everything)

Customer.io

In the web world, CSS takes the headache out of formatting, styling, and more. But when it comes to email, CSS can cause more headaches than it cures.

The trick is to use CSS selectively—only when the benefits exceed the cost—and to do it an email-friendly way. It’s important to know that CSS can take a lot of extra effort and slow your time to market. It also creates greater deliverability, accessibility, and performance risks, which can cost you audience share. 

While CSS support is increasing among email clients, using it still requires a cautious approach. This guide walks you through deciding when to use CSS—and how to do it well when you do.

How to break your emails with CSS (aka, don’t do these things!)

Email clients are famous for mangling CSS in a variety of creative ways. Don’t risk your emails arriving in a mess! Here are the things we recommend you avoid at all costs, and why. 

Using CSS for layout. CSS just doesn’t work for email layout. Most email clients do not support CSS layout or will break your CSS layout—each in its own unique way. HTML tables may be old school, but they produce emails that look good across devices, and they are really the only way to go for email layout. However, you can use CSS for styling—more on that in the next section of this article.

To ensure your layout works well, dig into this guide on designing and developing HTML emails. 

Using external style sheets. External style sheets are standard for websites, but they cause major problems with email. An external style sheet tells the email client to go to the internet, find a file, and load it. To the email client, that sounds like spam—so the link will most likely be blocked. That means you’ll be stuck with the client’s default formatting. 

Using embedded styles in the <head> section. The advantage of CSS is that you can set your styles in one place, rather than styling each piece separately. Unfortunately, many email clients don’t support embedded styles and will strip the information out of the <head> section. Again, you’ll be stuck with those default fonts and colors. 

Pro tip: in addition to knowing which of your core email clients do and don’t support CSS, it’s absolutely critical to understand that Gmail strips CSS from the head if it finds invalid CSS. If you’re unsure if the CSS in your head is valid, it might be safer to just inline it.

Tom Buchok, CEO of MailCharts

Failing to account for variations in CSS support across email clients. There’s no single way to do CSS for email, because CSS support varies widely among email clients. That means you’ll need to know what clients your customers use and what CSS support those clients offer. Start your research with this comprehensive resource from Campaign Monitor on CSS support among email clients. And, of course, make sure to test your email!

Why you might want to use CSS despite the risks

Despite its challenges, using CSS in your emails can provide some significant advantages. The two main use cases are styling and special elements. 

Styling

CSS can give you more precise control over styling. Why? Well, there are a limited number of attributes for HTML elements. (Attributes are what let you modify appearance and behavior.) CSS layers on more styling options for the elements, as well as more control over how those options appear.

Note: While CSS can be useful for styling, we recommend that you don’t use CSS when you are sending an email that looks like it’s coming directly from an individual. A minimally-styled email feels more personal.

Special elements

CSS can open the door to special elements, including animations (instead of GIFs), HTML5 videos, and background images. Check out this guide to special elements in email for more details. 

Ultimately, you must weigh the value of using CSS. You’ll want to look at the potential for increased conversion versus the costs: more time to market, more labor, more code to write and troubleshoot, and the need to mine data to determine whether target clients support the functions you want to use (or accept an unknown failure rate). 

Whether you choose to go mobile first with your email templates or collapse a desktop-oriented layout into a mobile width—CSS will be critical to ensuring everything looks just right. A few of the common tricks you’ll need are centering/re-aligning text and images, swapping out images for different sizes, showing/hiding content, and adjusting font sizes.

Tom Buchok, CEO of MailCharts

If you decide to go forth, here are some smart approaches to making CSS work for you.

Smart CSS approach: Use inline CSS for styling

While we don’t recommend using external style sheets and embedded styles, using inline CSS styles can give you excellent styling control. You’ll want to use an inliner, which converts the CSS styles from the <head> section of your email code to inline CSS. 

For example, Customer.io uses Premailer as part of our email preflight, which converts CSS styles to inline style attributes—it checks style and link[rel=stylesheet] tags and preserves existing inline attributes. It also converts relative paths to absolute paths (checking links in href, src and CSS url(”)) and checks CSS properties against email client capabilities based on the Email Standards Project’s guides.

Here’s what embedded CSS looks like: 

<html>
    <head>
        <style>
            h1{ color: blue; }
        </style>
    </head>
    <body>
        <h1>A Blue Heading</h1>
    </body>
</html>

And here’s the same styling inline:
<h1 style="color:blue;">A Blue Heading</h1>

Want to test it for yourself? Go to Premailer and convert some embedded styles to inline—you can paste the embedded style in the text above see inlining in action!

Note: When you use an inliner, your email will look slightly different after inlining; the inliner tweaks your code to work inline. Make sure to test your email so you can troubleshoot any issues!

Smart CSS approach: Add special content… but only if it adds value

Sometimes special content can really drive conversion—and other times it makes more work for you without impacting audience behavior. The first question to ask when considering CSS for special content is: will this drive improved KPIs? If not, you’re better off leaving it out. 

But sometimes special content is truly valuable. Here are the use cases where we think the extra resources to develop CSS may be worth it: 

  • When seeing your product in action makes a difference, like a video game release or showing of a SaaS or app feature
  • When you have clear data that shows a certain element has a statistically significant impact on conversion 
  • When 90% of your audience is using a client that supports the element 

Background images, CSS animations, and HTML5 video are some of the most likely candidates for increasing engagement—here’s a dive into using these effectively. 

Smart CSS approach: Think of it as an optional enhancement

You’ll get the best results with CSS if you think of it as an enhancement for email clients that can support it—and make sure your email delivers value even if they don’t. You can do this by using media queries. 

A media query is a piece of code that asks the receiving email client about enhanced CSS-handling capabilities (one good option is a Webkit media query—Litmus has a good code example). If the media query detects that the recipient is running a Webkit-based email client, the enhanced code is delivered, and the email arrives with every bell and whistle in place.

If the email client says it doesn’t have Webkit, the basic code is delivered. Instead of a mangled CSS email, the recipient gets a simplified email that’s still true to your brand and goals. 

So is it worth it to write the enhanced code? Once you’ve determined the enhancement could provide a good chance of increased conversions, it all comes down to knowing your audience. 

Start by checking your data to see what percentage of your audience uses clients that support the elements you want to use. If 90% of your audience uses a Webkit client, adding CSS could be a great use of your resources. But if it’s a much lower percentage, you’ll likely find you’ve increased your risk and time to market for little benefit. 

Know your why before you start the how

You can get great results with careful use of CSS in emails—and you want to make sure you’ve got a good reason before you commit the development resources you’ll need for it. Here are some tips to help you ace your next CSS challenge:

  • If a stakeholder is keen on something that’s high risk and/or high-time investment, run the numbers. What percent of your audience do you stand to lose if deliverability is impacted or your email gets mangled?
  • Don’t put style before structure! Make sure you’ve got a solid HTML foundation in place for email format before you add styles with CSS—and let your structure be your guide.
  • Test and learn. You should always test emails thoroughly before sending—and that goes triple when you’re incorporating CSS. Review your test results to develop best practices to guide your decisions going forward. 
  • Compare soft and hard costs. If the CSS is worth doing, it’s worth doing right. The hard cost of using a vendor might outweigh the soft cost of your team’s time. Looking for support? Check out our partners page—we love matchmaking!

March Release Notes

This month, we focused on giving you control over all the data stored and generated by Customer.io with a new interface for data warehouse integrations, helping you export and use your Customer.io data in your business intelligence stack. 

Read on to learn more about this and other features we shipped last month.

What’s New?

Data Warehouse Sync UI

We added an interface for data warehouse integrations, putting you in control of the types of data you want to export and where you want to export your data. Data warehouse integrations let you export your data in bulk, so you can take advantage of your complete Customer.io data set in Google BigQuery, Snowflake, and other business intelligence or CRM platforms.

To set up a data warehouse integration, go to Integrations > Databases and select the platform you want to export data to.

This month, we added the option to disable link tracking in the drag-and-drop editor, so you can exclude unsuccessful click outcomes, like custom unsubscribe clicks, and maintain an accurate click rate. To disable link tracking, just add the untracked class to the button, image, or text link that you don’t want to track.

Search for Team Members in your Workspace

You can search for team members in your workspace settings, making it easier to determine who has access to your workspace, especially when you have a large team.

That’s a wrap for now. We’ll see you next month! In the meantime, follow Customer.io on Twitter to get updates about the latest releases and improvements. Questions? Comments? Send them to win@customer.io.

Building Our Brand’s Visual Style

Last month, we made a significant (and much-needed) update to our website. The visuals of our previous brand were outdated, generic, and forced. Our visual style was created by repurposing elements from our logo. We used primarily open-source illustration and icon libraries. The visuals did not represent our customers nor ourselves. Now we put our customers first. On every page, we showcase their ideas and their dream it, do it attitude.

Realizing the Dream it, Do it concept

Marketers who use Customer.io are capable and intelligent. They have no shortage of ideas of workflow to build or tests to run. Their willingness to explore ideas is what often brings them to Customer.io in the first place. With their existing customer engagement platform, they experience a conflict. They have an idea for a campaign and excitedly rush to implement it. But then they come to find the platform has idea-crushing limits. They try to work around those limits but soon realize they will never have the flexibility or control they want.

Capable marketers know there has to be another way. They explore workarounds. They leverage their technical skills to overcome most obstacles they face. If they lack specific technical skills, they dive into technical concepts to make their idea happen. They know if they push through and build it, their messaging will be stronger.

This dream it, do it attitude is what makes marketers who use Customer.io so great. We strive to build a product that empowers that spirit. The power and flexibility of our product encourage customers to push the boundaries. While not always pretty, that out-there marketing idea is most likely possible in Customer.io. That is all our customers need to build out their messaging strategy.

Tweet from @wales____
Tweet from @CasJam
Tweet from @joshcpm

Bringing the brand to our visual design

For our customers, it all starts with an idea. When that idea comes to you, you immediately run to the nearest whiteboard to sketch it out. You start with a few messages, then add some logic, further refining and personalizing your workflow as you go. You erase a section here. Draw a branch there. Add another decision point over there. The whiteboard is your open canvas to tinker and experiment as you look for ways to iterate and improve. When you finish and take a step back, you see your ideal campaign all drawn up. Then all you have to do is make your workflow real.

Hi Customer.io team, is there any way to change email workflow based on a click in an email? I’d like to implement an email workflow similar to the attached image [below]. I’d really love to keep all of our email stuff in cio – just need a way to change workflow based on a click.

A workflow sent to us from a customer

Visually, we have an opportunity to mirror these experiences in our platform. We can replicate elements of a whiteboard and workflow drawings to reinforce the flexibility, control, and power Customer.io gives marketers. Our visual representation should feel familiar to customers across our website and product. Why use metaphors for power or flexibility when we can show it?

At a foundational level, our illustration style is representative of a whiteboard marker. Both icons and illustrations have a hand-drawn style to mimic these early ideas. While these ideas start with a sketch, they end as a built workflow. By highlighting product screenshots, we can mirror the dream (sketch) and the do (Customer.io).

The hero illustration communicates the high-level idea: a sketched-out version of our workflow builder.

With the hand-drawn style, we do need to practice restraint. We are cautious of over-simplifying concepts or adding unnecessary visuals. Instead, we lean into technical elements, like code examples. Our visual design should be in service of the product experience: An automated messaging platform for tech-savvy marketers who want more control and flexibility.

Our visual style is not limited to illustrations and images. Words can often be the best way to communicate an idea. Our styling includes a highlight and underlines to emphasize keywords or phrases. This accent gives our team members another tool in the visual design tool belt, allowing anyone to add visual interest purposefully and intentionally.

Highlighting our integration partners
Underlining key phrases

To our team

Our brand narrative is most compelling when it aligns with our customers and our team. We are not all tech-savvy marketers, but we have all had that moment of realizing that we can do something in a better way. We hack together new campaigns, processes, operational flows just as our customers do in Customer.io. We hope this brand story is energizing because it is uniquely us, for our product and our team.

A special thanks to Agata Celmerowski of Velocity by Design for helping our team realize this story and Ramy Wafaa of Roundicons.com and Dann Petty’s That Marker Pack for helping us bring that story to life!

Can Product Designers Redesign a Brand?

We redesigned our website! It was no small feat, requiring months of work from our marketing and design teams. It’s still a work in progress, but it’s something I can be proud to share with customers and friends.

When we started working on the redesign, we only had product designers, no brand designers, on the team. It was daunting to start a project without the specific expertise needed in-house. But when we reframed the project as a product exercise, our design team figured out how to apply our product design skills to the new challenge. This is what we learned. 

Always Start by Listening to Build Empathy

This project was about more than just a website – we needed a new visual direction for our brand. So we started where we start every product process: listening to people. We attended a brand workshop with Agata Celmerowski of Velocity by Design, who helped the leaders in our company distill what makes Customer.io special. We also looked back at all the things we had heard and seen from customers through rituals like our weekly review of FullStory sessions and customer interviews.

By listening to our leaders and customers, we zeroed in on a clear brand story: we empower people to create their most audacious messaging ideas. Our product has incredible flexibility and depth; that means there are few limits to what people can accomplish if they dream. We needed to communicate that aspirational ideal through our designs.

Use Familiar Patterns and Find Outside Inspiration 

Next, we looked elsewhere at what makes a great website. Part of our product design philosophy at Customer.io is that using well-known patterns makes UX more intuitive. We’ll almost always use a familiar design element instead of creating something avant-garde from scratch.

We looked for common elements in other SaaS tools’ websites that tell their product’s story well, like Helpscout, Webflow, Miro. These commonalities stood out:

  • Show the product in action with interactive elements
  • Use actual product shots rather than symbolic images
  • Any decoration should be simple and shouldn’t distract from the content

Remember Your Design Fundamentals

Once we had a good idea of the visual direction and appropriate patterns, we started designing pages. The marketing team provided most of the content, so we drew on our knowledge of design fundamentals to turn that content into an enjoyable experience:

  • Color – we mostly used neutrals with splashes of color so visitors wouldn’t be distracted when trying to find important information
  • Spacing – we gave spacing between distinct content so visitors can focus on one piece of info at a time
  • Layout – we used colors and shapes to divide ideas, making it easier to scan and consume

Design Systems FTW

One of the most impactful product design tools we used was systemization. As we designed, we chose a few decorative elements and applied them to many different scenarios rather than making custom patterns and decorations for each page. Consistency shows our visitors we are mature but also lessens the cognitive load on them as they browse the site. We also systemized typography and color, making it easier for non-designers to build pages in the future.

Ask for Feedback and Iterate

As product designers, we know how to get feedback and make iterations based on what people say. We presented the work-in-progress design to the entire company, starting with our learnings from listening at the beginning of the process. We didn’t only want feedback on illustrations and header text – we wanted to make sure the direction resonated with the people who built this company. Everyone from Product Managers to Tech Support gave us feedback that led to improvements. Thanks, team!

I’m proud of what we made. Even without brand design expertise, we figured out how to apply our existing product design skills to create something true to our brand. 

But do yourself a favor. Brand design is a full-time job – hire a brand designer! Khari joined our team last month. I can’t wait to see where he takes us!

Update on our European Availability Zone

After the European Court of Justice (CJEU) announced the invalidation of the Privacy Shield Framework last summer, Customer.io implemented Standard Contractual Clauses (SCC) to allow for the lawful transfer of data for our EU customers.

If you’re an EU customer and require an executed Standard Contractual Clauses (SCC), download, countersign our pre-signed form, and return the final copy to your CSM or submit it here.

For customers who prefer to host their data in the EU, you can now choose to do so. Customer.io’s European availability zone came into effect on March 24th. New customers will be presented the option to select US or EU regions when creating their accounts. Existing customer migrations can be coordinated through your Customer Success Manager.

If you have any questions, please email win@customer.io.

Thank you for being our customer,

Colin Nederkoorn
CEO


Editor’s note: This article was originally published December 14, 2020, but has been updated on March 24, 2021.

Our mailing list is chock full of tactical lifecycle marketing how-tos, interviews with trending internet businesses, and product updates.