Email Content Hierarchy: Above the Fold Still Matters

"Above the fold" is the part of an email visible without scrolling. On desktop, roughly 600px. On mobile, less. Subscribers decide whether to engage with the email based on those first pixels. If the primary message and CTA are buried below, half the audience never sees them.

Here's the hierarchy we apply to every email.

Priority order, top to bottom

Primary CTA above the fold is non-negotiable for mobile-heavy audiences. Secondary CTAs can repeat the primary action lower for subscribers who scrolled.

Headline writing

Headline does the heavy lifting. Three tests:

1. Can the subscriber understand the value in one glance? "Your 20% discount inside" is clear. "Exclusive offers await you" is vague.
2. Would the subscriber still know what to do if images were blocked? Important content in text, not image files.
3. Is it specific? "Flash sale on running shoes" beats "Big news inside."

Generic headlines lose. Specific ones earn the scroll.

Image blocking fallback

Many email clients block images by default - enterprise Outlook especially. If the email is image-heavy, those subscribers see empty boxes and alt text only.

Rules that prevent the broken-image-experience:

• Never put important text inside an image
• Every image has descriptive alt text
• Alt text styled via inline CSS so it looks decent when rendered
• Text-to-image ratio balanced - not an all-image email
• Primary message conveyed by text; images are visual support

If the image loads, the style is ignored. If it's blocked, the alt text inherits the style and the headline still lands.

What "above the fold" means on mobile vs desktop

• Desktop: roughly 600px height before scroll. Most subscribers see the first 500-600 pixels.
• Mobile: 400-500px height depending on device. Preview pane in inbox eats half the screen.

Design for the stricter constraint - mobile. If the primary CTA is visible in the first 400px, it's visible everywhere.

Content density

Emails that feel crowded at the top lose engagement. Rules:

• One primary message per email
• Headline ≤ 10 words
• Hero image or headline, not both fighting for attention
• One visually dominant element above the fold

Three CTAs, two product shots, and a coupon code all in the first 400px - too much to process. Subscribers close.

One clear hero, one headline, one CTA button - easy to parse, easy to act on.

Above-the-fold best practices

Pattern: the 5-second test

Show the email to a colleague for 5 seconds. Close the screen. Ask:

• What's the email about?
• What does it want me to do?
• Is there a time pressure?

If they can't answer all three, the hierarchy is broken. Restructure.

Mistake 1: Long intro paragraph above the CTA

Email opens with 200 words of context before the CTA. By word 50, subscribers have closed. Put the CTA high and build context underneath for the subset who want more.

Mistake 2: Multiple equal-weight CTAs

Four CTAs, all button-styled, all equal prominence. Subscribers can't decide. Pick one primary, demote the others to text links lower in the email.

Mistake 3: Critical info in an image

"Your voucher code: SAVE20" in an image. Many Outlook users see nothing. Render as text; use the image for visual support only.

Footer priorities

Below the fold, footer carries required legal elements:

• Physical mailing address (CAN-SPAM)
• Unsubscribe link (always)
• Profile/preference center link (if applicable)
• Social links (optional)
• Copyright / brand elements

Test unsubscribe link on every send. Broken unsubscribe is a compliance violation.

Takeaway

Above the fold is 400-600px that determines whether the rest of the email gets read. Primary message, primary CTA, fallback for image blocking - all in the top band. Everything else supports the top. Run the 5-second test on every email; if the hierarchy is clear, engagement follows.

---

Designing email templates with strong content hierarchy? Our Salesforce team builds SFMC templates with above-the-fold CTA placement and image-blocking resilience on production engagements. Get in touch ->

See our full platform services for the stack we cover.