1 / 17

HTML 207 HTML e-Newsletter

HTML 207 HTML e-Newsletter. Donna Carnduff Susannah Finley. HTML207: HTML e-Newsletter . Writing for the Web. Good Design Follows Good Content Grammar = Credibility Know Your Audience Call to Action – Where does it point?. HTML207: HTML e-Newsletter . Writing for Your Newsletter.

monifa
Download Presentation

HTML 207 HTML e-Newsletter

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML 207HTML e-Newsletter Donna Carnduff Susannah Finley

  2. HTML207: HTML e-Newsletter Writing for the Web • Good Design Follows Good Content • Grammar = Credibility • Know Your Audience • Call to Action – Where does it point?

  3. HTML207: HTML e-Newsletter Writing for Your Newsletter • Subject Line – short, descriptive, find out more • Best Practices in Writing Email Subject Lines • http://kb.mailchimp.com/article/best-practices-in-writing-email-subject-lines/ • Magnetic Headlineshttp://www.copyblogger.com/magnetic-headlines/ • Article Titles • Action Items • Above the Fold

  4. HTML207: HTML e-Newsletter Download Template Files • http://itc.utk.edu/web/html207/ • UTWrdmrkPlainLong-420px.gif • header-earth.jpg • soil-samples.jpg • template.html

  5. HTML207: HTML e-Newsletter Or…Find Templates Online • campaignmonitor.com/templates(free) • Downloaded Original • Premailer Copy

  6. HTML207: HTML e-Newsletter Customize Your Template Code in DW • Understand Current Code Standards • Adapt for Your Organization • Top links • Main content • Footer • Preview the Document

  7. HTML207: HTML e-Newsletter Best Practices • Consider Title (will be subject line) • Create permanent image folder • Add alt tags to images • Send mix of images and text • Use absolutepaths for images, links • Open a new window • Build your image resources

  8. HTML207: HTML e-Newsletter Resources • Microsoft to Ignore Web Standards in Outlook 2010: Enough is Enough • http://www.campaignmonitor.com/blog/post/2799/microsoft-to-ignore-web-standards-in-outlook-2010/ • Guide to CSS support in email clientshttp://www.campaignmonitor.com/css/#p • Stupid HTML Email Design Mistakes • http://www.mailchimp.com/articles/stupid-html-email-design-mistakes • How to Code HTML Newsletters (All New Version) • http://www.reachcustomersonline.com/2009/01/23/09.27.00/ • MailChimp Guides • http://resources.mailchimp.com/guides/

  9. HTML207: HTML e-Newsletter Resources • UT Listserv site • https://listserv.utk.edu/cgi-bin/wa?INDEX • Hotmail Turned my Headings Green • http://www.creativeglo.co.uk/blog/email-design/green-headings-in-hotmail/

  10. HTML207: HTML e-Newsletter Move Styles Inline • Pre-Mailer

  11. HTML207: HTML e-Newsletter Post to the Web • What are your options for uploading? • Dreamweaver • CyberDuck (Mac) • WinSCP (PC) • VolSpace

  12. HTML207: HTML e-Newsletter Send as e-Newsletter • Distribution List • Internet Explorer • Outlook • File -> Send -> Page by email…

  13. HTML207: HTML e-Newsletter Send as e-Newsletter • Safari • Mail/Entourage • File -> Mail Contents of This Page

  14. HTML207: HTML e-Newsletter Send and Evaluate • Send from a PC • Send from a Mac • Test in email clients:http://www.campaignmonitor.com/stats/email-clients/ • Outlook 2003, 2007, 2010 • Hotmail / Windows Live • Yahoo • iPhone • Gmail

  15. HTML207: HTML e-Newsletter Link Color in Gmail, Headers in Hotmail • Put styles back in the <head> • <style type="text/css" media="screen"> • a { text-decoration: underline; color: #C96501; } • a:link { text-decoration: underline; color: #C96501; } • a:visited { text-decoration: underline; color: #C96501; } • a:hover { text-decoration: none; color: #C96501; } • a:active { text-decoration: none; color: #C96501; } • </style> • Span around each link • <a href="http://link-example.com/" style="color:#C96501;"> • <span style="color:#C96501;">this is a link</span></a>

  16. HTML207: HTML e-Newsletter Fee-Based Services • Campaign Monitor • HomepageFeaturesPricing • Mail Chimp • HomepageFeaturesPricing • Emma • HomepageFeaturesPricing • Constant Contact • HomepageFeaturesPricing

  17. HTML 207: HTML e-Newsletter Questions? Ask now... or … Ask later at 974-9900 or email us at dcarnduf@utk.edu or sfinley@utk.edu

More Related