In Part I of our scrumptious concoction we put our script into the oven to let it bake. But we forgot to add our secret sauce that’s sure to leave our recipients drooling, which is clearly our goal. In this post we’ll continue to spice up HTML emails with PowerShell by going through a bit of HTML coding to build out our email design. Let’s get cookin’!
\\\Main Ingredients
Firstly, let’s give a brief overview of what our HTML code we’ll look like. Now don’t worry if you’re unfamiliar with HTML, we’ll take this step by step and go over some simple concepts and what our code is doing. As a disclaimer, I’m no HTMLologist but I did stay at a Holiday Inn last night and I do know how to spell HTML.
\\\Using our Head
<Head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title></title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
table, td, div, h1, p {font-family: Roboto, sans-serif;}
h1 {color: #04afd3}
</style>
</head><style> element:
–Enter the Metaverse
<Meta>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="x-apple-disable-message-reformatting">width=device-width is saying that our email will be responsive and adjust based on the width of the device viewing it. And the initial-scale=1 sets the initial zoom level. The apple bit prevents iOS devices from scaling and changing the way our email is displayed.
–This One Is For You MS
After our <meta> tags and our <title> comes the <!--[if mso]> statement and by specifying mso, only Microsoft Office will read this section. The <noscript> element is for environments that don’t support scripts, then we use an <xml> element to define the PixelsPerInch value for the OfficeDocumentSettings. The main reason for doing this is to lower the DPI to prevent scaling issues in Outlook clients.
–So Stylish!
In our <style> element, we’re going to define the font-family for our table, td, div, h1, and p elements as Roboto (Doctor Roboto, of course). Then we’ll define the font color of the h1 element to be #04afd3.
\\\Bodies Hit The Floor, Let ’em!
So far, we’ve defined a basic head element with a few options. There are varying approaches to what all needs to be in the <head> for emails and you can experiment or look them up if you run into formatting issues across different clients. With that being said, let’s move on to our next ingredient: the body! (Totally feels like cannibalism right now)
Before we start throwing in everything from our spice cabinet, here is the basic layout we’re going for:
Body Layout
<body>
<!-- background table -->
<table>
<tr>
<td>
<!-- Main table with our 4 sections (rows) -->
<table>
<!-- Header Section with an image -->
<tr>
<td></td>
</tr>
<!-- Section 1 -->
<tr>
<td></td>
</tr>
<!-- Section 2 -->
<tr>
<td></td>
</tr>
<!-- Footer -->
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</body>So in a nutshell, we have a main table that will be our background with only 1 row, and then a nested table with 4 rows for each of the 4 sections of our email: Header, Section 1, Section 2, and a Footer. Now that you have an idea of what we’re going for, let’s start styling our email using inline CSS.
\\\It’s On The Table
To make it easier to read, I’ve removed the extra flavor that we’re not focused on right now. Let’s look at the first (parent) table initially and then we’ll move on to the nested (child) table.
Parent Table
<body style="margin:0;padding:0;">
<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff;">
<tr>
<td align="center" style="padding:0;">
<!-- OTHER FLAVOR -->
</td>
</tr>
</table>
</body><td> element and it’s centered with no padding. In case you’re lost in the kitchen, our nested table is the <!-- OTHER FLAVOR --> that we’re talking about next.\\\Another Mesa
Now let’s look at that other table, which will house our 4 sections.
Child Table
<table role="presentation" style="width:602px;border-collapse:collapse;border-spacing:0;text-align:left;">
<tr>
<td align="center" style="padding:30px 0;background:#04afd3;">
<img src="https://pngimg.com/uploads/server/server_PNG59.png" alt="" width="300" style="height:auto;display:block;" />
</td>
</tr>
<tr>
<td style="padding:30px 10px;background:#FFFFFF;">
<h1>$Section1Head</h1>
<p>$Section1Body</p>
</td>
</tr>
<tr>
<td style="padding:30px 10px;background:#FBFBFB;">
<h1>$Section2Head</h1>
<p>$Section2Body</p>
</td>
</tr>
<tr>
<td align="center" style="padding:30px 10px;background:#04afd3;">
<p style="color:#FFFFFF">Magic by $YourTeam</p>
</td>
</tr>
</table>
–Row 1 (Header)
For our first row, we’ve aligned the <td> element to the center and defined our padding to have 30px 0. Because we’ve only defined 2 values in the padding, it means top and bottom are both 30px and left and right are both 0. We’ve also set the background to hex code #04afd3, a nifty hue of blue. Within the <td> element we’ve used <img> to include a sweet server rack that our recipients will appreciate. Notice we’ve also given it a width of 300, height of auto (so it will scale based on the width), and set the display to “block”. Setting the display to block prevents any unwanted padding or spacing the email client might add.
–Row 2 (Section 1)
Our next row has a <td> element with a top and bottom padding of 30px and left and right padding of 0. I’ve set the background to white. Within, we have an <h1> element and a <p> element with placeholders for the content we’ll add later.
–Row 3 (Section 2)
Pretty much the exact same as Row 2, but with a slightly different background color to make it distinguishable from Row 2.
–Row 4 (Footer)
Last but not least, you need a footer so you can put all of your contact type info there. Or in our case, we just need some shameless love thrown at our team, ya feel me dawg? Style wise, it’s similar to Row 2 and 3 but we give it the same background color as our header (#04afd3) to give it a nice sandwiched feel.
\\\Something is Brewing
Here is everything combined:
Final HTML Email Template
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title></title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
table, td, div, h1, p {font-family: Roboto, sans-serif;}
h1 {color: #04afd3}
</style>
</head>
<body style="margin:0;padding:0;">
<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff;">
<tr>
<td align="center" style="padding:0;">
<table role="presentation" style="width:602px;border-collapse:collapse;border-spacing:0;text-align:left;">
<tr>
<td align="center" style="padding:30px 0;background:#04afd3;">
<img src="https://pngimg.com/uploads/server/server_PNG59.png" alt="" width="300" style="height:auto;display:block;" />
</td>
</tr>
<tr>
<td style="padding:30px 10px;background:#FFFFFF;">
<h1>$Section1Head</h1>
<p>$Section1Body</p>
</td>
</tr>
<tr>
<td style="padding:30px 10px;background:#FBFBFB;">
<h1>$Section2Head</h1>
<p>$Section2Body</p>
</td>
</tr>
<tr>
<td align="center" style="padding:30px 10px;background:#04afd3;">
<p style="color:#FFFFFF">Magic by $YourTeam</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>And of you know we like visual representations:
And that’s it for Spice Up HTML Emails with PowerShell – Part II. Easy as cake! In Part III we’ll bring it all together and quickly and easily send fire emails via PowerShell using this HTML template we just built.