A growing number of email marketing services offer templates to help even the most design-challenged among us to craft beautiful emails. Even so, when you want a completely unique and personalized email campaign, you need to break out your HTML skills to design your own email or modify a template.

This is not an easy task. Are you proud of all those great interactive elements you coded into the company website? Forget using that code. There is no central, shared email standard, which means the email you design will have to work with Gmail, Outlook, Apple iOS, and even AOL. Email clients vary dramatically in what capabilities they support, so simplicity is generally best.

Let’s look at some HTML email best practices that can help you knock this assignment out of the park. First, though, if it’s been a while since you’ve written in brackets, here’s a quick review of HTML and CSS.

 
Learn why top brands trust Salesforce to help them drive success with email — and how you can manage customer journeys at scale using data from any source.

Behind every pretty header or gleaming button is HTML code. According to W3C, “HTML is the language for describing the structure of webpages.” Ditto for email as well. With the help of HTML, you can construct headings, build lists, plant images in your email, and construct tables.

Bonus Trivia: HTML stands for Hypertext Markup Language.

A lot of design newbies confuse HTML and CSS (cascading style sheets), but they are not the same thing. W3C defines CSS as “the language for describing the presentation of webpages, including colors, layout, and fonts.” In other words, HTML builds the structure, and CSS makes it look pretty.

When designing your email, it’s important to recognize this central fact: All email clients accept HTML, but not all of them are so friendly toward CSS. Be careful how you decide to implement CSS in your email, if you do at all. It may be easier and, for your metrics’ sake, safer to stick with HTML alone. On that note, let’s look at how to code an email with HTML that will look great on all email clients.

The key to designing email in HTML is to think simple. Your email needs to perform flawlessly on Outlook, Gmail, Yahoo, Android mail, and every other email client your audience is or could be using. That means fancy fonts and drop shadows are out, and elements such as tables are in.
An article for Moveable Online explains that one-column emails work best for two reasons: readability and technical benefits. Adding more columns increases the chance of problems popping up on different platforms.

To maintain consistency across all clients, focus on using web-safe fonts, which are “fonts that will render correctly virtually anywhere, regardless of where the email is read.” Those include:

  • Arial
  • Courier
  • Georgia
  • Helvetica
  • Lucida Sans
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana

Tables are the surest way to maintain consistency between email clients and to retain control over the look and feel of your email, especially when creating responsive emails. Tables are more reliable than divs and floats, and can actually let you mimic floats. If needed, you can also nest tables, which means putting one table inside another. This helps your email stay organized and clean.

Bonus Trivia: In HTML, a <div> tag lets you group sections of HTML elements together and format them with CSS. The CSS float property positions an element relative to the other elements on the page.

Gmail now accepts embedded style sheets, which is CSS code in the header that starts and ends with the <style> tag. Embedded style sheets “allow you to define styles for the whole HTML document in one place.” However, there are still email clients that don’t display embedded style sheets properly. It is still best to stick with inline style, in which elements of design are coded into each individual part of the email; otherwise your email client could strip away all your CSS.
Images add flavor to your email and keep it from being a basic block of text. Keep in mind, however, that your recipients may never see your images. Some email clients (Outlook is a good example) automatically block images, and anyone can update their email settings to block images. That means your emails will have to be understandable and work even without images, if necessary.
Add a descriptive alt tag to every image in your email so your recipient isn’t confused if the image is blocked. You can even play around with the tags and make them part of your email story, as well as add inline styles to your image alt tags. This will give viewers something interesting to look at.
Many email clients support retina-ready images, so use hi-resolution images. Be aware, however, that huge images will inflate the size of your email, which could cause it to get stuck in spam filters. To solve this problem, compress images before adding them to your email code.
GIFs and videos are supported by a majority of the most popular email clients, so don’t be afraid to add them if they’re appropriate for your audience and campaign. As with images, assume that not every recipient will be able to see the GIFs and videos. Include a link to the video on your website for those who can’t view it within the email, and make sure to add explanatory text so watching the video isn’t critical to understanding the email.

Despite the fact that you might be designing your HTML email with code you learned years ago, a large portion — perhaps even a majority — of your recipients will receive your email on their phone. According to Litmus, approximately 54% of all email opens happen on mobile.

Creating an email that looks great on a 25-inch desktop monitor as well as on the next iPhone is tricky, but the most popular method is to use responsive email design.

Developing a responsive email includes adopting “fluid, grid-based layouts, and CSS3 media queries,” notes Ethan Marcotte, who coined the term responsive web design. Media queries are a part of CSS coding that allows content to display according to specific conditions, including screen resolution. Since not all email clients support media queries, a responsive email design will require some “hacks along the way,” as Lee Munroe of Smashing Magazine explains. His suggestions include different design techniques:

  • Fluid: A design using a single column, and when the size of the screen shrinks, the content area does, too.
  • Adaptive or responsive: This includes alternate styles for different screen sizes, as well as hiding or showing different elements as the screen permits.
  • Hybrid and spongy: This method combines the previous two, with an additional few design changes for specific email clients.
There are books and entire courses dedicated to learning how to code or email HTML best practices. Here are a few HTML email tips to get you started.
Many big email clients give top billing to preheader text. Apple Mail, Outlook, iOS, Gmail, and AOL all show preheader text right next to your subject line in a recipient’s inbox. This gives you one more chance to grab your customer’s attention and encourage them to open and interact with your email. Just make sure you don’t code in a default preheader, or you could be wishing your recipients a Happy Easter in July.
 
See insights on successful email strategies from Marketing Cloud customers.
Your email needs to follow the regulations of your country and possibly even the regulations of your recipient’s country. Follow anti-spam best practices, stay in compliance of the CAN-SPAM Act, and place an easy-to-find unsubscribe button or link in your email.
JavaScript and Flash aren’t supported by any email clients, and most don’t support forms or complex CSS. Save the fancy coding for your website and keep it nice and simple in your emails.
If you spend hours painstakingly coding an email from scratch, there’s no reason to send it and then forget about it. Save your work by creating a “pattern library” where you save components and code you can use again in the future. Automate where you can, and your future self will thank you.

Because it’s difficult to design an email that works on all email clients, testing is critical. Munroe explains, “I don't think I've ever sent an email successfully the first time. There is always something to fix, always a typo, always a rendering issue in Outlook, always something I've forgotten to add.”

Before you send your email, preview it on as many email platforms as possible. At the very least, send it to yourself on a mobile platform, web email, and desktop client (iOS mail, Gmail, and Outlook will work).

For the best possible results, use a service to see how your email performs on all major platforms.

(Pro Tip: Don’t forget to proofread. You may focus so much on whether your button is centered or your image displays correctly that you overlook a misspelled word.)

Crafting an email with HTML is an arduous process. The results, however, are rewarding: You have an email design that’s unique to your company. The HTML email best practices in this article will help you create a beautiful campaign. The future of email design looks exciting, too, with elements like CSS animation, audio, and even email shopping carts. Soon your HTML emails may catch up to your true design potential.
Jessica Bennett is a writer, editor, and novelist. Her clients span a number of industries, and she's written blog posts, product descriptions, articles, white papers, and press releases— all in the name of inbound marketing. She's proud to be Inbound Certified.
 <a href="https://www.salesforce.com/products/marketing-cloud/best-practices/html-email-tips" target="_blank"><img src="https://www.salesforce.com/content/dam/web/en_us/www/images/marketing-cloud/hub/html-email-tips/the-savvy-marketers-guide-to-html-email-best-practices-embed.png" alt="The Savvy Marketer’s Guide to HTML Email Best Practices"></a> 

Ask about Salesforce products, pricing, implementation, or anything else — our highly trained reps are standing by, ready to help.