Set a clear expectation within a crowded inbox.
<div class="inbox"><div class="sender"><b>ATLAS NOTES</b><span>9:41</span></div><div class="row long">Our latest collection of useful updates for your weekly planning meeting</div><div class="row short">Your weekly plan is ready <small>— See what changed</small></div></div>.inbox{box-sizing:border-box;width:min(83vw,460px);padding:clamp(10px,2.5vmin,23px);border:2px solid var(--line);border-radius:clamp(8px,2vmin,18px);background:var(--surface);font-family:sans-serif}.sender{display:flex;justify-content:space-between;font:900 clamp(10px,max(1.8vmin,1vw),15px) sans-serif}.sender span{color:var(--muted)}.row{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:clamp(8px,2vmin,18px);padding:clamp(7px,1.8vmin,14px);font:700 clamp(10px,max(2.3vmin,1vw),20px) sans-serif}.long{color:var(--muted);border:1px dashed var(--line);animation:old 5s infinite}.short{border:2px solid var(--accent);animation:new 5s infinite}.short small{color:var(--muted);font-size:max(10px,1vw,.8em)}@keyframes old{0%,25%{opacity:1}45%,85%{opacity:.35}100%{opacity:1}}@keyframes new{0%,25%{opacity:.35;transform:translateX(-5px)}45%,85%{opacity:1;transform:none}100%{opacity:.35;transform:translateX(-5px)}}@media(min-width:700px){body > *{transform:scale(1.4)}.lines p,.branches div,.cards div{cursor:pointer}}An email subject works with the sender name to signal the message's purpose. A mystery hook or promise the body cannot deliver can damage trust after the open.
The demo clips a long subject in a narrow inbox and then moves the essential information to the front. Word order matters more than a fixed character rule.
Check newsletter, notification and promotional subjects in a mobile-width inbox.