Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Email design


Published on

Slideshow for a talk that I presented to the Williams Randall design team on email design.

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

Email design

  1. 1. Email Design Fundamentals By Randy Oest
  2. 2. What We Will Cover 1. What is Email Design? 2. Where are Email Read? 3. How to Design Email
  3. 3. What is Email Design? Email was built for written communications.
  4. 4. What is Email Design? Email has evolved to allow styling and images.
  5. 5. What is Email Design? Email design is the process by which we use color, typography, and images to enhance a message.
  6. 6. What is Email Design? This process is challenging.
  7. 7. What is Email Design? So many clients for testing. AOL Mail Lotus Notes 7 Outlook 2007 Apple Mail 5 Lotus Notes 6.5 Outlook 2003 Apple Mail 6 Gmail Lotus Notes 8.5 Lotus Notes 8 Thunderbird Outlook 2002/ XP Outlook 2013 Outlook 2000 Outlook 2011 for Mac Outlook 2010 Yahoo!
  8. 8. What is Email Design? So many devices for testing. Android 2.3 & 4.0 iPad 2 iOS 7 Windows XP iPhone 5 iOS 6 BlackBerry Text & HTML Windows 7 iPhone 4S iOS 6 Symbian S60 iPad 2 iOS 6 Windows Phone 7.5 iPhone 5 iOS 7 iPhone 4S iOS 7 OS X Windows 8
  9. 9. What is Email Design? Each has its own rendering quirks, so we are challenged to design to the lowest common denominator.
  10. 10. Where are Email Read? 51% mobile
  11. 11. Where are Email Read? 31% of Americans use mobile as their primary method of accessing the Internet. Many are mobile-only.
  12. 12. Which is 
 Easier to Read?
  13. 13. How to Design Email Let’s get into the nitty-gritty.
  14. 14. How to Design Email Images should be used for illustration and decoration as often as you can.
  15. 15. How to Design Email Using images for typesetting creates a problem when the user isn’t shown the images.
  16. 16. Images This email uses images for all the text.
  17. 17. Images Many email clients don’t show images.
  18. 18. Images This email mixes text and images.
  19. 19. Images So a lot of the text is readable without images.
  20. 20. Images Using only 
 a header image.
  21. 21. How to Design Email Let’s talk about fonts.
  22. 22. How to Design Email For email, we are limited to Web safe fonts. These are fonts that are generally on every computer.
  23. 23. How to Design Email Web safe fonts Georgia Impact Verdana Tahoma, Geneva Helvetica, Arial Times New Roman Trebuchet MS
  24. 24. How to Design Email When designing using live text, you cannot have a background image behind the text.
  25. 25. How to Design Email What size should the email be?
  26. 26. How to Design Email 600px wide for desktop 320px* wide for mobile
  27. 27. How to Design Email Responsive layouts are about three things 1. Stacking 2. Font size 3. Images
  28. 28. How to Design Email Stacking
  29. 29. How to Design Email For fonts in responsive emails, consider the size of the font in both views. For mobile, you may want to increase the size slightly.
  30. 30. How to Design Email When including images in a responsive email, note that the same image will display in both views. So be careful with extremely short but wide images.
  31. 31. Links List of email client features: The Rise of the Mobile Only User: Places for email design inspiration: inspiration/