Best Practices to be Followed within an Email Body (HTML Guidelines)

When crafting email campaigns, adhering to specific HTML guidelines within the email body can significantly improve deliverability, engagement, and user experience. This document outlines key best practices to follow before sending your email campaigns.

Image Optimization and Usage

Prefer multiple small images over one large image: Spammers often use a single large image, which can flag your email as spam, especially if it lacks additional text content. This also helps with structure and alt text clarity.
Compress images: Reducing image file size helps keep the overall email size down.
Avoid embedding links within background images: This can lead to unintentional clicks while scrolling, resulting in a poor user experience.
Use <img> tag instead of <svg>: Inbox Service Providers like Gmail and Yahoo may block <svg> tags, so use <img> to ensure your images render correctly. Additionally, if an SVG contains meaningful information, ensure its accessibility for all users.
Reduce the number of images: Excessive images can increase email size, potentially leading to clipping and impacting deliverability.

Content and Layout

The arrangement and type of content play a vital role in email effectiveness.

Use a combination of text, images, buttons, and bullets as required.
Maintain a 60:40 text-to-image ratio: This helps balance visual appeal with textual content, which is important for deliverability.
Strategically place Call-to-Actions (CTAs): Limit non-header/footer links to 3-5, prioritizing clear calls to action.
Use links purposefully: Avoid over-linking images, as this can bloat email size, increase clipping, and negatively impact both user experience and deliverability. Not all images require a link.
Use <table> tag instead of CSS flexbox: This ensures tables render correctly across all inbox providers. To know more about CSS properties that are supported in Gmail, refer to CSS Support.
Add more elements in the same row rather than adding multiple rows: This can contribute to a more compact HTML structure.
Don't add separate rows for mobile-only and desktop-only content: Design your emails to be responsive without needing distinct rows for different devices. This helps in maintaining the HTML size of your email body less than 102 KB and reduces clipping of emails.
Avoid empty elements: Remove empty rows or content sections to keep the HTML clean and efficient. This helps in maintaining the HTML size of your email body less than 102 KB and reduces clipping of emails.

HTML Size and Clipping Prevention

Keeping your email's HTML size under control is essential to prevent clipping in email clients like Gmail.
Ensure the HTML size of your email body is less than 102 KB: Emails exceeding this limit may get clipped in Gmail. To avoid clipping in Drag and Drop editors:
- Use default fonts.
- Use padding instead of divider rows.
- Compress images.
Reduce the number of links: Fewer links can contribute to a smaller overall email size.

Deliverability and Spam Prevention

Certain practices help ensure your emails reach the inbox rather than the spam folder.

Do not use link shorteners (e.g., https://bitly.com/ links): The reputation of the link shortener's domain can affect your email deliverability. Spammers frequently use link shorteners, which can negatively impact your emails if they use the same service.
Avoid excessive use of capital letters or exclamation points: These can appear suspicious to spam filters.

User Experience and Responsiveness

Creating a seamless and accessible experience for all users is paramount.

Make sure the email is visible without having to scroll: This improves immediate engagement.
Create emails that provide a seamless experience on web, mobile, and tablet devices: Optimize for dark mode rendering and avoid horizontal scrolling to accommodate the majority of users who read emails on their phones. This improves accessibility.
Use clear and uncomplicated language: This ensures the email is easy to read and understand for all recipients.
Refer to CSS Support: For more information, refer to CSS properties supported in Gmail.

Accessibility

Elements	Do's	Dont's
Content and structure
Logical reading order and structure	Logically structure your email content by utilizing semantic HTML tags. Employ headings (<h1> through <h6>) to define distinct sections, use paragraphs (<p>) for text blocks, and apply lists (<ul>, <ol>, <li>) where appropriate. This robust semantic structure is critical for screen readers to convey information accurately to users. Ensure content follows a natural reading order (top to bottom, left to right for LTR languages). This becomes especially critical for responsive designs, as content reflows can disrupt the intended sequential display.	Do not rely solely on visual styling (such as bolding or increased font size) to indicate headings within your content. Instead, use actual semantic heading tags (e.g., <h1>, <h2>, <h3>). This practice ensures proper content structure and accessibility for assistive technologies.
Language declaration	Ensure to specify the language of the email in the <html> tag (e.g., <html lang="en">). This helps screen readers use the correct pronunciation.
Tables for layout (use with caution)	When creating HTML emails, inconsistent CSS support across email clients often necessitates using tables for layout rather than semantic data presentation. To ensure optimal accessibility and user experience in such cases: Add the role="presentation" attribute to your <table> tag. This attribute explicitly instructs assistive technologies to interpret the table solely as a visual layout element, not as a structured data table. Consequently, assistive technologies will not announce confusing column and row counts, which significantly enhances clarity for users relying on screen readers. Ensure that the content within tables maintains logical coherence and remains comprehensible if linearized (read cell by cell, row by row). This ensures effective interpretation by assistive technologies and improves user experience. For basic layout requirements in HTML emails, prioritize semantic HTML structures over <table> elements. Employ <div> elements with inline styles to achieve desired visual results while maintaining a clear and logical content flow.	Do not excessively nest <table> elements. Excessive nesting complicates email rendering across various clients and can confuse assistive technologies, hindering content accessibility.
Text content	Ensure to use clear and uncomplicated language. This practice enhances readability and ensures that your message is easy for all users to understand and process efficiently. Limit the use of excessive capital letters and exclamation marks. Such usage can lead recipients to perceive the text as shouting and can cause screen readers to misinterpret or mispronounce content, which degrades accessibility.	Do not use excessive capital letters or exclamation marks, as this can be perceived as shouting and may be misread by screen readers. Do not embed crucial text within images. Instead, ensure that all vital information exists as actual HTML text. This practice guarantees content accessibility and proper interpretation by assistive technologies.
Images and media
Alternative text (Alt Text) for images	Always provide descriptive alternative text (alt text) for all informative images. For example: <img src="image.jpg" alt="Woman smiling while using a new smartphone">. This attribute ensures that screen readers audibly convey image content to visually impaired users and displays meaningful information when email clients block images. When an image serves a purely decorative purpose and offers no additional informational content, implement an empty alt attribute (alt=""). This prevents assistive technologies from announcing the image, avoiding unnecessary auditory clutter. When an image also functions as a link, ensure its alt text describes the link's destination or action. For example: <img src="image.jpg" alt="Special offer on summer dresses. Tap to view collection.">	Do not omit alt text or use non-descriptive placeholder text such as "image" or "graphic".
Image usage		Do not create emails composed entirely of images. Such a design renders content inaccessible to screen readers and invisible to users who have images disabled, significantly degrading the user experience.
Visual design and readability
Color contrast	Maintain a strong color contrast between text and its background. Aim for a minimum WCAG AA ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Utilize online contrast checkers to verify compliance.	Do not rely solely on color to convey critical information. For example, when indicating an error, always provide an accompanying icon or text indicator in addition to (or instead of) colored text.
Fonts and sizing	Utilize web-safe fonts or define robust font fallbacks for your email content. While the editor supports many fonts, clients such as Outlook offer limited support for custom fonts. Employ a sufficiently large font size for readability. A minimum of 14px-16px for body text serves as a recommended starting point. Design email content to accommodate text resizing by the user or email client without compromising the layout.
Layout and spacing	Utilize padding and white space effectively to enhance readability and visually separate content blocks. Implement padding instead of divider rows to avoid email clipping in Gmail.
Interactive elements
Links (CTAs)	Employ descriptive link text that clearly indicates the link's purpose or destination. For example, use "View Summer Collection" instead of "Click Here." Ensure links are visually distinguishable from surrounding text. Underline them and/or use a distinct color that provides good contrast. Minimize the number of clickable links within the email body (excluding header and footer links). Limit these to 3-5 to prevent content bloat and email clipping.	Do not add links to background images. This practice can lead to accidental clicks and a poor user experience.
Buttons	Prioritize HTML buttons over image-based alternatives. Ensure these buttons feature clear text labels and maintain adequate touch target sizes for optimal user interaction. Provide sufficient contrast between button text and its background to ensure readability.
HTML and CSS practices
CSS	Utilize inline CSS to achieve maximum compatibility across various email clients.	Do not use CSS properties (e.g., flexbox) that lack wide support across email clients. Instead, employ <table> tags for layout to ensure consistent and reliable rendering.
Dark mode	Ensure your HTML renders as expected in dark mode. This optimization typically involves implementing meta tags and CSS media queries (specifically prefers-color-scheme) to provide alternative styling rules.
Testing
Test across email clients and devices	Thoroughly test your emails across various email clients (e.g., Outlook, Gmail, Apple Mail) and devices (desktop, mobile, tablet). This practice is crucial because rendering can vary significantly. Test your emails using assistive technologies such as screen readers (NVDA, VoiceOver, TalkBack). This process helps you understand how these tools perceive your email content. Check how the email renders when images are disabled.

For more information on Accessible campaigns in MoEngage, refer here.

Essential Footer Information

A consistent and comprehensive footer builds trust and provides necessary information.

Make sure to add a consistent footer with brand details: This helps improve trust with end recipients. Include the following details in the footer:
- Brand name
- Postal address of the company
- Contact email or phone number
- Brief details on the brand
- Privacy policy link
- About Us or Contact Us link
- Working Unsubscribe link
- Social media links/icons

Testing and Engagement

Continuous testing and relevant content improve email campaign performance.

Experiment using A/B testing: This helps check user preferences on certain HTML formats, elements, etc.
Implement theme-based content: Particularly relevant for e-commerce and OTT platforms, themes based on popular shows, movies, or holidays can significantly increase recipient interest.