Email Case study_01
Client: Linnworks.
Project: Pardot-Compatible Marketing Email Template.
Role: Email Designer, Developer & SME.
Tools: HTML, CSS, Pardot, Litmus, Photoshop, XD, Dreamweaver.
Objectives
Build a reusable, modular email template compatible with Pardot's dynamic content regions.
Implement light/dark mode support using CSS media queries and Outlook-safe conditional comments.
Ensure bulletproof rendering in MS Outlook using VML.
Optimize for mobile responsiveness across devices (via @media queries).
Embed branded imagery and iconography across various modules.
Create a design component library for the design team to mock up emails using drag & drop.
Project & Email Features
🔧 HTML Email Template
This fully responsive HTML email was hand-coded to meet modern rendering standards across 30+ email clients. It includes support for both light and dark mode, bulletproof VML buttons for Outlook, mobile-friendly reflow layouts, and accessibility best practices such as semantic headings, alt text, and logical reading order. The template integrates Pardot editable regions, making it modular and reusable across campaigns with minimal developer intervention. Every component is optimized for cross-client compatibility, ensuring a consistent and branded experience regardless of device or inbox.
🎨 Design Pattern Library (XD)
To complement development, I created a modular Email Component Design Pattern Library in Adobe XD. This library allows designers to drag and drop standardized components—hero blocks, product grids, testimonials, CTA modules, and more—to quickly mock up campaigns before handoff. It mirrors the HTML template structure 1:1, helping maintain design-to-code fidelity.
More than a static toolkit, the library empowered my client to design and iterate on complex, multi-section email layouts with speed and clarity. Whether building a promotional blast or a rich editorial newsletter, designers can visualize content flow and interactions without needing code, reducing rework and streamlining collaboration. The result is a scalable system that enforces brand consistency and accelerates production for even the most intricate campaigns.
Outcome
This email template is now used across Linnworks campaigns, enabling marketers to customize and launch emails without developer input while preserving brand fidelity. It passed tests across 30+ email clients using Litmus and reduced production time by over 50%.
Key Takeaways
Proficiency in dark mode adaptation for email clients
Reinforced importance of fall-backs and VML coding for Outlook
Delivered a modular system aligned with marketing goals and brand guidelines
“This project reflects my ability to build high-quality, scalable email templates that bridge the gap between design fidelity and robust development constraints.”