Common Room, You are in the room
A berry field washed over a photograph of the room, a picture of the people in it, and three practical things for week one. Send it to a new member the week before their key works.
680px
About this email
- Subject line
- Your Common Room key works from Monday
- Preview text
- The door code, the quiet end, and what happens on Thursdays.
- Width
- 600px, stacks on phones
- Export size
- 22,289 bytes (21.8 KB)
- Free
- Yes, with no account and no export limit.
What the HTML does
- Table layout with ghost tables for Outlook. Columns are tables inside Outlook-only conditional comments, so Word's engine gets the widths it needs and everyone else gets the responsive version.
- VML buttons. Each button is a VML shape for Outlook and a padded link everywhere else, so the whole button is clickable in both.
- Background images with VML fill. Background images fall back to a VML rectangle in Outlook instead of disappearing.
- Dark-mode meta. color-scheme and supported-color-schemes tell Apple Mail and Outlook how the email expects to be treated in dark mode.
- Preheader. The preview text is in the HTML, hidden from the body, so the inbox shows what you wrote instead of the first line of the footer.
- Mobile stacking. Columns stack under 600px with a media query, and stay side by side where media queries are ignored.
- Inline styles. Every style that matters is on the element, because Gmail strips most of the head and some clients drop it entirely.
- Exact line heights in Outlook. mso-line-height-rule: exactly keeps spacers and text from drifting in Outlook for Windows.
- Outlook DPI fix. The OfficeDocumentSettings block stops Outlook from scaling images on high-DPI Windows displays.
- Presentation tables. Layout tables carry role="presentation" so screen readers read the content, not the grid.