2026 Current
Mailchimp's 2013 HTML email guide is outdated. Outlook 2007 and Lotus Notes are EOL. Gmail has supported embedded CSS since 2016. MSO conditionals are still required for Outlook 2016-365 rendering compatibility.
The 2026 HTML Email Boilerplate
A proper HTML email template starts with DOCTYPE, proper lang attribute, viewport meta for mobile, X-UA-Compatible for IE compatibility. Include charset=UTF-8 and format-detection meta tags. The boilerplate sets the foundation for all email clients to render your template correctly.
Always declare <!DOCTYPE html> at the top and use <html lang="en"> to specify language. Add <meta name="viewport" content="width=device-width, initial-scale=1.0"> for mobile scaling. These meta tags ensure proper rendering across clients and improve accessibility.
Your Email Subject
Table-Based Layout Still Required
CSS Flexbox and CSS Grid do not work reliably across email clients. Table-based layout remains the standard for email. Nested tables with proper role attributes maintain structure while supporting older email clients that don't understand modern CSS.
Use role="presentation" on layout tables to indicate they are not data tables, which improves accessibility for screen readers. Structure email content with table rows and cells, then apply inline CSS and embedded styles to create the visual design.
Left Column
Your content here
Right Column
Your content here
600px Max-Width Rule
The 600px max-width standard exists because Outlook Windows displays emails at approximately 600px width. Older templates used 800px, but this is outdated. Use max-width: 600px with width: 100% to create fluid-hybrid layouts that scale on mobile.
Set the main email container to 600px fixed width on desktop and 100% on mobile using CSS media queries. This ensures consistency across clients while remaining readable on small screens without horizontal scrolling.
Embedded CSS: Gmail Support Since 2016
Gmail has supported <style> tags in the <head> since 2016. You can safely use embedded CSS for media queries, dark mode selectors, and complex styling that inline styles cannot achieve. This eliminates the need for aggressive CSS inlining.
Use embedded CSS for responsive design with media queries and @media (prefers-color-scheme: dark) selectors. Keep inline styles for critical layout rules that must apply before CSS is processed. Balance embedded styles with inline styles for maximum compatibility.
MSO Conditional Comments for Outlook
MSO (Microsoft Office) conditional comments allow you to apply VML and CSS specifically for Outlook 2016-365 versions. Use syntax: ``. This lets you target Outlook-specific rendering without affecting other clients.
Outlook 2016-365 for Windows uses the Microsoft Word rendering engine, which has unique limitations. VML (Vector Markup Language) is required for background images and complex shapes in Outlook. Conditional comments keep Outlook-specific code isolated from the main template.
Background Image Alternative for Outlook
Meta Tags That Affect Deliverability
Meta tags in email templates affect rendering and spam filter evaluation. Include essential tags: <meta charset="UTF-8"> for character encoding, <meta name="format-detection" content="telephone=no"> to prevent auto-linking phone numbers, and <meta name="color-scheme" content="light dark"> for dark mode support.
The color-scheme meta tag tells email clients your template supports both light and dark modes, preventing aggressive color inversion. Proper charset declaration ensures non-ASCII characters and emoji render correctly. Format-detection prevents unwanted phone number linking that can break your design.
Font Stacks with Web Font Fallbacks
Use web fonts with safe fallback font stacks. Web fonts work in most modern email clients via import directives or link tags, but always provide fallbacks for older clients that do not support them. Example: Arial, Georgia, or Verdana as safe fallbacks.
System fonts like Arial, Georgia, and Verdana are universally supported. Web fonts should be imported in embedded CSS. If a web font fails to load, the fallback font ensures your email remains readable. Test web font loading across all major email clients before sending campaigns.
This uses Inter (modern)
This uses Georgia (safe serif)
This uses Arial (safe sans-serif)
Code example
Email Client Testing Matrix 2026
Test your template across the major clients: Gmail, Gmail dark mode, Apple Mail, iOS Mail, Outlook Windows, Outlook Mac, Yahoo Mail, Samsung Mail, and AOL Mail. These clients represent 95%+ of all email opens in 2026. Use email testing tools like Litmus or Email on Acid for rendered previews.
Each client has unique rendering quirks. Gmail strips some CSS. Outlook uses Word rendering. Apple Mail supports most modern CSS. Test on real devices when possible, especially for mobile clients. Document rendering differences and adjust your template to handle edge cases in problematic clients.
This uses Inter (modern)
This uses Georgia (safe serif)
This uses Arial (safe sans-serif)
Code example
Background Image Alternative for Outlook
Left Column
Your content here
Right Column
Your content here
Your Email Subject