Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
    
Wouldnt that depend on the email application, mostly the web email form would preempt your goal as it wraps around your HTML –  joojaa May 14 at 11:47
    
Check DEVTIPS on youtube. I am pretty sure there is a video about responsive Email. –  Komental May 14 at 11:47
    
I do like your question but at this time do you mind editing it to fit within the realm of "design" because this would possibly be better suited on SO in the sense of one would warrant this it is a code related question and not a design related question. –  Matt May 14 at 14:29
    
Isn't it just a matter of using % in tables? I already created a mailchimp template with only with % which made it perfect for every device.. –  rwzdoorn May 14 at 15:33

3 Answers 3

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.

share|improve this answer

They sure can! Here's a template you can use to make responsive HTML email: http://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.

share|improve this answer
1  
Please provide more information about the link you provided because at this time it is a link only answer and in the future if the site were to go down you might receive some downvotes. –  Matt May 14 at 14:22
    
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. –  Ilan May 14 at 14:39
1  
Edited the answer. –  Nagarjun May 14 at 14:44
    
Nice, really interesting (and well documented!) resource. –  user568458 May 14 at 15:07

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.