The document discusses the need for responsive email design given the evolution of email usage. Email was created over 30 years ago and was not designed for modern devices and trends, with nearly half of all users now accessing email primarily on mobile devices. The solution proposed is responsive email design using techniques like media queries and fluid grids to provide an optimal experience across devices. While challenging to implement, responsive email can increase click-through and open rates. Resources are provided to help get started with responsive email design.

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 WE’RE 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 we’re 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 we’re facing

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. 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. 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. 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, fluid grids,
and fluid 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 isn’t 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
<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. 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. Reply All The value of responsive email
ADD YOUR MEDIA QUERIES
Building Happy Emails

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. 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.
!
We’re 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