Best practices
The NSW Email Design System is designed to help you create and send accessible, effective emails quickly. You can customise it to suit your needs, but for best results across clients like Outlook and Gmail, follow these proven practices.
Use tables as the foundation
Outlook still uses Word's rendering engine, which requires table-based layouts. Each header, hero, feature block and footer in the framework starts with a reliable table structure.
Keep a wrapper table around your content to maintain layout integrity on older desktop clients.
You can rearrange tables, but preserve a logical structure for accessibility.
Stay close to a 700-pixel width
The framework's default page width is set to 700 pixels. This slightly exceeds the historical 600-pixel standard but remains within recommended limits from email providers like Mailchimp. This width:
Ensures readability in preview panes
Prevents scaling issues on mobile devices
Inline CSS with Maizzle
When you run npm run build, Maizzle uses a Juice-powered transformer to inline CSS. This ensures:
Styles are not stripped by mobile apps or ignored by Outlook
Global rules can still be used with data-embed attributes
Use design-token utilities
The included Tailwind CSS preset offers accessible class names like bg-primary-600 and text-grey-900. Using these:
Ensures contrast-safe design
Enables easy updates via tailwind.config.js
Code with accessibility in mind
Emails must meet WCAG 2.2 AA standards. To ensure your emails are accessible:
Provide meaningful alt text for images
Follow a logical heading order (H1 → H2 → H3)
Ensure tappable elements are at least 44 × 44 pixels
Optimise and host images appropriately
Images should be:
Compressed for fast loading
Served over HTTPS
Given explicit width and height attributes to avoid layout shifts
Mailchimp recommends image widths of 600–660 pixels for emails—compatible with this framework.
Test the compiled output
Always test your final output (not just the source code) using tools like Litmus or Campaign Monitor. Check across major clients, including:
Desktop Outlook
Gmail
iOS Mail (both light and dark modes)
Outlook.com
Early testing avoids last-minute fixes at the end of a sprint.