American subscribers read email in a handful of dominant clients: Gmail on the web and on Android, Apple Mail on iPhone and Mac, and Outlook in offices. Each renders HTML differently. A newsletter that looks perfect in your browser can break in one of them, so HTML design for a US audience is mostly about knowing those differences.
Know your rendering engines
- Gmail strips some CSS, ignores many web fonts and clips messages larger than about 102 KB, hiding the rest (including your footer) behind a “View entire message” link.
- Outlook for Windows has historically used Word to render HTML, which limits background images, rounded buttons and some spacing techniques.
- Apple Mail is the most standards-friendly, and on iPhones its privacy protection preloads images, which inflates open rates.
Table-based layouts with inline CSS are still the safest foundation, and a single-column design avoids most problems on mobile.
Keep file size in check
Gmail’s clipping is a practical concern for US senders because the clipped part often contains your unsubscribe link and postal address, both required by the CAN-SPAM Act. Compress images, remove unused code and avoid pasting HTML exported from word processors. If a newsletter is long, split it into two editions.
Plan for dark mode
Many readers use dark mode on their phones. Use transparent PNG logos with a light outline, avoid pure black text on pure white images, and test how your colors invert.
Accessibility is good practice
Use real text rather than text baked into images, add alt text, keep contrast high and use font sizes that are comfortable on a phone. Accessible emails are easier for everyone to read.
Always include a text version
A plain-text alternative helps readers whose email program or settings do not display HTML, and it is part of a well-formed message. Keep it readable, with the key links written out in full.
Three ways to work with HTML in Mailpro
- Import your own code with HTML import and edit it in Mailpro.
- Use the WYSIWYG HTML editor to adjust content visually while keeping access to the source.
- Start from a tested design: the more than 600 templates are responsive and built for the main email clients.
Personalization inside the code
Merge fields work in HTML newsletters just as in the visual builder. Insert a first name, a local store address or a state-specific offer with newsletter personalization, and test with sample contacts before sending.
Final checklist before a US send
- Postal address and unsubscribe link visible above any clipping point.
- Promotional content clearly identifiable as such.
- Links tested, images compressed, alt text in place.
- Test copies checked in Gmail, Outlook and on an iPhone.
- SPF and DKIM set up for your sending domain.
For the full process, from planning to scheduling, see how to create a newsletter in the US, or return to creating newsletters.