01Editorial newsletter
Field Notes
A thoughtful weekly digest built to remain readable in clients that ignore media queries.
Responsive strategyHybrid and spongy
- Fluid tables
- Ghost columns
- Mobile stacking
- Dark mode aware
Email work you can explore.
Three email concepts, the decisions behind their layouts, and the actual markup. Explore each message at desktop and mobile sizes.
Selected email workThree messages.
Three messages.
Three different jobs.
Each concept uses a responsive approach chosen for its content, audience, and email client constraints.
02Transactional email
Order confirmed
A clear confirmation flow that puts order status, delivery details, and support within easy reach.
Responsive strategyFluid
- 100% fluid shell
- Scannable hierarchy
- Accessible contrast
- Touch safe actions
03Promotional campaign
The Autumn Release
A product launch composed for high visual impact on desktop with deliberate mobile reflow.
Responsive strategyResponsive fixed width
- 600px desktop canvas
- Responsive breakpoint
- Retina imagery
- Bulletproof CTA
Every inbox gets a real check.
Email can render differently across clients and devices. This routine catches issues before a campaign goes out.
Build for inboxes
Review table structure, inline styles, image fallbacks, meaningful alt text, and the content and links the campaign depends on.
Check the small screen
Test fluid and responsive layouts at narrow widths. Confirm that columns stack cleanly, copy stays readable, and links are easy to tap.
Preview real clients
Use Litmus previews for Outlook, Gmail, Apple Mail, and mobile inboxes. Check dark mode and image blocking, then focus on the clients the audience uses.
Clear the send
Verify the subject, preheader, personalization fallbacks, every destination and tracking link, the plain text version, and the unsubscribe path. Record fixes before sign off.
Browser previews help check layout. Litmus previews reveal email client rendering differences that a browser alone cannot show.
Learning & building
The road ahead.
Five phases of deeper email and lifecycle practice. Each pairs a learning goal with something to build. All learning goals and credentials below are planned.
Supporting technical study HTML, CSS, Playwright & MJML
HTML and CSS
Strengthen responsive layout and accessible markup.
Playwright
Practice repeatable browser checks for email previews.
MJML
Explore reusable email components and generated markup.
Google Search Console
Study indexing and search reporting for campaign destinations.
Let’s talk about your team.
A 20 minute introduction about the role, your team, and the email or marketing automation work you need.