Create a 600px table-based email with inline styles, client-safe fonts and images, mobile checks, and a self-contained HTML handoff.
Where: Designer → Add page → HTML email.
Key ideas
- Email HTML is its own medium: The scaffold uses presentation tables, a 600px inner width, and inline styles because Outlook uses Word rendering and Gmail may strip the head. Flex, grid, external CSS, JavaScript, and web-font assumptions are intentionally excluded.
- Mobile is the starting view: HTML email opens at the 390px Mobile width, while Desktop and Tablet remain available for checking the container and surrounding inbox canvas.
- The assistant is type-gated: Email keeps document, field, stock/image, local image, review, page, design-system, and direction tools, but omits motion/interactions that common inbox clients cannot reliably run.
Steps
- Add an HTML email page and define the audience, subject/purpose, sender, primary action, and required legal footer.
- Keep the outer presentation table and 600px inner table; create one row per content band.
- Write inline styles on every element and use Arial, Helvetica, or another client-safe fallback stack.
- Add images with absolute durable URLs, explicit width/height, meaningful alt text, and a readable layout when images are blocked.
- Build buttons as email-safe linked elements and keep the primary action obvious without relying on hover or script behavior.
- Check Mobile first, then Desktop and Tablet; inspect wrapping, stacking, padding, long links, and the footer.
- Send test output through the actual target clients, including Gmail and Outlook, before approval.
- Download/share the HTML handoff and verify its external image URLs and links outside Designer.
Required construction rules
- Tables for layout with role="presentation"
- 600px maximum inner width
- Inline styles rather than an external stylesheet
- No flex, grid, JavaScript, or required web fonts
- Images with dimensions and alt text
- Header, hero, body, CTA, and footer as table rows/bands
What is intentionally unavailable
- No motion or interaction spec tools
- No timeline or aspect picker
- No PDF export because an inbox email is the intended deliverable
- No guarantee of parity without real client testing
Tips
- Make the message understandable with images disabled.
- Use the design system for color/type intent, then translate it into client-safe inline email rules.
Limitations and important notes
- Designer cannot emulate every email client and security policy.
- JavaScript and most advanced web layout behavior are not valid email dependencies.
- Share/preview appearance is not proof of Outlook or Gmail parity.
Troubleshooting
The email is broken in Outlook.
Replace flex/grid structure with presentation tables, inline every required style, and retest with the 600px container.
Images disappear in a sent test.
Use publicly reachable absolute URLs and keep alt text, dimensions, and a readable blocked-image state.