1. Reply All The value of responsive email REPLY ALL The value of responsive emails

2. Reply All The value of responsive email 2 DREW PARROCCINI Developer/ UI designer @aparroccini STATS: Web developer for 12 years.Focused on front-end technologies.From Pittsburgh, PA. ! Developed responsive emails for organizations such as Deloitte, Bryant University, and Assumption College. ! Backpacker, Rock Climber and extreme napper. About Me 3. Reply All The value of responsive email PROBLEMS WERE FACING EVOLVING TRENDS THE SOLUTION BUILDING HAPPY EMAILS 3 4. Reply All The value of responsive email 4 Our current form of email is created. 1980 1989 1996 2014 MCI Mail - First commercial internet service First mobile device can access the internet in Finland. 1.75 billion internet capable mobile devices. Problems were facing 5. Reply All The value of responsive email 5 Email was not built for this world. ! We have to evolve. ! Learn from the past SO MANY MOBILE DEVICES Problems were facing 6. Reply All The value of responsive email 6 The tech behind it hasnt changed. ! The medium to view it has. EMAIL IS 30 YEARS OLD NOW Problems were facing 7. Reply All The value of responsive email 7 47% of people view email on their phone. EMAIL IS 30 YEARS OLD NOW Problems were facing 8. Reply All The value of responsive email 8 Read email exclusively on their mobile device. 30% 91% 61% 80% 21% of users check email on their phones at least once a day Consumers read at least some email on their mobile device Of users will delete an email if it doesnt look good. Check Email on their Smart Phone before getting out of bed IS IT TIME TO RETHINK EMAIL? Evolving Trends Being able to reach your customers anywhere is a huge deal. ! Marketers are taking notice. Why not higher-ed? 9. Reply All The value of responsive email 9 47% Evolving Trends People that look at email on their phone. 80% Delete it if it sucks. 10. Reply All The value of responsive email 10 WHAT DO WE DO? Tell them to only open it on the PC. You Come up with a better solution Lazy Developer Kill all the clients. Every Designer Make it one big image. Possible psychopath Evolving Trends 11. Reply All The value of responsive email 11 RESPONSIVE EMAIL IS YOUR SOLUTION Solution CLEAR TYPECLEAR TYPE 12. Reply All The value of responsive email 12 A collection of techniques, such as media queries, uid grids, and uid images, which aim to provide the optimal viewing experience across various platforms. RE-SPON-SIVE DE-SIGN (NOUN) Solution 13. Reply All The value of responsive email 13 10% Solution Increase in click through rates across the board. 9% Increase in mobile opens. (Iphone users jumped to 17%) RESPONSIVE EMAILS MAKE PEOPLE HAPPY 14. Reply All The value of responsive email 14 PROBLEM SOLVED, RIGHT? Solution 15. Reply All The value of responsive email 15 WHAT DO I DO NOW? Solution this isnt a layout change or template switch, this is a different perspective on email. 16. Reply All The value of responsive email 16 Email is the worst thing to work with in the entire universe Mahatma Gandhi 17. Reply All The value of responsive email Amazon Kindle Fire Amazon Kindle Fire HD Android 2.2+ Apple iPhone Apple iPad Apple iPod Touch BlackBerry OS 6+ BlackBerry Playbook Microsoft Windows Phone 7.5 Palm Web OS 4.5 Android 2.1 Eclair BlackBerry OS 5 Microsoft Windows Mobile 6.1 Microsoft Windows Phone 7 Microsoft Windows Phone 8 Microsoft Surface Microsoft Outlook Exchange Gmail mobile app (all platforms) Yahoo! Mail mobile app (all platforms) 17 WHAT SUPPORTS THIS? Solution Yes! No :( 18. Reply All The value of responsive email 18 JAVASCRIPT CSS CSS JAVASCRIPT Not supported, any animation must be gifs VERY Limited support Must be inline Supported by all browsers. CSS 3 supported on all major browsers EMAIL WEBSITES Solution 19. Reply All The value of responsive email 19 Your basic HTML email is a giant table, just like websites in 1995. WHAT WERE DOING NOW. Building Happy Emails 20. Reply All The value of responsive email 20 Each cell is now its own table. WHAT WE SHOULD BE DOING Building Happy Emails table! oat: right; table! oat: right; table! oat: left; 21. Reply All The value of responsive email ADD YOUR MEDIA QUERIES Building Happy Emails 22. Reply All The value of responsive email 22 Building Happy Emails table! oat: right; table! oat: right; table! oat: left; table table 23. Reply All The value of responsive email 23 Building Happy Emails 24. Reply All The value of responsive email 24 HTML emails still suck. ! This stuff if hard. ! Were all in tho together. FINAL THOUGHTS Building Happy Emails 25. Reply All The value of responsive email 25 Conclusion Great starting point for making responsive email. A collection of patterns & modules for responsive emails HTTP://RESPONSIVEEMAILPATTERNS.COM/ Quickly create responsive HTML emails that work on any device & client. Even Outlook. HTTP://ZURB.COM/INK/ My sample emails, free to use! HTTPS://GITHUB.COM/APARROCCINI/ RESPONSIVE-EMAILS HTTP://HTMLEMAILBOILERPLATE.COM/ 26. Reply All The value of responsive email 26 THANKS FOR WATCHING Drew Parroccini | @aparroccini