Can You Use Float In Email Template

HTML Email Development Best Practices: Rules to Lawmaking Past

If you're new to HTML e-mail evolution, coding emails so they brandish consistently and perform well beyond different devices and clients might feel like a lot of trial and error. A fix for 1 customer might break your email in three others, or a simple float may merely function in half of the email clients.

If you're coming from a web development background, coding for electronic mail may seem restrictive since in that location are techniques used for websites that aren't consistently supported for email, similar importing fonts and CSS styles. (Find out more in our list of the biggest differences between web and email development.)

Fortunately, you lot can save yourself hours of hair-pulling and brand your coding experience more enjoyable past following some HTML email development all-time practices.

The best practices that nosotros outline below cover the core aspects of e-mail evolution: pattern, accessibility, coding practices, and (most chiefly) testing. Considering even if you lot're confident in your code, it'due south still of import to test your emails earlier you hit 'ship.' With Electronic mail on Acrid, you can encounter what your pattern will look similar on dozens of clients and devices.

Jump to a department in this commodity:

Email design guidelines
HTML email development
Epitome handling in HTML emails
CSS best practices for email
HTML electronic mail accessibility
Testing and HTML e-mail development

Email design guidelines

It'southward a good idea for e-mail designers and developers to go on the same page from the kickoff. Designers need to understand HTML email evolution practices then that they avert requesting things or wireframing ideas that simply aren't possible.

Apply single-cavalcade design

Keeping your email blueprint elementary doesn't just make your life easier, it too helps it await meliorate on mobile devices. Emails with two or more columns require more testing to ensure that they're responsive in unlike viewport widths and are decumbent to more than display issues across email clients. A single-column design is sufficient for near emails, it's easier for people to read, and you won't see equally many unwanted rendering surprises.

Set 600px as the default width

Nosotros recommend that y'all keep your email'due south maximum width shut to 600px. This width should give you plenty of space for content and will fit nicely on most spider web and desktop clients. Y'all can scale it down to fit better on mobile screens using media queries or fluid pattern (see beneath).

Practice mobile-first pattern

In 2019, mobile devices became the master way to bank check email for about 85% of users and accounted for 42% of all email opens. So if your email doesn't look good on mobile, there's a good chance the recipient won't carp reading it.

With this in mind, it's no wonder that many email developers accept embraced mobile-kickoff design. By putting mobile users kickoff throughout the evolution process, then making certain information technology besides looks good on desktop, you can increase engagement and click-throughs. Nosotros especially recommend this approach for simpler emails like countersign resets, transactional emails, and account updates, but it also works well for marketing emails.

Mailjet Markup Linguistic communication (MJML) is a simple and efficient style to develop responsive emails for mobile devices. It'south a coding language that's worth exploring if you're the kind of electronic mail developer who wants to expand your horizons. Find out how to get started with MJML.

Utilize font stacks

If you use Google Fonts or other custom web fonts, you may find that many electronic mail clients don't support them. For this reason, it'southward important to declare fallback fonts — also known as font stacks. This ensures your blueprint even so looks skilful regardless of the email client information technology's displayed on.

Fifty-fifty if your email only uses email-condom fonts, y'all'll still want to use font stacks. No font is 100% supported across all clients.

When creating a font-stack, listing your fonts in guild of priority — exact font, nearest e-mail-safe alternative, then generic font. In the example below, nosotros've declared that Open Sans should exist displayed if supported. If not, show Arial (or Tahoma or Verdana). If none of the previously declared fonts are supported, bear witness the client'southward default sans-serif font.

font-family unit: 'Open Sans', Arial, Tahoma, Verdana, sans-serif;

Proceed in mind that not all sans-serif fonts take up the aforementioned space or display at the aforementioned sizes, so effort to go along specifically-declared fonts in your stack every bit similar equally possible.

You'll likewise want to apply a font-stack compatible with Outlook. One of the many quirks of Outlook is that an unrecognized font in the stack will cause it to fall back to Times New Roman. You can accost this annoying issues using one of these four fixes.

If you stick to using web-safety and email-safe fonts in a thoughtful font stack, your emails will look more consistent and you'll reduce the amount of display issues you lot encounter when testing. Y'all can notwithstanding use custom web fonts, of course, merely make sure y'all declare fallback fonts along with them. Beneath are some e-mail-safe fonts you can use in your font stacks:

Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
Σψμβολ2 (Symbol)
Webdings

Blueprint for dark manner

On both desktop and mobile devices, most operating systems at present include dark mode settings. Nighttime style decreases the amount of light emitted from your screen by inverting the colors from dark text on a low-cal background to calorie-free text on a nighttime background. This is designed to reduce middle strain, peculiarly at night, but dark fashion tin exist challenging for e-mail developers.

How does nighttime way affect your HTML emails? While dark style may invert your background and text colors, it doesn't alter your images in any manner. And then if y'all've used a jpg logo with a white background, it could stand out in an unattractive fashion when your background switches to black.

Optimizing logos for dark way topped Pathwire's survey of the biggest challenges. When designing for dark mode, make sure that logos, icons, and epitome-based dividers are all in transparent png format. When possible, pick colors for buttons, icons, and other pattern elements that will work well in both light and dark mode.

Sometimes a design element's colour can't be changed due to branding constraints. In these cases, add white or calorie-free strokes around night or poorly-contrasting elements to help them stand up out and be legible in dark mode.

You can besides add together the media query @media (prefers-color-scheme dark) to your email to declare dark and lite color schemes. This CSS query is not supported past all e-mail clients, but it does work in Apple tree Mail, Thunderbird, and some versions of Outlook.

Learn more well-nigh coding for light and dark color schemes.

Don't forget to add an unsubscribe link!

And don't attempt to hide information technology. You lot don't want to email people who aren't interested. It's also illegal to leave an unsubscribe link out of a commercial email.

The unsubscribe link commonly appears in or below the footer, but ideally, you should also prepare a preference middle. Instead of but giving readers the pick to unsubscribe or stay subscribed, a preference center offers subscribers the pick of selecting what type of emails they receive, or how oft they receive them. Giving subscribers options can reduce your unsubscribe rate.

HTML electronic mail evolution

Since there'south a lot of ground to cover hither, the following HTML electronic mail guidelines are cleaved upwardly into 3 parts: HTML structure, prototype treatment, and CSS best practices.

HTML structure

Since HTML construction impacts nearly every aspect of your electronic mail, it's critical to get information technology correct. Let's take a await at a few considerations.

Use tables when possible

Forget divs and floats. While it may seem similar you're coding in the dark ages of the cyberspace, tables are the most reliable style to achieve a consistent layout. They also allow yous to replicate something that many electronic mail clients otherwise don't permit: floats (okay, not actually CSS floats). With tables, y'all tin can take advantage of the marshal attribute, which was the predecessor of modern CSS floats.

When using display: inline-block, table cells will stack on top of each other on smaller screens. This technique is the basis of responsive and fluid design. Information technology works like this: You have 2 tables that are each 300px broad with display:inline-block inside the same container. If the screen is 600 or more pixels broad (every bit it would be for nigh desktop clients) then the tables will appear side by side. If the screen is simply 400px broad, then the 2 tabular array cells will stack on top of each other. Nested tables are totally rubber, so feel gratuitous to nest away.

Nevertheless, watch out for empty TDs, equally some e-mail clients don't handle these as you lot'd expect. Usually this event tin be fixed by adding " " or a non-breaking space character. Yous tin control the size of this grapheme using CSS, so it doesn't mess with your layout.

Know your framework

At that place are 2 pop approaches to coding electronic mail. The virtually pop framework is chosen "responsive." The basis of responsive emails is to start with a 100%-width tabular array (to which you can apply styles that volition affect the whole email) and and then floating a fixed-width table in the centre of this wrapper using marshal="heart". If you use media queries, y'all can adapt the width to various screen sizes. Our complimentary responsive template is a bully example of this coding technique.

The other popular framework is called hybrid fluid or "spongy" pattern. With the hybrid technique, yous set container tables to width="100%" and constrain the container tables with a max-width style. When a hybrid pattern is displayed on screens wider than the max-width, the tabular array volition achieve its max. On a smaller screen, the table volition naturally make full the available space.

The "hybrid" part of this technique is that you must surround each table with a provisional table visible only to Outlook. The hybrid table has a fixed width, which solves the primary problem with fluid design: Outlook ignores max-width statements.

The principal advantage of the hybrid or fluid technique is that information technology works pretty much everywhere, regardless of whether the client supports embedded styles or media queries. For more on hybrid fluid design, bank check out our primer. We likewise have a few free hybrid fluid templates.

Include comments for templates and strip them before sending your emails

Including comments in your code will brand editing templates easier. Because HTML email development is full of hacks and fixes for client quirks, information technology can be helpful to annotation why you added a detail style or element, especially if multiple e-mail developers are working with the same templates.

However, when y'all're getting fix to transport your emails, strip the comments to assist reduce file size. A great tool for prepping your code before sending your emails is Bundle. Parcel inlines, minifies, and strips comments from your code before y'all commit. Best of all, unlike other code editors, Packet is designed specifically for email.

Continue e-mail file size under 100kb

At that place are a couple of expert reasons to continue your email under 100kb. Starting time, it will laissez passer through more spam filters. Keeping your e-mail under 102kb will too forbid Gmail from "clipping" your email.

To continue your email nether the limit, consider removing redundant or unused styles, moving some of the content of the email to a landing page, or removing whatever unnecessary characters from your code. Simply make sure to examination any changes before the final ship!

Encode special characters

If your e-mail service provider (ESP) uses a different kind of encoding from the kind you selected for your electronic mail, it may cause your special characters (similar ©) to announced incorrectly, often equally a black square or a diamond. This can touch quotation marks and apostrophes, besides. To avoid this problem, apply a character encoder, or take advantage of the one that's included with Electronic mail on Acid'due south Email Editor.

Code for high DPI displays

High DPI displays tin oftentimes cause issues when scaling email designs. This is because it will scale certain parts of the e-mail (height, width, font-size etc. that are coded in px), but non other parts. To brand certain your whole email scales properly, follow the steps in our coding for DPI scaling in Outlook blog mail service.

Include preheader text

In most inboxes, preheader text displays after the email subject area line. This text is piece of cake to code and tin make a huge difference in open up rates. Just make sure you lot don't hard-lawmaking "default" preheader text into your template.

If you lot include hard-coded preheader text (ordinarily in a field that can exist modified), you may forget to customize it and you'll send out an email with preheader text like, "PREHEADER TEXT Here." What a faux pas!

Instead, but include the "default" preheader text as an HTML comment. This way, other marketers and developers you piece of work with will know why that code exists, but recipients won't run across it if you forget to customize it.

Avert Javascript, forms, and other complex CSS/HTML

Javascript is completely unsupported in email clients so don't use information technology at all. Forms in emails are insecure and electronic mail clients can flag them as suspicious or malicious content, which is not a peachy experience for your subscribers. If yous desire to use Javascript and other interactive elements in your emails, consider using Accelerated Mobile Pages (AMP) for electronic mail, only keep in heed that it has limited back up. Currently, just Gmail, Yahoo!, and Mail.ru back up AMP components in email.

While HTML5 and CSS3 have limited support, they're sometimes possible (and fun!) to employ. These enhancements should exist used with caution, withal. Every bit e'er, exam every e-mail thoroughly when using any advanced code.

Apply cellpadding for spacing

Cellpadding provides reliable spacing across all email clients. If you need spacing only on one side of an image or container, you may want to employ another spacing technique. Check out our blog post on spacing techniques in email for more info.

Image handling in HTML emails

The correct graphics enhance the inbox experience while increasing conversions and boosting your brand. Here are some HTML email development best practices to help yous optimize images.

Make e-mail images retina-ready

Many devices include retina displays. This ways that the devices have more concrete pixels than their CSS dimensions would otherwise point. For instance, a 10px-wide epitome might use 20 or more pixels to display. By using extra-large images, you lot can make certain the images appear extra crisp on these displays. For more on this technique, read our article about retina images in email and fluid retina images for e-mail.

But, it's also important to watch your file size and so images load quickly for all subscribers.

Utilise absolute addresses for images

You may be using local image references for your testing, just when you practice your final send absolute image references are a must!

Become rid of strange spacing around an paradigm

This is a doctype effect. Use "brandish:block;" and it will remove this extra spacing.

Take some extra time with background images

Outlook tin't handle the background attribute or backgrounds set through CSS, so you lot'll have to employ VML to get backgrounds working in Outlook. Fifty-fifty with this workaround, Outlook can all the same be finicky. If you're having a hard time, try using Stig's push and background generators.

CSS best practices for email development

Use inline styles

While some email clients, similar Gmail and Outlook, have added support for embedded styles in certain applications, many other clients still crave inline styles.

To do this, you tin lawmaking with classes and IDs and and then brand employ of a CSS inliner. E-mail on Acid has an inliner that you can use from whatsoever e-mail test, or from within the Electronic mail Editor.

Avoid shorthand CSS when possible

If yous run into problems with an email client rendering your CSS, bank check to make sure you lot're not using a shorthand declaration. For example, "margin-top: 5px" may work where "margin: 5px 0 0 0;" does not. It'south of import to too avert three-digit hex codes. Some clients will not recognize these, and then always use the full half dozen-digit hex lawmaking.

Get used to !important

If you're a web developer, you may have been trained to avoid !important at all costs. With HTML electronic mail evolution, though, yous'll notice this proclamation can exist invaluable. Yous tin use it to override styles that the e-mail client adds or modifies (particularly web clients). You lot'll also get a lot of utilize out of !important when writing media queries, where this declaration will let yous override a default way with a mobile-specific ane.

Get comfy with media queries

Media queries are unremarkably used to create custom styles for different clients or screen sizes. The basic format of a media query for e-mail is:

@media only screen and (max-device-width: 640px){ styles here }

This will cause the styles independent in the query to trigger only on screens of 640px or smaller. "Min-device-width" would do the contrary, triggering on screens of 640px or larger.

Media queries are about often used to control font sizes, image sizes, and to make some tables go 100% width and then that they'll fill a mobile screen. Y'all can also use media queries to hide content that isn't necessary for mobile users. Simply make sure that y'all use !important on styles within the media query, so that they volition overwrite existing styles. Check out this article for more than HTML email guidelines for media queries.

Note: Media queries won't work in the Gmail app when a subscriber is using a not-Gmail business relationship.

And, while media queries are supported for the Outlook app on iOS and Android, there appears to be a persistent issue with certain media queries involving table cells not being recognized. If y'all're having trouble getting your table cells to stack in mobile brandish, the quick ready is to alter your <td> tags to <thursday> tags.

HTML email accessibility

In that location are millions of people around the world with auditory, cognitive, neurological, concrete, oral communication, or visual impairments. Designing and coding your emails so that every single subscriber can appoint with them is an important part of HTML email development best practices. By creating accessible emails, you'll better usability for all your readers, reach a broader audience, increase engagement and retentivity, and minimize your legal risk.

The electric current standards for accessible online blueprint are the Spider web Content Accessibility Guidelines (WCAG). The list of WCAG guidelines is quite extensive, simply there are a few basic principles to continue in heed when designing emails:

Avert prototype-only emails

If i of your subscribers is using a screen reader to access emails, the only mode they have to understand the content of your images is through alt text. That'due south exactly why descriptive alt text is so important — a screen reader vocalizes it each time an image appears.

Just that as well ways that image-but emails are completely inaccessible to anyone using a screen reader. Your image-merely email might expect nifty to some subscribers, but information technology's incommunicable to effectively communicate all of the words it contains within one alt text.

In addition to accessibility issues, image-based emails are also very hard on your recipients' data plans and can exist more often flagged every bit spam. Avoid these at all costs.

Don't use image maps

Epitome maps tin cause all kinds of havoc, trying to become slices to line upwardly perfectly across all email clients — plus, they're terrible for accessibility. Imagine using a screen reader and having several CTAs broken up across a bunch of tables. No thanks.

Image maps besides have issues in terms of creating larger file sizes and images being blocked in email clients. Make it easier on yourself and your subscribers by avoiding image maps when possible.

Use loftier colour contrast

For maximum readability try to apply loftier colour contrast in emails that conforms to the WCAG standards. If you test your emails using Electronic mail on Acid, our Email Accessibility checks volition automatically flag any issues.

Keep in listen that it'south non merely the contrast betwixt your e-mail'due south trunk re-create and the background that you lot need to be concerned with. Y'all as well need to consider the contrast between link colour and trunk copy and the readability of text overlaid on background images. Below are some tips to make certain your emails take sufficient color contrast:

Use text and background colors that are loftier-contrast. You don't take to use stark black on white or white on black, but brand sure your text and groundwork colors dissimilarity plenty to at least go an AA rating. If you need to use a lower contrast color in your email, reserve that for headings. Often an increased font size and weight can make upwardly for lower colour contrast.
Button colors. Keep your buttons simple past limiting color changes during dissimilar activity states. Instead, opt for using changes in font and button size to indicate activity.
Link colors. Cheque that your link colors encounter contrast guidelines in all activity states. Not only should they dissimilarity confronting the background, but also confronting the surrounding text. If your link colors don't come across accessibility guidelines and can't be changed due to branding guidelines, you can accentuate your links by using underlined, highlighted, bolded, or italicized text.
Graphics and imagery. If you're placing text on a background paradigm, make sure it's on acme of an expanse of the image with the least background noise, or use a color overlay on the image that contrasts with your text. Remember that some e-mail clients volition block images, so e'er provide descriptive alt text.

Include icons

Using icons and other graphical indicators like arrows, stars, checkmarks, other glyphs, and emojis can convey meaning for those with visual impairments. Choose glyphs and other font-based icons instead of using paradigm-based icons when possible. If yous must utilize image-based icons, remember to include alt text.

Employ semantic HTML

Semantic HTML adds contextual meaning when your goal is coding accessible emails. Both people and software tin hands empathise semantic lawmaking. The virtually recognizable semantic HTML is probably heading tags (<h1>, <h2>, <h3>, etc.), just others include:

<article>
<aside>
<details>
<em>
<figcaption>
<effigy>
<footer>
<header>
<lang>
<main>
<mark>
<nav>
<section>
<stiff>
<summary>
<time>

If you've worked with HTML for a while, you're probably familiar with at least some of these tags — particularly <em> and <strong>, which have largely replaced <i> and <b> for emphasizing and bolding text. Simply if you're still using some older or less accessible tags, you lot'll want to update your coding exercise to use more semantic HTML.

Some screen readers don't do well with certain types of HTML tags and keyboard navigation tin can be hard if your code doesn't include heading hierarchies. By using semantic HTML elements in your emails, you can ensure a better feel for users with disabilities.

Include ARIA markup

Accessible Rich Internet Applications (ARIA) is a markup language that provides additional context regarding the layout and content of web pages and emails. The bones components of ARIA define roles, states, and backdrop and help individuals with disabilities better empathize the UI they're interacting with. One of the biggest steps yous tin can have is to set up tabular array roles to rel=presentation. This helps screen readers interpret your tables in a way that makes sense to subscribers rather than reading it every bit confusing HTML code.

To practice this, add the following to your table:

function="presentation"

In context, this volition expect similar this:

<table width="100%" border="0" cellpadding="0" cellspacing="0" way="min-width: 100%;" role="presentation">

Or Email on Acid's Campaign Precheck tool will do this for you automatically.

Testing and HTML email development

Even if you're using these HTML email development best practices, a crucial part of any e-mail process is testing. There's no point in spending the fourth dimension making sure your emails look groovy on different devices if you don't preview them on unlike clients and devices.

It's the simply style to exist 100% sure that your electronic mail is ready to launch.

While testing, keep in mind that information technology'south very hard to accomplish "pixel perfection" on every single client. Every email client has different quirks when it comes to rendering code. Outlook for desktop (2007, 2010, 2013, and 2016) can be specially challenging.

Don't be surprised if yous can't get your email to brandish exactly how you desire to in every state of affairs. Instead, endeavor to achieve an e-mail that maintains branding and accessibility on all email clients, and don't sweat smaller details that don't interfere with overall readability and usability.

When you use Email on Acrid, you can test by generating live previews of your email in dozens of electronic mail devices and clients. When you test and validate the way HTML emails render, you lot'll feel more confident hitting "send" and be assured that your emails display well for your entire listing of subscribers, no matter what device or client they use.

This commodity was updated in November 2021. It was previously updated in May 2018 and first published in January 2017.

Author: The Email on Acid Team

The Email on Acid content team is made up of digital marketers, content creators, and directly-upwardly electronic mail geeks.

Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and neat convos on email marketing.

Author: The Email on Acid Team

The Email on Acid content team is made up of digital marketers, content creators, and straight-upwardly email geeks.

Connect with us on LinkedIn, follow u.s.a. on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on e-mail marketing.