search

EvotecIT / PSWriteHTML

PSWriteHTML is PowerShell Module to generate beautiful HTML reports, pages, emails without any knowledge of HTML, CSS or JavaScript. To get started basics PowerShell knowledge is required.
MIT License
828 stars 106 forks source link

Email Layout design - Limit width #265

Open Kettoch opened 3 years ago

Kettoch commented 3 years ago

I am looking to create our emails using the organizational standard of 800px as the width.

The idea being that once set, it sets the width for all content below the point at which it was set. This could help in multi column email layouts, too.

danubie commented 3 years ago

Hi @Kettoch, I was tinkering with a similar topic on table sizes a few days ago. Przemysławs module does an excellent job for creating cool HTML output. Producing HTML-Emails has some limits due to the limited CSS-support of email-clients. Some of the features, which work very well in HTML-pages, can't be used in Emails.

But I also have to mention: My experience is, that the native Outlook-Client does a funny job in rendering HTML-emails. The following samples work fine when viewed as HTML-Page, on IPhone Outlook- and native-App but Windows-Outlook-Client seems to ignore some CSS-styles.

In general: To change the visual behaviour you have to modify CSS-styles depending on your need.

I hope the following examples will help you to start that journey. Regards, Wolfgang

Example 1: To limit the overall size of the whole document you could try this

$CssTotallySmall = '.main-section { width: 200px; }'
EmailBody {
            Add-HTMLStyle -Content $CssTotallySmall -SkipTags
...
}

Example 2: Tables seem to be handled better even in windows-client. The following should limit all tables to max 800px.

$CssTable = 'table.display.compact { max-width: 800px }'
EmailBody {
            Add-HTMLStyle -Content $CssTable -SkipTags
...
}

Remark: If you use Email-Table -Style ... you have to use different table css-selectors.

PrzemyslawKlys commented 3 years ago

The trick to email in outlook is to stop using px and just use numbers alone. It works like that for images, it most likely works like that for tables (inline). I need to improve EmailLayout cmdlet with more options to basically allow to create multi-column layout, or layout that you often get with marketing emails.

I just need some time to do so - or help from you guys :)