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> <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
EditSelect All).
11. Copy the content in the browser preview tab (Go back to EditCopy)
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
(EditPaste)
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
Download