E-Mail Layouts - Inline Styles and Best Practices in OS

E-Mail Layouts - Inline Styles and Best Practices in OS

Hi all,

Our team is building a system that needs to send out simple emails that require some simple branding and styling.

I had styled the e-mail templates previously, using Containers to construct the layout, but for reasons obvious to anyone who has tried using CSS and divs in an e-mail, that obviously didn't work!

I'm about to begin styling the templates for these emails. Since best practice for styling e-mails relies heavily on tables and inline styles, my instinct is to use the custom attributes in the inspector to apply styles to different cells in a Table widget.

  • Is this the best way to go about styling a template for e-mails?
  • Since Placeholder widgets output to Divs, is it possible to web-blockify these templates using Tables instead?
  • Am I missing anything, or barking up the wrong tree completely?

Thanks in advance - looking forward to any advice ye gurus might have.
Hi Quintin,

Your question about using Containers in emails got me thinking. I don't see why it would be bad to use them in email so I went searching and found this post from 2011, http://www.campaignmonitor.com/blog/post/3472/div-tags-in-html-email-newsletters/.

The conclusion on this post is that container are bad if you want to render a multi-collumn layout, probably because of the lack of proper support to float, display: inline-blocks and so on.

My suggestion to you is:
  • Use containers if you're not going to build a multi-collumn layout, and in that case use tables.
  • As for using CSS my recommendation is that you create your own Theme with the CSS required for the email. Put all the emails on a separate flow and on that flow use this Theme. This will make sure that your emails will include only the necessary CSS to be rendered and avoiding all the other definitions you need for the application.
I hope this helps you out.

I'll just add that multi-column layouts in emails can be a bad idea if we take into account the fact that a growing number of people tend to see their email in devices such as smartphones where a multi-column email layout can become very annoying.

Hi Quintin,

The major problem is not the divs themselves but the fact that all email readers don't work with external css sheets and some of them ignore <style> tags.

The emails in outsystems take those known problems in consideration and tries (as a best effort) write all the css rules inline on the html elements of emails to avoid those known problems.

So I would say for you to try it and see how it works. Like I mentioned it's on a best effort basis, so it's does not cover 100% of the possible css rules. For example, css rules with attribute conditions are ignored in this process.

Note: Also the css itself is included in a style element instead of an external url, for those readers that support them.

Edit:  ...just noticed on the link Andre posted that outlook 2007/2010 doesn't do the width property even on inline styles ..that makes it a bit harder then.

João Rosado
Many thanks to everyone for their input.
I need to create a template for one of the pages.
The task is if i click a button it should generate me a template with proper user information.
Is there any way we can create template in outsystems.

Hi Chandrasekar,

You want to create a template with a click of a button? How do you want to achieve that?
Probably you want to create a template in SS and then with the click of the button fill out that screen layout...
Hello Tiago,

I want to generate a pdf by the click of a button the pdf contains about 3-4 pages.
I have attach a pdf file thats the file i need to generate by the click of a button.