Definition
The preview pane, also known as the reading pane, is a user interface element in email clients that displays the content of a selected email alongside the message list. Instead of opening the email in a new window, the preview pane shows the message in a split view, typically to the right of the inbox (Outlook desktop) or below it (Apple Mail, Gmail mobile). The preview pane significantly affects how recipients first see your email.
Preview pane dimensions vary widely across clients and user configurations. Outlook desktop's reading pane occupies roughly the right 60–70% of the window, with heights ranging from 300 to 800 pixels depending on screen resolution and the user's layout preferences. Apple Mail's bottom preview pane is typically 200–400 pixels tall. Gmail mobile's preview is a full-width swipe with the top portion of the email visible. This variability makes it impossible to guarantee a consistent above-fold experience.
The preview pane has important implications for email engagement. Recipients often triage emails in the preview pane without opening them, so the first 100–500 pixels of your email must convey the message's value clearly. Calls to action that appear only below the fold may never be seen by preview pane users. Additionally, preview panes can trigger image blocking differently — some clients block images in both the preview pane and full view, while others load images in the preview pane but not in the full message.
Best Practices
Place your primary call to action and key message within the first 200 pixels of your email. This ensures it is visible in the majority of preview pane configurations without scrolling.
Design your email header to be visually distinctive in the preview pane. The sender name, subject line, and preheader text work together with the top content to provide a complete snapshot of the email's value.
Test emails in preview pane mode across Outlook, Apple Mail, and Gmail mobile. Each client shows a different vertical slice of your email, and content that appears above fold in one may be cut off in another.
Avoid critical content or CTAs in the top 50 pixels that might be obscured by client chrome. Outlook desktop and Yahoo Mail overlay buttons or banners that can hide the very top of your email content.
Use preheader text strategically to complement the preview pane content. The preheader appears below or beside the subject line in most clients and can be the deciding factor in whether a recipient opens the email.
Related Glossary Terms
Email Above Fold
The portion of an email visible without scrolling, varying significantly by device, client, and preview pane configuration.
Email Apple Mail
Apple's email client for macOS and iOS, known for the best CSS support among major email clients due to its WebKit rendering engine.
Email Background Image
A background image applied to an email's table cell or container, requiring VML fallbacks for Outlook due to its lack of CSS background-image support.
Email Conditional
Proprietary conditional comments used to target Microsoft Outlook with specific HTML or VML code for cross-client email rendering.
Email Emoji
The use of emoji in email subject lines and body content, with platform-specific rendering differences and measurable engagement impacts.
Email Ghost Table
A responsive email technique using hidden tables to conditionally show or hide content for mobile and desktop layouts across all email clients.
Frequently Asked Questions
Outlook desktop's reading pane height depends on the user's window size and layout preference. A typical range is 400–600 pixels for the right-side layout and 200–400 pixels for the bottom layout. Users can resize the pane infinitely.
Yes, preview panes can inflate open rates. Some clients load images, including tracking pixels, when an email is displayed in the preview pane, even if the recipient has not actively opened the email. Apple Mail's MPP takes this further by pre-loading content.
Design for the preview pane first. Many recipients triage emails in the preview pane and only open them if the preview is compelling. Your top 200 pixels should be optimised for the preview pane experience.
Gmail on desktop has a preview pane option that users can enable in settings, though it is not the default view. Gmail on mobile shows a preview of the email when users swipe through their inbox.
Use email testing tools like Litmus or Email on Acid that simulate preview pane views across clients. Alternatively, resize your desktop email client to a narrow window and observe how much of your email is visible in the reading pane.