responsive email design

I got this template for a responsive email and change it around a little bit.

I would like it to be responsive and show differently on phones.
Now, it doesn't recognize anything and just stays same layout on all devices.
any idea why and how I can make it work?
what's the best way to create responsive email anyway?
Who is Participating?

Improve company productivity with a Business Account.Sign Up

Slick812Connect With a Mentor Commented:
Had some time, so I looked at that HTML code, boy it's so so BAD code!  I had some page code, that I tried to translate to do your email page as something in the "Mobil" HTML5 zone.-
.sizer{max-width:680px;min-width:310px;padding-top:14px;margin:auto auto;
background:#fff url(top1.gif) repeat-x 0% 0%;}
.rgtdiv a{color:#f36c1d;font-style:italic}
.secdiv{font-size:22px;border-bottom:1px solid #ffbe0b;}
.trimg{width:27%; min-width:90px;margin:0.4em 2%;vertical-align:top;}
.imgmar{margin:20px 13px 4px 7px;}
.bb td{border-bottom:1px solid black !important;}
<div style="background:#e1e1e1;">
<div class="sizer">
<div style="background:#000;padding-top:10px;">
<img src="" alt="su" style="width:30%;min-width:90px;margin-left:2%;margin-right:10%;vertical-align:middle;" />
<a href="" style="color:#f3f2f0;">Torah</a> &nbsp;  
<a href="" style="color:#f3f2f0;">Recipe</a> &nbsp; 
<a href="" style="color:#f3f2f0;">Humor</a> &nbsp;  
<a href="" style="color:#f3f2f0;">Video</a> &nbsp;  
<a href="" style="color:#f3f2f0;">Ask&nbsp;the&nbsp;Rabbi</a>
<div style="background:#ffbe0b;">
<img src="" alt="su" style="width:37%; min-width:184px;margin:0.4em 2%;vertical-align:top;" />
<div style="display:inline-block;width:50%;min-width:17em;font-family:sans-serif;margin-left:6%;padding-top:1em;font-size:15px;color:#574a26;">
<span style="line-height:200%;">This Week's Mazel Tovs:</span><br />
Torah Thought for your Shabbos table<br />
Rabbi Chaim Mintz<br />
This Week's Recipe<br />
Mazel Tovs<br />
Jewish Jokes<br />
Improving your Speech</div>
<img src="" alt="su" class="trimg" />
<div class="rgtdiv">
<div class="secdiv">Torah Thought for your Shabbos table</div><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus fringilla aliquet convallis. Cras viverra, magna id facilisis sagittis, erat nisl adipiscing felis, 
vel malesuada odio magna et nibh. Etiam in nulla nec velit tempor tristique sed ac felis...
<br /><a href="#">Read More</a>
</div><br />
<img src="" alt="su" class="trimg" />
<div class="rgtdiv">
<div class="secdiv">Rabbi Chaim Mintz Live!</div><br />
Cras viverra, magna id facilisis sagittis, erat nisl adipiscing felis, vel malesuada odio magna et nibh. Nullam a tellus ac purus dapibus porta non vitae magna. 
In hac habitasse platea dictumst. Etiam in nulla nec velit tempor tristique sed ac felis...
<br /><a href="#">Read More</a>
<table style="background:#005995;width:100%;color:#fff;font-family:sans-serif;"><tr class="bb">
<td><img src="" alt="recipe" class="imgmar" /></td>
<td class="padr"><span style="font-size:150%;">This Week's Recipe</span><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus fringilla aliquet convallis. Cras viverra, magna id facilisis sagittis.... </td></tr>
<tr class="bb"><td><img src="" alt="joke" class="imgmar" /></td>
<td class="padr"><span style="font-size:150%;">Joke of the Week</span><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus fringilla aliquet convallis. Cras viverra, magna id facilisis sagittis.... </td></tr>
<tr><td><img src="" alt="Speech" class="imgmar" /></td>
<td class="padr"><span style="font-size:150%;">Improving your Speech</span><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus fringilla aliquet convallis. Cras viverra, magna id facilisis sagittis.... </td></tr></table>
<div style="background:#222;color:#fff;text-align:center;padding:1.5em;font-size:130%;">
Still more words to see here and there<br /> For to test and see how this looks</div>

Open in new window

This may not do much better, if any, in an email client, but it should do much better in a browser. This is not exactly like yours, no time for that. You need to get some better code for BROWSER display if you are doing to link out to a browser view. Hope you get some Ideas from this.
Every email client supports a different subset of CSS and HTML.  Some only support inline styling, and some do not allow any html.  On top of that user preferences may further complicate things.

Just getting email to render in multiple clients is a challenge, so getting it responsive across email clients and devices... good luck with that.

You may get some idea of how slim the odds of success are by looking at the support matrix here:

Steve BinkCommented:
I concur with COBOLdinosaur.  I'm going through this exact conversation with some of my account managers.  There is no 100% guaranteed method of styling an email such that it will look the same on all clients.  Between the different implementations and end-user behavior, it just won't happen.
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

greetings rivkamak, , I looked at your Email template at your web addy, and It's display seemed to be a good presentation, However when I looked at your source code (the DHTML) for that, NO WAY!, it was not good, by any standard, especially in today's mobil web world of HTML5 and CSS3. In your source there were over 90 <table> tags, you have tables within tables within tables, the use of HTML tables for page positioning is NOT GOOD!
I would suggest that you abandon this web page template entirely and use a more modern-Up-to-date CSS design without 90 <table> tags.
Also, there are <img> tags like this -
<img border="0" height="1" src="" style="display:block;" width="1" />
Wow this is so wrong these days, you should not be using images for positioning "Spacers", also on that line you have a <td> without a closing </td>, BAD HTML syntax!

there is BAD CSS like this -
table[class=main_table] { width: 320px !important; width:100% !important; }
This declares TWO DIFFERENT widths? ? AND you declare a width in the main_table <table> tag as width="630" . . Wow, so mixed up, not good.

The whole DHTML CSS design code needs to be completely re-done

You have defeated one of the main advantages of web page design, that is the ability to adjust somewhat to different device widths. I would suggest you try NOT defining a width for all elements, especially where it may do more harm than good. You can use <table> design elements, but NOT for page relation-arrangement, spacing, and single element page divisions. I would suggest that you use Smaller Images, as this - oorahspiritimg.jpg - could be smaller and still be effective. I can not see any vertical Alignment (as columns) in that template, that I would consider using a <table> for, much less over 50 <table> tags. You really should consider using the <div> with CSS properties as horizontal sections, and get rid of ALL unnecessary page elements like almost all of your <table> tags. You might consider using the CSS max-width:630px; and  min-width:300px; for a somewhat responsive design.
BUT, as has already been spoken of, the EMAIL clients (apps and online) have their own and sometimes different Display standards, SO SIMPLIFY your design, if possible.
rivkamakAuthor Commented:
we pulled this template from our email provider. They are the ones who set up the page like this.
OK, you say - "They are the ones who set up the page like this", , so what kind of help or suggestions from experts for "how I can make it work?", could you use if you are "stuck" with this template of a thousand <table>'s ? ?
Shouldn't you be looking at a different template they provide, or asking them your question about making it responsive?
I did see at first you say - "I got this template for a responsive email", , , SO, did the changes you made to it make it UN-responsive?  Or was it ever device-width responsive?  As I said before, there are way to many elements (as tables mostly) that have NON-CSS width settings, if you have 50 fixed widths of inner elements, how can it be responsive in email , , that can not use the -
<style>@media screen and (max-width: 610px)
responsive stuff??
It is possible to use CSS with width settings as a Percent  width:32%; which may could help in certain elements, I think that <table> can also use % width.
Anyway, I have no idea what you can change in that template, and what cannot be altered? So I can not have any suggestions except "Take Out ALL unnecessary text, images, blocks of display, that are not essential. Sometimes in Email Less is Better for alternate email clients..
rivkamakAuthor Commented:
the main question I have is maybe I am missing a specific tag or something I should have in the head to indicate something different for mobile?
COBOLdinosaurConnect With a Mentor Commented:
Let us be clear.  Whomever did the template is flat out lying if they claim it is responsive.  It is obsolete, non-standard trash that is not fit to be on a page, in an email or anywhere a professional will see it and assume that it is coming from a 10 year old kid.

I am at a loss to try and educate you about the "General" web tech using CSS for the new Responsive variations in a page display. In a "browser" web page you can use several CSS3 properties to give the "Browser" some instruction on what elements to change, and when to change them. But there is not a single setting, where the Browser can automatically change (widths) and rearrange horizontal to go to vertical arrangement by some magic analysis in the browser. However "IN EMAIL", whether laptop or mobil, these  CSS3 responsive properties are IGNORED for the most part, for good reasons.
The famous COBOLdinosaur gave this link -
which gives info that the emails do not do responsive (Thanks COBOLdinosaur, for that link, it was informative for me)

As To you asking - "maybe I am missing a specific tag or something I should have in the head", As far as I have ever seen or know, the answer is "No there is not a missing specific tag" that could be added. As I have tried to tell you, there are "TOO MANY" fixed width settings for tables, <td> and images to even remotely hope for even a small amount of responsive even if you could add a specific tag.
Please take this problem to your "email provider", since you can not know what tell us, so we can help you. You might consider changing your "email provider", however none of them can really provide the responsive in email, as available in browsers.

In many (maybe all) emails I get that are in "Display image presentation" of HTML (like yours), at the very top there is a "text" web link that says something like -
           "Trouble reading, View this email in Browser"
and when clicked in the email client, it opens a browser tab (notebook or mobil) that shows that email and hopefully is responsive. But your "thousands of tables email" will not be responsive even in a cell browser!

Just so you know, making a many element "Display image presentation" of HTML for browser that is successes fully responsive in cell phones is NOT EASY! ! That's why I said to simplify (remove elements) your email presentation, because the less structure arrangement needed, then there is less trouble to get something workable in many devices.
BTW, a large percentage of users block images in email; and there is a smaller group who also do not accept HTML.  If you do not include a straight text then they will not get anything from the email.

rivkamakAuthor Commented:
Thank you for your help.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.