Can I just build html email as usually we build html pages?
I want to set email body as a string of all html codes.
Email body offcourse will be complex, so I need to use a lot of CSS to build one page html email.
What should I do?
Where to store css codes?
Can I just include external .css file from my server?
-
You can include the css in the html.Tim Williams– Tim Williams2011-03-28 05:21:12 +00:00Commented Mar 28, 2011 at 5:21
-
You mean, echo css in style tag with whole email html body as a string?!Almas Adilbek– Almas Adilbek2011-03-28 08:44:37 +00:00Commented Mar 28, 2011 at 8:44
Add a comment
|
4 Answers
Even though it sounds totally backwards and not what I'd recommend for web pages, the best way to use css in emails is all inline in style attributes. The reason is that a lot of email applications and particularly web mail like gmail, yahoo, hotmail, etc. will not respect your css class declarations and will often strip out all of your css unless it is inline. A lot of the time the entire <head> gets removed and very often the <body> tag is removed if you include that in your email.
If you are just getting started creating HTML emails I would strongly suggest using Litmus or doing manually testing on a variety of email clients. Litmus or another similar service will save you a lot of time though.
2 Comments
Almas Adilbek
By the way Litmus is not free. Can I test email for free with litmus service?
Jarrett Widman
Yeah, I know its not free. I'm not aware of anything comparable to Litmus that is free. You definitely don't have to use it, but it can really save you some time. Otherwise, I'd recommend you check your email in at least gmail, hotmail and Outlook to get good feedback.
You can include exteranal css files but it only works when net connected, better to include css inline.
Comments
Set the Content-Type header to text/html to send HTML mail.
You are better off inlining the CSS style directly into the HTML. Or just using the "style" attribute on the elements that need styling. Most mail clients, for security reasons, will not render external images and styles by default. I know you can attach images into the mail (or opt to have them on a remote server - but with the caveat the the mail app will prompt the user to download). You might be able to have .css files as attachments.
Most clients that send HTML mail also use the multipart/alternative MIME format. Non HTML-clients can still render the mail as plain text if they receive the mail like that.
Here is a real example mail that demonstrates this
Return-Path: <[email protected]>
Received: from selbiepc (11-11-111-11.foob.ga.baloneynet.net [11.11.111.11])
by mx.foobar.com with ESMTPS id f2sm4177017ybh.22.2011.03.27.22.24.02
(version=SSLv3 cipher=OTHER);
Sun, 27 Mar 2011 22:24:03 -0700 (PDT)
Message-ID: <11111111111111111111111111111111@selbiepc>
From: "Selbie" <[email protected]>
To: <[email protected]>
Subject: mail with html in it
Date: Sun, 27 Mar 2011 22:23:33 -0700
MIME-Version: 1.0
Content-Type: multipart/alternative;
boundary="----=_NextPart_000_0011_01CBECCD.9BE136B0"
X-Priority: 3
X-MSMail-Priority: Normal
Importance: Normal
This is a multi-part message in MIME format.
------=_NextPart_000_0011_01CBECCD.9BE136B0
Content-Type: text/plain;
charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable
This is an HTML mail with various formatting in it. It will still =
render fine by non-html clients.
------=_NextPart_000_0011_01CBECCD.9BE136B0
Content-Type: text/html;
charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable
<HTML><HEAD></HEAD>
<BODY dir=3Dltr>
<DIV dir=3Dltr>
<DIV style=3D"FONT-FAMILY: 'Calibri'; COLOR: #000000; FONT-SIZE: 12pt">
<DIV>This is an <STRONG>HTML mail</STRONG> with <FONT =
color=3D#ff0000>various=20
formatting</FONT> in it. It will still render <FONT=20
size=3D2><EM>fine</EM></FONT> by non-html <U>clients</U>.</DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV></DIV></DIV></BODY></HTML>
------=_NextPart_000_0011_01CBECCD.9BE136B0--
Comments
Campaign Monitor has a great resource for what CSS is and isn't available in various e-mail clients: http://www.campaignmonitor.com/css/
In general after examining this chart you'll find that best practices for building HTML/CSS emails is very different than best practices for web pages.
1 Comment
Almas Adilbek
Thank you. It helped me a lot. Now I can write my inline style html according to "Guide support in email clients" table.