I have made a java mailer which is not displaying properly in gmail, but it is showing up properly in hotmail. In gmail, the CSS is not getting read properly, which disturbs the entire layout.
Follow a couple of rules:
If possible, just design everything in a table. Keep fixed layout.
Don't use CSS file reference. Just do styling in the elements.
Try avoiding images or at least keep as minimal as company's logo only.
Keep limited number of links in E-mails. This point is to avoid your automated mails to go in junk folder.
Avoid complex CSS rules.
Updated
By the way, you must set content type "text/html". You may look couple of good already done examples:
Real's How to: http://www.rgagnon.com/javadetails/java-0504.html
Another detailed and good worked out example: http://www.vipan.com/htdocs/javamail.html
Hope this helps.
Related
I need to make an email template and make it responsive. As I see that to achieve that you need to use media queries and css styles on a header etc. I was wondering if tables are not needed anymore to set the layout (they are quite annoying anyway).
But I see blogs explaining how to make a responsive HTML email with tables so I wonder why do they use tables if they have CSS?
Is it because it's some type of compatibility approach? So that old systems will still show the layout even if not perfect and new ones will show it better?
Cheers.
Email clients use really old rendering engines. If you opt for using div's instead of tables you will see your email breaking almost everywhere (specially outlook). Using tables allows you to support old email clients as well as making your email responsive for those that support it.
There are a lot of good tutorials out there that give you templates that you can start from, I suggest you use those and build from there. It takes a little while to perfect it across all clients and platforms and the testing ain't no fun!
This tutorial will come in handy.
If you can get a Litmus account it makes the testing less painful and they get it right most of the time.
Also, if you are already doing emails try to study what device/client most of audience uses and you can use that to make sure your new template renders fine on these.
Good luck!
I am creating outlook email. I have created an email system. I have check in all email giants like Gmail, yahoo etc it work perfectly but suddenly when I saw same email in outlook it was shocking that outlook not supports position attribute.
Now, what I want is to achieve same functionality, I have searched on Google but not found a good source to solve issue except this platform to ask question.
Please help!
Thanks in advance.
Note: I don’t want to do this by placing one div inside other. This not suits my application at all i want things to positioned with respect to corners (width/height).
outlook does not support position:, so perhaps use a table-based solution?
check out these links;
http://msdn.microsoft.com/en-us/library/aa338201.aspx
http://www.campaignmonitor.com/css/#css-com_1
Whether you choose to code your HTML email by yourself (my personal preference) or to use an existing template, there are two fundamental concepts to keep in mind when creating HTML email:
Use HTML tables to control the design layout and some presentation.
You may be used to using pure CSS layouts for your web pages, but
that approach just won’t hold up in an email environment.
Use inline CSS to control other presentation elements within your
email, such as background colors and fonts.
Keeping css 1.0 standards in mind will help you a lot when it comes to outlook. For some other details click here. Have fun!
I already read lots of threads about this and they all say that gmail doesnt support the style tag so I have to use the inline styling to resolve the problem. The problem is that I've look at the source code on most of the emails that I've received on gmail and most of them use the css style tag, which contradicts what other says.
So question is, why the emails with css that I've send via php mail is not showing correctly on gmail. It does show ok on Yahoo and Hotmail though
Its a bit hard to provide a detailed answer to a question that doesn't provide specifics so I'll make some general comments...
Cross web-browser designing is a piece of cake compared to designing HTML emails for different e-mail clients. There are far more email clients than web-browsers and far more variation in their support of HTML and CSS rendering. There are no "standards" per-se.
You need to keep everything simple and play to the lowest common element. It's not just a matter of the style tag being implemented or not, different client may or may not support different styles. You need to experiment with what works and what doesn't on as many clients as possible.
Some more reading for you if you haven't read these already:
http://css-tricks.com/using-css-in-html-emails-the-real-story/
http://coding.smashingmagazine.com/2012/03/13/techniques-overcome-poor-css-support-email/
Many people design with their CSS in the style tag and then use a tool to inline it prior to sending, making it compatible with for Gmail. Depending on the tool, it may not remove the original css, effectively doubling up. Another reason could be that those css declarations are intended for non-Gmail clients. A common example is media queries, which don't work inline, making them incompatible with Gmail.
Here is a related blog post I've written that also includes a few links to some popular CSS inlining tools
I've been trying to separate the text/images into columns using normal CSS script, but they are not recognized by the google custom card interface. I've noticed that all the commands are a little different stylistically from CSS, though derived from that language as far as I can tell. I've tried looking for some general reference material on this google variant to solve this issue, but so far have not had any luck. Any suggestions?
The card layouts do use standard CSS. We strip out anything that might be a security risk, but it's unlikely you're encountering that. Can you include a link to your table and an example of the CSS you think should be working but is not?
If you'd rather not make your table accessible you can send mail to googletables-feedback#google.com and we can pick up the conversation from there.
Do anyone have experience in crafting CSS stylesheets for websites that will implement CushyCMS? My attempts haven't been working that well. I've had problems with the WYSIWYG interface, where clients email me a week or two after I considered the project a done deal and complain because when they updated the website using the WYSIWYG interface it didn't style things as they wanted or, in some cases, CushyCMS didn't input valid HTML so everything got screwed up (e.g. all text became bold because a tag was closed properly).
Got any tips?
Hmm I've used CushyCMS for clients to update their sites and i suppose you just have to be careful which elements you put the class cmseditable on. I suppose at the end of the day if they wanted to change that much, then its a "site re-design" not a "client updating a few bits of text". Just dont apply fixed dimensions to your divs etc and keep it pretty fluid, that way they cant overlap or break your layout!