The document discusses best practices for designing responsive emails, including: 1. Gathering content and sketching wireframes before designing. 2. Keeping designs simple with 1-2 columns and generous spacing for mobile. 3. Inline CSS is required because some email clients strip <style> tags. 4. Tables are recommended for layouts because Outlook has poor CSS support.

1. Email Responsive
also for Gmail App
Justin @ 2015 Aug

2. Why Email Responsive ?
轉換率！轉換率！轉換率！

3. Design with data
Calculated from 1.06 billion opens tracked by Litmus Email Analytics in July 2015

4. Design Process
1.Gather content
2.List elements on paper
3.Sketch wireframes
4.Mock-up design
5.Write the code
6.lnline CSS
7.Test in web browsers
8.Test with real email clients
9.Test and Test
10.Lift-off !!!

5. Let’s go with Email Design

6. Make a list
List the elements on some paper
Mark then up as h1,p ,button …etc
develop a hierarchy and source order
(good for mobile first approach)

7. Keep Things Simple
Use Just 1 or 2 columns if you can
Be generous with spacing
Complicated designs take times to test and debug

8. Consider how things will
look in the inbox

10. Meeting with PM and Design
http://mailchimp.com/resources/email-design-guide/

11. Building

13. inline your css
We need to do this because gmail strips
css from <style> tag.

14. Use tables
Use <table></table> because Outlook
has poor support for css based layouts

15. Attribute selectors
Use attribute selectors for any styles
contained in your media queries
to make sure Yahoo! ignores them.

16. Use !important
Use !important in your media quires
make sure the styles override any inline
styles.( mobile-specific)

17. The Ultimate Guide to CSS
https://www.campaignmonitor.com/css/

18. Media Query Support in
Email Clients
https://litmus.com/blog/understanding-media-queries-
in-html-email

19. Checklist
Check you have include alt text
Remove unused css
Optimize image
Check email with images turned-off
Check images and links have absolute paths

20. Testing!
http://mailchimp.com

21. Drag and drop to design page
Mailchimp: Features

22. upload zip files and online editor
Mailchimp: Features

23. http://goo.gl/8xZu1g
Mailchimp: Features

24. Campaigns record
Mailchimp: Features

25. Mailchimp: Features

26. Result?!

27. good for outlook (windows)

28. good for yahoo mail

29. good for yahoo mail(ios app)

30. good for gmail (web)

31. gmail (iphone client)

32. failure for gmail iOS app and need to scale size
scale size
normal size

33. Gmail app responsive

34. failure in use : align-left, align-right
example: use 2 columns layout

35. success: display:inline-block (div)

36. Reference

37. Email client market share
https://emailclientmarketshare.com/
Responsive Email resources:
http://responsiveemailresources.com/
Slide share:
https://www.slideshare.net/secret/bqAfYEmEzBf0jn
http://www.slideshare.net/benjystanton/responsive-html-emai
Media query issues in yahoo mail mobile email
https://www.campaignmonitor.com/blog/post/3457/media-query-issues-in-yahoo-mail-
mobile-email/
creating a centre responsive design without media queries
https://www.campaignmonitor.com/blog/post/4240/creating-a-centred-responsive-design-
without-media-queries