A scheduled maintenance notice for SaaS products, hosting providers and APIs, written as a real email-safe template: tables for layout, inline styles, MSO conditional comments and a VML button, with no frameworks, web fonts, icon fonts or JavaScript. A navy header and amber label band give it a technical, status-page feel, and the content tells customers when the work happens, what is affected and where to follow along. The patterns target Outlook (Windows desktop), Gmail (web and apps) and Apple Mail.
How it works
The hidden preheader (.smn-preheader) summarises the notice in the inbox list. table.smn-wrapper fills the width with a blue-grey background and table.smn-container holds the 600px white email, wrapped in a fixed-width ghost table for Outlook. The header shows a text-only logo and a "View in browser" link; the amber band labels the message "Scheduled maintenance, notice 1 of 2" in a monospace stack.
The maintenance window is described relative to the send date instead of hard-coded dates: three tiles read "In 5 days" (Sat, 22:00 UTC), "Up to 2 hours" and "Sunday" (00:00 UTC). The tiles use the fluid hybrid method: each is an inline-block div.smn-col with a 178px max-width, so they sit in a row on desktop and stack on phones, while Outlook gets a three-cell ghost table.
table.smn-services is a real data table with th scope="col" headers. Each service has a short explanation and an impact label (Unavailable, Read-only, Delayed, No impact) drawn as a colored inline span, and the label text carries the meaning, not just the color. A "What to expect" list uses monospace markers, then the status page button: a VML v:rect for Outlook and a.smn-btn with an amber bottom border elsewhere. The footer explains why the customer gets the notice and includes the address, notification settings and an unsubscribe link.
Customization
- Change
#0b1f3a(navy) and#f5a524(amber) acrossindex.html, includingfillcoloron thev:rect, to match your brand. - Edit the three window tiles for your schedule; keep relative wording such as "In 5 days" and merge exact times from your sending tool.
- Add or remove rows in
table.smn-services; reuse the four label colors for consistent impact levels. - Point
a.smn-btnat your status page and the subscribe link at its update feed. - In
style.css,.smn-pxand.smn-pxbtighten padding below 620px,.smn-h1shrinks the heading and.smn-btnbecomes full width.
Accessibility
Layout tables use role="presentation", the services table keeps its header semantics, and headings follow h1 then h2. Impact is written as text, so it does not rely on color. All text meets 4.5:1 contrast, links are underlined, and style.css adds focus-visible outlines in clients that support it.
Usage notes
The template has no images, so it reads fully with images blocked. Send the second notice from the same template with the band text changed to "Maintenance in progress" or "Completed".
