Responsive HTML Emails with Dark Mode & Accessibility
Client Bio /
National Grid is one of the largest investor-owned energy companies in the United States, delivering electricity and natural gas to millions of customers across New York, Massachusetts, and Rhode Island. The National Grid Marketplace is their e-commerce platform offering discounted energy-efficient products to residential customers.
I develop custom-coded responsive email templates for the National Grid Marketplace, a utility-branded e-commerce platform promoting energy-efficient products to residential customers across New York. Each campaign email is built from scratch using table-based HTML to ensure consistent rendering across the wide range of email clients and devices.
Templates follow a mobile-first approach with a 600px desktop breakpoint. Multi-column product layouts collapse into single-column stacks on smaller screens using display-block overrides on table cells. Images scale fluidly with max-width constraints, and spacing adjusts by breakpoint to maintain readability across devices.
Each email includes a full dark mode implementation using the prefers-color-scheme media query. Backgrounds, text, buttons, and brand elements adapt through scoped utility classes such as .darkmodeblack, .darkmodegrey, and .darkmodecopy, ensuring consistent appearance in clients that automatically invert colors, including Apple Mail and iOS Mail.
Outlook desktop requires a separate rendering path. MSO conditional comments provide fallbacks where necessary, including static hero images in place of animated GIFs and VML-based buttons to replace CSS-styled CTAs. This ensures compatibility across Outlook 2016–2019 and Microsoft 365 while preserving modern styling for other clients.
All templates are tested in Litmus across 90+ client and device combinations, including Gmail, Apple Mail, Outlook, Yahoo, and AOL. Rendering issues are addressed directly in the code, without relying on email frameworks or drag-and-drop builders.