Case study · Enterprise experience
Production emails for Bank of America’s home lending, home equity and Merrill investing programs, developed through enterprise email development work at Tamman Inc. These are the real files, running live on this page.
Bank of America is not a Sendright client and did not hire Sendright Marketing. These builds were developed through employment at Tamman Inc., and they are part of the enterprise experience Sendright’s technical foundation draws on. They are shown as portfolio copies, not live Bank of America communications.
Switch campaigns and versions, flip between the 550 px desktop layout and the 320 px mobile layout, outline each module and read its original source with line numbers. The code checks run on the production file in your browser.
Light mode shows the email as authored. Open the HTML file (opens in a new tab)
Select a module to outline it in the email and read how it’s built.
Static code checks, run in your browser on this file just now. They inspect the HTML. They are not rendering tests in Outlook, Gmail or Apple Mail.
An illustration of the manual review steps on a client project. Not results for this file.
[Fname] placeholder appear as written. Tracking links are disabled in the preview.Each email at its full height, as it renders with images: the same HTML at 550 px and at 320 px. Scroll inside a frame to read the whole message, disclosures included.
Investing with Merrill
An acquisition email for a Merrill Guided Investing bonus offer: an animated offer graphic with its own mobile cut, an offer code kept in live text, three benefits, a numbered how-to list and about 26 KB of regulated disclosures.
Home loans
A first-time homebuyer program email built twice: in English, and as a Spanish build with its own masthead, translated copy, lang="es" and translated screen-reader labels on the disclosures.
Home equity
A home equity line of credit email led by an animated kitchen-renovation hero. Version B removes the special-rate module, shortens the preheader and relabels the closing button, while the rest of the build stays identical.
Eight techniques taken straight from the production files, with the file and line each excerpt comes from. “…” marks where an excerpt is shortened.
The header image is a cell background for most clients. Desktop Outlook ignores CSS backgrounds, so an Outlook-only block draws the same image and a transparent VML rectangle, with the logo row floating in its text box.
Inspect in the lab: HELOC A<td background="https://images.em.bankofamerica.com/imgs/MIE/logos/00000_550x76_BG_D.jpg" style="background:url(…) center/cover; …">
<!--[if gte mso 9]>
<img src="…/00000_550x76_BG_D.jpg" width="550" height="76" alt="" border="0" style="display:block;"/>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:550px; height:76px; position:absolute; top:0; left:0; border:0; z-index:2">
<v:fill color="#FFFFFF" opacity="0%" style="z-index:1;"/>
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<div>
<![endif]-->
…logo row…
<!--[if gte mso 9]>
</div></v:textbox></v:fill></v:rect><![endif]-->
</td>Key graphics have a 550 px desktop cut and a 320 px mobile cut. The mobile copy is hidden by default, wrapped so desktop Outlook never sees it, and switched on below 767 px while the desktop copy is hidden. The whole email narrows to 320 px at the same breakpoint.
Inspect in the lab: HELOC A.mobile-only {display:none !important;}
@media only screen and (max-width:767px) { .main-table { width:320px !important; … } … }
<img src="…/05731_Hero_DT_550x654.gif" width="550" height="654" alt="Get fast and flexible access to funds…" … class="hide"/>
<!--[if !mso]><!-->
<div style="display:none; overflow:hidden; font-size:0; line-height:0; max-height:0; max-width:0; width:0;" class="mobile-only">
<img src="…/05731_Hero_M_320x568.gif" width="320" height="568" alt="Get fast and flexible access to funds…" …/>
</div>
<!--<![endif]-->Links carry Marketing Cloud variables for subcampaign, flight and creative codes, so each click reports against the right send. The values are filled in at send time; in this portfolio copy they appear as written.
Inspect in the lab: Homebuyer EN<a name="bofa_logo_H" href="https://www.bankofamerica.com/mortgage/?subCampCode=%%=v(@subcampaign_num)=%%&scsCampCode=%%=v(@subcampaign_num)=%%&FlightNum=%%=v(@flight_num)=%%&cm_mmc=CRE-HomeLoans-_-email-_-CA24EM00C0_bofa_logo-_-%%=v(@creative_code)=%%" target="_blank">The HELOC builds pull the Bank of America logo from a shared Content Builder block instead of hard-coding it, so a brand change updates every email that uses it. A second block reference sits commented out in the footer.
%%= ContentBlockByKey("Logo_BofA") =%%
…
<!-- %%=ContentBlockByKey("NH_Folder_Name")=%% -->Every footnote marker jumps to its disclosure, and every disclosure links back to the place it was cited. Each anchor has a spoken label, and the return link is invisible text that only screen readers announce.
Inspect in the lab: Homebuyer EN<!-- citation -->
…credit<a href="#footnote_num1" name="footnote_num1b" aria-label="footnote 1" style="color:#000000; text-decoration:none;"><strong style="color:#000000; font-weight:normal;">¹</strong></a></h2>
<!-- disclosure -->
<a name="footnote_num1" aria-label="footnote 1" style="color:#000000; text-decoration:none;"><strong style="color:#000000; font-weight:normal;">1</strong></a>
<!-- return link -->
<a href="#footnote_num1b" aria-label="back to content" style="color:#fff; text-decoration:none;"><strong style="color:#fff; font-weight:normal;"> </strong></a>The Spanish version declares its language for screen readers and translates the spoken labels on the disclosures, alongside its own masthead artwork and copy.
Inspect in the lab: Homebuyer ES<html lang="es" xml:lang="es" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
…
<a name="footnote_num1" aria-label="nota al pie 1" …>…</a>
…
<a href="#footnote_num1b" aria-label="volver al contenido" …>…</a>Live text uses the Connections brand face with Calibri and Arial behind it. Line height is restated for Outlook with mso-line-height-alt, and margins are written with a capital M, a long-standing workaround for Outlook.com stripping margin properties.
Inspect in the lab: Merrill offer<h1 style="font-family:'Connections', 'Calibri', Arial, Helvetica, sans-serif; font-size:38px; font-weight:normal; line-height:1.2; mso-line-height-alt:90%; Margin:0;" class="fsz28">Invest in your future without investing all your time</h1>
…
<ol style="Margin-top:1px; Margin-bottom:1px;">
<li style="font-family:'Connections', 'Calibri', Arial, Helvetica, sans-serif; font-size:16px; color:#000; line-height:1.5; mso-line-height-alt:120%; Margin-top:1px; Margin-bottom:1px;">Answer a few questions about your goal and risk tolerance.</li>The HELOC email shipped as two versions from one build. B drops the special-rate module and its icon, shortens the preheader and relabels the closing button from “See offer details” to “See HELOC details”. Header, hero, lists, links and the rest of the layout stay the same.
Inspect in the lab: HELOC B<!-- preheader -->
From start to finish, a HELOC is designed to handle all the costs associated with your next home renovation. Get started now with a special rate offer.
From start to finish, a HELOC is designed to handle all the costs associated with your next home renovation. Get started now.
<!-- offer module: in A only -->
<h2 …>Act now to take advantage of a special rate offer on a home equity line of credit<a href="#footnote_num1" …>¹</a></h2>
<!-- closing button -->
<img src="…/05731_CTA_SeeOfferDetails_280x44_2x.jpg" width="280" height="44" alt="See offer details" …/>
<img src="…/05731_CTA_SeeHELOCdetails_280x44_2x.jpg" width="280" height="44" alt="See HELOC details" …/>At Tamman Inc., the work meant building Bank of America marketing emails as production HTML for Salesforce Marketing Cloud. The files on this page show what that covered.
The HTML, copy, layout, image references, AMPscript and disclosures are as built. The Source view and code checks read each file with one change: a third-party page-monitoring script, picked up when the file was saved from its hosted “view online” page, is removed.
A label above each email, markers on each module row for the inspector, and a noindex tag. Where an email inserts the logo from a shared Content Builder block, the preview shows the logo image that block inserts. Nothing in these emails was redesigned or rebuilt.
Rendering in real email clients. These previews run in your web browser, and no Outlook, Gmail or Apple Mail results are claimed. Campaign performance figures aren’t available and aren’t claimed either.
Start a conversation
The same production discipline, applied to your emails, or to your clients’ emails under your agency’s name. Tell us what you’re working on.