Agent Wranglers

Layout and accessibility Recommended

Write a preheader

Set the short text that inboxes show after the subject, so it adds to the subject instead of repeating it.

How to do it

Put a hidden element with 40 to 100 characters of summary first in the body. Without it, clients show whatever comes first, such as "View in browser". Hide it with styles that every client respects, and pad it so body text does not leak into the preview.

Example

<div style="display:none; max-height:0; overflow:hidden; mso-hide:all;">
  Your parcel arrives Thursday. Track it any time.
</div>

How to check

Look at the test in the inbox list of Gmail and Apple Mail. The preview shows the intended text, not menu words or a link.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers email playbook: https://agentwranglers.se/playbook/email/layout-and-accessibility/preheader.