: 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

@Sue6373160

Yes you can, but unless you have a massive passion for this don't bother. Imagine coding for IE5 and having to test that. It may be better to purchase a template for this kind of thing rather than doing your own bespoke solution.

Vote Up Vote Down

@Sent7350415

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.

Vote Up Vote Down

@Murray664

They sure can! Here's a template you can use to make responsive HTML email: zurb.com/ink/. Creating a HTML email from scratch requires a lot of knowledge about how email clients parse emails. This template makes sure that your email appears correctly on all email clients.

All you need to do is replace the contents of the file with your email and run this file through a script in your application that handles sending emails.

Vote Up Vote Down