UAF HTML Email Instructions
advertisement
UAF HTML Email Instructions 1. In your browser, visit http://htmleditor.in/ and click "Source" in the toolbar window in the middle of the page. 2. Highlight and delete the code that appears within the window, then copy and paste the code below into the empty space: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>UAF Email Template</title> </head> <body> <font face="Trebuchet MS, Arial, sans-serif" color="#333333"> <table width="90%" align="center" border="0" cellpadding="5" cellspacing="0"> <tr bgcolor="#236192"> <td align="left"><a href="http://uaf.edu/"><img src="http://www.uaf.edu/uaf/images/head/UAF-LogoIdeal-txt.gif" alt="University of Alaska Fairbanks logo" width="391" height="31" hspace="5" vspace="5" /></a></td> <td align="right" width="60"><a href="http://www.facebook.com/uafairbanks/"><img src="http://www.uaf.edu/uaf/images/facebook-icon.gif" alt="Facebook" height="26" width="24" border="0" /></a>&nbsp;<a href="http://www.twitter.com/uafairbanks/"><img src="http://www.uaf.edu/uaf/images/twitter-icon.gif" alt="Twitter" height="26" width="24" border="0" /></a></td> </tr> <tr> <td align="left" colspan="2"><h1><font color="#236192">Department name</font></h1></td> </tr> <tr> <td align="left" colspan="2"><hr size="1" /> <center> <img src="http://placehold.it/600x400&text=placeholder+image+block" hspace="10" vspace="10" / > </center> <h2><font color="#236192">Header</font></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique tellus ac nulla consectetur fermentum. Etiam accumsan turpis eu aliquam lobortis. Donec tincidunt augue nunc, in ornare ligula facilisis ac. Pellentesque nec velit vitae enim pulvinar volutpat. Vivamus nibh sapien, vulputate eget facilisis nec, hendrerit nec lacus. Donec non felis ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque vel mi ut quam lacinia mollis a quis risus. Proin pellentesque rutrum dui, eget eleifend arcu vulputate eget. Cras in faucibus neque. Maecenas venenatis neque sem, lacinia placerat dui sollicitudin vel. Integer ultricies turpis sed vulputate ornare. Cras suscipit sed urna tempus eleifend. Praesent mattis sapien et urna molestie porta non ut mi. Nunc id dolor ac mauris posuere sodales vitae sit amet lectus. Quisque eu aliquam tortor.</p></td> </tr> <tr> <td align="center" bgcolor="#236192" colspan="2"><p><img src="http://www.uaf.edu/files/branding/Naturally_Inspiring_tm_Wisdom_white.png" alt="University of Alaska Fairbanks logo" width="250" height="35" hspace="5" vspace="5" /><br /> <font color="#ffffff" size="-1">The University of Alaska Fairbanks is accredited by the Northwest Commission on Colleges and Universities.<br /> UAF is an affirmative action/equal opportunity employer and educational institution. </font></p></td> </tr> </table> </font> </body> </html> 3. Add Google Analytics tracking (optional) If you have a snippet of code for tracking email-opens in Google Analytics, paste it in just before the text “</body>” at the end of the text in the window. 4. Click "Source" in the toolbar again to return to the visual editor. UAF HTML Email Instructions 5. The UAF email header should now be visible within the window. 6. Replace the text headers and placeholder text with your own content by clicking directly on the text headers. 7. To replace “placeholder image block” with your own image: a. Make sure your image is uploaded to the web (linking to local images on your hard drive will not work). i. One option is to upload your image to your alaska.edu Google+ account and share “Public.” ii. Navigate to your G+ Profile tab, scroll down to the image you uploaded, right-click the image and select "Copy Image URL" (Chrome), or UAF HTML Email Instructions "Copy Image Location" (Firefox), or "Copy Image Address" (Safari), or "Properties" then highlight/copy the Address (Internet Explorer) b. In htmleditor.in, select the placeholder image block by clicking on it once. c. Click the "Image" button in the htmleditor.in toolbar (located below “Source”). d. Paste the image URL into the “URL” field of the popup window. To do this, right click in the “URL” field and select “paste”. Click "OK". UAF HTML Email Instructions 8. Click "Preview" in the htmleditor.in toolbar (located to the right of “Source”). 9. A new browser window will open with a preview of the email. While looking at the preview window, ensure that the typing cursor is not flashing in the address bar. Do this by clicking once on any of the content in the preview email. 10. Select all content in the browser preview window (In the browser toolbar, go to EditSelect All). 11. Copy the content in the browser preview tab (Go back to EditCopy) 12. In a new browser tab, log into webmail (http://webmail.alaska.edu) 13. Click “Compose" 14. In the body of the email, paste the content into the new message window (EditPaste) 15. Send Special instructions for sending to UAF listservs In order to successfully send HTML emails through the UAF listservs certain settings must first be changed.* *Contact the OIT Support Center if you need assistance with these steps. 1. Log into your listserv list as an administrator: https://lists.alaska.edu/mailman/admin UAF HTML Email Instructions 2. Scroll down and change the “Maximum length in kilobytes (KB) of a message body. Use 0 for no limit” to 150* 3. *Send a test email to yourself prior to sending to the listserv to ensure your email does not exceed the file size limit. a. Submit your changes 4. Click the “Content filtering” link at the top of the admin interface. a. Change “Should Mailman filter the content of list traffic acceding to the settings below?" from YES to NO b. Change “Should Mailman convert text/html parts to plain text? This conversion happens after MIME attachments have been stripped.” from YES to NO c. Submit your changes
