HTML Email Preview: Desktop, Mobile and Dark Mode

A browser preview is a first pass

Email clients don't render HTML the way browsers do. Each one strips, rewrites or ignores parts of it. This tool renders your HTML with your browser's engine inside a sandboxed frame, then checks what the markup alone can tell: size, styles, images, links and text. That catches the mistakes every client shows. It can't reproduce one particular client, so send the final version to real Gmail, Outlook and Apple Mail inboxes before it reaches customers.

Dark mode is two different things

Some clients honour @media (prefers-color-scheme: dark). Can I email lists Apple Mail, Outlook.com and the Outlook apps for Mac, iOS and Android among them. They apply your dark rules and leave the rest of the design alone. Other clients ignore the query and recolour the message themselves. Litmus sorts those into partial inversion, which darkens light backgrounds, and full inversion, which changes dark ones too, and puts the Gmail app on iOS in the second group.

A design has to survive both. Dark rules that recolour only some of it leave the rest light, and an app that inverts the message also flips the colours you picked for contrast while leaving images alone, so a dark logo on a transparent background disappears. Declare <meta name="color-scheme" content="light dark"> only once your dark rules cover the whole design: it tells clients the email supports dark mode, and the ones that honour it turn the default page and text colours dark as well.

Images, alt text and tracking pixels

Remote images start as grey boxes here, drawn at their width and height attributes with the alt text inside, so the preview doubles as the view a reader with images off gets. If the message still makes sense in it, it works for them. Give every image an alt attribute: a short description, or alt="" for spacers and decoration, which screen readers then skip. A width attribute keeps the layout steady in clients that ignore CSS sizes.

Switch on Load remote images to see the real ones. The preview then keeps https images in img elements, picture sources, background attributes and CSS backgrounds, borders and list markers. It still drops http images, fonts, stylesheets and every other file. Each host sees your request as it would a reader's, so a tracking pixel in the email counts an open. The frame inherits this page's Content Security Policy, which lets https images through on this page, so the preview also gives the frame a policy of its own: inline images only while the switch is off, and https images too while it is on. The switch starts off each time you open the page and never goes into the address.

Size, styles and what Gmail drops

When Gmail clips a message it hides the end, which usually holds the unsubscribe link, the postal address and the open pixel. It measures the message as it arrives, with any click-tracking links your sending service swapped in, so a message that passes here with little room can still clip. Inline the styles that matter and keep only media queries in a short <style> in the head. The table below gives each limit Gmail and Outlook.com apply and where it comes from.

Preview a Maizzle email

Preview the built file, not the template: Maizzle turns your classes into inline styles during the build, so the source holds classes no client understands. Drop a file from the output folder, dist by default, on the editor. If your sending service adds a footer or tracking, also preview the HTML of a message you sent to yourself.

Before you send

• The preheader reads well beside the subject line.
• Every image has alt text, and the message makes sense with images off.
• Every link uses https and goes where its text says.
• The design is readable in both the Dark and Forced dark views.
• Marketing mail has a visible unsubscribe link and the one-click List-Unsubscribe-Post header from RFC 8058.
• A test send looks right in Gmail, Outlook and Apple Mail.