Design / Development / Testing

1. Modern Emails
Design / Development / Testing

2. Mobile First!

3. STATISTIC

4. Over half of smartphone users
grab their smatrphone
immediately after waking up

6. Email is the most popular
activity on smartphones
among users ages 18-44.

7. 91% of customers check
their email at least once
per day.

8. According to a study by Mckinsey email
is almost 40 times better at acquiring new
customers than Facebook and Twitter!

9. DESIGN

10. Scalable graphics

11. Single column design

12. Not all mobile clients support @media queries

13. Design for the upper left “mobile fold”

14. Create large touch targets.

15. DEVELOPMENT

16. Frameworks
Ink - responsive templates for email and a responsive email framework.
Email Blueprint - collection of HTML email templates from MailChimp
Antwort - responsive email layouts
Salted - simple responisve email template
Monstra Emails - another simple responisve email template

17. Ink Framework
Email anywhere. On any device.

18. Getting Started with Ink
Download Ink
http://zurb.com/ink/download.php
Read Ink Documentation
http://zurb.com/ink/docs.php

19. Develop Emails with Ink
Create nice template in your favorite editor.
Inline styles with Ink inliner.
Repeat.

20. Automate with Grunt JS
Make email development process better and faster

21. Project structure
Gruntfile.js
package.json
static/
emails/
less/
css/
img/
views/
emails/
source/
compiled/

22. Building process - Algorithm
1. Compiling LESS into CSS
2. Minify CSS
3. Inline CSS
4. Minify HTML

23. Grunt JS Plugins
grunt-contrib-less - Compile LESS files to CSS.
grunt-contrib-cssmin - Compress CSS files.
grunt-contrib-htmlmin - Minify HTML
grunt-email-builder - Combine Html and Css into an email

24. Testing

25. Email Client Market Share
http://emailclientmarketshare.com/

26. Tools & Links
PutsMail
MailChimp
Litmus
Email on Acid

27. Modern Emails
Sergey Romanenko
Follow me @AwilumIT