I'm sending an automatic html email from my website. In my email I set some text to red color and the font to a certain font type. When I view the html email from yahoo mail, The red color is applied, but the font is not applied. Why is it?
Also, when I try to view the html source code of the yahoo mail web page, I cannot find my html email content on this html source code. why is it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<h2 style="color: #CC0000; text-align: center;">
Welcome to the Dave's Photo Album</h2>
<p>
Hi <%UserName%>,</p>
<p>
Thanks for registering. Here is your new user name and password:</p>
<p>
User Name: <%UserName%>
</p>
<p>
Password: <%Password%>
</p>
<p>
Enjoy!
</p>
You can use css inline only, and from my experience you need to do it with tables, since not all email services (none maybe) understand divs that well, I also recommend to stay within 600 px wide for the template, since its usually displayed in "panes" like yahoo mail, gmail, outlook etc. there's a lot of material you can check over at this page:
http://www.campaignmonitor.com/css/
there's no html, body or title declaration, just start with <table></table> like if was your body.
outlook 2007 will probably be the one with the most restraints.
good luck
In css, you can use font or font-family to change the font. I don't see anything that would actually change the font in your code there!
http://www.w3schools.com/css/css_font.asp
Don't send email in HTML. It is much more likely to be flagged as spam if you do.
Related
I have an email template which has the following code:
<html>
<head></head>
<body style="font-family:Verdana">
<h1 style="font-size:36px;text-align:center">Welcome!</h1>
<div style="text-align:center;margin:50px">
<span style="font-size:18px">We are happy to see You joined! Please press the button below to confirm Your account.</span>
</div>
<div style="text-align:center">
<a style="background-color:#3a86e0;border-radius:4px;color:#fff;font-size:18px;padding:8px 32px 8px 32px;text-decoration:none;display:inline-block" href="{parameter}">Confirm email address</a>
</div>
<div style="text-align:center;margin:50px">
<span style="font-size:12px">
<b>You received this message because Your email address was used to create an account in our project. Ignore this in case of a mistake.</b>
</span>
</div>
</body>
</html>
And when it comes to rendering in a web browser it looks just fine, but I open such email in the Outlook app or built-in Windows Mail app the corner radius property of the <a> tag is being ignored, and the link is drawn with the square corners.
Please see the images below to see the difference.
This is how its rendered in the apps:
This is how its rendered on the email websites:
I searched the web for similar issues but had no luck. Could you help me please, why the same HTML is being rendered differently and how I can fix this? Thanks.
Some email providers do not support padding and border-radius.
You can try generating a bulletproof button here that will use workarounds for those unsupported properties
I'm working on some oracle code to generate an HTML eMail. It's mostly working, but I took the resulting HTML and placed it in Dreamweaver CS6 to use the validation. I get a few errors:
1) No Character encoding declared at document level [HTML 4.01]
2) element "U" undefined [HTML 4.01]
The html code is generated automatically by a rich text editor widget. Should I use something other than HTML 4.01? I'm not too savvy with HTML Header code.
Here's the HTML code that is generated from my test.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Saint Susanna Parish Mailing</title>
</head>
<body>
<p>This is normal text</p>
<p>
<strong>This is bold</strong>
</p>
<p>
<u>This is Underscored</u>
</p>
<ol>
<li>
<span style="color:#ff0000;">This is numbered</span>
</li>
</ol>
<ul>
<li>This is bulleted</li>
</ul>
<p style="text-align: center;">This is centered</p>
<p>
<span style="font-size:18px;"><span style="font-family: times new roman,times,serif;">This is a new font</span></span>
</p>
<p style="text-align: right;">This is right justified</p>
<p> </p>
</body>
</html>
Thanks for looking at this.
I think the encoding can -and must- be specified in the mail headers, so I would ignore that warning.
The article The Importance of Content-Type Character Encoding in HTML Emails says:
[The client] will display the email based on what Content-Type has been set.
However, email clients read the Content-Type value that is set in the
email header and they completely ignore the META tag that is within
the HTML.
So that suggests that you should add the proper header, and can safely ignore the validator's warning, although it can't hurt at all to add the meta tag as well.
If you want a second opinion, you can try the W3C Markup Validation Service, although that one might also complain about missing content types. After all, these validators don't know what headers you are going to supply.
Different rules apply to HTML mail anyway. Clients ignore basically everything that is outside of the body. They also filter out all kinds of attributes, won't allow JavaScript and fully ignore external stylesheets and inline style tags.
The <u> tag was deprecated in HTML 4.01 but not obsolete. In that case the validator seems to be wrong, so I would ignore that warning as well. I wouldn't underline text at all though, because obviously that text could easily be mistaken for a link. If you need to, and you don't want to use <u>, you can use an inline text-decoration style.
Some suggestions:
U can do a lot of control by using classes etc - declared in a style.css file that u call first as well.
<!DOCTYPE HTML> - HTML 5
<b> and </b> can replace strong to save characters
<link rel="stylesheet" type="text/css" href="../style.css" title="Standard Style">
So I'm having an odd issue while setting up my RSS driven campaign in Mailchimp.
In an area in my template, I'm pulling in an excerpt from my post that could possibly have a link in it.
Let's say for example this is what a snippet of the code looks like in my template:
<div class="post-excerpt">
*|RSSITEM:DESCRIPTION|*
</div>
Which for example lets say when the email is generated and sent the source looks like this:
<div class="post-excerpt">
Lorem ipsum dolor sit amet.
</div>
Obviously I cannot add any inline css to that link, because it's getting generated by Mailchimp. But I'm adding CSS in my template like this:
.post-excerpt a { color:pink; text-decoration:none; }
And I also have Mailchimp's "Automatic CSS Inliner" setting turned on. This however doesn't seem to be moving my CSS to the links that get generated by *|RSSITEM:DESCRIPTION|*.
For some reason, in gmail on desktop, links appearing within .post-excerpt are still appearing default blue and underlined. On my iPhone, they are pink without any text decoration, as they should be.
Any idea on how to get the links in this area to appear the way I need them to?
Thank you.
Gmail strips out all of the style information in the header (anything in the <head> part of the document including <style>).
Gmail app also does this. This is the main reason you can't create responsive emails for Gmail.
Obviously as you correctly state, you cannot put an inline link due to the link being imported through your RSS feed.
However, have you considered making the whole description a link? I don't know if it will work but it's worth a try. It might even improve click through rates.
<a href="*|RSSITEM:URL|*" style="text-decoration:none;
color:#000000;">*|RSSITEM:DESCRIPTION|*</a>
As a further thought you could also consider putting <style> CSS goes here </style> in your body at the bottom of your email.
I know that when i come to HTML email i have to use the Table Layouts. This is what i have done here Unfortunately when i make some tests with this online tool to my Hotmail and gmail, the layout is not exactly the same. In the email the difference from my HTML code is that it does not get the same H2 font style and family in the text <h2>"Responda correctamente a las preguntas y gane un viaje a Roma!"</h2> and the second image is separated from the one on the top and the one on the bottom. What's the best solution to figure it out the issue? How can i achieve the same layout?
Thanks for your time
Do not rely on external (<link rel="stylesheet">) or embedded style sheets (those contained within the <style> tag above the <body> tag). This is the most important thing to avoid. Many email services cut everything above the body tag and disable external style sheets. That said you can include a few embedded CSS statements (such as link color) as long as you're ok with them not rendering in some email clients.
Taste this post: http://groundwire.org/labs/email-publishing/using-css-and-html-in-email-newsletters
Try to add style="display:block;" to all your img tags and instead of an h2 use a font tag with a style attribute:
<font style="color:#202020; font-family: 'Georgia',serif; font-size: 14px; line-height: 20px;">
<b>Some title</b>
</font>
<br>
I have a background color of #efefef (greyish), color loads just fine in every browser.
Problem is that when I copy the whole file from the browser and paste it in an e-mail, then the background color changes to white.
How do I keep it the same color?
<body bgcolor="#efefef" link="#ff6633" alink="#ff6633" vlink="#ff6633">
Try
<div style="background-color:#EFEFEF">
<p>EMAIL TEXT</p>
</div>
in your email.
You can not use <body> tags in html email. All email clients will strip out any <body> <head> tags etc.
You need to rebuild the email using tables and use inline styles to style the elements.
HTML emails are notoriously difficult to code. The way you are trying to do it simply will not work i'm afraid.
Here is a brief introduction to coding html email: http://www.sitepoint.com/code-html-email-newsletters/