Email 时事通讯未正确呈现

Question

I'm new in CSS and HTML. I have an email template with HTML and CSS code. I put a pink circle box in my newsletter template to the top right: http://www.pedersenshotell.se/newsletter/

It looks OK on Firefox, Opera etc., but when I upload it to the Newsletter email campaign and send to Yahoo, Gmail, Outlook and Hotmail it looks so ugly. It shows a square box instead of a circle. Why?

Answer 1

HTML e-mails are tough things. The email clients are often not normal browsers they don't render the HTML correctly and you'll be surprised why a normal thing (like background) is not working there.

The web services are removing/blocking parts for security reasons and so on.

I would stick with HTML 3.2 or simpler HTML solutions which are pretty annoying I know, and I recommend you to use Fractal which is an email validator service to check your work.

You can get hints from the Email Standards Project as well to see which functions are supported and which are not.

Ahh, and I almost forgot the most important part. Please provide a web link on the top of the mail to provide a web based view of the newsletter, as usually "View this message as a Web page" or "Click here if the email is broken".

Answer 2

I suspect that the page has a square box instead of a round one because you are viewing it in a browser that doesn't support the border-radius property.

Please see border-radius for which browsers and versions have support for this property.

E-mail client support for border-radius is non-existent.

One solution here is to use a <img> instead of a CSS generated shape, although you may also find that e-mail clients block external content - a security feature which could result in a page that looks worse due to broken images. Since you have other images on the page already this may not be a problem for you.

Answer 3

Newsletters in email campaign tools like (outlook, gmail, hotmail) has less CSS support. Moreover, border-radius is supported for web browsers not for email clients.

It is better to use <img> for background images, pure images, gradients, round corners and 3d related stuff instead of using CSS styling.

See this reference: http://www.campaignmonitor.com/css/

This reference shows which CSS property is supported by different email clients.

Answer 4

It is VERY important to make you aware that browsers and email clients have 2 completely different ways of handling HTML and CSS.

You can never make it 100% compatible in all clients using CSS and HTML in newsletters. The only way, in my experience, to make newsletters 100% compatible is by writting the CSS inline in the HTML tags, like so:

<td style="height:50px; width:100px; color: red; font-size: 12px; font-family: verdana;"> Content goes here </td>

Answer 5

As already stated HTML email clients have some issues which have to be considered. The most important issue: Inline your CSS styles (most of the time).

To help building HTML emails there are some nice boilerplate templates. Take a look at http://www.emailology.org/#1 or https://github.com/seanpowell/Email-Boilerplate and use these templates as a starting point.