30 minute talk I gave at ModevUX (May 2014).

1. RETROFITTING
EMAIL & LANDING PAGES FOR MOBILE
#modevux

2. Hello!
Lynn Morehouse
Vocus - Director of UI Design

3. Scenario:
Email and LandingPagesshould
be mobilefriendly.
See Internet for reasons why.

4. Keep it simple.
Desktop,Tablet,& Mobile.
Scenario

5. Example
Email design.
Scenario

6. Thinklayout.
Notdesigncomp.
Scenario

7. 1 column.
MobileFriendly.
Scenario

8. Scenario

9. Solution:
Use Media Queries to detect what
deviceyou are using. By width

10. @mediaonly screenand
(max-width:599px)
Solution

11. (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

12. Solution
Before.

13. Solution
After.

14. Success!
MobileFriendly.
Solution

15. What abouta
LandingPage?
Solution

16. Still just a
Layout.
Solution

17. Mobile
is simple.
Solution

18. Solution
Tablet?

19. Solution

20. @mediaonly screenand
(max-width:959px)
Solution

21. (max-width:959px)
[id=container]
width:100%;
box-sizing:border-box;
img
height:auto;
max-width:100%;
[class=columnsF,G,H,I]
width:50%;
Solution

22. Solution

23. @mediaonly screenand
(max-width:480px)
Solution

24. (max-width:480px)
[class=column]
width:100%;
height:auto;
display:block;
clear:both;
Solution

25. Solution

26. Thanks!
Find me at:
@lynnmorehouse
lmorehouse@vocus.com
vocus.com
#modevux