Solved

responsive email design

Posted on 2014-01-29
11
201 Views
Last Modified: 2014-02-02
I got this template for a responsive email and change it around a little bit.
http://www.oorah.org/email/oorahspirit.html

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?
thanks!
0
Comment
Question by:rivkamak
  • 4
  • 3
  • 3
  • +1
11 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39820893
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:  http://www.campaignmonitor.com/css/

Cd&
0
 
LVL 50

Expert Comment

by:Steve Bink
ID: 39820938
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.
0
 
LVL 33

Expert Comment

by:Slick812
ID: 39821259
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="http://www.oorah.org/email/images/spacerv.png" 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.
0
 

Author Comment

by:rivkamak
ID: 39821872
we pulled this template from our email provider. They are the ones who set up the page like this.
0
 
LVL 33

Expert Comment

by:Slick812
ID: 39822089
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..
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

by:rivkamak
ID: 39822135
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?
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 250 total points
ID: 39824218
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.

Cd&
0
 
LVL 33

Expert Comment

by:Slick812
ID: 39824404
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 -
        http://www.campaignmonitor.com/css/
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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39824468
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.

Cd&
0
 
LVL 33

Accepted Solution

by:
Slick812 earned 250 total points
ID: 39826896
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.-
<!DOCTYPE HTML>
<html><head><title>email</title>
<style>
body{height:100%;margin:0;}
.sizer{max-width:680px;min-width:310px;padding-top:14px;margin:auto auto;
background:#fff url(top1.gif) repeat-x 0% 0%;}
.rgtdiv{display:inline-block;width:62%;font-family:sans-serif;padding-top:1em;font-size:15px;color:#574a26;}
.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;}
.padr{padding-right:8%;}
.imgmar{margin:20px 13px 4px 7px;}
.bb td{border-bottom:1px solid black !important;}
</style></head><body>
<div style="background:#e1e1e1;">
<div class="sizer">
<div style="background:#000;padding-top:10px;">
<img src="http://www.oorah.org/email/images/oorahspiritlogo5.gif" alt="su" style="width:30%;min-width:90px;margin-left:2%;margin-right:10%;vertical-align:middle;" />
<a href="http://www.oorahspirit.org/news/" style="color:#f3f2f0;">Torah</a> &nbsp;  
<a href="http://www.oorahspirit.org/recipes/" style="color:#f3f2f0;">Recipe</a> &nbsp; 
<a href="http://www.oorahspirit.org/funny-stuff/" style="color:#f3f2f0;">Humor</a> &nbsp;  
<a href="http://www.oorahspirit.org/multimedia/" style="color:#f3f2f0;">Video</a> &nbsp;  
<a href="http://www.oorahspirit.org/torah-thought/" style="color:#f3f2f0;">Ask&nbsp;the&nbsp;Rabbi</a>
</div>
<div style="background:#ffbe0b;">
<img src="http://www.oorah.org/email/images/oorahspiritimg.jpg" 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>
</div>
<img src="http://www.oorah.org/email/images/torahspirit.jpg" 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="http://www.oorah.org/email/images/ravspirit.jpg" 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>
</div>
<table style="background:#005995;width:100%;color:#fff;font-family:sans-serif;"><tr class="bb">
<td><img src="http://www.oorah.org/email/images/recipespirit.png" 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="http://www.oorah.org/email/images/jokespirit.png" 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="http://www.oorah.org/email/images/shspirit.png" 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>
</div>
</div>
</body></html>

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.
0
 

Author Closing Comment

by:rivkamak
ID: 39828729
Thank you for your help.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Recently, we decided that in order to stay competitive in today's IT world, we were going to have to develop and deploy a mobile app for our users and do it quickly. We felt that we were already behind the curve. Users of technology today are mov…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now