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.

Experience
Multi-brand contract delivery
Role
Email Designer · HTML Developer
Scope
CRM · Campaigns · Display advertising

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.
British Gas new boiler email shown at desktop width

Selected contract experience

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.

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.

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.

06 / Production principles

Built for imperfect clients.

01

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.

02

Engineer for the client

Table architecture, hybrid layouts, MSO conditions and VML protect the experience in Outlook and other demanding inboxes.

03

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.

Linnworks email design system displayed across desktop, tablet and mobile
Reusable email design system · responsive outputs
Linnworks email open beside its HTML and CSS source code in Adobe Dreamweaver
Design + developmentVisual output and production source developed side by side.
Linnworks light and dark email module library
Theme-aware modulesLight and dark states considered across the component library.
Responsive Linnworks email examples shown with CSS media query code
Responsive behaviourLayout rules documented alongside their rendered mobile states.

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.

Animated British Gas 300 by 250 pixel MPU campaign sequence
Sequence playback 300 × 250 MPU
Wide British Gas new boiler campaign display advertisement
Display advertising1200 × 675 campaign execution
British Gas new boiler A4 printed mailshot
Direct mailA4 printed campaign mailshot