1. HTML207 HTML e-Newsletter Donna Carnduff Susannah Finley

2. HTML207: HTML e-Newsletter Introductions Welcome Susannah Finley Donna Carnduff

3. HTML207: HTML e-Newsletter Enjoy yourself Our Goal Workable e-Newsletter Well-designed Cross-browser/app Informational

4. HTML207: HTML e-Newsletter e-Newsletter: an html file where the styles are placed “inline” within the html tags and distributed via an email client. Definition

5. HTML207: HTML e-Newsletter Good, Bad & the Ugly Overview Examples Food Network ITC Tennessee Alumni

6. HTML207: HTML e-Newsletter Process Templates (free) Downloaded Original Premailer Copy Overview

7. HTML207: HTML e-Newsletter Send Internet Explorer Safari Not available in Firefox at this time Overview

8. HTML207: HTML e-Newsletter Overview

9. HTML207: HTML e-Newsletter Writing for the Web Good Design Writing for Your Newsletter Best Practices Overview

10. HTML207: HTML e-Newsletter Hands-on Customization (DW) Move styles inline (Premailer) Post to the web Send & Evaluate Fee-based services Overview

11. HTML207: HTML e-Newsletter Questions Evaluation Overview

12. HTML207: HTML e-Newsletter Good (aka Benefits) Cheaper Effective Timely Communication Standard Good, Bad & the Ugly

13. HTML207: HTML e-Newsletter Bad (aka Challenges) Browser issues Images Ugly Too much information Good, Bad & the Ugly

14. HTML207: HTML e-Newsletter Food Network http://images.foodnetwork.com/webfood/images/newsletter/R OTD_031810_2.html http://images.foodnetwork.com/webfood/images/newsletter/R OTD_031810_2.html HTML ( 2- column) http://itc.utk.edu/newsletter_monthly Tennessee Alumni (1 – column) http://alumni.utk.edu/eblasts/100227-hubbsreminder.html Examples

15. HTML207: HTML e-Newsletter Template (free – copyright) Campaignmonitor.com/templates Download Original Zip file Extract All Process

16. HTML207: HTML e-Newsletter Extracted Code Process

17. HTML207: HTML e-Newsletter Move CSS to inline Copy & paste Premailer ( recommended ) http://premailer.dialect.ca/ Process

18. HTML207: HTML e-Newsletter Premailer Code Process

19. HTML207: HTML e-Newsletter Tweak tags Spacing around images, alt tags Change font Embed styles for links? Upload to server You told them so Process

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

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

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

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

24. HTML207: HTML e-Newsletter Subject Line – short, descriptive, find out more Best Practices in Writing Email Subject Lines http://www.mailchimp.com/articles/best_practices_in_writing_email_subject_lines/ Magnetic Headlines http://www.copyblogger.com/magnetic-headlines/ http://www.copyblogger.com/magnetic-headlines/ Article Titles Action Items Above the Fold Writing for Your Newsletter

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

26. HTML207: HTML e-Newsletter Consider Title Create permanent image folder Add alt tags to images Send mix of images and text Use absolute links Open a new window Build your image resources Best Practices

27. HTML207: HTML e-Newsletter Microsoft Takes Email Design Back 5 Years: http://www.campaignmonitor.com/blog/post/2393/microsoft-takes-email-design-b/ Guide to CSS support in email clients http://www.campaignmonitor.com/css/#p http://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/ Resources

28. HTML207: HTML e-Newsletter Premailer - http://premailer.dialect.ca/http://premailer.dialect.ca/ Move Styles Inline

29. HTML207: HTML e-Newsletter Put styles back in the 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; } Span around each link this is a link Link Color in Gmail

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

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

32. HTML207: HTML e-Newsletter Campaign Monitor Homepage Features Pricing HomepageFeaturesPricing Mail Chimp Homepage Features Pricing HomepageFeaturesPricing Emma Homepage Features Pricing HomepageFeaturesPricing Constant Contact Homepage Features Pricing HomepageFeaturesPricing Fee-Based Services

33. HTML 207: HTML e-Newsletter Ask now... or … Ask later at 974-9900 or email us at dcarnduf@utk.edu or sfinley@utk.edu dcarnduf@utk.edusfinley@utk.edu Questions? Evaluation http://oit.utk.edu/workshops/eval/ (html_207-2)