CODEWITHSUNDEEP
htmlcssemailresponsive-designhtml-email
solateor
solateor

Reputation: 71

td stacking without using css

Our CRM allows us to send automatic emails to our customers using their software. Things like purchase receipts and so forth. While they offer HTML editing of the emails, it's heavily restricted and we may not use any CSS.

As far as what their style guide does allow, it appears to be all HTML and some inline styling, for example:

<span style="color:#ffffff">white</span> 
<div style="color:#ffffff">
<img src="dickbutt.gif" style="width:30px;height:20px">

...are all OK according to the guide. However, no other CSS or CSS references are allowed, including:

<link rel="stylesheet" href="/stylesheet.css" type="text/css">

or

<style type="text/css">
@import "/stylesheet.css";
</style>

or

<style type="text/css">
body { color:green; }
</style>

To add insult to injury, and I should have included this above, everything above the <body> tag (and including the body tag itself) is stripped out upon saving the file in their in-software HTML editor. They have some kind of auto-code modification scripts that reference the "approved" code in their style guide, and strips what's left. So what am I left with? Not much at all. Basically from between opening <table> to the closing </table>. They even strip out </body> and </html>.

With the remaining code, I'm unable to use @media at all or allow any <td> stacking. So, are their any alternate ways of linking to a style sheet you know about? ...a method that will allow stacking without access to CSS? I'm basically looking for a way to make these emails responsive under the restrictions outlined above.

I uploaded the style guide to JSfiddle: https://jsfiddle.net/Lxfqus7f

Upvotes: 7

Views: 100

Answers (3)

Gortonington
Gortonington

Reputation: 3587

Using a style tag in the body may not be the best of things to use and may even induce vomiting in many web developers, but it IS a possibility to utilize in Email.

I would strongly recommend not to use it this way outside of cases like you have listed, and would recommend HEAVY testing across all clients as it can sometimes cause buggy results.

I would look to make your inline styling do most of the heavy lifting and just use the style tags in body for items that cannot be done any other way.

Below is some good resources on Responsive HTML email made to work on GMAIL APP (which strips the style tag almost completely) and should help give you a baseline on best way to create your emails.

Hybrid coding approach - http://labs.actionrocket.co/the-hybrid-coding-approach

Hybrid coding redux - http://labs.actionrocket.co/the-hybrid-coding-approach-2

Is Hybrid right option - http://labs.actionrocket.co/hybrid-is-the-answer-is-it-the-right-question

Upvotes: 0

JoePhillips
JoePhillips

Reputation: 721

Yes, yes 100 times yes. Everyone who has ever designed an email template has had the same complaints. Email design is Web design circa 1999. First off just forget CSS references just inline everything you can and do not bother with @media tags, forget they even exist.

Table Design
Think of a <table> as a spreadsheet, a <tr> as a table row, and a <td> as a table cell. Instead of "stacking" TDs try nesting tables. A new table can go inside a TD and in a sort of Matryoshka doll style fashion you can make any layout you want. 

<table>
    <tr>
      <td>
         <table>
           <tr>
               <td>1</td>
               <td>2</td>
           </tr>
           <tr>
               <td>3</td>
               <td>4</td>
           </tr>
         </table>
      </td>
      <td>5</td>
   </tr>
</table>

The above works fine.

Responsive emails
The words responsive and email do not normally go together. What email clients render is severely limited but there are ways to work around it. Like setting your Master Table's width to 100% and having two TDs on each side. Like this:

<table width="100%" cellspacing="0" cellpadding="0">
  <tr height="500px" valign="top">
    <td width="*" bgcolor="#00FFFF"> </td>
    <td width="550px" bgcolor="#FF0000"> <center><br><br> <H1>Body</h1> </center> </td> 
    <td width="*" bgcolor="#00FFFF"> </td>
  </tr>
</table>

Here are both examples in a JSfiddle.

http://jsfiddle.net/e8r9ky4x/

Upvotes: 1

C Bauer
C Bauer

Reputation: 5103

Looks like your style guide includes the use of some inline styles:

 <p>Our studio is <span style="color:purple">purple.</span></p>
     Define sections of text that require different HTML    <div>   
 <div style="color:#FC8301">
     <h3>This title.</h3>
     <p>This is sentence.</p>
 </div>

Since you're automatically generating emails anyway, why not just let this one slide and declare your styles in variables and use them where appropriate?

Are they stripping out all style tags? Could you just put a style hidden at the begginning of a TD?

<td><style>/*rules are for quitters!*/</style>Stuff</td>

Upvotes: 0

Related Questions