Coding Mobile First Emails That Work Everywhere

Coding Mobile First Emails THAT WORK EVERYWHERE Chris Smith |
@chrismith77 | #LitmusLive

Levels Of Everywhere DEFINING THE

The Top 10 LEVEL 1 #1 Apple iPhone #2 Gmail
#3 Yahoo! Mail #4 Apple iPad #5 Outlook #6 Apple Mail #7 Outlook.com #8 Samsung Mail #9 Google Android #10 Windows Live Mail 1

Weird Quirks LEVEL 2 AOL Mail Freenet.de Gmail App IMAP
Outlook Yahoo! Mail 2

Most Difficult LEVEL 3 Comcast GMX.de IBM Notes 9 Libero
Lotus Notes 8-8.5 Mail.ru Orange.fr T-Online.de Web.de 3

Mobile First Development? WHAT IS

A Development approach that prioritizes the rendering of the mobile
layout before the desktop

#LitmusLive | @chrismith77 With A Fluid Structure BUILD <td style="width:600px;">
… </td> <td> hybrid/fluid code </td>

#LitmusLive | @chrismith77 Mobile Styles INLINE <td attribute="…" style="…"> …
</td>

#LitmusLive | @chrismith77 Desktop Styles EMBED <head> <style> .class {
… } </style> </head>

#LitmusLive | @chrismith77 Media Queries RESET MOBILE <head> <style> @media
{ … } </style> </head>

#LitmusLive | @chrismith77 !important AVOID <head> <style> .class { …
!important; } </style> <style> @media { … !important; } </style> </head>

Coding Mobile First? WHY SPEND TIME

#LitmusLive | @chrismith77 Of Gmail IMAP AKA GANGA (Gmail App
with a Non Gmail Account) BECAUSE <style> .class { … } </style>

#LitmusLive | @chrismith77 Yahoo On Android AND… <head> <style> .class
{ … } </style> </head>

27% June 2018 Market Share GMAIL

Changing Font Sizes FONT 1 2 3

What We’re Solving FONT – SIZE CHANGE 1 2 3

#LitmusLive | @chrismith77 FONT – SIZE CHANGE <table> <tr> <td
style="font-size: 16px;"> <h1 style="font-size: 25px;"> <span class="headline"> … </span> </h1> <p class="text" style="…"> … </p> </td> HTML Structure

#LitmusLive | @chrismith77 Desktop Styles FONT – SIZE CHANGE <style>
.headline { font-size: 55px; } .text { font-size: 22px; } … styles cont.

#LitmusLive | @chrismith77 Media Query Reset FONT – SIZE CHANGE
@media screen and (max-width: 599px) { .headline { font-size: 25px; } .text { font-size: 16px; } }

Solved! FONT – SIZE CHANGE codepen.io/chrismith-me/pen/aaEaZE

Alignment Change TEXT 1 2 3

What We’re Solving TEXT – ALIGNMENT CHANGE 1 2 3

#LitmusLive | @chrismith77 TEXT – ALIGNMENT CHANGE <table> <tr> <td
class="text-wrapper" align="left"> <h1 style="…"> … </h1> <p style="…"> … </p> </td> </tr> HTML Structure

#LitmusLive | @chrismith77 Desktop Styles TEXT – ALIGNMENT CHANGE <style>
.text-wrapper { text-align: center; } … styles cont.

#LitmusLive | @chrismith77 Media Query Reset TEXT – ALIGNMENT CHANGE
@media screen and (max-width: 599px) { .text-wrapper { text-align: left; } }

Solved! TEXT – ALIGNMENT CHANGE codepen.io/chrismith-me/pen/bxaxeG

Side Padding Change CONTAINER 1 2 3

What We’re Solving CONTAINER – SIDE PADDING CHANGE 1 2
3

#LitmusLive | @chrismith77 CONTAINER - SIDE PADDING CHANGE <table width="100%">
<tr> <td align="center" style="padding: 0 20px;"> <table> <tr> <td style="width: 440px;"> … </td> </tr> </table> HTML Structure

Solved! CONTAINER – SIDE PADDING CHANGE codepen.io/chrismith-me/pen/dqJjEm

Hybrid Coding COLUMNS 1 2 3

Hybrid coding uses a mix of fluid tables and elements
that are constrained on desktop with max-width and MSO conditional comments

What We’re Solving COLUMNS – HYBRID CODING 1 2 3

#LitmusLive | @chrismith77 HYBRID <table class="content-block-class"> <tr> <td class="stack-wrapper">  <div class="column"> ... </div>  <div class="column"> ... </div>  HTML Structure

#LitmusLive | @chrismith77 HYBRID <img width="170" style="width: 100%;"> Fluid Image

#LitmusLive | @chrismith77 Global Wrapper Styles HYBRID <style> .stack-wrapper {
font-size: 0; text-align: center; } … styles cont.

#LitmusLive | @chrismith77 Global Column Styles HYBRID .stack-wrapper .column {
display: inline-block; vertical-align: top; width: 100%; } … styles cont.

#LitmusLive | @chrismith77 Desktop Styles HYBRID .three-column .column { margin:
0 10px; max-width: 170px; } … styles cont.

#LitmusLive | @chrismith77 Media Query Reset HYBRID @media screen and
(max-width: 599px) { .three-column .column { margin: 0; max-width: 100%; } }

#LitmusLive | @chrismith77 MSO Margin Reset HYBRID <!--[if true]> <style>
.column { margin: 0; } … styles cont.

#LitmusLive | @chrismith77 MSO Image Reset HYBRID .column img {
width: 170px !important; }

Solved! COLUMNS – HYBRID CODING codepen.io/chrismith-me/pen/MqrBOW

Startup Tips MOBILE FIRST 1 2 3 4 5 Use
analytics to help choose the right technique Multi-Column layouts still benefit from hybrid code Avoid the use of !important whenever possible Work with designers to standardize elements Don’t overdo it!

Thank You! csmith@degdigital.com | @chrismith77 | #LitmusLive Let’s chat at
Ask An Expert!

Coding Mobile First Emails That Work Everywhere

Coding Mobile First Emails That Work Everywhere

More Decks by Chris Smith

Other Decks in Programming

Featured

Transcript