Around half of SFMC client sends Sapota audits have a mobile open rate that matches desktop - roughly 50/50. Yet the email is designed desktop-first, with 10px font, multi-column layouts, and buttons that shrink below finger-size on small screens. The mobile half loses interest before scrolling.
The split has only widened. Apple Mail Privacy Protection, rolled out with iOS 15 in 2021, now masks open events for a significant share of subscribers, which means the desktop versus mobile ratio teams see in SFMC reporting tends to undercount the real mobile share. Designing for desktop and then "checking on mobile" is the inverse of what subscribers actually do. The honest baseline most engagement teams should plan against is mobile-first, with desktop treated as the secondary surface.
SFMC offers three paths to responsive email. Pick the one that matches the team's technical comfort and design complexity.
Approach 1: Mobile Aware (fastest)
Design the email as a single column with large fonts and big buttons. It looks fine on desktop and naturally works on mobile - no media queries, no CSS tricks.
When to use: simple layouts, tight deadline, non-technical marketers owning the template.
Rule: if someone asks "does this need media queries?" and you don't have a clear yes, Mobile Aware is the answer.
Approach 2: Mobile Responsive (most flexible)
Use @media query CSS to switch layout based on viewport width. Desktop sees 2-3 columns; mobile stacks to 1 column. Fonts scale.
@media only screen and (max-width: 600px) {
.column { width: 100% !important; display: block !important; }
.hide-mobile { display: none !important; }
.mobile-font { font-size: 18px !important; }
}
Outlook compatibility catch: Outlook (desktop versions) doesn't support external stylesheets or <style> in <head> in many cases. Rules inside <style> still render in web clients and mobile; for Outlook you pair them with inline CSS as the fallback.
The pattern is: inline styles as the base (Outlook reads these), plus <style> with media queries for the responsive behavior.
The reason these quirks exist comes from a long history. Outlook 2007 through 2019 used Microsoft Word as the HTML renderer, which is why so many CSS properties behave nothing like a modern browser. Microsoft has gradually shifted Outlook for Web and the new Outlook desktop client to a Webkit-based renderer, but the legacy clients still hold significant market share in enterprise IT. The old gotchas are still load-bearing for any audience with a meaningful Outlook share, so the inline-plus-media-query pattern stays the safe default rather than a workaround for one specific version.
Approach 3: Content Builder built-in templates
Content Builder ships Basic, Empty, and Themed Templates that are already responsive. No custom CSS needed.
Use when design requirements are generic and brand styling can fit within the template's defaults. Fastest path from zero to a responsive email.
Mobile email checklist
- Body font minimum 14px; headlines 22px+
- Button minimum 44x44px (touch target)
- Single column layout for core content
- Most important content above the fold
- Copy tight, not paragraphs
- Alt text on every image (many clients block images by default)
- Total email size under 100KB (ideal), under 800KB (hard limit)
Mistake 1: Important text inside images
Many email clients block images until the user clicks "Show images." If the CTA or headline is inside an image, subscribers see nothing.
Rule: important text is real text. Images are visual support only. If the headline "50% OFF TODAY" is in an image, type it as text too.
Mistake 2: Unstyled alt text
When images don't load, alt text renders in the client's default font - usually tiny and ugly. Style alt text with inline CSS:
<img src="banner.jpg" alt="Flash Sale 50%"
style="font-size:24px; color:#ff0000; font-weight:bold;">
If the image loads, the style is ignored. If it's blocked, the alt text inherits the style - still readable, still on-brand.
Mistake 3: Background color on Outlook
Outlook does not support many CSS properties. Background colors and gradients need Outlook-specific VML or table tricks. Always test on Outlook before production.
Testing approach:
- Send Preview within SFMC (shows rendering warnings)
- Test Send to a real Outlook inbox if the audience is Outlook-heavy
- Litmus or Email on Acid for comprehensive cross-client preview if budget allows
The audience cut matters when budgeting testing time. For B2C campaigns aimed at Vietnam and Southeast Asia, Outlook is rarely the dominant client and a single sanity check on Outlook for Web is usually enough. For B2B engagements with US, UK, or enterprise-heavy audiences, Outlook can be 30 to 50 percent of opens, and "send to one inbox and eyeball it" is not enough. Litmus or Email on Acid lets the design team see exactly how the email renders across Outlook 2016, 2019, and Outlook for Web side by side, which is what catches the issues before the campaign ships rather than after the unsubscribes spike.
Picking the approach per project
| Situation | Approach |
|---|---|
| Simple newsletter, non-technical marketers | Mobile Aware or built-in template |
| Complex layout, design team wants flexibility | Mobile Responsive with media queries |
| Tight deadline, basic brand | Built-in Content Builder template |
| Agency delivers HTML | Check if they're already responsive; often yes |
How Sapota maps engagement type to approach
Engagement type tends to map to a default pick before the discovery call even starts. For banking and fintech clients shipping transactional emails (receipts, statement notifications, password resets), Mobile Aware is the right answer in roughly 90 percent of cases. The content is dense and structured, never needs columns, and the work is in deliverability and template hygiene rather than layout sophistication.
For B2C campaigns where the brand team owns visual style (fashion, retail, hospitality), Mobile Responsive with media queries is worth the extra build time. The design team will want hero banners, columnar product grids, and increasingly dark-mode-aware styling. Templates that only flex via "fit to viewport" feel cheap once a brand passes a certain maturity threshold, and that perceived gap costs click-through rate even when the layout technically renders.
Content Builder built-in templates work as a starting point for engagements where the marketer is the template owner and the design ambition is "send something professional next week." Sapota usually picks one base template, tweaks brand color tokens and footer copy, then hands ownership back to the marketing team. It is the fastest path to "responsive enough" without ongoing dev involvement, and the right call when the engagement is about getting the program running rather than about peak design.
Takeaway
Responsive email isn't one thing. It is a choice between three SFMC options. Mobile Aware for speed, Mobile Responsive for flexibility, built-in templates for starting-point convenience. Whichever the pick, the mobile checklist applies: big fonts, big buttons, single column for primary content, and no important text inside images. The 50 percent mobile audience is worth the ten extra minutes it takes to ship with those constraints in mind.
For SFMC engagements where reach matters more than design polish, defaulting to Mobile Aware plus a strong checklist gets teams 80 percent of the way there with 20 percent of the effort. For campaigns where design carries the brand, the additional media-query work pays off in click-through rate. The wrong answer is the one neither side picks intentionally.
Designing SFMC email templates for a mobile-heavy audience? Our Salesforce team builds responsive templates with Outlook and cross-client testing on production engagements. Get in touch ->
See our full platform services for the stack we cover.
