Smart. Focused. Email.
Fast, cross-platform email designed to filter out the noise - so you can focus on what's important.
Definition
💡 HTML email: Emails coded in HyperText Markup Language that let you add formatting, images, colors, and links. Basically, the difference between a boring text document and an actually designed message. HTML email provides formatting and semantic markup capabilities that aren't available with plain text.
Why HTML email matters
Plain text emails are just text. No colors, no images, not even bold or italics. HTML emails are everything else.
HTML emails have color, style, images, and sometimes multimedia, similar to webpages delivered to people's email inboxes. That means you can match your brand, use your logo, add buttons people can actually click. You can use the inherent visual elements to help focus attention on the various parts of your email content and leverage the elements users expect to engage with, such as images and video.
Most businesses send HTML emails now. According to surveys by online marketing companies, adoption of HTML-capable email clients is now nearly universal, with less than 1 percent reporting that they use text-only clients. Your customers expect designed emails, and plain text can look unprofessional or outdated. It signals you're not serious about your communication.
But HTML isn't automatically better. There are trade-offs. HTML emails are larger, take longer to load, and can break across different email clients. They also trigger spam filters more often than plain text.
How HTML emails work
When you send an HTML email, you're basically sending a mini webpage to someone's inbox.
The email designer writes HTML code, much like coding a webpage, defining the structure with HTML and styling it with CSS. You add images, format text, create layouts. Then when the recipient opens the email, their email client reads that HTML code and renders it like a browser would display a webpage.
Here's the catch: There are hundreds of different services and apps that people use to read their email, like Gmail, Yahoo!, and Outlook, and each service displays HTML and CSS slightly differently. What looks perfect in Gmail might break in Outlook. What works on desktop might fail on mobile.
That's why many email servers are configured to automatically generate a plain text version of a message and send it along with the HTML version, using the Content-Type: multipart/alternative. If the HTML fails to render, the email client falls back to plain text. You're covered either way.
HTML vs plain text
You've got two options:
HTML emails give you full design control. Colors, fonts, images, clickable buttons, layouts that match your website. HTML is the best format when you want to create messages that look like traditional documents, with various fonts, colors, and bulleted and numbered lists, and when you want to show pictures inside your message. Perfect for newsletters, marketing campaigns, branded communications.
Plain text emails are stripped down. Just text, no styling, no embedded links. The plain text format doesn't support bold or italic text, colored fonts, or other text formatting, and doesn't support showing pictures inside the message. Less exciting, sure, but they work everywhere. They also feel more personal and less salesy, which is why some people prefer them for one-on-one correspondence.
For Microsoft accounts, you can choose how to receive your emails in your inbox.
Works great for sales letters and updates, and if you're a salesperson engaging in one-on-one email correspondence, plain text emails are probably better. But for most marketing? HTML wins.
Creating HTML emails
You've got options depending on your technical comfort level.
Code it yourself. If you know HTML and CSS, you can write the code from scratch. Just remember that building an email in HTML is specialized, and it's not exactly like building a web page. Email clients are way less forgiving than browsers. You'll need to use tables for layout (yes, really), inline CSS instead of external stylesheets, and test across multiple clients.
Use a drag-and-drop builder. Most email service providers like Mailchimp, Constant Contact, or Campaign Monitor offer visual editors. You drag in text blocks, images, buttons, and the tool generates the HTML for you. No coding required.
Start with a template. Grab a pre-built HTML email template from a service like Litmus or Email on Acid, then customize it with your own content and branding. Faster than building from scratch, more control than a drag-and-drop editor.
Whichever approach you use, you still need to make sure your emails are responsive to different resolutions and work with different email clients. Test everything before you send to your full list.
HTML email best practices
Design for mobile first. More than half of emails get opened on phones. Now that mobile browsing has overtaken desktop PC and laptop usage, designing your emails for mobile devices is more important than ever. Use single-column layouts, large tap targets for buttons, and readable font sizes without zooming.
Keep it simple. Don't go overboard with design. When developing an HTML email, do not forget about simplicity, don't complicate your work, you'd better stick to the option of two columns. Fewer elements mean faster load times and fewer things that can break.
Use inline CSS. The head tag, which is used to house CSS style rules for an entire HTML document, is not well supported and sometimes stripped entirely, causing inline style declarations to be the de facto standard.
Test across clients. Gmail, Outlook, Apple Mail, Yahoo, and mobile clients all render differently. You can try sending your emails to various accounts connected to different email clients, or use email testing tools to take the hassle out of the process. Services like Litmus and Email on Acid specialize in this.
Include a plain text fallback. Always send both HTML and plain text versions in the same email. If HTML breaks, recipients still get your message.
Watch your file size. HTML email is larger than plain text. Heavy images and bloated code slow down loading and can trigger spam filters. Keep total email size under 100KB if possible.
Don't rely on images alone. Some email clients block images by default. Your message should still make sense without them. Use alt text for all images.