Building an HTML e-mail that displays everywhere: width, images and dark mode

The short answer: an e-mail is not a web page. Each mail program (Gmail, Outlook, the phone) shows it its own way and many ignore what is modern. To look right everywhere: narrow width, one column, styles inside each element, images with alt text and a text-only version.

The rules

Rule Why
About 600 pixels wide, one column Fits the computer screen and shrinks well on the phone.
Styles written on each element Many programs ignore separate style sheets.
Images with a full (https) address and alt text Many programs block images by default; with no alt text, there is a hole.
Important text as text, not as an image A message that is only an image comes out blank when images are blocked.
Dark mode Use defined background colours and logos with a margin, not just a transparent background with dark letters.

Step by step

1 Start from a simple, one-column template from your sending service instead of designing from scratch: Subscribers and newsletter.
2 Write the subject and the first line with care: it is what shows in the inbox: How to write an e-mail that does not land in spam.
3 Use light images with alt text: Image optimisation.
4 Add the text-only version and the unsubscribe link.
5 Test in Gmail, in Outlook and on the phone, with images on and off, and in dark mode. Only then send to the list.
A very heavy message gets cut. Some programs (Gmail, for one) cut the end of e-mails with a lot of code and show “view entire message”. Keep the code small and the essentials at the top, with the unsubscribe link in plain view, not hidden.
For a list with consent and sending outside the hosting, see E-mail marketing without burning your domain and Building an e-mail list legally. The text at the end of everyday messages is another matter: Signature.

Want an opinion on your e-mail template? Open a ticket with a screenshot.

Open a support ticket

SEE ALSO

E-mail marketing: doing it properly without burning your domain

Building an e-mail list legally: consent, sign-up forms and unsubscribing

How to write an e-mail that does not land in spam: behaviour, recipients and limits

Adding a signature to your e-mails: webmail, computer and phone

Image optimisation and WebP

Alt text and file names for images: what to write, and what to avoid

RECOMMENDED PRODUCT

Professional e-mail on your domain

Mailboxes in your company name, no adverts, with spam filtering. from 321,75 MT/mo (3-year plan, with coupon)

See plans
  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

How to access your webmail You don't need to install anything to check your e-mail - the webmail works straight from your browser, on any device. A...
How to set up your e-mail on Android Set your e-mail up once on Android and it keeps syncing in the background, on Wi-Fi or mobile data. Setting it up 1 Open...
How to set up your e-mail on iPhone or iPad The Mail app on iPhone and iPad can hold your professional e-mail alongside any personal accounts, each syncing independ...
How to set up your e-mail in Thunderbird Thunderbird can detect this server's settings automatically - you only need to type your name, e-mail and password. Auto...
How to set up your e-mail in the new Outlook for Windows The new Outlook for Windows tries to configure itself automatically. If it can't, it falls back to the same manual setti...
Email Routing in cPanel: local, remote or automatic, and the mail that vanishes The short answer: cPanel decides, for each domain, where the mailboxes are: here (local) or on another service (remote)....