Email is perceived as a dark art in the web design and development world. My presentation will dispel the myths of email development and uncover what's possible now. I'll review the tips and tricks I wish I knew when I started building emails and how to approach building them as a web designer/developer. I'll also go over innovative techniques (with examples!) to make your emails stand out in the inbox.
12. Top 10 Email Clients
(JUNE 2014)
!
1. Apple iPhone 25%
2. Gmail 14%
3. Outlook 13%
4. Apple iPad 12%
5. Apple Mail 8%
6. Yahoo! Mail 6%
7. Outlook.com 6%
8. Google Android 5%
9. Windows Live Mail 2%
10. Thunderbird 1%
36. <table>
<tr>
<td style=”#”>This is a headline<td>
</tr>
<tr>
<td style=”#”>This is a paragraph</td>
</tr>
<tr>
<img src=”example.jpg” class=”mobile”>
</tr>
</table>
Do this…
61. Responsive email support
iPhone native yes
iPad native yes
Android 2.1 native no
Android 2.2 native yes
Android 2.3 native yes
Android 4.x native yes
Gmail mobile apps no
Mailbox iOS app sorta
Yahoo! mobile apps no
Windows Mobile 7 no
Windows Mobile 7.5 yes
Windows Mobile 8 maybe
BlackBerry OS 6 yes
BlackBerry OS 7 yes
BlackBerry Z10 yes
Kindle Fire native yes
http://stylecampaign.com/blog/2012/10/responsive-email-support/
62. Responsive email classes
need to look like this…
*[class=“table”] {width: 100% !important;}
!
td[class=“table”] {width: 100% !important;}
96. Use either <!DOCTYPE>:
!
<!DOCTYPE html>
!
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
97. Use this for <meta> tags
!
<meta charset="utf-8">
<meta name="viewport" content="width=device-
width">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
98. Wrap web fonts in @media tag
!
@media screen {
!
@font-face {
font-family: 'proxima_nova_rgbold';
url('proximanova-bold-webfont.woff') format('woff'),
url('proximanova-bold-webfont.ttf')
format(‘truetype');
font-weight: normal;
font-style: normal;
}
!
}
99. Stack native font first…
!
!
font-family: Proxima Nova, ‘proxima_nova’,
Helvetica, sans-serif;
…for clients who don’t support them
100. Now let’s talk about
how to think like an
email hacker.
101. The best way to beat email is
to figure out how to target
individual email clients.
103. Gmail is the worst email
client when it comes to
email development. Why?
104. Gmail does not render
classes or id’s in the
<head> of emails
105. Gmail does render HTML
elements (such as h1, p, etc.),
but this solves nothing.
113. <!--[if mso]>
/* Insert HTML or CSS here */
<![endif]—>
!
!
<!--[if (IE)]>
/* Insert HTML or CSS here */
<![endif]-->
114. Outlook conditionals
!
lt = less than a specific version
gt = greater than a specific version
lte = less than or equal to a specific version
gte = greater than or equal to a specific version
115. Outlook version numbers
!
Outlook 2000 = 9
Outlook 2002 = 10
Outlook 2003 = 11
Outlook 2007 = 12
Outlook 2010 = 14
Outlook 2013 = 15
116. <!--[if mso 12]> = targets only Outlook 2007
<!--[if gte mso 12]> = targets Outlook 2007 and
above
<!--[if gt mso 12]> = targets above Outlook 2007
(Outlook 2010/2013)
<!--[if lte mso 12]> = targets Outlook 2007 and below
<!--[if lt mso 12]> = targets below Outlook 2007
(Outlook 2000/2002/2003)