Email Layout design - Limit width

[Kettoch]

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]

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]

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 :)