Styles, Fonts, and Mobile

View as Markdown

How to style HTML for the drag-and-drop editor: inline styles, the one style block Envoke keeps, fonts, the classes that control the phone layout, and what to expect from Outlook and dark mode.

Inline Styles Only

Put all styling in style attributes on the elements themselves. When a message with the TEMPLATE_VERSION meta tag is saved in the drag-and-drop editor, every <style> block, stylesheet <link>, and <iframe> is removed, except Envoke’s own style block and font link. That includes media queries, web-font imports, and dark-mode rules you add yourself.

Build the layout with tables at fixed pixel widths: 680 for the email, 660 for a section, and the column widths inside it. Do not use floats, flexbox, grid, or positioning for layout.
Set background colours on table cells with background-color.
Do not use JavaScript. The editor removes <script> elements when it saves, and mail clients do not run scripts.

Envoke’s Style Block

The editor puts this style block in the head of every message it opens, replacing any earlier copy, and keeps it when it saves. Include it in your HTML too, with id="envoke-styles", so your email looks the same before it is first opened in the editor (see The Head).

<style type="text/css" id="envoke-styles">
  .inner-column { line-height: 1.3; }
  .image-edit { line-height: 0; }
  .image-edit.image-empty { display: none; }
  a { text-decoration: none; }
  u a { text-decoration: underline; }
  p, h1, h2, h3, h4, li { margin: 0; padding: 0; margin-bottom: 0; }
  h1, h2, h3, h4 { font-weight: normal; }
  ul, ol { margin-top: 0; margin-bottom: 0; }
  .desktop-hide { display:none !important; }
  @media screen and (max-width: 540px) {
    table { width:100% !important; }
    td.block { width:100% !important; display:block !important; }
    img.responsive-width { width:100% !important; height:auto !important; margin:0 !important; }
    table.nvkButtonTable { width: auto !important; }
    .mobile-hide { display:none !important; }
    .desktop-hide { display:block !important; }
    .block-inner .inner-column { padding-left: 20px !important; padding-right: 20px !important; }
    .block-inner .inner-column.mobile-full-width { padding-left: 0 !important; padding-right: 0 !important; }
    p, li, p span, li span { font-size:16px !important; }
    .column-table-rows .inner-column { height: auto !important; }
  }
</style>

What it does:

Base styles. No margins on paragraphs, headings, and lists; headings at normal weight (use <b> for bold); links not underlined unless inside <u>; a line height of 1.3 in every row.
Phone layout, at 540 pixels wide and below. Tables shrink to the screen width, columns stack, responsive-width images scale to full width, buttons keep their own width, rows get 20 pixels of padding on each side (none with mobile-full-width), and paragraph and list text is set to 16 pixels.

The editor uses 540 pixels unless another style block in the message contains the text max-width: 480px when it is opened, which some older messages do; it then uses 480 pixels.

Fonts

Set the message’s font in the font-family of the <body> and wrapper <div> (see The Body Wrapper), and a block’s font on its inner-column cell. When a message is opened, the editor writes each row’s font onto its inner-column cell, because Outlook does not pass fonts down into table cells.
The editor’s font menu offers Google Fonts as well as standard fonts. It loads them with a stylesheet link that Outlook for Windows is told to skip, and not every other mail client loads web fonts either, so always end a font list with standard fonts: font-family: Lato, Arial, Helvetica, sans-serif;.
A font stylesheet <link> of your own is removed when the editor saves.
The editor removes Helvetica Neue from every font list when it saves.

Mobile Classes

Class	On	Effect at 540 pixels wide and below
`responsive-width`	`<img>`	Scales to the full width (see Image Size on Phones)
`actual-size`	`<img>`	Keeps its size
`mobile-full-width`	`inner-column` cell	No side padding, so content reaches the edges of the screen
`block`	Column cell	Columns stack at full width (see Columns)
`mobile-hide`	Any element, usually a section	Hidden on phones
`desktop-hide`	Any element, usually a section	Hidden on larger screens, shown on phones

The editor’s section settings can hide a section on phones or on desktop, which adds mobile-hide or desktop-hide to the section. When it saves, the editor wraps everything with desktop-hide in conditional comments that Outlook for Windows skips, so that Outlook does not show it.

Outlook

Outlook for Windows renders email with Microsoft Word’s engine, which supports less HTML and CSS than other mail clients.

Table layouts at fixed pixel widths, as on these pages, render reliably.
Do not float an image that is alone in its cell; align it with text-align instead (see Image).
Set fonts on table cells, and end every font list with standard fonts.
Use the table button markup in Button, not a styled link.

Dark Mode

Envoke does not add any dark-mode handling. Mail clients with a dark mode apply their own changes to a light email, often inverting background and text colours.

A @media (prefers-color-scheme: dark) rule needs a <style> block, so the editor removes it when it saves.
Background colours set inline on table cells are kept by most clients, but text colours may still be changed. Choose text and background colours with strong contrast, and avoid relying on pure white or pure black for important text.

Full reference, OpenAPI description, and Postman collection: developers.envoke.com.