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 Coffee Housekeeping Midway Break

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

5. 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

6. HTML207: HTML e-Newsletter Your Goal?

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

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

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

10. HTML207: HTML e-Newsletter Overview

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

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

13. HTML207: HTML e-Newsletter Questions Evaluation Overview

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

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

16. 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

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

18. HTML207: HTML e-Newsletter Extracted Code Process

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

20. HTML207: HTML e-Newsletter Premailer Code Process

21. 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

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

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

24. 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

25. 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

26. 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

27. 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

28. 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 Resources

29. HTML207: HTML e-Newsletter Pre-Mailer Links Move Styles Inline

30. HTML207: HTML e-Newsletter Links a { text-decoration: none; color: #C9650;1 } a:link { text-decoration: none; color: #C96501; } a:visited { text-decoration: none; color: #C96501; } a:hover { text-decoration: underline; color: #C96501; } a:active { text-decoration: none; color: #C96501; } Move Styles Inline

31. HTML207: HTML e-Newsletter What are your options for uploading? VolSpace CyberDuck WinSCP Dreamweaver Post to the Web

32. HTML207: HTML e-Newsletter Send from a PC Send from a Mac Send to: Outlook 2003, Outlook 2007 Hotmail Yahoo Gmail Entourage Send and Evaluate

33. 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

34. HTML 207: HTML e-Newsletter Ask now... or... Ask later at 974-9900 or itc@utk.edu Questions? Evaluation http://oit.utk.edu/workshops/eval/ (html_207-1)