I am starting a 'business push' campaign and would like to fire out a few very simple HTML emails, something with a basic bit of branding to catch the recipients eye. I have a good knowledge HTML and CSS and understand the fundamental rules of 'designing like its 1997' when it comes to HTML email. However, I am adding very basic code, in this case a table, into my email window, firing it off to myself to open, only to find there is nothing there, besides completely un-rendrered HTML.
Below is the code I am adding
<table style="width:300px">
<tr>
<td>Hello</td>
<td>is it me</td>
<td>you're looking for</td>
</tr>
<tr>
<td>Nightfever</td>
<td>Nightfever</td>
<td></td>
</tr>
</table>
Could any one please help me with this a little.
Any tips would be really appreciated.
Thanks in advance.
If you're simply pasting HTML code in to a new email window then it treats it as plain text so you will see the code you typed.
HTML emails have to be "processed" before sending in order to receive the design. A service such as Active Campaign will process your code for you and let you see the HTML email.
There are also a number of free templates you can look at from tutorials, boilerplates, Mailchimp and Campaign Monitor to name a few that you can play with.
Related
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
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/
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>
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
Working on an email blast and for the life of me I cannot get the text to center in mobile view. The URL is: http://strictpixel.com/clients/relevant/fbc/email/
I am referencing the top navigation, under the logo. In mobile, it slides to the left and I am not sure why.
I know this is something simple but I have been pulling my hair out for an hour.
Thanks!
Yeah that really is a mess and you should consider refactoring. There's no way you need all those nested tables.
However, if you plan to keep it this way, the problem is likely stemming from your HTML being invalid. First, the <center> tag is dead and should not be used. Second, you break the flow of your table structure beginning after the comment I inserted below:
<p class="template-label">469-952-6404</p></td>
<td class="expander"></td>
</tr>
</table>
</td>
<!-- You can't start the new table below here without first either
opening a new <td> or closing the <tr> and <table> that is open!! -->
<table class="container">
<tr>
<td class="wrapper">
<table class="twelve columns" style="background-color:#f1f5f8;vertical-align:center;">
...
My best guess is that you missed opening up the next <td> tag just before that table begins.
Use an online HTML validator to help you find where your table structure is broken. Something like http://www.freeformatter.com/html-validator.html may prove useful.
I've actually created a template on Mailchimp. I used a basic template of Mailchimp and transformed it into the design they gave me. I used the the CSS inline tool of Mailchimp to insert all the code in an inline mode as Gmail does not accept any style on the header. I only have this issue on Gmail, the rest work perfectly. What can I do?
As the code is long I inserted it in a fiddle if you wish to check it out:
http://jsfiddle.net/z27Bw/
I need an answer as its a mystery for me!
You have 2 unclosed <td> tags in the HTML -- one on line 476, one on 482. That might be what's causing the issue in Gmail. If that doesn't fix it, I'd say yeah, it might be a colspan issue.
you can try this
Write first tr code like this
<tr>
<td colspan="2" height="281"> </td>
</tr>
instead of
<tr>
<td width="35" height="281"> </td>
<td class="headerContent"> </td>
</tr
>
and then put that big header image inside it.
I'm creating responsive emails that turn two-column layouts into stacked one-column emails when viewed on a phone. The process works fine but requires some code massaging to make desktop-based Outlook 2010 happy. This page explains the process and the steps one must take in order to please Outlook 2010. The fix works great.
http://www.emailonacid.com/blog/details/C13/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010
...except when the email is very long. Once the first column of content reaches a certain length, Outlook stops placing the second column beside it and instead throws it well down the layout, to the point that it will create a large gutter under the first column of content and a huge blank header above the right column. The code below, as simple as it is, will duplicate this behavior if you open it in IE and choose File/Send page by email. You can make the rendering problem go away by deleting a few of the X's, whihc points to a ling length limit or some crazy "I'm looking for a page break" behavior by the Word rendering engine. I rknow that the Word rendering engine sucks, but I want to know a guideline stating when this problem will happen, because at this point most of the problems with the Word engine have been documented, and are fairly consistent. My problem is that most people know to send short emails, so the don't have this issue. I work with groups that love quantity.
If anyone knows how to avoid this or knows the specific trigger characteristics, let me know. FYI, you can replace the br's with p's or rows and the problem is the same. Obviously, the emails I send out are much more complex than this, but that was the point with this code, to show how simple things can be while still producing the problem.
<table width="100" border="0" cellsbracing="0" cellbradding="0" valign="top">
<tr></tr>
<tr>
<td align="left" valign="top"><table align="left">
<tr>
<td align="left" valign="tobr">
X<br>X<br>X<br>X<br>X<br>X<br>X<br>
X<br>X<br>X<br>X<br>X<br>X<br>X<br>
X<br>X<br>X<br>X<br>X<br>X<br>X<br>
X<br>X<br>X<br>X<br>X<br>X<br>X<br>
X<br>X<br>X<br>X<br>X<br>X<br>X<br>
X<br>X<br>X<br>X<br>X<br>X<br>X<br>
X<br>X<br>X<br>X<br>X<br>X<br>X<br>
X<br>X<br>X<br>X<br>X<br>X<br>X<br>
X<br>X<br>X<br>X<br>X<br>X<br>X<br>
X<br>X<br>X<br>X<br>X<br>X<br>X<br>
X<br>X<br>X<br>X<br>X<br>X<br>X<br>
X<br>X<br>X<br>X<br>X<br>X<br>X<br>
X<br>X<br>X<br>X<br>X<br>X<br>X<br>
X<br>X<br>X<br>X<br>X<br>X<br>X<br>
X<br></td>
</tr>
</table>
<table align="left">
<tr>
<td align="left" valign="top">O<br>
O<br>O<br>O<br>O<br>O<br>O<br>O
<br>O<br>O<br>O<br>O<br>O<br>O
<br>O<br>O<br>O<br>O<br>O</td>
</tr>
</table></td>
</tr>
</table>
Blimey, check me out necro'ing a month old question.
I don't want to sound pedantic or patronising, and i don't know if this is actually the code you've used to replicate the problem or you've simply rewritten it to post here - but little errors that a browser can interpret correctly go horribly wrong when interpreted by an email client.
so, just to clarify little errors like spelling mistakes, namely things like this :
<cellbradding>
and there's a good few elements missing their end tags.
it might be worth your while to run the emails through the w3c validator as transitional, simply to pick out them kind of errors, or an any IDE that supports HTML.
i know the only times i've had crazy rendering issues with emails was when they didnt know how to interpret something crazy i'd written.
Is there a way to grab things out of the source code of another site directly into your site?
For example, let's say than in a site the following source code exists:
<table ...>
<tr>
<td class=...>...</div></td>
</tr>
<tr>
<td class=....><div align="... class=...>"Interesting string that keeps changing"</div></td>
</tr>
</table>
And we want that Interesting string that keeps changing to appear in our website as well.
you could use php
you use
$html = file_get_contents('url to website');
or use a hidden if you want a javascript function, and then just grab the innerhtml