Definition
Above the fold in email refers to the content visible to a recipient without requiring any scrolling action. The term originates from newspaper design, where the most important stories appeared on the upper half of the folded front page. In email, the fold is determined by the email client's viewport, which varies dramatically based on device type, client layout, screen resolution, and preview pane configuration.
Unlike web design where the fold is relatively predictable based on viewport height, email above-fold content varies enormously. On a desktop with Outlook's reading pane, the fold may be at 400 pixels. On a mobile device in portrait mode, it might be at 600 pixels. On a tablet in landscape orientation, it could be at 800 pixels. The preview pane further complicates things by reducing the visible area. Industry convention typically treats the first 300–500 pixels as the above-fold area, but this is a rough guideline.
The placement of calls to action relative to the fold is one of the most debated topics in email design. Some studies suggest that CTAs above the fold generate higher click-through rates, while others find that recipients who scroll are more engaged anyway. A balanced approach places a primary CTA above the fold and secondary CTAs below, giving recipients a clear action to take regardless of how far they scroll.
Best Practices
Place your primary call to action within the first 300 pixels of your email. This is the most conservative safe zone that covers the vast majority of viewport and preview pane configurations.
Include your value proposition in the above-fold area. Whether or not the recipient scrolls, the top content should clearly communicate what the email offers and why it matters to them.
Design the above-fold area to function independently of images. With image blocking at 43%, the text and alt text in the top portion must communicate the message even when images do not load.
Use preheader text to extend your above-fold messaging. The preheader appears alongside the subject line and can work with the top email content to create a complete preview.
Avoid placing critical information in a narrow 50-pixel band at the very top of the email. Some clients overlay navigation or notification bars that can obscure this area.
Related Glossary Terms
Email Emoji
The use of emoji in email subject lines and body content, with platform-specific rendering differences and measurable engagement impacts.
Email Graceful Degradation
An email design strategy that starts with a feature-rich layout and systematically reduces complexity for clients with limited rendering capabilities.
Email Image Alt Text
Alternative text descriptions for email images that display when images are blocked, improving accessibility and providing context for all recipients.
Email Preview Pane
A UI panel in email clients that shows message content alongside the inbox list, affecting how much of an email is visible before scrolling.
Email Progressive Enhancement
An email design strategy that builds a functional base layout for all clients then layers enhanced features for more capable rendering engines.
Frequently Asked Questions
There is no single answer. The fold varies by device and client from approximately 200 pixels (preview panes) to 800 pixels (full-screen desktop). The most commonly cited safe zone is the first 300–500 pixels.
Yes, but for different reasons. Mobile users see the top of the email first when they open it, so the above-fold area is the first impression. Since mobile screens are taller but narrower, the fold may be lower (500–700 pixels), but content density is also lower due to the narrow width.
No. Multiple CTAs create visual clutter. A single primary CTA above the fold with a related secondary CTA further down is a proven pattern. Recipients who scroll are often more engaged and more likely to click deeper CTAs.
The preview pane reduces the visible vertical space, often to 200–400 pixels. Any CTA or key message below this threshold is hidden from preview pane users. Design your email's top 200 pixels for the preview pane constraint.
No. You cannot control whether a recipient scrolls. The only way to ensure content is seen is to place it above the fold. Alternatively, use progressive disclosure or ghost table techniques to bring below-fold content into the visible area on specific devices.