HTML207 HTML e-Newsletter Donna Carnduff Susannah Finley

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

HTML207: HTML e-Newsletter Coffee Housekeeping Midway Break

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

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

HTML207: HTML e-Newsletter Your Goal?

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

HTML207: HTML e-Newsletter Process Templates (free) Downloaded Original Pr er Copy Overview

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

HTML207: HTML e-Newsletter Overview

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

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

HTML207: HTML e-Newsletter Questions Evaluation Overview

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

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

HTML207: HTML e-Newsletter Food Network OTD_031810_2.html OTD_031810_2.html HTML ( 2- column) Tennessee Alumni (1 – column) Examples

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

HTML207: HTML e-Newsletter Extracted Code Process

HTML207: HTML e-Newsletter Move CSS to inline Copy & paste Pr er ( recommended ) Process

HTML207: HTML e-Newsletter Pr er Code Process

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

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

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

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

HTML207: HTML e-Newsletter Subject Line – short, descriptive, find out more Best Practices in Writing Subject Lines Magnetic Headlines Article Titles Action Items Above the Fold Writing for Your Newsletter

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

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

HTML207: HTML e-Newsletter Microsoft Takes Design Back 5 Years: Guide to CSS support in clients Stupid HTML Design Mistakes Resources

HTML207: HTML e-Newsletter Pr er Links Move Styles Inline

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

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

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

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

HTML 207: HTML e-Newsletter Ask now... or... Ask later at or Questions? Evaluation (html_207-1)