Building & Sending HTML Email - Part II

PLEASE NOTE: Before working with this tutorial, be sure to schedule an "emailer-specific" one-on-one training session with Web Services. Please schedule training session here. For the time being, these training sessions will be held via WebEx Teams.

Steps

Part II - Edit Main Content (cont.) | Back to Part I

Let's insert a right-aligned image into the first story. In Edit view, click on the "Edit Main Content" button. Place your cursor at the beginning of the first paragraph, then click the "Insert Snippet" puzzle icon.
When the "Choose Snippet" window appears, click on the "(All Categories)" drop-down menu and click "email".
From the "email" category, choose "image right-aligned". Note the image appears in the preview window. (Note that the image is NOT the one you want to use --it's just a place-holder which you will change in the next steps.) Click "Insert."
When you come back to the edit view, your place-holder image will be displaying, right-aligned to the text. (Note that there is also an aligned-left choice in the placeholder snippets.) TIP: For design balance, try to alternate these as you move down the page.) To change the placeholder image, click on it once to select it, then click the "Insert/edit image" icon in the toolbar.
In the "Insert/edit image" window, click on the "Browse" icon.
Browse to wherever your images are and select the one you want to use in replacement. In the preview window, note the "Size". It's best to have edited the size of your email images and uploaded them ahead of time. (If you have not edited ahead of time, you can use the "Edit Image" link to open your image in OU's built-in image editor. This is a very basic image editor but it will do in a pinch.)
Your images should be edited to roughly to the same proportions as the placeholder image. For better display on mobile devices, we suggest editing your story images to a minimum width of 300 to 400 pixels for the original uploaded image. You will change the size of the image for the desktop size email in the next step. Click "Insert."
When you return to the "Insert/Edit Image" window, type a simple description of the image in the "Alternative description" field. Change the width to something close to what was in the placeholder. Only the width need be changed -the proportions are locked by default. Leave all other settings as is and click the "Save" button.
When you return to the editing view, your new image will appear in place of the place-holder. TIP: To increase the "click-throughs" in your emails, it's a good idea to link, not only your story's headline text, but your images as well. Link them to the full story on your website. This is also an excellent way to increase traffic to your site.
Two more "components" often used in HTML emailers are call-to-action buttons and tables. These have been created in your email snippets gallery as well.
To insert a table which will contract its width depending on the viewer's screen size, (a.k.a. a responsive table), place your cursor where you want the table, hit the return key once to create some space for the table snippet, then click the snippets icon in the toolbar.
In the "Choose Spippet" window, select the "email" category, then "table for emails". Note the content of the table in the preview window. This is placeholder text which you will change in the next step. Click the "Insert" button.
Back in editing view, you can replace the text in the table by selecting and typing over it. Be sure not to hit any "hard returns" while working with txt in a table -this will add paragraph tags to the code and mess up the table's spacing. You can also add or delete rows and columns by placing your cursor where you want to add or delete rows or columns, then choosing which operation you want to execute from the fly-out table menu that appears. Hovering over each icon will tell you which operation it will do.
NOTE: Adding more than one column to the snippet table could effect the table's ability to fit on a smartphone display without requiring the user to scroll horizontally, which is not desirable in mobile design.
To add an interactive button: from the editing view, place your cursor where you want the button, click the "Insert snippet" puzzle icon from the toolbar, then from the "Choose Snippet" pop-up window, select "email", "Button for emailers" and "Insert."
Back in editing view, your button is ready for editing. Right-click on the button's text and click "Link..."
In the "Insert/Edit Link" pop-up window, paste the URL where you want the user to go when they click the button. (Do not try to type the URL from memory.) To alter the text in the button, do so in the "Text to display" field.* Change the "Open link in..." field to "New window" and click "Save."
*TIP: Keep your button text short and to the point -a "call to action." If you add too much text, it will lose it's visual meaning as a clickable button -it will look like a sentence with a green box around it.
Insert a final decorative horizontal Rule (HR) at the end of your news content by placing your cursor at the beginning of the line that reads: "If you have news...", then clicking the "Insert Snippet" puzzle icon, and following the directions in Part 1, #21.
When finished, save the page, then click the "Publish" button.
It's a good idea to make a quick note in the "Version Description" field each time you publish --for example, "First review revisions" -especially when working in a team setting.
After the file is published, a banner will appear at the bottom-left of your browser window. Click on the link to "View (the file) in new window" on the live server. Do not skip this step -you will need it to proceed.
In the new browser window, select and copy the URL of the file from the browser address window.
Go back to the OU staging server window, click on the "Edit" link, then click the "Edit link to web version" green button.
Place your cursor anywhere in the "View as a web page" link, then right-click and select "Link...".
In the "Insert/Edit Link" dialog box, paste the URL you copied above in step 20 into the "URL" field. In the "Target" field, select "New window" from the drop-down menu, then click "Save."
Click the "Save" icon in the toolbar.
Click on the "Properties" tab. In the "Title" field, type the title of your mailer. Click the "Save" button.
Repeat the "Publish" process (see #17 - 20 above), including previewing in a new window and copying the URL, which will be needed in the next step.