HTML207 HTML e-Newsletter Donna Carnduff Susannah Finley

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

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 How to Code HTML Newsletters (All New Version) MailChimp Guides Resources

HTML207: HTML e-Newsletter Pr er Move Styles Inline

HTML207: HTML e-Newsletter Put styles back in the a { text-decoration: none; color: #C96501; } 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; } Span around each link this is a link Link Color in Gmail

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

HTML207: HTML e-Newsletter Send from a PC Send from a Mac Test in clients: Outlook 2003, Outlook 2007 Hotmail / Windows Live Yahoo iPhone Gmail Send and Evaluate

HTML207: HTML e-Newsletter Your design is already optimized Don’t like the text size? Use “ -webkit-text-size-adjust: none; ” cations/reference/safariwebcontent/AdjustingtheTextSize/Adjustingt heTextSize.html Good News about Handheld Devices

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 us at or Questions? Evaluation (html_207-2)