Upload
lynnmorehouse
View
123
Download
0
Embed Size (px)
DESCRIPTION
30 minute talk I gave at ModevUX (May 2014).
Citation preview
RETROFITTINGEMAIL & LANDING PAGES FOR MOBILE
#modevux
Hello!
Lynn Morehouse
Vocus - Director of UI Design
Scenario:Email and Landing Pages should
be mobile friendly.
See Internet for reasons why.
Keep it simple.
Desktop, Tablet, & Mobile.
Scenario
Example
Email design.
Scenario
Think layout.Not design comp.
Scenario
1 column.Mobile Friendly.
Scenario
Scenario
Solution:Use Media Queries to detect what
device you are using. By width
@media only screen and
(max-width: 599px)
Solution
(max-width: 599px)
[id=container]
width: 100%;
box-sizing: border-box;
img
height: auto;
max-width: 100%;
[class=column]
width: 100%;
height: auto;
display: block;
clear: both;
Solution
Solution
Before.
Solution
After.
Success!Mobile Friendly.
Solution
What about a
Landing Page?
Solution
Still just a
Layout.
Solution
Mobile
is simple.
Solution
Solution
Tablet?
Solution
@media only screen and
(max-width: 959px)
Solution
(max-width: 959px)
[id=container]
width: 100%;
box-sizing: border-box;
img
height: auto;
max-width: 100%;
[class=columns F, G, H, I ]
width: 50%;
Solution
Solution
@media only screen and
(max-width: 480px)
Solution
(max-width: 480px)
[class=column]
width: 100%;
height: auto;
display: block;
clear: both;
Solution
Solution