DesignBeginnerPreview
Email Design
A practical, beginner-friendly course on designing HTML email that actually arrives looking right: bulletproof table layouts, responsive patterns for phones, a clear call-to-action hierarchy, a safe image-to-text balance, dark-mode rendering, and disciplined testing across Gmail, Outlook, and Apple Mail.
Marketers, designers, and small-business owners who want to design promotional and lifecycle emails that render reliably and convert across every major client.
Course content
Workbook & downloads
Put the course into practice — a printable workbook plus editable templates you can fill in and reuse.
Preview the workbook
This workbook turns the course into a real, tested email you can send. You will audit the clients your own list uses, build a bulletproof 600px table layout, design a single-action CTA hierarchy, balance images against live text, defend the design against dark-mode inversion, and run a structured pre-send test pass. Work one section per module, then fill the templates with your actual project values so you finish with a reusable kit, not just notes.
Constraints and the Table Layout
Find out which clients your audience actually uses, then build the bulletproof 600px container the rest of your email lives inside.
Exercise: Pull your real client mix
Open your email platform's analytics (or a Litmus or Email on Acid account) and find the email-client breakdown for your last few campaigns. Write down the share of opens by client. This decides which features you can safely rely on, because a layout that leans on something a major client ignores will break for that slice of your list.
- What are your top three clients by open share, and what percent is each?
- What share of your opens come through an Outlook Word-engine version (desktop Outlook 2016 to 2021 or classic 365)?
- What share is Apple Mail or iOS versus Gmail, and does your list skew mobile or desktop?
- Given that mix, which one client must every design survive even though it supports the least?
Worksheet: Layout skeleton plan
Before coding, sketch your email as stacked sections inside the standard three-layer nest (full-width backdrop table, centered 600px content table, section rows). Fill one row per section from top to bottom.
- Section name (e.g. logo bar, hero, body, CTA, footer)
- Desktop columns (1 or 2)
- Background color (hex)
- Top and bottom cell padding (px)
- Spacer height below this section (px)
- Notes (image, live text, button, etc.)
Checklist: Bulletproof container check
- An outer 100 percent table carries the backdrop color edge to edge
- A centered inner table is fixed at 600px (or up to 640px, tested)
- Every layout table has role equals presentation and cellpadding, cellspacing, and border set to zero
- Columns are made with multiple cells in one row, never with float or flexbox
- Vertical space comes from spacer rows or cell padding, not CSS margin on block elements
- Spacer cells contain a non-breaking space or an explicit line-height so they do not collapse
Responsive and Hybrid Layouts
Make the email adapt from a 600px desktop pane to a single mobile column, and decide whether a media-query or hybrid approach fits your audience.
Worksheet: Breakpoint and mobile-override plan
Define your single breakpoint and what changes below it. Fill a row for each element that behaves differently on mobile. Remember that head-style media queries need important to beat the inline desktop styles.
- Element (e.g. two-column grid, body text, primary button, hero image)
- Desktop behavior
- Mobile behavior below breakpoint
- Breakpoint used (e.g. max-width 600px)
- Needs important? (yes/no)
- Class name targeted
Exercise: Force the stack and confirm it
Take a two-column section and write the mobile rule that makes both cells display block at width 100 percent so they stack. Then preview at mobile width (in Litmus, Email on Acid, or by narrowing a browser window on the raw HTML) and confirm the stack actually happens.
- Which class did you put on the cells, and does the media query target the cell (not the table inside it)?
- Did you add important to the display and width rules so the inline desktop width does not win?
- When you narrow the preview, do the columns stack cleanly or do they overlap or stay side by side?
- Did body text grow to about 16px and the button reach a roughly 44px tap height on mobile?
Exercise: Decide: media-query or hybrid
Use your Section 1 client mix to choose an approach. Media-query responsive is simpler and fine when modern clients dominate. The hybrid (fluid, spongy) approach with a ghost table adapts even where media queries are ignored, which matters for large or unknown audiences and high-stakes sends.
- Do you have meaningful opens in a media-query-blind client, or is your list mostly Apple Mail, iOS, and modern Android?
- Is this a high-value send where one broken render is costly, or a routine newsletter?
- If you go hybrid, will you hand-code the ghost table or use a framework like MJML that outputs it for you?
- What is your decision, and the single reason behind it?
Checklist: Responsive readiness
- The viewport meta tag (width device-width, initial-scale 1) is in the head
- There is exactly one primary breakpoint, around 600 to 620px
- Multi-column sections stack to full width below the breakpoint
- Body text grows to about 16px and headings scale up on mobile
- The primary button is full-column-width and at least about 44px tall on mobile
- If hybrid, an Outlook ghost table constrains the layout to 600px
Hierarchy, CTA, and Image Balance
Commit to one action, build a button that survives image blocking, and balance images against live text so the message reads with images off.
Worksheet: One-action brief
Force a single primary goal for this email. Fill the brief, then make sure the primary CTA is the most prominent element and everything else is demoted to a secondary link.
- The one action I want (verb + outcome)
- Primary CTA label (outcome-based, not Click here)
- Where the CTA appears (above the fold? repeated at end?)
- Secondary links demoted (list them)
- Primary CTA color (most saturated accent) and its background
- Headline that front-loads the value (one line)
Exercise: Build a bulletproof button
Construct your primary CTA from live HTML and CSS, never as an image, so it renders when images are blocked. Use a padded table cell with a background color and a styled anchor with real text. Then block images in a preview and confirm the button is still there and tappable.
- Is the background color on the cell so the button color always renders, even with images off?
- Does cell padding (for example 14px top and bottom, 28px sides) set the size, rather than a fixed height?
- Is the whole cell wrapped in the link so the entire button is clickable, not just the text?
- Does the label name the outcome (Start my free trial, Get the report) instead of Submit or Click here?
Checklist: Images-off survival check
- Headline, offer, and CTA are live HTML text, not baked into an image
- The email is text-forward (commonly cited as about 60 to 80 percent text by area)
- There is no all-image email anywhere in the design
- Every meaningful image has descriptive alt text; decorative images have empty alt
- Alt text is styled (color, size) so blocked-image placeholders look intentional
- Body text meets WCAG AA contrast of at least 4.5 to 1 against its background
Dark Mode and Testing
Defend the design against color inversion, then run a repeatable pre-send test pass and log the fixes.
Worksheet: Dark-mode defense plan
Plan how each key element behaves when a client recolors your email. Fill a row per element, noting its light and intended dark color and how you protect it (logo swap, panel, off-white-and-dark-gray instead of pure black-on-white).
- Element (logo, body text, background, primary button)
- Light-mode color (hex)
- Intended dark-mode color (hex)
- Protection technique (swap / panel / avoid pure black-on-white)
- Which clients I expect to invert it (Gmail app, Outlook.com, etc.)
- Verified in a dark-mode preview? (yes/no)
Exercise: Declare dark-mode support
Add the dark-mode opt-in so cooperative clients stop force-inverting: the color-scheme and supported-color-schemes meta tags set to light dark, the color-scheme CSS property on the body, and a prefers-color-scheme dark media query with your intended dark palette. Then preview in a real dark-mode client.
- Are both the color-scheme and supported-color-schemes meta tags present and set to light dark?
- Did you provide a dark-mode logo (or a background panel) so a dark logo does not vanish on a dark surface?
- In an Apple Mail dark preview, do your declared colors hold instead of a blunt inversion?
- Did you avoid pure black text on pure white, using a dark gray on off-white that survives inversion?
Exercise: Run the pre-send test pass
Render the email across a client matrix in Litmus or Email on Acid and walk the standard checks. Record every breakage and its fix in the test-log template so your error rate drops each send.
- In an Outlook Word-engine version, do columns hold and do backgrounds render (or fall back to a solid color)?
- Do columns stack and type enlarge on mobile, and does the primary button render with images blocked?
- In dark mode on Apple Mail and Gmail, does text stay legible?
- Does every link resolve to the correct URL, and does the subject, sender name, and preheader read well together in the inbox preview?
Checklist: Final pre-send checklist
- Layout verified in an Outlook Word-engine version (no collapsed columns, no missing backgrounds)
- Columns stack and text enlarges on mobile
- Dark mode keeps text legible in Apple Mail and Gmail
- Images blocked: alt text and the bulletproof CTA still carry the message
- All links click through to the right destination with correct tracking parameters
- Subject line, sender name, and preheader reviewed together in the inbox preview
- Spam-score and link checks run with no obvious red flags
Your Action Plan
- Pull your email-client open-share breakdown and identify the strictest client every design must survive
- Sketch the email as stacked sections and build the bulletproof container: 100 percent backdrop table plus a centered 600px content table
- Add the viewport meta tag and choose one mobile breakpoint around 600 to 620px
- Build the desktop layout in nested tables, then add the media-query rules (with important) that stack columns and enlarge type on mobile
- Write a one-action brief and design the visual hierarchy so a single primary CTA is the most prominent element
- Build the primary CTA as a bulletproof HTML button (padded cell, background color, live text), never as an image
- Keep headline, offer, and CTA as live text, add descriptive alt text to every image, and confirm a text-forward image balance
- Add dark-mode support: color-scheme meta tags, the color-scheme property, a prefers-color-scheme dark palette, and a dark-safe logo
- Run a full pre-send test pass in Litmus or Email on Acid across Outlook, Gmail, Apple Mail, mobile, dark mode, and images-off
- Log every breakage and fix in the test-log template, correct them, and only then schedule the send
Pairs well with
Courses members commonly take alongside this one.
Flagship CoursePreview
Freelance Business Foundations: Position, Price, Sell, and Deliver High-Value Services
Freelancing · Beginner · 16h
Self-pacedPreview
Client GrowthPreview
Freelance Client Acquisition: Outreach, Leads, Referrals, and Deal Flow
Freelancing · Beginner · 15h 30m
Self-pacedPreview
Sales SystemPreview
Freelance Sales & Proposals: Discovery Calls, Scoping, Objections, and Closing
Freelancing · Intermediate · 16h
Self-pacedPreview