Coding an email is not like coding a web page. Email clients strip styles, ignore modern layout techniques and render the same message differently. For UK senders there is an extra twist: many offices, councils and NHS organisations still read email in desktop Outlook, which uses Microsoft Word’s rendering engine. If your list includes business readers, test for Outlook first.
Three ways to work with HTML in Mailpro
- Import a finished file. If your agency hands over a coded template, upload it through HTML import and it becomes a reusable newsletter.
- Import from a URL. Pull in HTML hosted elsewhere, as our article on importing HTML from a URL explains.
- Edit visually. Use the WYSIWYG HTML editor to tweak text and images without touching code, with the source still available when you need it.
If you don’t need custom code, the drag-and-drop editor and more than 600 templates produce responsive HTML for you. See the other options in create a newsletter.
Coding rules that still apply
- Use tables for layout. Outlook for Windows does not support flexbox or grid reliably.
- Inline your CSS. Many clients strip style blocks in the head.
- Keep the width around 600 pixels and let it stack to a single column on phones.
- Set explicit image dimensions and always include alt text.
- Use web-safe fonts with a fallback, because custom fonts don’t load everywhere.
- Keep the file light. Very large HTML files may be clipped by Gmail, hiding your footer and unsubscribe link.
Our HTML email QA checklist goes through each check in detail.
Test in the clients your readers use
Look at your own statistics before deciding what to test. A consumer list for a fashion brand may be mostly iPhone and Gmail app readers; a B2B list for a law firm or a housing association will lean heavily on Outlook. Mailpro’s campaign statistics show which email programs and devices your readers use, so you can focus testing where it matters. At a minimum, check:
- Outlook for Windows, for layout and background images;
- Gmail on Android and in a browser, for clipping and image blocking;
- Apple Mail on iPhone, for dark mode and font sizes.
Dark mode and accessibility
Dark mode can invert your colours, so use transparent PNG logos with a light outline and test in Apple Mail and Outlook. Accessibility is also worth planning for: use real text rather than images of text, a readable font size, sufficient contrast, meaningful link text and a logical reading order for screen readers. Public-sector bodies in the UK already follow accessibility regulations for their websites, and many apply the same standards to their emails.
A plain-text version helps
Consider pairing your HTML with a plain-text version. It helps readers on basic devices and older email clients, and it is a sign of a well-formed message. The glossary entry on multipart emails explains why.
The footer is a legal requirement
Whatever your design, the footer must identify your organisation and include a working unsubscribe link. PECR requires both for marketing messages, and Gmail and Yahoo expect one-click unsubscribe from bulk senders. When you import a custom template, check that the unsubscribe link and your address survived the import before you schedule anything.
Secure from build to send
Your templates, images and contact lists are stored on Mailpro’s private Swiss infrastructure, outside US jurisdiction, and delivered over TLS 1.3. Once your HTML is ready, add personalisation so each reader gets a version that feels written for them.