The Salesforce repository for responsive email code. Use this as a starting point for your email coding projects. This repository is updated with techniques to reflect the latest industry trends for successfully coding for top email clients, by marketshare.
responsive-modules - A set of responsive email patterns (which we call modules). You can use this as your starting point for new emails. This includes various article styles, Google/Web Fonts, bulletproof background images and more. These modules will render responsive in most mobile email clients. What this means. Troubleshooting.
responsive-shell.html - An empty HTML email shell, for a quicker start (so that you don’t have to delete all the modules first).
responsive-modules-inline - A version of responsive-modules with CSS inlined (using the Litmus Builder CSS inliner). If you must support Android 5.0+ native, Gmail IMAP, or AOL Mail (i.e. clients that do not natively support style in the head), use this template.
The recommended approach when using this codebase for a Content Builder email system is to first develop the base styles. Using the CSS classes that already exist for major elements (e.g. h1, h2, p, a, buttons etc.), customize with the template’s brand styles.
Then, develop your template’s modules. These may be quite similar to the provided template modules, or highly custom. When the whole template has been created, create a Template in Content builder, and make new Content Blocks for each module.
If you need to make changes as you go along, you can add in-line CSS as needed, which will override the CSS in the Template head and apply those styles locally to the module you’re working on.
Desktop Clients
Apple Mail (macOS) 9, 10, 11
Outlook 2007, 2010, 2011, 2013, 2016
Mobile Clients
Apple Mail (iOS) on iPhone ≥ 5S and iPad
Android 4.4 Native, Gmail/Inbox App (Android, iOS)
Webmail Clients
Gmail, Yahoo!, Outlook.com, Office 365, AOL (inlined version)