5 Easy Ways to Zhuzh-Up a SFMC Basic Template Emailsyall.Com

emailsyall.com | @emailsyall

5 Easy Ways to Zhuzh-Up a SFMC Basic Template emailsyall.com | @emailsyall

Anne Tomlin Freelance email developer, Emails Y’all » 10+ years coding email » Founded Emails Y’all in October 2017 » Clients include Famous Footwear, Chipotle, and Fracture » Avid tweeter about email exclusively ⋄ @pompeii79 ⋄ @emailsyall emailsyall.com | @emailsyall

Agenda:

- Solving the Outlook scale-to-ﬁt retina-image problem - Changing the font used in Outlook - Vertically aligning columns - Adding a custom font - Creating hover effects

Using Content Builder, not Classic or Lightning emailsyall.com | @emailsyall

Why should you want to learn these? - The same email templates are used by many people and brands - Limited branding options - Few ways to stand out from other brands - Code of templates might not be up-to-date - Do not offer ﬁxes to known issues emailsyall.com | @emailsyall

Crowd Ox Instapaper Christie’s emailsyall.com | @emailsyall

Yes, you will be coding. emailsyall.com | @emailsyall emailsyall.com | @emailsyall emailsyall.com | @emailsyall

1. Solving the Outlook scale-to-ﬁt retina-image issue emailsyall.com | @emailsyall

Non-Retina Image

Retina Image emailsyall.com | @emailsyall

How to create retina images

Save at twice the size the image will be displayed in the email

1200px displayed at 600px = 2 times the pixel density emailsyall.com | @emailsyall

89 KB

2. Changing the font in Outlook emailsyall.com | @emailsyall

How many people have had Outlook change their font to Times New Roman when you’d never chosen it? emailsyall.com | @emailsyall

Times New Roman is the default font for Outlook. If you don’t specify a font, it will always use Times New Roman.

Even if a font is speciﬁed once at the top of the email, Outlook will ignore it. emailsyall.com | @emailsyall emailsyall.com | @emailsyall emailsyall.com | @emailsyall

3. Adding a custom font emailsyall.com | @emailsyall Web-Safe Fonts

Installed on every computer ➢ Arial ➢ Impact ➢ Arial Black ➢ Lucida ➢ Comic Sans ➢ Palatino ➢ Courier ➢ Tahoma ➢ Garamond ➢ Times ➢ Geneva ➢ Times New Roman ➢ Georgia ➢ Trebuchet MS ➢ Helvetica ➢ Verdana emailsyall.com | @emailsyall Custom/Web Fonts

➢ Supported in ○ Apple Mail, iOS Mail, Samsung Mail, Outlook for Mac, Outlook App (Android) ➢ Must be hosted somewhere ➢ Woff ﬁle ➢ Google Fonts ➢ Only Google Fonts that work in Gmail are Open Sans & Roboto ➢ 3 different ways to implement custom fonts emailsyall.com | @emailsyall emailsyall.com | @emailsyall emailsyall.com | @emailsyall

4. Vertically aligning columns emailsyall.com | @emailsyall emailsyall.com | @emailsyall

1. Locate item you want to change 2. Find valign=“top” 3. Locate/add a class to the container 4. Add class to style declarations in the head 5. Set class to vertical-align: middle/top/bottom emailsyall.com | @emailsyall emailsyall.com | @emailsyall

5. Creating hover effects emailsyall.com | @emailsyall

Interactive Email! emailsyall.com | @emailsyall emailsyall.com | @emailsyall

Change button color on hover

SFMC provides button class buttonblock

.buttonblock a:hover { background-color: #f58220 !important; border-color: #f58220 !important; } emailsyall.com | @emailsyall

Change text color and underline on hover

For all links: a:hover {color: #f58220 !important; text-decoration: underline !important}

For one speciﬁc link, add a class:

.hoverclass:hover {color: #f58220 !important; text-decoration: underline !important} emailsyall.com | @emailsyall emailsyall.com | @emailsyall

WRAP UP

Fixes for known SFMC template issues ● Outlook scale-to-ﬁt ● Vertical alignment on columns Add a Google font ● Not supported everywhere, but nice for those that can see it ● Remember to add !important to the Outlook font ﬁx Add hover effects ● Interactive email ● Makes a big statement emailsyall.com | @emailsyall

Slides available at: emailsyall.com/ﬁveeasyways emailsyall.com | @emailsyall

NEXT TIME: Make your email accessible Swap images for mobile Make buttons full width in mobile Create rounded buttons in Outlook emailsyall.com | @emailsyall

THANKS! Any questions? You can ﬁnd me at » @pompeii79, @emailsyall » www.emailsyall.com » [email protected]