West Wind Internet and Client Tools
wwSMTP
Gravatar is a globally recognized avatar based on your email address. wwSMTP
  Denis Chassé
  All
  Dec 30, 2022 @ 07:14am

Hello all,

When sending emails I'd like to make the content of those emails fancier. How can I include CSS coding so those emails are prettier?

Gravatar is a globally recognized avatar based on your email address. re: wwSMTP
  Bob Roenigk
  Denis Chassé
  Dec 31, 2022 @ 07:30pm

HTML formatting must be dumbed down to support the many email clients. YahooMail!, Gmail, Hotmail remove the head and body tags as they conflict with their own coding. CSS must be inline.

Search for "html email checker" for online apps that will determine how your HTML will appear on the many email clients. Some are free.

Gravatar is a globally recognized avatar based on your email address. re: wwSMTP
  Rick Strahl
  Bob Roenigk
  Jan 1, 2023 @ 12:51am

Bob,

Actually, that's not correct anymore for most email clients and definitely not those that you mention. You can create full HTML documents and embed your CSS in the <head> tag - it works fine as long as everything you use is locally embedded - no external links including things like images. I just went through this a few months ago, when I updated my Web Store and had to redo the email confirmations which are template rendered through my main master HTML template.

Actually, even external images these days even work with Gmail/Outlook/Yahoo proxying all external references. Local email clients are typically the ones that don't display external content unless you explicitly allow it.

Other things like fonts, FontAwesome, scripts etc. however do not work, so typically you need email specific HTML. So the overall premise is correct - keep it simple for best results across email clients, but if you're targeting reasonable modern clients, there's a lot more functionality that is supported these days than in the past.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: wwSMTP
  Bob Roenigk
  Rick Strahl
  Jan 1, 2023 @ 01:51pm

Glad to hear that. It is about time email made these seemingly simple advancements. Positioning has been a killer. Tables within tables works, but are rather tedious at times.

Thanks

Gravatar is a globally recognized avatar based on your email address. re: wwSMTP
  Denis Chassé
  Bob Roenigk
  Jan 2, 2023 @ 04:51am

Thank you both for the feedback.

That's sad. I don't get it because I receive emails containing nice formatting, positioning and also images.

So really? CSS without images?

I wish you both have a happy new year!

Gravatar is a globally recognized avatar based on your email address. re: wwSMTP
  Rick Strahl
  Denis Chassé
  Jan 2, 2023 @ 10:29am

Oh you can use images, but you need to embed them into the email. There are a number of ways to do this with mime attachments (see docs attachment docs for wwSmtp) or by embedding the images as base64 embedded images.

Possible - but a bit more work and resulting in very large emails bodies as you're shipping around the images embedded in the message.

FWIW AFAIK most 'nicely formatted' emails are sent from Web content and they are relying on proxying of the mail clients to show the imsges. In Outlook that usually doesn't show unless you say "Download Images" which is the hint that the image content is online.

Look at email messages that do what you want to do, and then look at the raw HTML to see what they are doing in the HTML.

+++ Rick ---

© 1996-2023