tag
Designing for an inbox, and for the renderers mail arrives in.
15 terms across 2 categories · all tags
layout
- Fluid hybrid
A mail layout that reflows with no media query at all: percentage widths held in by max-width, with fixed-width ghost tables that only Outlook can see.
- Table-based layout
Laying a page out in nested tables because the renderer has no box model worth trusting, which is how mail is still built and how the web was built before CSS.
pattern
- Bulletproof button
A mail button built to survive a renderer that drops CSS: the fill carried by a cell or box behind the link rather than by a background the client can refuse.
- Dark mode email
Designing a mail for clients that will invert its palette without asking, where a near-black behaves better than black and a logo needs a ground it survives on.
- Double opt-in
Asking a new subscriber to confirm from the address they typed, so a list holds only addresses whose owner agreed and a typo never becomes a stranger's mail.
- Friend spam
Asking for access to a contact list under one pretext and using it to send invitations that appear to come from the reader.
- Magic link
Signing in by clicking a single-use link emailed on request, with no password, and a screen that waits and offers to resend while the mail arrives.
- Notification digest
Collecting many similar alerts into one summary rather than delivering each, so the count rises but the number of interruptions does not.
- One-time code login
Signing in by typing a short code sent to a second channel, keeping the reader inside the app rather than sending them out to a mail client.
- Preview text
The line an inbox prints under a subject, written as hidden text at the top of the mail so the client shows those words instead of scraping whatever body copy comes first.
- Sender name
The name a mail appears to come from, chosen rather than inherited, because a reader scanning an inbox decides on it before reading a word of the subject.
- Styled alt text
Alt text given size, colour and weight so a mail whose images are blocked still reads as something designed instead of as a column of grey stubs.
- Subject line
The one line a mail is opened or ignored on, written to survive a list that truncates it and shows it wedged between the sender and the preview text.
- Transactional email
Mail sent because one person did one thing, a receipt or a reset, which is why it may carry no marketing and why its design is a record rather than a pitch.
- Unsubscribe link
The way out of a mailing list, which the law and the mail clients now both insist is one click, and whose difficulty is the honest measure of a sender.