Marcus App Announcement Email
Code Preview for the Marcus App Announcement Email. This view focuses on structure and build approach (sanitized where needed).
Code Preview
Selected sections showing structure, responsiveness, and Outlook-safe techniques. This is intentionally curated to highlight build decisions rather than full boilerplate.
Why These Sections
Rather than presenting the full production file, this preview focuses on the areas that demonstrate email-specific engineering decisions — particularly responsiveness, Outlook compatibility, and cross-client rendering strategy.
-
Head + Client Protections
Shows viewport handling, Apple auto-link prevention, MSO font fallbacks, and OfficeDocumentSettings — critical for predictable rendering across Gmail, Outlook, and iOS. -
Visibility Strategy (hideShow / noMo)
Demonstrates controlled content swapping between desktop and mobile using media queries combined with Outlook-safe conditional logic. -
Hero Asset Swapping + MSO Fallback
Highlights animated GIF usage for modern clients with static JPG fallbacks for Outlook’s Word rendering engine. -
VML CTA Button
Illustrates an Outlook-safe button built with VML and an HTML fallback, ensuring visual consistency across Microsoft clients. -
Responsive Two-Column Feature Section
Shows hybrid table structure that renders as two columns on desktop and stacks cleanly on mobile without breaking layout integrity.
The intent is to surface the structural decisions that impact deliverability, render reliability, and user experience — rather than boilerplate footer or tracking code.
1) Head + Client Protections
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--[if !mso]!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<title>Marcus</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700&display=swap');
</style>
<!--[if mso]>
<style type="text/css">
body,table,td,span,font,a,label,div{font-family:Arial,Helvetica,sans-serif !important;}
</style>
<![endif]-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
2) CSS Foundation + Mobile Visibility Strategy
<style type="text/css">
body { width:100% !important; min-width:100%; margin:0; padding:0; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
table { border-collapse:collapse !important; }
table, td { mso-table-lspace:0; mso-table-rspace:0; }
img { -ms-interpolation-mode:bicubic; }
.hideShow { display:none; }
.noMo { /* hidden on mobile via media query */ }
@media only screen and (max-width:480px){
.hund { width:100% !important; height:auto !important; }
.noMo { display:none !important; }
.hideShow { display:block !important; }
.center { text-align:center !important; margin:0 auto !important; }
}
</style>3) Hero Swap (Desktop vs Mobile) + Outlook Static Fallback
<td align="center">
<!-- Desktop Headline -->
<div class="noMo" style="background-color:#edf2f5;padding:52px 30px 34px;font-family:'Nunito Sans',Helvetica Neue,Helvetica,sans-serif;font-size:60px;line-height:62px;font-weight:normal;">
Say hello to<br>the Marcus app
</div>
<!-- Mobile Headline (revealed via media query) -->
<div class="hideShow" style="background-color:#edf2f5;padding:52px 30px 10px;font-family:'Nunito Sans',Helvetica Neue,Helvetica,sans-serif;font-size:42px;line-height:48px;font-weight:normal;display:none;">
Say hello to<br>the Marcus app
</div>
<!-- Non-Outlook: animated assets -->
<!--[if !mso]!-->
<a href="https://www.marcus.com/us/en/resources/personal-finance/stick-to-your-financial-resolutions/?prd=pl&chl=em&schl=emm&lid=financialgoalsa" target="_blank">
<img class="noMo" alt="" src="images/Lending_Desktop.gif" width="352" style="border:none;display:block;">
</a>
<!--<![endif]-->
<!-- Outlook: static fallback -->
<!--[if mso]>
<a href="https://www.marcus.com/us/en/resources/personal-finance/stick-to-your-financial-resolutions/?prd=pl&chl=em&schl=emm&lid=financialgoalsa" target="_blank">
<img class="noMo" alt="" src="images/Lending_Desktop_stat.jpg" width="640" style="border:none;display:block;">
</a>
<![endif]-->
<!-- Non-Outlook: mobile animated asset -->
<!--[if !mso]!-->
<a href="https://www.marcus.com/us/en/resources/personal-finance/stick-to-your-financial-resolutions/?prd=pl&chl=em&schl=emm&lid=financialgoalsa" target="_blank">
<img class="hideShow" alt="" src="images/Lending_Mobile.gif" width="300" style="border:none;display:none;width:300px">
</a>
<!--<![endif]-->
<!-- Outlook: mobile static (kept hidden via .hideShow) -->
<!--[if mso]>
<a href="https://www.marcus.com/us/en/resources/personal-finance/stick-to-your-financial-resolutions/?prd=pl&chl=em&schl=emm&lid=financialgoalsa" target="_blank">
<img class="hideShow" alt="" src="images/Lending_Mobile_stat.jpg" width="1" height="1" style="border:none;display:none;">
</a>
<![endif]-->
</td>4) Outlook-Safe CTA Button (VML + HTML Fallback)
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
href="http://" style="height:54px;v-text-anchor:middle;width:220px;" arcsize="12%"
stroke="f" fillcolor="#22263f">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://"
style="background-color:#22263f;border-radius:6px;color:#ffffff;display:inline-block;
font-family:sans-serif;font-size:15px;line-height:54px;text-align:center;
text-decoration:none;width:220px;-webkit-text-size-adjust:none;">
Download now
</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>5) Responsive Feature Section (2-Column Desktop, Stacked Mobile)
<!-- Desktop: two-column layout -->
<td align="center" bgcolor="#22263f" class="noMo" style="padding:47px 47px 0px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top">
<table width="100%" role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" align="left" style="padding:2px 5px; width:20px;">
<img src="images/Profile_system.png" width="40" height="28" alt="">
</td>
<td valign="middle" style="color:#ffffff;font-family:'Nunito Sans',Helvetica Neue,Helvetica,sans-serif;font-size:14px;line-height:20px;">
Log in quickly and securely with<br>fingerprint or facial recognition
</td>
</tr>
<tr><td height="28"> </td></tr>
<tr>
<td valign="middle" align="left" style="padding:4px 5px; width:20px;">
<img src="images/Money_system.png" width="40" height="28" alt="">
</td>
<td valign="middle" style="color:#ffffff;font-family:'Nunito Sans',Helvetica Neue,Helvetica,sans-serif;font-size:14px;line-height:20px;">
Make payments and track<br>your payment history
</td>
</tr>
</table>
</td>
<td align="left" valign="top">
<img src="images/Phone_dark.png" style="display:block;height:auto;padding:0px 10px 0px 30px;" width="235" alt="">
</td>
</tr>
</table>
</td>
<!-- Mobile: stacked layout revealed via .hideShow + media query -->
<td align="center" bgcolor="#22263f" class="hideShow" style="display:none">
<table width="100%" role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" width="40" align="left" style="padding:4px 5px;">
<img src="images/Profile_system.png" width="40" style="padding-right:20px;" alt="">
</td>
<td style="color:#ffffff;font-family:'Nunito Sans',Helvetica Neue,Helvetica,sans-serif;font-size:14px;line-height:20px;">
Log in quickly and securely with<br>fingerprint or facial recognition
</td>
</tr>
<tr><td height="28"> </td></tr>
<tr>
<td align="center" colspan="2">
<img src="images/Phone_dark.png" style="display:block;height:auto;" width="235" alt="">
</td>
</tr>
</table>
</td>Code Notes
- Layout: Table-based, 600px container
- Responsive: Single-column structure
- Compatibility: Built for major email clients
- Sanitization: Links/tokens generalized