Above the fold email refers to the portion of an email a recipient can see immediately after opening it, before scrolling. It is not a fixed number of pixels or a deliverability metric: the visible area changes by device, inbox app, screen size, preview-pane settings, and message layout. In practice, the goal is to make the email’s purpose, value, and next step understandable in that first view.

What “above the fold” means in email

The phrase comes from print newspapers, where the upper half of a folded paper was visible on a newsstand. Editors put the most important headline and image in that visible space because it had to earn attention before someone picked up the paper.

In email, the “fold” is the bottom edge of the currently visible viewport. The content above it is what a person sees after they open a message but before they swipe or scroll. That may include a logo, preheader, hero image, headline, opening copy, and sometimes a call-to-action button. It may also include very little of the actual campaign if a large header, navigation bar, or image consumes the first screen.

An above the fold email is therefore not a special email type, and it is not an inbox-placement measurement. It is a design and content concept used to describe first-view content. A welcome email, password reset, receipt, product announcement, newsletter, and re-engagement campaign all have an above-the-fold experience.

The important distinction is that recipients do not see an email in a single, universal window. A person reading on a narrow mobile screen may see a headline and one sentence. Someone opening the same message in a desktop client with a horizontal preview pane may see much less vertical content. Another reader may have images blocked, use large default text, or rely on a screen reader. There is no reliable global line that every recipient will experience as the fold.

That does not make the concept useless. It means senders should treat the fold as a priority zone rather than a rigid production specification. The first visible screen should communicate enough value that readers know why they should continue, while the rest of the message should reward scrolling with useful detail.

Litmus describes the fold as a long-standing email-design concern but argues that habitual scrolling makes it less of a hard boundary than older design rules implied. That is the right practical frame: optimize the opening view without trying to force an entire message into it. (litmus.com)

Why above-the-fold email design matters

The first visible portion of an email is an orientation moment. Before a subscriber reads the full offer, compares products, or reaches a secondary link, they are deciding whether the message appears relevant, recognizable, and worth their attention.

A good first view answers several questions quickly:

Who sent this message?
What is this about?
Why does it matter to me now?
What can I do next?
Is it safe and easy to continue reading or take action?

When those answers are unclear, the recipient may close the message, return to the inbox, or delete it. That does not necessarily mean the message was technically bad. It often means the message asked for attention before it established context.

Campaign performance implications

Above-the-fold content can affect campaign performance because it influences the earliest engagement decisions. A clear offer and visible primary action can make it easier for an interested recipient to click without hunting through a long email. A strong opening can also encourage readers to scroll when the offer needs explanation, proof, comparison details, or multiple products.

For example, a retailer’s promotional email might lead with “20% off travel gear through Sunday” and a visible “Shop travel gear” button. A B2B software company may instead lead with a concise problem statement, a product outcome, and “Watch the 3-minute walkthrough.” A transactional sender should take a different approach: the first view of a password reset should put the reset purpose and action first, not a large brand image.

The right choice depends on the job of the email. Trying to make every message feel like a promotion is a common mistake. Receipts should prioritize confirmation details. Account-security messages should prioritize clarity and urgency. Newsletters should make the issue’s lead story or editorial promise visible. Lifecycle messages should remind the recipient what they signed up for and why the message is relevant.

Deliverability implications: direct versus indirect

Above-the-fold design does not directly determine whether an email reaches the inbox. Mailbox providers evaluate many signals that are more central to deliverability, including authentication, sending reputation, complaint patterns, recipient engagement, infrastructure quality, and message characteristics. Changing a hero image height or moving a button up 150 pixels will not repair a domain with poor authentication or a sender with a complaint problem.

It can matter indirectly. First-view content affects whether recipients recognize the message, find it useful, and engage in the way you intended. If unclear or misleading content causes more deletions, complaints, or disengagement over time, campaign performance can deteriorate and sender reputation can be harder to maintain. Conversely, a recognizable, relevant, and readable opening supports a healthier recipient experience.

Do not overstate this connection. A high-performing first screen is not a deliverability fix, and a message that requires scrolling is not inherently bad for deliverability. The connection is behavioral: better expectation-setting and clearer content can reduce friction for recipients.

The fold is not a fixed pixel measurement

A common request is: “How tall should above-the-fold email content be?” The honest answer is that there is no single correct height.

The visible height depends on variables outside the sender’s control, including:

Device dimensions. A phone in portrait orientation has a different viewport from a large desktop display.
Email client chrome. Inbox apps reserve space for navigation, message headers, reply controls, and other interface elements.
Preview-pane configuration. Desktop users may use no preview pane, a vertical preview pane, or a horizontal pane with a limited reading area.
Text scaling and accessibility settings. Larger default fonts, browser zoom, and operating-system display settings reduce the amount of content visible at once.
Image loading. If an image is blocked, slow to load, or replaced by alt text, the visual composition changes.
Thread context. In a conversation view, the client may collapse quoted content or show other messages around the new one.

Email designers often use a roughly 600-pixel-wide desktop canvas because many email clients and layouts have historically accommodated that width well. Mailchimp’s email design reference notes that a 600-pixel limit helps keep a design visible in narrow preview windows, but width guidance should not be confused with a universal fold height. (templates.mailchimp.com)

A worked viewport example

Imagine a promotional email built with these stacked elements on a mobile device:

Brand header: 56 px
Top padding: 24 px
Headline: 72 px
Supporting copy: 66 px
CTA button plus margins: 68 px
Hero image start visible below the button: 40 px

The email content visible before scrolling totals 326 px:

56 + 24 + 72 + 66 + 68 + 40 = 326 px

Now suppose the usable email reading area in one inbox app is about 620 px tall after its interface controls are accounted for. The recipient can see the entire 326-pixel opening and roughly 294 px of the next module. In a different app with only 430 px of usable height, the same recipient sees the CTA but little or none of the following content.

That example illustrates why teams should not say “the fold is 600 pixels.” What matters is whether the sequence degrades gracefully. The opening needs to work if the reader sees only the headline; it should work better if they also see the CTA; and it should still feel coherent if they see a portion of the next section.

What belongs above the fold

There is no mandatory template, but high-performing openings usually establish identity, relevance, and direction before decorative elements take over the space.

Identity and trust signals

Recipients should be able to identify the sender quickly. This does not require a giant logo. A compact, recognizable brand mark or a simple text header is often enough, especially when the display name and sending address already establish identity.

For transactional mail, brand recognition may be less important than task confirmation. A password reset message should clearly say that it is a password reset. An order-confirmation email should show the order number, purchase confirmation, and expected next step. A logo can support trust, but it should not delay the information the recipient opened the message to find.

A specific headline or lead sentence

Generic headlines waste scarce attention. “Big news,” “Something special for you,” and “Don’t miss out” may create curiosity, but they do not help a recipient decide whether the email is relevant.

A better headline names the benefit, event, update, or task. Compare these examples:

Weak: “Your next favorite feature is here.”
Clear: “Schedule recurring reports from your dashboard.”
Weak: “An update from our team.”
Clear: “Your April invoice is ready to download.”
Weak: “You’re invited.”
Clear: “Reserve your seat for the May 14 onboarding workshop.”

Specificity matters because the subject line, preheader, and email opening should tell a coherent story. If the subject promises a shipping update but the first screen starts with a generic marketing banner, recipients may question whether the message is genuine or relevant.

A primary action, when an action is appropriate

If the email has one main action, make it easy to find. That usually means a clear, descriptive button or linked text placed near the opening copy. “View order,” “Confirm email address,” “Download invoice,” and “Start free trial” are more informative than “Click here” or “Learn more” when the action can be stated plainly.

A CTA does not always need to appear entirely above the fold. Long-form editorial emails, product roundups, and story-led campaigns can successfully use the opening to earn a scroll first. But readers should still understand what they will get by continuing.

Text that works without images

Do not put all critical meaning inside a hero image. Some recipients may not load images immediately, and image-heavy messages can be slow or visually incomplete in certain contexts. The core message, primary action, and essential transactional details should remain understandable as HTML text.

Mailchimp’s email design guidance specifically cautions against all-image email designs. For a first view, the implication is straightforward: if the headline, offer, or security instruction exists only in an image, the opening may fail precisely when a reader needs it most. (mailchimp.com)

Common above-the-fold problems

When teams say an email has an “above-the-fold problem,” they usually mean important content is technically present but poorly prioritized or difficult to reach. The issue is not that the recipient must scroll; it is that scrolling feels like work before the message has earned it.

Oversized hero images

A hero image can establish mood, show a product, or support a brand campaign. It becomes a problem when it occupies nearly the entire initial viewport and pushes the actual offer, headline, or CTA below the scroll point.

This is especially risky if the image contains text. On a small screen, tiny type may be unreadable; with images disabled, the message may disappear; and with slow image loading, the recipient may see an empty or unhelpful block. Use hero imagery to reinforce the message, not to replace it.

Excessive headers, nav bars, and top padding

Marketing templates sometimes inherit large top sections: a logo row, navigation links, a “view in browser” line, a promotional strip, and generous whitespace. Each part may look harmless in isolation. Together, they can push the message’s reason for existing below the fold.

Audit the opening as a vertical budget. If a 90-pixel logo, 45-pixel navigation bar, 30-pixel announcement strip, and 48 pixels of padding appear before the headline, the email has used 213 pixels before saying anything useful. On mobile, that can be most of the opening view.

Vague copy and delayed relevance

A message can have excellent visual hierarchy and still fail above the fold if the copy is evasive. Readers should not need to parse a poetic intro to discover that a billing card failed, an account needs verification, or an offer expires tonight.

Lead with the recipient-relevant fact. Context and brand voice can follow. This is particularly important in operational emails, where ambiguity can create support tickets, missed deadlines, or security concerns.

Too many competing calls to action

An opening crowded with “Shop now,” “Read the blog,” “Follow us,” “Refer a friend,” and “Manage preferences” makes the primary goal unclear. Multiple links are not inherently harmful, but the hierarchy needs to be obvious.

Choose one primary action for the top of the message. Secondary actions can appear lower down, in supporting text, or in the footer. For a product launch, “See what’s new” may be primary while documentation, community links, and social links belong later.

Desktop-first layouts that collapse poorly on mobile

A two- or three-column desktop design can become a long, awkward sequence on a phone. When stacked, the first item may be a decorative image, while the useful copy and CTA move far below it. This is an ordering problem, not simply a responsive-CSS problem.

Build the mobile order intentionally. Ask what should appear first when columns stack. Use a layout that delivers the headline and action early, then let imagery and supporting modules follow. Responsive and hybrid email approaches exist because client support varies, so test actual rendering rather than assuming one set of styles works everywhere. (litmus.com)

How to improve above-the-fold email content

Improvement starts with message strategy, not with moving random elements upward. A smaller logo cannot compensate for an unclear offer, and a brighter button cannot repair a mismatch between the subject line and the body.

Start with the email’s single job

Write one sentence describing what success looks like for the recipient and sender. Examples include:

“The customer confirms their email address to activate the account.”
“The buyer understands that the order was received and can view order details.”
“The subscriber understands the limited-time offer and can browse the relevant category.”
“The trial user learns the one setup step that will help them reach first value.”

That sentence should guide the opening. If it cannot be expressed clearly, the email may have too many goals for one message.

Create a first-view hierarchy

For most campaigns, a practical opening hierarchy is:

Sender recognition or compact branding.
Clear headline that states the message’s value or purpose.
One or two concise lines of supporting context.
A primary action, if immediate action is appropriate.
A visual cue or the beginning of the next module that encourages continued reading.

This is a hierarchy, not a wireframe. A receipt may put order confirmation and key details before a button. A newsletter may use a publication name, lead story headline, and a short intro rather than a prominent CTA. The principle remains the same: the reader should not have to scroll to understand what kind of message they opened.

Use concise, accessible CTA labels

Button text should name the destination or outcome. Strong labels reduce uncertainty and remain meaningful when a recipient scans quickly.

Good examples include “Review security activity,” “Track your package,” “Choose a plan,” and “Read the release notes.” Avoid labels that require the headline for interpretation, such as “Go,” “Submit,” “Continue,” or “Click here.” If you must use short button text, ensure nearby HTML text supplies the missing context.

Make room by removing, not shrinking blindly

When a first view feels crowded, teams often reduce font sizes and padding everywhere. That can harm readability, especially on mobile. A better sequence is:

Remove low-priority top-of-email elements.
Combine repetitive copy.
Replace generic navigation with a single relevant link.
Reduce oversized decorative imagery.
Keep body text and tap targets comfortably usable.
Move secondary content lower in the message.

The objective is not maximum density. It is maximum clarity per unit of attention.

Preserve a useful plain-text and image-off experience

HTML email is rendered in many clients with differing support for CSS, images, fonts, and interactive elements. Keep the core content in live text, provide meaningful alt text for informative images, and avoid relying on a background image to display essential words.

For example, instead of embedding “Verify your account” in an image, use a text headline and a semantic-looking HTML button. The image can still show a product illustration or brand artwork, but the message survives if the visual layer changes.

Testing the fold across real inbox contexts

Because there is no universal fold, the practical way to evaluate it is to inspect how the opening renders in the clients and devices your audience uses.

Start with your own audience data. If most recipients open on mobile, prioritize narrow-screen rendering and touch-friendly buttons. If the campaign targets office users who commonly open mail in desktop clients, test preview-pane views as well. Do not optimize solely for the device on which the email was designed.

A practical pre-send test checklist

Before sending, review the message in representative inboxes and ask:

Is the sender immediately recognizable?
Does the first visible text explain the purpose without requiring the hero image?
Does the subject line match the opening headline and copy?
Is the primary CTA visible early enough for this email’s goal?
Does the mobile stacked order make sense?
Are important words legible at common text sizes?
Does image blocking leave a coherent message?
Are there accidental gaps, clipped modules, or broken links?
Is the email still understandable in dark mode or with large text settings?

Testing is not only a visual quality-assurance step. It is a content-quality step. If a preview shows a logo, an empty image area, and a button with no explanation, that is a strategic problem even if the HTML technically renders as written.

Mailchimp recommends thoroughly testing email designs across different applications after development because rendering differences can affect the recipient experience. (templates.mailchimp.com)

Test the first screen, then test the full journey

A polished top section cannot compensate for a confusing landing page, an expired offer, or a button that sends users to an irrelevant destination. Review the end-to-end path from inbox to conversion.

For transactional email, test the task completion path: reset link, confirmation page, logged-in state, and fallback support route. For campaigns, test UTM parameters, landing-page message match, mobile checkout or form behavior, and whether the destination delivers the promise made in the subject line and opening copy.

Above the fold versus email clipping

Above the fold and email clipping are different problems, but they are often confused.

Above the fold describes what is visible before a recipient scrolls in a normally rendered message. Email clipping happens when an inbox client does not display the entire message inline and instead requires an additional action to see more. Gmail clipping is commonly associated with very large message bodies, often discussed around a 102 KB HTML threshold, though actual behavior can vary by message and context. Gmail community discussions reference that threshold, but senders should validate their own sent source and inbox behavior rather than treating it as a guaranteed rendering contract. (support.google.com)

The fixes differ:

Above-the-fold issue: improve priority, hierarchy, copy, layout, and mobile stacking.
Clipping issue: reduce message HTML weight, eliminate repeated markup, simplify unnecessary inline CSS, and inspect how personalization or tracking expands the final sent message.

A message may be well designed above the fold and still be clipped at the bottom because it is too large. Conversely, a short message may not be clipped at all but can still bury its purpose below a giant hero image.

Keep templates efficient. Reusable modules are useful, but they can accumulate nested tables, duplicate styles, commented code, and hidden content. Review the actual compiled HTML after dynamic content, localization, tracking, and personalization are applied—not just the source template in an editor.

Measuring performance without inventing an “above-the-fold rate”

There is no standard industry metric called “above-the-fold rate.” You cannot calculate it from delivered messages, opens, or clicks alone because you usually do not know exactly which pixels every recipient saw before scrolling.

Instead, evaluate first-view changes through controlled campaign metrics tied to the email’s goal. Useful measures can include click-through rate, click-to-open rate where appropriate, conversion rate, downstream revenue, completion rate for a transactional task, unsubscribe rate, spam complaint rate, and customer-support contacts related to confusion.

A numeric testing example

Suppose you send an onboarding campaign to two randomized groups of 10,000 delivered emails each.

Version A begins with a large illustration, then the setup instructions and CTA.
Version B begins with the headline “Connect your data source in 3 minutes,” one sentence of context, and the same CTA, with the illustration below.

Results after the same measurement window:

Version A produces 310 setup completions.
Version B produces 430 setup completions.

The completion rate for Version A is:

310 ÷ 10,000 × 100 = 3.1%

The completion rate for Version B is:

430 ÷ 10,000 × 100 = 4.3%

The absolute lift is 1.2 percentage points. The relative improvement is:

(4.3% - 3.1%) ÷ 3.1% × 100 = 38.7%

That does not prove that every recipient saw the CTA above the fold. It does show that the revised first-view hierarchy correlated with a materially better outcome in this controlled test. Check for statistical validity when stakes and volume justify it, and avoid declaring a design winner from a small or uneven sample.

Segment before applying a universal rule

A first-view treatment that helps new mobile subscribers may not help long-time desktop readers. Segment results by device category where reliable, audience cohort, campaign type, geography, customer lifecycle stage, and accessibility needs when possible.

For example, a short, action-forward first screen may improve a trial-activation email, while a more editorial opening may improve engagement with a weekly newsletter. The correct design is the one that helps the intended audience accomplish the message’s job—not the one that simply makes the most content visible at once.

Practical patterns for transactional and campaign email

Transactional and campaign messages use the same inboxes but serve different recipient expectations. Their above-the-fold priorities should reflect that.

Transactional emails

Put the event and the next step first. A recipient who requested a password reset, purchased an item, or received an account alert is often looking for certainty rather than inspiration.

A sound opening for a password reset includes the account or service name, a statement that a reset was requested, the reset action, expiry information if applicable, and an instruction for recipients who did not request it. Avoid placing security instructions below a tall marketing header.

For a receipt or order confirmation, lead with confirmation status, order identifier, summary, and a track/view-order action where relevant. Product recommendations can exist, but they should not obscure the confirmation information.

Promotional campaigns

Campaign email needs to establish relevance fast. Connect the subject line to the opening, name the offer or product category, show an obvious path to action, and use the visual design to amplify—not hide—the value proposition.

For product launches, consider whether the reader needs a direct CTA immediately or a short explanation first. A new feature may need a concise before-and-after story. A limited-time discount may need the offer and deadline near the top. A seasonal collection may benefit from product imagery, but its supporting text should still explain what is being offered.

Newsletters and editorial sends

Readers may expect to scroll in a newsletter. The goal is not to cram every story above the fold. It is to make the issue worth exploring by clearly presenting the lead story, theme, or promise.

Use a recognizable masthead, a strong lead headline, a short editor’s note or summary, and a visible link to the first story. Lower sections can contain multiple stories, curated links, and recurring modules. Here, a partial glimpse of the next story can be helpful because it signals depth without confusing the hierarchy.

A durable above-the-fold email checklist

Use this checklist when reviewing a new template or campaign:

Name the message’s single job. Define the intended recipient action or understanding in one sentence.
Match the subject line. The first headline and supporting copy should deliver the promise made in the inbox.
Lead with meaning. Put the event, value, or task ahead of decorative content.
Keep brand elements proportional. Use recognition cues without allowing headers and navigation to consume the first screen.
Make the primary action unmistakable. Use descriptive CTA wording and clear visual hierarchy.
Design for image-off reading. Essential words and actions must remain available in HTML text.
Review mobile stacking. Ensure the first stacked module is the most useful one.
Test several client contexts. Check real renders, preview panes, large text, and image behavior.
Measure the outcome. Compare clicks, completions, conversions, and negative signals rather than relying on a subjective fold rule.
Keep technical problems separate. Diagnose clipping, authentication, reputation, and rendering defects independently from content hierarchy.

Above the fold email design is ultimately an exercise in respecting attention. Recipients should not need to decode why a message arrived, hunt for the relevant action, or scroll past branding to reach a time-sensitive instruction. Give them context early, make the next step clear, and use the rest of the email to provide the detail that supports a confident decision.

FAQ

Is above the fold an email deliverability metric?

No. Above the fold is a design concept, not a standard deliverability metric. It describes the content visible before scrolling. It can influence engagement and recipient experience indirectly, but it does not replace authentication, reputation management, list quality, or complaint prevention.

How many pixels are above the fold in an email?

There is no universal number. Visible space varies by phone, desktop display, email client interface, preview-pane configuration, zoom level, and accessibility settings. Design the opening so it remains understandable at several viewport heights rather than targeting one exact cutoff.

Should the CTA always be above the fold?

Not always. Put the CTA early when the email has an immediate, simple action, such as verifying an address, tracking an order, or shopping a stated offer. For editorial, educational, or story-led messages, use the opening to establish value and give readers a clear reason to scroll.

Does a large hero image hurt email performance?

It can if it pushes the purpose, offer, or CTA out of the first view, contains essential text, loads slowly, or fails when images are blocked. A hero image can still be effective when it supports concise HTML copy and does not dominate the opening at the expense of clarity.

Is Gmail message clipping the same as being below the fold?

No. Below the fold means a recipient can reach content by normally scrolling. Clipping means the email client limits inline display and may require an extra action to view the remaining message. Solve hierarchy problems with content and layout changes; solve clipping by reducing message weight and inspecting final rendered HTML.

Above the Fold Email: What It Means and How to Design for It