@media screen and (max-width: 600px) {
.mStack {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
.wMobile { width: 90% !important; }
}03 / Specialist discipline
Email design, built to survive the inbox.
British Gas is my latest work within a wider body of contract work spanning financial services, retail, travel, ecommerce and SaaS—combining considered design with production-grade HTML and CSS.
Prime example · Design + build
No one knows new boilers like British Gas.
A complete acquisition journey, designed responsively and built for the realities of production email.
Selected contract experience
- British Gas
- Skipton Building Society
- Jet2
- Kingfisher Group
- Mamas & Papas
- Linnworks
01 / The discipline
One craft in the canvas. Another in the source.
Email demands equal fluency in design and development. I can take a campaign from brief and visual system through to modular, responsive production HTML—then diagnose the rendering problems that appear when Outlook, Gmail, mobile apps and dark mode all interpret the same code differently.
02 / British Gas
A considered journey for a considered purchase.
A new boiler is expensive, technical and rarely top of anyone’s wish list. The lead campaign had to make the first step feel simple while providing enough evidence to trust the brand: installation expertise, flexible payment, real support and clear routes to a quote. The narrative was assembled from reusable modules and adapted across email, display, social and print.
03 / Working build
See it behave like an email.
Switch widths to inspect the production HTML, or compare it with the original Figma design.
Live HTML preview · scroll inside the frame to explore the full email
04 / Responsive design
The same hierarchy, carefully reflowed.
Desktop and mobile were designed together. Typography, spacing, imagery and CTAs adapt without losing the campaign’s reading rhythm or weakening its commercial message.
View full design ↗
View full design ↗05 / Email engineering
Designed in pixels. Proven in source.
These are production patterns from the working email: controlled mobile reflow, an Outlook-safe VML action and deliberate dark-mode behaviour rather than browser-only HTML dressed up as email.
<!--[if mso]>
<v:roundrect
xmlns:v="urn:schemas-microsoft-com:vml"
href="{{url}}"
style="height:44px;v-text-anchor:middle;width:200px"
arcsize="5%" fillcolor="#004ECC">
<w:anchorlock/>
<center>Get started</center>
</v:roundrect>
<![endif]-->@media (prefers-color-scheme: dark) {
.email-shell,
.force-light-bg {
background-color: #ffffff !important;
}
.dark-img { display: block !important; }
.light-img { display: none !important; }
}
[data-ogsc] .email-shell {
background-color: #ffffff !important;
}06 / Production principles
Built for imperfect clients.
Design for the decision
Information hierarchy, brand expression and clear calls to action are shaped around the customer task—not the limitations of a template.
Engineer for the client
Table architecture, hybrid layouts, MSO conditions and VML protect the experience in Outlook and other demanding inboxes.
Test beyond the ideal
Responsive behaviour, dark mode, blocked imagery and accessibility are considered as core states rather than final-stage fixes.
07 / Linnworks system
A system, not a stack of one-off emails.
For Linnworks, the work extended beyond individual campaigns into a reusable design and development framework. Defined modules, responsive rules, light and dark treatments, accessibility considerations and documented build patterns created a more consistent route from design to deployment.




08 / Campaign gallery
Fifty-nine emails. One exacting craft.
The complete scrollable gallery spans promotional, service, triggered and CRM work across energy, travel, finance, retail, technology, healthcare and ecommerce. Open any card to inspect the complete composition.
Open full image ↗New boiler acquisition journey
Open full image ↗Destination campaign 01
Open full image ↗Destination campaign 02
Open full image ↗Destination campaign 03
Open full image ↗Destination campaign 04
Open full image ↗Destination campaign 05
Open full image ↗Destination campaign 06
Open full image ↗Newsletter · desktop
Open full image ↗Newsletter · mobile
Open full image ↗Savings campaign
Open full image ↗ISA campaign
Open full image ↗Maturity trigger
Open full image ↗LISA month two
Open full image ↗Pension 50th birthday
Open full image ↗ISA payment cut-off
Open full image ↗Welcome savings
Open full image ↗Saver strategy
Open full image ↗Jump trigger
Open full image ↗August campaign
Open full image ↗Nursery update
Open full image ↗AGM communications
Open full image ↗CSR survey
Open full image ↗Product update
Open full image ↗Quarterly report
Open full image ↗Back home
Open full image ↗Holiday edit
Open full image ↗We love you
Open full image ↗Bedtime essentials
Open full image ↗Pregnancy journey · Weeks 1–2
Open full image ↗Pregnancy journey · Weeks 7–8
Open full image ↗Pregnancy journey · Weeks 11–12
Open full image ↗Pregnancy journey · Weeks 19–20
Open full image ↗Pregnancy journey · Weeks 21–22
Open full image ↗Pregnancy journey · Weeks 27–28
Open full image ↗Pregnancy journey · Weeks 31–32
Open full image ↗Pregnancy journey · Weeks 33–34
Open full image ↗Pregnancy journey · Weeks 49–50
Open full image ↗Pregnancy journey · Weeks 51–52
Open full image ↗Artist interview
Open full image ↗Limited edition
Open full image ↗Ferrari finance
Open full image ↗Range Rover finance
Open full image ↗BMW finance
Open full image ↗ChemistDirect savings
Open full image ↗Summer savings
Open full image ↗Heart health at home
Open full image ↗Quit smoking
Open full image ↗Hot deals
Open full image ↗Exclusive offer
Open full image ↗Haircare savings
Open full image ↗Skincare savings
Open full image ↗Beauty offers
Open full image ↗Hair and wellbeing
Open full image ↗Back to school
Open full image ↗Weight management
Open full image ↗Email exclusive
Open full image ↗Electrical savings
Open full image ↗Sports nutrition
Open full image ↗Big brand sale
09 / Technical fluency
Fluent from brief to send.
Comfortable working inside enterprise campaign teams, established design systems and complex martech stacks—whether the requirement is hands-on coding, campaign design or both.
Email engineering
- Semantic, table-based HTML
- Responsive and hybrid CSS
- MSO conditions and VML
- Dark-mode implementation
- Accessibility and fallbacks
Campaign platforms
- Adobe Campaign
- Salesforce
- Taxi for Email
- Movable Ink
- Pardot and Mailchimp
Delivery practice
- Reusable module systems
- Personalisation-ready builds
- Cross-client QA
- Production troubleshooting
- Design-to-build ownership
10 / Display and motion
The campaign does not end at the inbox.
Campaign ideas have also been translated into static and animated display advertising, HTML5 banners, animated GIFs, social assets and print. The MPU below plays the four-frame British Gas sequence, alongside a wide display execution and the A4 campaign mailshot.





