Why email is its own design environment
Email looks like a simple canvas, but it behaves differently from a web page or a social post. Different email programs, devices and settings display the same message in different ways. Some block images until the reader allows them. Some change colors in dark modes. Some support only a limited set of layout techniques. The reader may glance at the message on a phone, on a desktop screen, or in a narrow preview pane.
Good email design therefore leans toward simplicity and resilience. The aim is a message that is readable and sensible in many conditions, not one that looks perfect in only one.
The header
The header sits at the top of the message and usually includes a brand mark, perhaps a short navigation or a title, and sometimes a banner image. Its job is to say who the message is from and, quickly, what it is about.
Some principles:
- Keep it compact. A tall header pushes the actual content below the visible area, especially on phones. Readers often decide within a moment whether to continue.
- Use the brand consistently. A familiar logo placement, color scheme and type style help recipients recognize your messages. Your brand style guide, if you have one, should settle the details, and your brand assets should be stored where the people making emails can find them.
- Do not depend on the image. If the header is a single image and it fails to load, the reader sees a blank space. Use live text for important words where possible, and include descriptive alt text for images.
- Check the logo at small size. Logo scalability matters, because the header may appear very small in a phone preview.
Layout limits and structure
Email layout has historically been more restricted than web layout, and the level of support for modern techniques differs between programs. Because of this, a conservative structure tends to work well:
- A single main column. A column of roughly modest width is easier to read on both large and small screens than a multi-column design, and it adapts naturally to narrow phones. Wider designs can break or require scrolling sideways.
- Clear sections. Divide the message into blocks, each with a heading, short text and perhaps an image or button. White space between blocks helps readers scan.
- A predictable hierarchy. The same visual hierarchy ideas used elsewhere apply: one main idea first, supporting items beneath, minor details last.
- Responsive thinking. Where your tools allow it, layouts that stack neatly on small screens improve readability. Even a simple layout should be tested on a phone-sized view.
Typography in email
Type choices are more limited in email than on the web, since not every program loads custom styles. This is where screen typography matters: choose styles that render clearly, and plan sensible fallbacks. Body text should be large enough to read comfortably on a phone, with adequate line spacing and a modest line length. Keep headings clearly distinct from body text through size and weight, following a simple type scale. Avoid long stretches of centered or all-capital text, which are tiring to read.
Using images wisely
Images add interest, but in email they carry extra risks:
- Blocked images. Many readers will see the message first without images. Make sure the message still makes sense, with meaningful text and alt descriptions.
- File size. Large files load slowly and may frustrate readers on weak connections. Balance image resolution against weight: sharp enough for high-density screens, but not oversized. Choose appropriate file formats for photographs versus flat graphics.
- Text inside images. Embedding important text in a picture makes it unreadable when images are off and invisible to screen readers. Keep essential information as real text.
- Image-to-text balance. A message made only of pictures can look suspicious to filters and unhelpful to readers. A mix of images and text is generally safer.
- Dark mode. Some programs invert or adjust colors. Logos and graphics with transparent backgrounds can look wrong against dark backgrounds, so test them.
Careful design photography choices help as well: pick images that support the message, crop them tightly on the subject, and avoid decorative pictures that add weight without meaning.
Buttons and calls to action
If the email has one main goal, give it one clear action. A prominent button with a short, specific label usually works better than several competing links. Make sure the button is large enough to tap and that its text has strong color contrast. Because button graphics may be built differently in different programs, keep them simple.
Accessibility
Accessible design is as relevant in email as anywhere. Provide alt text for meaningful images, keep contrast ratios healthy, avoid relying on color alone to carry meaning, and use a logical reading order. A clear structure of headings, short paragraphs and descriptive link text benefits everyone, including people who use assistive tools.
Keep the whole newsletter coherent
A newsletter sent regularly benefits from a consistent template: the same header, the same section styles and the same footer, with the content changing each time. Readers learn where to look, and your production becomes faster. This is design consistency applied to a recurring format. Keep the footer functional, with the sender’s identity and ways to manage subscription preferences as required by applicable rules, which vary by region.
Test before sending
Because email displays so differently, test before you send. Look at a preview on a phone and a desktop screen, with images on and off if possible, and send test messages to different accounts. Check that links go where they should, text is readable and the layout holds. Results vary, and no design is guaranteed to look identical everywhere, so aim for a clear, simple message that degrades gracefully.