Definition
Device-specific email optimisation tailors the email rendering experience to the subscriber's device type — mobile phone, desktop computer, or tablet. Mobile email opens now account for 55-70% of all email opens, with desktop at 20-30% and tablet at 5-10%, according to Litmus and Mailchimp industry reports. Device shares vary by audience: B2B audiences skew desktop-heavy (40-50%), while B2C and retail audiences are 70-80% mobile. Designing for mobile first is no longer optional — it is the default rendering context for the majority of subscribers.
Two primary design approaches exist. Responsive design uses CSS media queries to apply different styles based on the viewport width, using a single HTML template that adapts fluidly to screen size. It requires a <meta name="viewport" content="width=device-width, initial-scale=1"> tag and breakpoints at 480px and 600px. Adaptive (or hybrid) design uses a fixed-width table structure (typically 600px) for desktop with display: inline-block; elements that collapse into a single column on mobile when the table structure breaks. The adaptive approach is more widely supported across email clients, particularly Outlook, which has poor CSS media query support.
Device detection also enables content-level personalisation. A mobile subscriber might receive a "Tap to Call" button, a larger hero image, and simplified copy, while a desktop subscriber might see a multi-column layout with smaller images and richer content blocks. This device-aware content strategy requires server-side device detection at the time of open (via user-agent string analysis on image requests) or client-side detection via CSS media queries that show/hide content blocks.
Best Practices
Design mobile-first — create the single-column mobile layout first, then enhance for desktop. The mobile design should centre one column at 320-360px width (accounting for padding), with a minimum font size of 14px for body copy and 22px for headlines. Buttons should be at least 44x44px to accommodate thumbs and fingers. Desktop enhancements add secondary columns, larger images, and additional content blocks.
Set touch targets to a minimum of 44x44 pixels with 10px spacing between clickable elements. The average adult finger pad is 10-14mm wide, which translates to approximately 37-52px on a standard smartphone screen. Links and buttons smaller than 44px cause mis-taps and user frustration. Place primary calls to action in the centre of the screen, not at the edge, where thumb-reach is most comfortable.
Test emails on actual devices, not just in simulators. Device emulators and preview tools do not account for real-world rendering differences — font scaling on iOS, dark mode rendering, or Outlook's paragraph spacing quirks. Use an email testing platform (Litmus, Email on Acid) to preview on 30+ device and client combinations, and manually spot-check on iPhone, Android (Samsung and Pixel), and desktop Outlook.
Use [data-emaillist] and [data-email] based CSS targeting for advanced device-specific styling. These proprietary attributes are supported by Apple Mail and provide greater control over rendering than standard media queries. However, they work only in Apple Mail, so they should supplement rather than replace media queries.
Optimise images per device. On mobile, use images no wider than 320-360px (accounting for padding) and compress to under 50KB per image to reduce load time on cellular connections. On desktop, serve images up to 600px wide but compressed to under 100KB. Use srcset attributes where supported, or serve a single optimised image that looks good on both screen sizes.
Frequently Asked Questions
Frequently Asked Questions
Industry average is 55-70% on mobile, 20-30% on desktop, and 5-10% on tablet. B2B audiences typically see 40-50% mobile, while B2C/retail audiences see 70-80% mobile. Monitor your own audience in your ESP analytics rather than relying on industry averages, as device share varies significantly by industry and list composition.
Responsive design uses CSS media queries to rearrange content fluidly based on viewport width. Adaptive (hybrid) design uses fixed-width table structures with inline-block elements that stack on narrow screens. Adaptive is more compatible with Outlook; responsive offers more design flexibility. Many modern templates combine both approaches.
Yes. Dark mode inverts or recolours email content automatically in Apple Mail, Gmail, and Outlook. Mobile dark mode adoption is approximately 25-35% of users. Use `prefers-color-scheme` media queries with `[data-ogsc]` and `[data-ogsb]` dark-mode overrides (Gmail) to set explicit dark mode colours. Test every template in both light and dark modes.
Device detection in email is limited. You can use CSS media queries to apply different styles, `picture` with `source` elements for device-specific images (limited support), or image request user-agent analysis if you serve dynamic images. True device detection requires the email client to make a request to your server.
No. Build one responsive template that works across devices. Two separate templates double production and maintenance effort. The responsive single-template approach covers 95%+ of use cases. Exceptions: highly interactive emails (gamification, AMP) may need device-specific versions for Outlook vs Apple Mail.