RETROFITTING
EMAIL & LANDING PAGES FOR MOBILE
#modevux
Hello!
Lynn Morehouse
Vocus - Director of UI Design
Scenario:
Email and LandingPagesshould
be mobilefriendly.
See Internet for reasons why.
Keep it simple.
Desktop,Tablet,& Mobile.
Scenario
Example
Email design.
Scenario
Thinklayout.
Notdesigncomp.
Scenario
1 column.
MobileFriendly.
Scenario
Scenario
Solution:
Use Media Queries to detect what
deviceyou are using. By width
@mediaonly screenand
(max-width:599px)
Solution
(max-width:599px)
[id=container]
width:100%;
box-sizing:border-box;
img
height:auto;
max-width:100%;
[class=column]
width:...
Solution
Before.
Solution
After.
Success!
MobileFriendly.
Solution
What abouta
LandingPage?
Solution
Still just a
Layout.
Solution
Mobile
is simple.
Solution
Solution
Tablet?
Solution
@mediaonly screenand
(max-width:959px)
Solution
(max-width:959px)
[id=container]
width:100%;
box-sizing:border-box;
img
height:auto;
max-width:100%;
[class=columnsF,G,H,I...
Solution
@mediaonly screenand
(max-width:480px)
Solution
(max-width:480px)
[class=column]
width:100%;
height:auto;
display:block;
clear:both;
Solution
Solution
Thanks!
Find me at:
@lynnmorehouse
lmorehouse@vocus.com
vocus.com
#modevux
Upcoming SlideShare
Loading in...5
×

Retrofitting Email & Landing Pages for Mobile

138

Published on

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

Published in: Internet, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
138
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Retrofitting Email & Landing Pages for Mobile

  1. 1. RETROFITTING EMAIL & LANDING PAGES FOR MOBILE #modevux
  2. 2. Hello! Lynn Morehouse Vocus - Director of UI Design
  3. 3. Scenario: Email and LandingPagesshould be mobilefriendly. See Internet for reasons why.
  4. 4. Keep it simple. Desktop,Tablet,& Mobile. Scenario
  5. 5. Example Email design. Scenario
  6. 6. Thinklayout. Notdesigncomp. Scenario
  7. 7. 1 column. MobileFriendly. Scenario
  8. 8. Scenario
  9. 9. Solution: Use Media Queries to detect what deviceyou are using. By width
  10. 10. @mediaonly screenand (max-width:599px) Solution
  11. 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. 12. Solution Before.
  13. 13. Solution After.
  14. 14. Success! MobileFriendly. Solution
  15. 15. What abouta LandingPage? Solution
  16. 16. Still just a Layout. Solution
  17. 17. Mobile is simple. Solution
  18. 18. Solution Tablet?
  19. 19. Solution
  20. 20. @mediaonly screenand (max-width:959px) Solution
  21. 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. 22. Solution
  23. 23. @mediaonly screenand (max-width:480px) Solution
  24. 24. (max-width:480px) [class=column] width:100%; height:auto; display:block; clear:both; Solution
  25. 25. Solution
  26. 26. Thanks! Find me at: @lynnmorehouse lmorehouse@vocus.com vocus.com #modevux
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×