Email design is the work of building a message that survives whichever inbox it lands in. A page in a browser renders the same way almost everywhere. An email does not. So this article is about designing for that difference. It covers what breaks a message, what holds up, and how to check a send before it goes.
The goal is one message that works on a phone, in a dark inbox, and in an old mail client. Design is not the first decision though. The list and the offer move more than the layout does. Our guide to what email marketing is sets out that order of work.
Why email design is not web design
A browser follows modern rules. Mail clients do not, because each one strips, rewrites or ignores parts of your code before a reader ever sees it.
Some clients drop your stylesheet. Others hide pictures until the reader asks for them. A few still render with an engine that predates most of what you would put on a web page. So email design is the craft of building something that degrades politely, rather than something perfect in one place and broken in four others.
Start with one column
Almost every layout problem disappears when you use a single column. Two columns side by side will stack on a phone, and they stack in an order you did not choose.
One column reads in the same order everywhere. It also survives the clients that ignore your media queries, since there is nothing left to rearrange.
Width, and the six hundred pixel habit
The usual working width for an email is about six hundred pixels. That is a convention rather than a law, and it exists because it fits the narrow preview panes people read in.
Stay near it and your email design behaves. Go much wider and desktop readers meet a sideways scrollbar, which nobody has ever used on purpose.
Real text beats pictures of text
A headline set as an image looks exactly right until the picture fails to load. Then it is nothing at all.
Set your words as text wherever you can. Text reflows on a small screen, a screen reader can say it aloud, and search inside a mailbox can find it. For example, a promotion built entirely as one graphic shows nothing to a reader whose client hides pictures by default.
Images, and the email that arrives blank
Not every reader will see your pictures. Some clients hide them by default, and some people switch them off themselves. Design for that first, then let the pictures improve the message instead of carrying it.
Give every image real alt text, since that text is what a blocked picture leaves behind. Keep the top of the email readable without a single graphic. If the whole point of the send lives inside artwork, a share of your audience meets an empty rectangle.
Alt text is part of the email design
Alt text is not an accessibility checkbox. In a blocked-image inbox it becomes the layout, so write it as words a person would want to read.
Name what the picture shows, or what it says. Avoid labels like banner and image one, because those tell a reader nothing and tell a screen reader less.
Dark mode will rewrite your email design
Plenty of inboxes now offer a dark theme, and some of them rewrite your colours to fit it. Some flip everything, others change only the background, and none of them ask you first.
So avoid a design that depends on a white page. A black logo on a transparent background vanishes against a dark card. Give logos and icons a background that suits both, or supply a version for each.
Then test in dark mode rather than assuming. It is the fastest way to find text that has turned grey on grey.
Buttons people can actually tap
A call to action built as a coloured table cell with a link inside survives more clients than a button drawn in a graphics tool. That is most of the trick.
Make the tap area generous, because thumbs are not mice. Put the padding inside the cell instead of relying on a tall image. Then say what happens next in the label itself, so book a call beats click here.
The preheader, the line nobody designs
A preheader is the snippet an inbox shows after the subject line. Ignore it and your reader sees the words view this email in your browser, which sells nothing at all.
Write it as a second line of persuasion instead. It works with the subject rather than apart from it, so treat the two together. Our piece on subject lines that earn the open goes deeper into that pairing.
Where email design breaks, and what holds up
Most faults fall into a handful of buckets. Here is the short version, with the fault on the left and the thing that survives it on the right.
| What breaks it | What holds up instead |
|---|---|
| Pictures hidden by default | Real text, plus alt text worth reading |
| Dark mode inverting colours | Artwork that suits a light card or a dark one |
| A narrow phone screen | One column, large type, generous tap areas |
| An image that refuses to shrink | A stated maximum width, so the picture fits the column |
| An old rendering engine | Tables for structure, with padding inside cells |
| A screen reader | Headings in order, so the message still makes sense |
Accessible email design costs nothing extra
Contrast, order and size do most of the work here. Grey text on a pale background looks refined on a big monitor, yet it vanishes on a phone in daylight.
Keep body text large enough to read without pinching. Use real headings so the structure survives, and keep the reading order the same as the visual order. Because a single column already reads from top to bottom, most of this comes free.
Email design and getting delivered
Heavy, image-only, link-stuffed messages resemble the mail people report as spam, so a filter can treat them the same way. A tidy email design is quietly a deliverability decision.
Keep the markup lean. Trim images to a sensible file size, since a slow email on mobile data loses readers before it loads. Balance words and pictures instead of sending a picture with a footer attached. There is more on the mechanics in our article on getting into the inbox at all.
A worked example, with round numbers chosen to make the arithmetic easy rather than to describe any real team. Say you send two campaigns a month, and laying each one out from scratch takes an hour. That is twenty four hours a year spent rebuilding the same header and the same button. Build the template once in six hours. After that, each send is content dropped into a skeleton you already trust. The hours are the smaller half of it. A fault you fix in the template stays fixed. The same fault fixed inside one campaign comes back in the next one.
Build a template once, not an email every time
Many teams rebuild from scratch every send, then wonder why every send carries a new fault. A template ends that.
Decide the header, the footer, the button, the spacing and the type sizes once. Test that skeleton properly. After that, each campaign is content dropped into something you already trust.
What the template should settle
Keep the list short enough that people actually follow it.
- Header with a logo that survives a dark background.
- One column, with a stated maximum width.
- Button styles, in two sizes at most.
- Type sizes for headings, body text and small print.
- Footer with a working unsubscribe link, plus whatever sender details your own rules require.
- Spacing rules, so nobody decides margins by eye at ten at night.
Your platform holds that template, so pick one your own team can edit without a developer. We go through the trade offs in choosing email marketing tools.
Automated messages deserve the same skeleton. A person who has just ordered something goes looking for the confirmation, so that message has their full attention. Give transactional emails the same care as a newsletter.
Testing an email design before you send it
Send the email to yourself. Then send it to two colleagues on different phones, and read it the way they will, standing up and in a hurry.
Check the subject line and preheader in the list view first. Open the message with images switched off. Turn dark mode on. Tap the main button with a thumb rather than clicking it with a mouse. Finally, follow every link, because a wrong address in a finished email design is the one fault you cannot repair after the send.
Preview tools help, yet they show a screenshot rather than a real inbox. Use them for coverage, and use a real phone for judgement.
What is not worth doing in email design
Some effort in this area returns almost nothing, and it is worth saying so plainly.
- Video inside the message, which you cannot count on to play.
- Custom web fonts, because the fallback has to look right anyway.
- Elaborate grids that collapse into nonsense on a phone.
- Background images carrying words the reader has to see.
- Animation competing with the one action you actually want.
Skip those and spend the time on the offer, the words and the list. Each of those does more for the outcome than any decorative choice.
Start with the last email you sent
Open the last email you sent and read it on a phone. Note every point where it fails, without fixing anything yet.
Then repair the template rather than that one message, so the fix holds next month. Keep your list of faults, because it becomes the checklist for the next send. Email design improves in small, boring steps, and the steps add up because you stop repeating the same fault.
Frequently asked questions
What is email design, and how is it different from web design?
Email design is the craft of making one message hold together across many mail clients, where web design aims at a browser that mostly follows the rules. That difference decides everything else. An email passes through clients that drop stylesheets, hide pictures and invert colours without asking first. So the craft is defensive. You build something simple that behaves everywhere, then improve it for the clients that allow more.
How wide should a marketing email be?
About six hundred pixels is the long standing convention, and it suits the preview panes many people read in. Treat it as a habit rather than a rule. Set it as a maximum width rather than a fixed one, so the column can shrink to fit a phone instead of forcing a sideways scroll. Keep padding inside that container too, so the text never runs to the very edge of the screen. Going much wider gains you little, because a long reading line is uncomfortable anyway.
Do I need a separate mobile version of an email?
No, and two versions usually means two things to break. A single column that fills the screen behaves correctly on a phone and on a desktop without a second layout. Keep the type large, the buttons generous and the images flexible. Some clients ignore media queries entirely, so a layout that only works once a media query fires will fail those readers anyway.
Why does my email look broken in Outlook?
Usually because that client is drawing your markup with an older engine that ignores much of what a browser understands. Floats, modern spacing and rounded corners are the common casualties. Which clients and which versions behave this way keeps changing, so test in the ones your own readers use rather than trusting a rule of thumb. The defensive build is old fashioned and it still works. Use tables for structure, put padding inside cells, and state widths explicitly.
Should I send one big image as the whole email?
No. It looks tidy in a design tool and arrives as an empty rectangle for anyone whose client hides pictures. It also gives a filter very little text to weigh, and it cannot reflow on a small screen. If the piece really is a poster, put the artwork in by all means, then repeat the headline and the button underneath as real text. That way the message still works when the picture never appears, which is the only version some readers will see.
How do I handle dark mode in email design?
Assume the inbox may rewrite your colours, then pick colours that read either way. A logo with a transparent background is the usual casualty, since a black mark disappears against a dark card. Give it a background of its own, or supply a light version and a dark one. There are ways to ask a client to leave your palette alone, yet support for them varies and changes, so never rely on the request working. Send yourself a test with dark mode on before you trust any of it.
Do web fonts work in email?
Sometimes, and never reliably. Support varies between clients and it changes over time, so the font that loads for one reader is a plain system font for the next. Pick a stack that still looks right in the fallback, then treat the web font as a bonus rather than the design. Size, spacing and contrast do far more for how a message reads than the typeface does, and those work everywhere.
Should I use a drag and drop builder or hand code my emails?
Use the builder in your platform unless you have a clear reason not to. A builder keeps the email design editable by the person who writes the campaign, which matters more than elegant markup nobody on your team can change. Hand coding earns its place when you need a layout the builder cannot produce, or when you are building the template itself. Either way, test the result in real inboxes, because a builder can output markup that looks right in its own preview and breaks elsewhere.
Does email design affect whether the message reaches the inbox?
Yes, indirectly. A filter weighs the shape of a message as well as the sending history behind it, so an image-only, link-heavy, bloated build can look like the mail people report as spam. A lean email design with real text, a sensible number of links and an obvious unsubscribe link avoids that resemblance. Delivery still depends far more on permission and on whether people engage, yet a tidy build removes one avoidable reason to filter you.