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.
Related
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.
I an having a problem with my HTML email.
My email is working correctly in most cases, the problem arises when I send to windows live mail.
1) opening the email in widoew live mail in IE all of the text becomes centered even though I have used the 'style="text-align:left;"' and the 'align="left"' options, I have tried them together and tried them seperate.
2)opening in windows live mail in anything other than IE the images have spacing below them. I have used the 'display:block;' and 'border-collapse:collapse;' and set the margin and padding to zero.
I used firebug in firefox to have a look and see what the problem is, it shows either a span tag or a p tag wrapping the img tags. I have no idea why it is doing this or how to fix it!
If anyone can help i'd be really greatful.
Thanks
no the align="left" doesn't work, If I use the align="justify" or align="right" it seems to work but not align="left". I have realised that I am only getting these problems when I send through outlook, I am using outlook 2007. after some studying with firebug it seems to me that outlook is adding its own classes to the email. it seems to be adding either or around all of my images with classes that seem to belong to outlook. I know outlook is not the best program in the world but on some occasions it is the only way I can send emails. is there any way I can get into the code that outlook is producing and change it, I know that sounds a bit drastic but it would be really good if I could. thanks for all the help guys, really appreciate.
A lot of mail clients support only older versions of html. gmail for example will not respect any css file (more information on email on acid) so you are restricted in what you can do with styling.
You can test how your email will look in various clients using online services such as email on acid or litmus.
I would suggest keeping the design very basic and using an old style table based layout.
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'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.
How do I get html content to stay in relative position and format from one browser/email to another? When developing e-newsletters, the format appears differently in one email server than in another (when testing to two of my emails).
Example: when I open the email in my gmail, the padding around the images is where I want it, but when opening it in my work Outlook, the padding is almost nonexistent.
Example: the font appears according to the style sheet in Outlook, but changes when in gmail.
How can I secure the style sheet and the positioning to keep the appearance constant?
E-mail clients are notoriously terrible at rendering HTML (especially Outlook and Lotus Notes). You will typically be writing crippled HTML with inline CSS styles. This will not get better in the near future.
Make your design as simple as possible, and you will have less trouble making it look right on many clients. The actual best practices for writing HTML will depend mostly on which clients you plan to support.
Some helpful articles that give insight into common solutions for HTML e-mail rendering problems:
Article at A List Apart
Guide at ReachCustomersOnline
There are some easy web services that can check your newsletter on multiple clients and give you screenshots of the results. They are usually worth the money:
Litmus
MailChimp
CampaignMonitor