Email design best practices: 9 rules for emails that are quick to build

A beautiful email design that takes three days to build, breaks in Outlook and can't be reused next month isn't a good design. In email, quality and efficiency go together: the best designs look great, render reliably and can be produced again without starting from scratch.

These nine rules help teams design emails that Brandblox Emails — or any solid design system — can ship quickly.

1. Think of every email like a page on your website

Traditionally each email is standalone creative from a blank canvas. Instead, treat every email as a new page in one brand experience: same typography, buttons, spacing and layouts. The practical way is an email design system — in Brandblox, Brands as the system of record and Emails Blox as the working parts (see how it works).

2. Remember that email layout is boxes inside boxes

Building an email is a lot like building a website in the 1990s, largely because classic Outlook for Windows still uses the Word engine. Columns are tables; complex layouts nest more tables. You can't overlap content across cells, and everything needs to line up.

Stick to a grid. When a design breaks out of it, overlaps elements or uses inconsistent widths, every email becomes a bespoke build. New Outlook is improving, but classic Outlook will be around for years — designing within its limits is still the safe default.

3. Make sure it works without images

Many recipients won't see images straight away. Outlook and corporate environments often block them; some people turn them off. Your email should tell its story without relying on images. Two choices cause most of the trouble:

• Text over images and background images — possible, but complicated and fragile. Skip subtle texture backgrounds you don't need.
• Over-styled buttons — gradients, images and icons inside buttons don't render everywhere. Keep buttons simple live code so the one action you care about always works.

More on this in live text over images.

4. Leave the slicing for the kitchen

When elements overlap or break the grid, the only fix is slicing the design into small images and reassembling them in tables. It's slow and easy to break. The common culprit is a logo or icon overlapping a CTA — that turns the button into a jigsaw that never renders perfectly everywhere. Reliability of the call-to-action should always win over that kind of aesthetic.

5. Forget 600px wide

600px was a rough guide from small screens and busy sidebars. It isn't a rule. Choose a width that reflects a real grid. We use a 640px desktop / 320px mobile grid because every column width and asset size becomes a simple multiple of 10. Treat 640px as a safe zone for text and images; full-width backgrounds drawn in code can extend beyond it.

6. Double it

Export every image at twice its display size for high-resolution screens — phones and most modern laptops. Design at actual size but keep assets as vectors or smart objects you can export at @2x. Ignore PPI: 300ppi is for print and has no effect on screen images.

7. Keep the same ratio on desktop and mobile

Production is fastest when one image works at both breakpoints. Keep each image's aspect ratio the same on desktop and mobile. A consistent default (for example ~1.62:1 for heroes) helps the whole system stay simple.

8. Plan animated GIFs around the first frame

Older Outlook for Windows only shows the first frame of a GIF. That frame should carry the message on its own — not a blank or mid-transition state. A useful trick: start on the key moment, transition out, then loop back so frame one is the important one. Keep file size down: one loop that repeats, and a lower frame rate (5–10 fps rather than 30).

9. Treat interactivity as a progressive enhancement

Carousels, tabs, reveals and similar patterns can boost engagement, but support is uneven. Design the baseline first with layouts that work everywhere, then add interactivity for clients that support it. Recipients who can't see the interactive layer should still get a complete, effective email.

Brandblox Emails follows that model: interactive Blox (tap-to-reveal, carousels, accordions, hotspots, tabs) with HTML behaviour plus an AMP version when you need wider support — always with a working fallback. See interactive email, HTML/CSS and AMP.

Bringing it together

Use a grid, design with live text and code first, keep buttons simple, size assets consistently, and treat animation and interactivity as enhancements. Built into a design system, these rules stop being a checklist and become how every email is made.