A beautiful email design that takes a developer 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 hand in hand: the best designs look great, render reliably and can be produced again and again without starting from scratch.
These are the nine rules we follow, and recommend to every design team we work with, for designing better emails faster.
1. Think of every email like a page on your website
This is the biggest mindset shift. Traditionally each email is treated as a standalone piece of creative, designed from a blank canvas. Instead, think of every email as a new page on your website: part of one consistent experience, using the same typography, buttons, spacing and layouts.
The practical way to do that is an email design system: a defined set of heading and paragraph styles, button styles and module layouts that every email is designed with. When all your emails are designed from the same system, they look like they belong together, and they're dramatically faster to build.
2. Remember that email layout is boxes inside boxes
Email technology is limited. Building an email is a lot like building a website in the 1990s, largely because of classic Outlook for Windows, which renders email using the Microsoft Word engine. Yes, a word processor is what displays your carefully crafted design.
Picture laying out your design in Word. The only way to create columns is with a table, and more tables inside that. You can't overlap content across cells, and everything needs to line up exactly. That's what building emails is like for your developers.
So stick to a grid. When a design breaks out of it, overlaps elements or uses inconsistent widths, every email becomes a bespoke, time-consuming build. Microsoft is gradually moving people to the new Outlook for Windows, which renders much like a browser, but classic Outlook will be around for years, so designing within its limits is still the safe default.
3. Make sure it works without images
Many recipients won't see your images, at least not straight away. Outlook and corporate environments often block them by default, and some people turn them off. Your email should tell its story without relying on images. We've written a whole post on why live text should come first, but two design choices cause most of the trouble:
- Text over images and background images. They're not impossible, but they make development much more complicated and prone to breaking. If the background is a subtle texture or small graphic, you probably don't need it.
- Over-styled buttons. Your button is usually the one action you want people to take, so it should be live code. Gradients, images and icons inside buttons don't render everywhere. Keep buttons simple and they'll work for everyone.
4. Leave the slicing for the kitchen
When elements overlap or break out of the grid, the only way to build them is to slice the design into lots of small images and reassemble them in tables, like building a website in the days of Netscape. It's clunky, slow and very easy to break.
The most common culprit is the button. Designs often place a logo, an illustration or an icon overlapping one side of the call-to-action. That turns the button into a jigsaw of sliced images that will never render perfectly in every inbox. Your call-to-action is the most important element in your email, so its visibility and reliability should always win over aesthetics.
5. Forget 600px wide
The 600px email width was a rough guide from the days of small screens and email clients with busy sidebars. It isn't a rule. A better approach is to choose a width that reflects a well-thought-out grid.
We use a 640px desktop grid with a 320px mobile grid that's exactly half the size, because it makes every column width and asset size a simple multiple of 10. Treat 640px as a safe zone for text and images; elements drawn with code, such as full-width background colours, can extend beyond it. We cover the details, including every column width, in The 640px email grid.
6. Double it
Export every image at twice its display size, so it's sharp on high-resolution screens. That's no longer just phones: most modern laptops have high-resolution displays too.
To keep it simple, design at actual size (640px desktop, 320px mobile) but make sure every asset is a vector or a linked smart object that can be exported at @2x. And ignore the PPI setting in your design tool: 300ppi is for print and has no effect on images displayed on screen.
7. Keep the same ratio on desktop and mobile
Production is fastest when the same image works at both breakpoints. That means keeping each image's aspect ratio the same on desktop and mobile designs, so one asset does both jobs and the code stays simple.
A consistent default ratio across your system helps too. The golden ratio (about 1.62:1) works well for hero and feature images. Whatever you choose, keep it consistent: if a square works on desktop, use a square on mobile.
8. Plan animated GIFs around the first frame
Animated GIFs are a great way to grab attention. But older versions of Outlook for Windows only show the first frame, so make sure that frame works on its own: it should carry the message, not show a blank screen or half a transition.
A useful trick is to start the animation at its key moment, transition out, then loop back in, so the first frame is the most important one. Watch the file size too: animate a single loop and let the GIF repeat it, and use a lower frame rate (5–10 frames per second rather than 30). Every frame is effectively another image, so fewer frames means a much smaller file and a faster-loading email.
9. Treat interactivity as a progressive enhancement
Interactive elements, such as carousels, tabs, reveals and games, can be a brilliant way to boost engagement. We even have a full tutorial on building one. But support is limited. Apple Mail on iPhone, iPad and Mac supports most interactive techniques, along with some webmail clients, while the Gmail and Outlook apps generally don't.
So design every email at the baseline first, using standard layouts that work everywhere. Then add the interactive version as an enhancement for the clients that support it. Recipients who can't see the interactivity should still get a complete, effective email.
Bringing it together
Every one of these rules has the same goal: designs that look great, render reliably and can be produced quickly. 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 an email design system, these rules stop being a checklist and simply become how every email is made. If you'd like help putting that in place for your team, book a free consultation.