Can Email Be Responsive?

Love it or hate it, there’s no denying the popularity of HTML emails. And, like the web before it, the inbox has officially gone mobile—with over 50 percent of email opens occurring on mobile devices.

So can email really be responsive considering how Email HTML Suck?

Answer

So can email really be responsive

Simple answer to your question.. YES

HTML emails fall somewhat under the same rule of websites but usually they are harder to deal with and still rely on old dated code style using <table> tags. There is a great article by Web Design Tuts that I wish was around when I started doing HTML emails.

A little about the tutorial is it discusses how to create a responsive email and one important note when creating HTML emails is the CSS must be inline at the end. It does discuss how to target CSS for Yahoo with body[yahoo] .class {} and they do reference Tina Ye’s article on “Responsive HTML Emails: a Different Strategy“.

Since Webdesign Tuts’s article doesn’t go into much detail about Tina’s article I would recommend you read on it because she goes into the mobile first design method and shows how to design for Lotus 8, Outlook 00-03, Outlook 2007+, and Apple:

Lotus Notes 8 & Outlook 2000-2003

 <!--[if IE]>
  <table width="540" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
<![endif]-->
[EMAIL BODY HERE]
<!--[if IE]>
      </td>
    </tr>
  </table>
<![endif]-->

Outlook 2007+

<!--[if (gte mso 9)|(IE)]>
  <table width="540" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
<![endif]-->
[EMAIL BODY HERE]
<!--[if (gte mso 9)|(IE)]>
      </td>
    </tr>
  </table>
<![endif]-->

Apple Mail

@media only screen and (min-device-width: 541px) {
  .content {
    width: 540px !important;
  }
}

If you do a Google search for responsive email templates there is an article it called “32 Responsive Email Templates for Your Small Business” by Mashable.
It does discuss free and paid templates for your emails and it does go into Zurb which I would recommend if you are using Foundation for web design.

Attribution
Source : Link , Question Author : Riad Kanane , Answer Author : DᴀʀᴛʜVᴀᴅᴇʀ

Leave a Comment