I'm just trying to send a little Christmas e-message around my friends/family, I've built it to be fully responsive etc the way I always do. However as it's just for friends I'm not going to send it via MailChimp which usually sends everything for me no problem.
The way I'm trying to send it is by opening the index.html file, selecting all, copying, then pasting into Gmail. This has always worked fine for me in the past, and does work. However this is my first responsive email that I'm trying to send this way, and it seems the media queries don't get brought across this way, at least not in the gmail -> hotmail test that I just did (Resizing window etc does nothing, just shows the desktop version).
Is there a better way of sending an already built HTML email, rather than just copying/pasting in Gmail?
Unfortunately, Gmail does not support the <style> tag. Media queries can only be called in the <style> tag, and not inline, therefore Gmail doesn't support them.
Here is the support chart.
I would suggest you stick to an ESP like Mailchimp for sending html email. But while you are playing around in Gmail, here is a tool that may help you debug issues with your email code.
The selected answer is not actually correct! Gmail strips IDs and classes from the email body itself, but the style tag IS retained.
You can use the following:
*[summary~='fakeclassname'] {
styles: here;
}
"Summary" is one of the attributes that Gmail does not strip out. After it occurred to me what Gmail was actually doing to emails I found this article that breaks it down in detail:
http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-selectors/
There are helpful links on that page that get deeper into Gmail-specific targeting.
Note: the Gmail app does strip the style tag, and with a rising market share (Android no longer has a native app and pushes people to use the Gmail app) should be considered a starting point for mobile-first email development.
Related
Really simple here but i am trying to generate a link within an email that popups a page but its not working it also is througing a security exception in outlook 365 how does one properly open a popup from email with correct height and width of window.
here
Using scripts is totally unsupported in emails.
"Scripting in Emails
The short answer is that scripting is unsupported in emails. This is hardly surprising, given the obvious security risks involved with a script running inside an application that has all that personal information stored in it.
Webmail clients are mostly running the interface in JavaScript and are not keen on your email interfering with that, and desktop client filters often consider JavaScript to be an indicator of spam or phishing emails.
Even in the cases where it might run, there really is little benefit to scripting in emails. Keep your emails as straight HTML and CSS, and avoid the hassle."
Source: https://www.campaignmonitor.com/dev-resources/guides/coding/
You can use target="_blank" instead.
You have to use the a tag this way:
Open page in new window
Hope it helps.
How do you add HTML into an email in Blackberry?
I've tried multipart emails, but that does not seem to work. I am asking how to send an HTML formatted email from an application running on a Blackberry, if I am wording too vaguely, please let me know how to rephrase my question
All HTML emails work the same way - the HTML is in the email body and any images must have a fully-qualified url (http://...).
CSS support is limited and must be defined inline statements (style="") on each element (no stylesheets). Background images are not supported. Tables must be used for layouts (awful but true).
You are talking about the HTML mailers, which are tricky and depend on the client Machine, where they will be eventually seen. Your HTML should be fully table layout based, Styles need to be inline. Below is an HTML mailer that is like almost perfect to display correctly on any device, whether it is MAC or PC or iPad or Blackberry.
http://www.dreamincode.net/iem/display.php?M=2016&C=f945ef50b90408df6b2eb3054df75e79&S=63&L=1&N=25
If you view the source of this page, you would come to know how the mailers need to be build out.
To send the mailers as a mass mailing list you need an Email Marketing Software's.
I am sending a news letter, which sometimes gets long.
For some reason, if the mail is exceptionally long it gets cropped in Gmail's web application. However, when i view the same mail on my iPhone or Outlook everything seems to work fine.
The mail itself is HTML and I am 100% sure that Gmail doesn't crop the original mail since I've also forwarded it from my Gmail account to a different mail account and managed to get the entire mail in the other web application.
I am running Vista 64bit and I tried to view the mail in FF, Chrome & IE but got the same result on all of them.
Any help will be appreciated.
Without actually seeing the HTML and the result in an email, the only suggestion I can make is that you check to make sure all your CSS is inline and that you are using absolutely no JavaScript. The rules of web development and separation of content and presentation don't apply to emails, unfortunately.
However, check to make sure you are emailing a full, HTML document with a doctype, head, and body.
You could also use a debugger like Firebug to inspect the document to determine if there are any CSS tweaks you can make to render the document, such as perhaps using a fixed height, max-height, margin, or padding rule.
Since there was a length limitation on Gmail's end, the HTML itself was formatted into a single line, this is what caused the view problem. To solve it, I've cut down the HTML into several lines and everything started to work great.
I'm trying to figure out where to put some code in an email. You know how you can get newsletters with styling and images, etc? I wanted to send some out but I cant figure out where to put the code. Do you add the images as attachments? Do you put the code in the body?
or should you upload the .html file as well?
Build the page as a normal HTML page. Use TABLES (yes, TABLES) for your layout. You can use inline CSS, but you cannot use a stylesheet. All images must be fully-qualified (http://yoursite.com/images/). Don't make it wider than about 650 pixels. No JavaScript.
View your newsletter HTML in a browser
Do a select-all, and copy
Paste it into a new message and send it to yourself
See what you end up with
Try other mail clients
Various mail clients will mess with your markup and your styles. What works on Gmail will look like poop on Outlook etc. It will be an exercise in frustration. Test, test, test.
Assume all images will NOT BE SHOWN when the user originally views the email.
Here's a good guide to what works and what doesn't:
http://www.campaignmonitor.com/css/
My advice: keep it simple - a logo and some text and a link to the real newsletter. Making email newsletters is a fine art, and frankly, people prefer to read them in a browser where they behave like a web page.
Sending out HTML emails eigh?
There can be a lot of problems you will quickly encounter, mostly revolving around each email client having their own different way of handling things. The aim here is to keep your email as small, simple, and unbroken as possible.
The message:
Each language has it's own requirements, you need to check with the language you are using to see what is easier, to do it inline as part of the mailing script, or to have it inserted through a HTML file, etc. So for more details here, post the language you're using.
Layout:
This is where message simplicity comes in. The best layouts are usually the most simple ones, especially considering not all email clients are 100% HTML standards compliant. You won't know how big your client's viewing window for the email will be nor can you force it to any size or pop it out. Remember that it's goal is to be a message, not a webpage. Usually simple flexible/elastic tables will do the trick just fine if you have anything more advanced than simple paragraphs.
Images:
Link everything statically (statically means http:\\www. ....mypicture.png as opposed to dynamic linking which looks like this \images\mypicture.png) hosted from your server. The reason for this is so that you will have no broken links, your email will be smaller in size (as opposed to attatching). The downside is that some clients may ask about showing pictures. The cold hard truth is that this cannot be avoided no matter which method you use (See for more details).
Links:
Again, link everything statically. Local/dynamic link's won't work and your recipients will be mighty unhappy.
CSS
Either have your CSS classes at the top, or everything in-line (< ... style="..." />). You don't want to attach a CSS file, it's messy and unconventional.
Scripts
Inline or at the top of your file, for the same reason as above.
Additional Documents
If you want to include PDF's or DOCX's, etc, the best and most common methodology is just like images, to host on your server and simply include a static link in your email to them. It keeps file size down and you don't have to worry about what each and every email browser/reader is going to do.
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.