Retrofitting Email & Landing Pages for Mobile

330 views

Published on

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

Published in: Internet, Technology, Business
  • Be the first to comment

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

×