I have created a single HTML file that includes its own CSS styling, as well as custom HEAD tags so that it displays in a mobile browser fairly nicely. I then have it working with PHP as a file attachment.
Trouble is this -- Gmail is munging the View of it, but not the Download of it. Gmail is stripping out the CSS and rebuilding the HEAD without my custom viewport stuff.
Is there a programmatic way to code the HTML5 to cause Gmail to fail in doing this cleansing?
My only advice (and it sucks because it means a lot more work) is to put the styles inline with the html as much as you can. That seems to get past at least some of their filtering.
Related
I need to do the following formatting in my email as instructed to me. As I've read and searched around, emails are supposed to use html1 to 4 and inline styling and tables. I've tried using inline styling using margins but it's just a pain. It's not working in outlook and I'm just pulling my hair in frustration. Can anyone help?
Not all CSS is supported in HTML. See this site http://www.campaignmonitor.com/css/ which has a list of what is supported or not.
One thing I have done in the past is: make a regular HTML + CSS page. Then using internet explorer on the "Page" menu there is an option to "send page as email" this should copy the HTML and CSS into outlook for you, then you can use that as your starting point.
I'm going to assume that you're asking for a better way to make emails, and that you know how to do what you need to do and its just getting frustrating dealing with inline code.
Its best if you don't inline your styles under development. Just code it like a normal website. And then use this tool to bring the styles inline:
Premailer
In addition, reference here for things you can and cannot use:
Email CSS Compatibility
PS, here are some good resources for getting started:
HTML Email Boilerplate <-- code for very custom designs
Mailchimp Templates <-- very complete set of common email layouts
Generally speaking, it's better to avoid complex styling in emails. Even if it's sad to say, email clients are still bad in interpreting stylish HTML codes.
Just stay on old-fashioned tables and basic formatting (bold, italic, etc).
If you need graphic awesomeness, I suggest you to use a single, big picture. But only as last resort.
I have a web application that allows the creation of HTML emails that can then be dispatched. Because of how fiddly HTML email display can be, I have an open-source WYSIWYG editor embedded.
The editor itself works fantastically, but with one problem that you may already be thinking. Basically, the page CSS is conflicting with the inline CSS generated by the text editor, which caused issues for things like tables.
Currently I am solving this on the "preview" page by placing the preview in an iframe but I am not entirely sure the best way to do this for the actual editor page. If I do it in an iframe, I would either have to put it into a separate page and alter the process slightly, or write some Javascript to strip the HTML out of the iframe on form submit.
It seems like there should be an easier way - has anyone solved this problem before?
Thanks.
I would switch to a different editor like CKEditor or TinyMCE that allows you to edit the whole HTML by using themselves an iframe for the edited contents. That way you can edit exactly what you will send.
One example: http://nightly.ckeditor.com/latest/ckeditor/_samples/fullpage.html
Change how you are targeting your selectors. If you have conflicts, then your CSS is not written efficiently.
Maybe use a root div with a specific ID and have everything cascade off of that.
Is there a simple way to save an HTML page that has an external stylesheet (1 or more) referenced but force all of the rules to be inserted into the page itself, inline? So basically I want to move all external rules onto the elements that they affect themselves.
For what it's worth, I'm using nearly every major browser (incase the solution is browser-specific), and I'm on Windows (incase it's OS-specific).
I'm assuming you've seen the online tools that are available like this one? This online tool (which I have not tested but looks like it works) gives you the option of providing a url or source code and shows warnings for cross-browser compatibilities with your styles.
I use a tool that does something like that, but it was written for Ruby and TextMate for Mac. It is released by Campaign Monitor as a way of preparing HTML emails. It brings all the rules from the stylesheet and makes them inline styles.
It might give you a good start. I'll keep looking.
TextMate Email Bundle
The piece that does the heavy lifting is the TamTam RubyGem which brings the CSS inline. However, it seems to only support one style element (not link elements). If you could work with those restrictions, you could get it to work on Windows using Ruby and a ruby script file. Not quite drag and drop I'm afraid.
i use chrome extension Save Page WE
When sending an HTML email can you link to an external style sheet or does the CSS need to be included in the email?
Also, if you can link to an external style sheet, which way is more efficient/is smarter to use: linking to the style sheet or including it in the HTML?
Forget efficient. Forget smart. Forget maintainable. This is HTML mail we're talking about.
HTML mail and Webmail clients are extremely limited, partly for security reasons but mainly because they're just rubbish.
External style sheets almost certainly won't work. HTML-embedded style sheets probably won't work. Inline style="..." attribute on every damn element... has a much better chance of working, but still, don't be surprised when many users can't see styles at all, or some styles don't work, or some basic HTML doesn't work, and the content ends up looking like a 1997 browser threw up all over it.
HTML mail is an exercise in unpleasantness. I hate to receive it. I hate even more to author it. The sanest route for everyone is to forget HTML mail and just send a plain text message including a link to a full web page, where you can have as much CSS, JavaScript and Flash loveliness as you like.
Can you? Yes.
Should you? No. Most likely the email client will block external links and therefore your mail will not appear as you think it should.
If you must send html mail, embed everything into the email message itself. External links which automatically call back to the home server to load additional resources are one thing spam filters don't like.
You're best off embedding the CSS in your HTML.
I believe inline styles (added in a style attribute on each element) are more widely supported than including a <style> section, too.
I just Googled and came across this tutorial - looks pretty good at first glance... http://articles.sitepoint.com/article/code-html-email-newsletters
A designer coded an html template using CSS best practices. I want to use this template as an email newsletter template, but I've heard people say hotmail, yahoo and gmail offer limited support for CSS.
Am I supposed to re-code these templates using table layouts and font tags?
The short answer is Yes.
You're going to get the best compatibility across webmail accounts & email clients by using the most basic and dumbed down HTML possible.
Don't use any CSS files or <style> tags. Do everything inline.
Handle positioning with nested tables that have explicit widths
I make heavy use of HTML comments in these situations to make sure I don't get confused about where I am in the layout.
All text should be surrounded by <font> tags with the font style information.
Images should have explicit widths & heights.
This helps the email retain its proper layout when images are blocked.
I usually test on a minimum of the following:
Outlook 2003
Outlook 2007
Most of your headaches will come from here.
Thunderbird
Entourage (OSX version of Outlook)
Gmail
Hotmail
Yahoo Mail
You're usually in pretty good shape if you get something that shows up properly on all of those.
We use Exact Target and they have an HTML preview feature but it's not perfect. I've run into a lot of situations where an email looked good in the preview but still came through broken in Outlook 2007.
Mark above said everything that you need to do to develop email templates (it's the 90's all over again), but I wanted to add one last thing:
http://www.email-standards.org/ is a great resource to see how different email clients interpret HTML and CSS.
To build on what Mark said:
If at all possible, avoid using CSS at all (though, it's usually alright for things like text). Use tables for all positioning, empty <td> elements for padding/smaller positioning bits.
And even with all this, it's only going to look perfect in a few email programs/sites. HTML email is, I'm fairly confident in saying, utterly impossible to do in such a way that it shows up perfectly in all mail clients/apps.
You'll have to go back to stone-age HTML to get HTML emails to work out as Mark suggested. All styles inline in the html. No STYLE tags or external stylesheets.
MailChimp and CampaignMonitor both offer excellent free HTML email templates. They also both offer email testing services that send your html emails to several different email clients and then send you screenshots of the results.
use div tag with fixed height/weigth and put all your HTML in there. It would look the same in most clients. Iv'e tried it before and it works fine.