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>
The Head section allows us to configure some formatting using internal CSS and other options that affect how the body of our code is processed. Here’s a little bit of info about everything up to the <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">
Very similar to Metta Meta World Peace, the first line defines the unicode encoding (UTF-8) to make sure our characters display correctly. The 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>
Let’s talk through this. First, we added added a margin of 0 and padding of 0 to our body. This is to 0 it out again and make sure our body is looking how we want it to in email clients. Next, in the table we have defined the role attribute with a value of “presentation”. This is to for better accessibility in screen readers. We move on to our next attribute in our table with style. Just in case you were wondering: pun intended. Pun always intended. Stylistically, we want the table to take up 100% of the width, collapsed borders, no borders, no spacing, and then we define the background with a white hexcode of #ffffff. The row has one <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>
The table has similar styling to our first table, but here we’ve defined the width of this table to be 602px and aligned the text to the left. 600px is the safe maximum for table widths in emails, but going with 602px allows us a couple of extra pixels in case we want to use a border later.

 

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

Spicy HTML Email 2 - Final Visual

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.

OTHER POSTS YOU WANT TO READ

Index Scripts for Windows Search

So you just finished writing some code and you go to save your file. You summarize all of the important aspects this section of code contains into a nice, easy-to-read file name that your future self will immediately recognize. Fast forward to the future where you...

Array vs ArrayList (PowerShell)

For some tasks in life, being precise is a necessity. But most of us get away with rounding, paraphrasing, and hitting in the general vicinity most of the time. Depending on your personality, you may be one who strives for perfection and strains on every miniscule...

Spice Up HTML Emails with PowerShell – Part III

So far in this series we've fumbled our way around the kitchen and tried to wing it when sending HTML emails with PowerShell. It was clunky to say the least. We then went through our spice rack and built an HTML template, highlighting the nuances of each spicy element...

Spice Up HTML Emails with PowerShell – Part I

I live in the South, specifically in God's country AKA TEXAS BABAY! There's plenty of amazing things about Texas and definitely some reasons to loathe being from Houston, but it's hard to knock our food. I mean, is there really even a debate between Whataburger vs...

Disable O365 Apps in License (PowerShell)

If it's free, it's better. This is basically my mantra for life and a really easy one to follow at that. You can apply it to all sorts of things: ice cream, candy, food. Okay, maybe just free food tastes better when you know you didn't have to pay for it. Especially...
%d bloggers like this: