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-fit 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 fixes to known issues emailsyall.com | @emailsyall Crowd Ox Instapaper Christie’s 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 fixes to known issues emailsyall.com | @emailsyall Yes, you will be coding. emailsyall.com | @emailsyall emailsyall.com | @emailsyall emailsyall.com | @emailsyall 1. Solving the Outlook scale-to-fit 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 289 KB 139KB compressed emailsyall.com | @emailsyall emailsyall.com | @emailsyall emailsyall.com | @emailsyall emailsyall.com | @emailsyall emailsyall.com | @emailsyall 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 specified 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 file ➢ 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 specific 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-fit ● 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 fix Add hover effects ● Interactive email ● Makes a big statement emailsyall.com | @emailsyall Slides available at: emailsyall.com/fiveeasyways 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 find me at » @pompeii79, @emailsyall » www.emailsyall.com » [email protected].