[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Flatten css into html for email purposes

Posted on 2010-04-07
8
Medium Priority
?
673 Views
Last Modified: 2012-05-09
Folks,

I use basic html/css to construct a page that I want to email.  I've read in a number of places that email clients don't handle css very well.  Is there a way to flatten the css into the html to generate a pure html page that can be emailed?
0
Comment
Question by:sfun28
8 Comments
 
LVL 30

Accepted Solution

by:
LZ1 earned 1000 total points
ID: 30026127
The only thing you can do is use inline CSS along with tables.  My company and I send out mass mailings all the time and we use the Mailchimp client to send out along with a lot of images and inline CSS.
I would probably suggest that if you have a lot of CSS, then use images instead.  
0
 
LVL 22

Assisted Solution

by:remorina
remorina earned 500 total points
ID: 30026230
Hi sfun28,
For best results with email campaigns/EDM you should use a table layout and inline styles.

keep your styles for example <span style="font:normal 12px Arial, Helvetica, Serif;">Test</span>

Although you can still define a <style type="text/css"></style> section under the <head> tag of your file and define your css classes there, it's still not 100% supported by all email clients/providers and some will ignore them.

Refrain from using positioning, floats and background images except for the body.

Cheers
0
 
LVL 3

Assisted Solution

by:Hican
Hican earned 500 total points
ID: 30026455
Use table layout and properties instead of CSS. There are not much email clients (which i know off) which 'interpret' those properties in a wrong way. Like you said: email clients generally don't handle CSS very well. And if one does, the other doesn't etcetera. So it is better to set it up with properties / code that works in most (if not all) clients. So a basic HTML / Table layout would be best I think.

<table>
<tr>
<td border="1"></td>

... etc ...
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
LVL 1

Author Comment

by:sfun28
ID: 30026956
There's no tool that will take my existing CSS in <head><style>... and convert to html or in-line the css?
0
 
LVL 30

Expert Comment

by:LZ1
ID: 30027063
You can try this app:
http://premailer.dialect.ca/ 
0
 
LVL 1

Author Comment

by:sfun28
ID: 30028148
Thanks folks!  That premailer tool is exactly what I need.  I'll digest these comments and assign points tomorrow.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 30131947
Any updates?
0
 
LVL 1

Author Comment

by:sfun28
ID: 30132784
Premailer looked promising, however its butchering my layout past a certain point in the file.  there's no logical reason for this because the layout is consistent across the file (I have like 5 tables, one after the other, each in their own <p>).

Anyways, I found this tool which seems to work great:
http://www.pelagodesign.com/sidecar/emogrifier/
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

591 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question