Slide 1
Slide 1 text
Coding Mobile First Emails
THAT WORK EVERYWHERE
Chris Smith | @chrismith77 | #LitmusLive
Slide 2
Slide 2 text
Levels Of Everywhere
DEFINING THE
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
Weird Quirks
LEVEL 2
AOL Mail
Freenet.de
Gmail App IMAP
Outlook
Yahoo! Mail
2
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
Mobile First Development?
WHAT IS
Slide 7
Slide 7 text
A Development approach that
prioritizes the rendering of
the mobile layout before the
desktop
Slide 8
Slide 8 text
#LitmusLive | @chrismith77
With A Fluid Structure
BUILD
…
hybrid/fluid code
Slide 9
Slide 9 text
#LitmusLive | @chrismith77
Mobile Styles
INLINE
…
Slide 10
Slide 10 text
#LitmusLive | @chrismith77
Desktop Styles
EMBED
.class { … }
Slide 11
Slide 11 text
#LitmusLive | @chrismith77
Media Queries
RESET MOBILE
@media { … }
Slide 12
Slide 12 text
#LitmusLive | @chrismith77
!important
AVOID
.class { … !important; }
@media { … !important; }
Slide 13
Slide 13 text
Coding Mobile First?
WHY SPEND TIME
Slide 14
Slide 14 text
#LitmusLive | @chrismith77
Of Gmail IMAP
AKA GANGA (Gmail App with a Non Gmail Account)
BECAUSE
.class { … }
Slide 15
Slide 15 text
#LitmusLive | @chrismith77
Yahoo On Android
AND…
.class { … }
Slide 16
Slide 16 text
27%
June 2018
Market Share
GMAIL
Slide 17
Slide 17 text
Changing Font Sizes
FONT
1 2 3
Slide 18
Slide 18 text
What We’re Solving
FONT – SIZE CHANGE
1 2 3
Slide 19
Slide 19 text
#LitmusLive | @chrismith77
FONT – SIZE CHANGE
HTML Structure
…
…
Slide 20
Slide 20 text
#LitmusLive | @chrismith77
FONT – SIZE CHANGE
HTML Structure
…
…
Slide 21
Slide 21 text
#LitmusLive | @chrismith77
Desktop Styles
FONT – SIZE CHANGE
.headline {
font-size: 55px;
}
.text {
font-size: 22px;
}
… styles cont.
Slide 22
Slide 22 text
#LitmusLive | @chrismith77
Media Query Reset
FONT – SIZE CHANGE
@media screen and (max-width: 599px) {
.headline {
font-size: 25px;
}
.text {
font-size: 16px;
}
}
Slide 23
Slide 23 text
Solved!
FONT – SIZE CHANGE
codepen.io/chrismith-me/pen/aaEaZE
Slide 24
Slide 24 text
Alignment Change
TEXT
1 2 3
Slide 25
Slide 25 text
What We’re Solving
TEXT – ALIGNMENT CHANGE
1 2 3
Slide 26
Slide 26 text
#LitmusLive | @chrismith77
TEXT – ALIGNMENT CHANGE
HTML Structure
…
…
Slide 27
Slide 27 text
#LitmusLive | @chrismith77
TEXT – ALIGNMENT CHANGE
HTML Structure
…
…
Slide 28
Slide 28 text
#LitmusLive | @chrismith77
Desktop Styles
TEXT – ALIGNMENT CHANGE
.text-wrapper {
text-align: center;
}
… styles cont.
Slide 29
Slide 29 text
#LitmusLive | @chrismith77
Media Query Reset
TEXT – ALIGNMENT CHANGE
@media screen and (max-width: 599px) {
.text-wrapper {
text-align: left;
}
}
Slide 30
Slide 30 text
Solved!
TEXT – ALIGNMENT CHANGE
codepen.io/chrismith-me/pen/bxaxeG
Slide 31
Slide 31 text
Side Padding Change
CONTAINER
1 2 3
Slide 32
Slide 32 text
What We’re Solving
CONTAINER – SIDE PADDING CHANGE
1 2 3
Slide 33
Slide 33 text
#LitmusLive | @chrismith77
CONTAINER - SIDE PADDING CHANGE
…
HTML Structure
Slide 34
Slide 34 text
#LitmusLive | @chrismith77
CONTAINER - SIDE PADDING CHANGE
…
HTML Structure
Slide 35
Slide 35 text
Solved!
CONTAINER – SIDE PADDING CHANGE
codepen.io/chrismith-me/pen/dqJjEm
Slide 36
Slide 36 text
Hybrid Coding
COLUMNS
1 2 3
Slide 37
Slide 37 text
Hybrid coding uses a mix of
fluid tables and elements
that are constrained on
desktop with max-width and
MSO conditional comments
Slide 38
Slide 38 text
What We’re Solving
COLUMNS – HYBRID CODING
1 2 3
Slide 39
Slide 39 text
#LitmusLive | @chrismith77
HYBRID
...
...
HTML Structure
Slide 40
Slide 40 text
#LitmusLive | @chrismith77
HYBRID
...
...
HTML Structure
Slide 41
Slide 41 text
#LitmusLive | @chrismith77
HYBRID
![]()
Fluid Image
Slide 42
Slide 42 text
#LitmusLive | @chrismith77
Global Wrapper Styles
HYBRID
.stack-wrapper {
font-size: 0;
text-align: center;
}
… styles cont.
Slide 43
Slide 43 text
#LitmusLive | @chrismith77
Global Column Styles
HYBRID
.stack-wrapper .column {
display: inline-block;
vertical-align: top;
width: 100%;
}
… styles cont.
Slide 44
Slide 44 text
#LitmusLive | @chrismith77
Desktop Styles
HYBRID
.three-column .column {
margin: 0 10px;
max-width: 170px;
}
… styles cont.
Slide 45
Slide 45 text
#LitmusLive | @chrismith77
Media Query Reset
HYBRID
@media screen and (max-width: 599px) {
.three-column .column {
margin: 0;
max-width: 100%;
}
}
Slide 46
Slide 46 text
#LitmusLive | @chrismith77
MSO Margin Reset
HYBRID
Slide 47
Slide 47 text
#LitmusLive | @chrismith77
MSO Image Reset
HYBRID
.column img {
width: 170px !important;
}
Slide 48
Slide 48 text
Solved!
COLUMNS – HYBRID CODING
codepen.io/chrismith-me/pen/MqrBOW
Slide 49
Slide 49 text
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!
Slide 50
Slide 50 text
Thank You!
[email protected] | @chrismith77 | #LitmusLive
Let’s chat at Ask An Expert!