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.

Reply All: Responsive Emails

898 views

Published on

Rresponsive emails and their value.

Published in: Technology
  • Be the first to comment

Reply All: Responsive Emails

  1. 1. Reply All The value of responsive email REPLY ALL The value of responsive emails
  2. 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. 3. Reply All The value of responsive email PROBLEMS WE’RE FACING EVOLVING TRENDS THE SOLUTION BUILDING HAPPY EMAILS 3
  4. 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 we’re facing
  5. 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 we’re facing
  6. 6. Reply All The value of responsive email 6 The tech behind it hasn’t changed. ! The medium to view it has. EMAIL IS 30 YEARS OLD NOW Problems we’re facing
  7. 7. Reply All The value of responsive email 7 47% of people view email on their phone. EMAIL IS 30 YEARS OLD NOW Problems we’re facing
  8. 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 doesn’t 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. 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. 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. 11. Reply All The value of responsive email 11 RESPONSIVE EMAIL IS YOUR SOLUTION Solution CLEAR TYPECLEAR TYPE
  12. 12. Reply All The value of responsive email 12 A collection of techniques, such as media queries, fluid grids, and fluid images, which aim to provide the optimal viewing experience across various platforms. RE-SPON-SIVE DE-SIGN (NOUN) Solution
  13. 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. 14. Reply All The value of responsive email 14 PROBLEM SOLVED, RIGHT? Solution
  15. 15. Reply All The value of responsive email 15 WHAT DO I DO NOW? Solution this isn’t a layout change or template switch, this is a different perspective on email.
  16. 16. Reply All The value of responsive email 16 “Email is the worst thing to work with in the entire universe” Mahatma Gandhi
  17. 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. 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. 19. Reply All The value of responsive email <td> 19 Your basic HTML email is a giant table, just like websites in 1995. WHAT WE’RE DOING NOW. Building Happy Emails <td> <td> <td> <td> <td> <tr>
  20. 20. Reply All The value of responsive email <td> 20 Each “cell” is now its own table. WHAT WE SHOULD BE DOING Building Happy Emails table! float: right; <tr> <td> <td> table! float: right; table! float: left;
  21. 21. Reply All The value of responsive email ADD YOUR MEDIA QUERIES Building Happy Emails
  22. 22. Reply All The value of responsive email <td> 22 Building Happy Emails table! float: right; <tr> <td> <td> table! float: right; table! float: left; table table <td> <td>
  23. 23. Reply All The value of responsive email 23 Building Happy Emails
  24. 24. Reply All The value of responsive email 24 HTML emails still suck. ! This stuff if hard. ! We’re all in tho together. FINAL THOUGHTS Building Happy Emails
  25. 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. 26. Reply All The value of responsive email 26 THANKS FOR WATCHING Drew Parroccini | @aparroccini

×