1. HTML EMAIL TIPS & TRICKS Tammy Robertson, North Idaho College Mark Kremkow, Clackamas Community College July 30, 2015 General Interest - Colleague Coeur d’Alene, Idaho

2. SESSION RULES OF ETIQUETTE  Please turn off you cell phone/pager  If you must leave the session early, please do so as discreetly as possible  Please avoid side conversation during the session Thank you for your cooperation! Coeur d’Alene, Idaho

3. INTRODUCTION  This session will demonstrate  How to create and send professional HTML Emails by leveraging Colleague’s Communications Management using HTML best practices  Benefits of attending this session include  Learning HTML basics  Identifying Colleague-specific HTML requirements  Tips & tricks  Designing for the inbox  Inserting images & links  Complex paragraphs  The mean & the ugly (AKA The Black List!) Coeur d’Alene, Idaho

4. SESSION AGENDA 1. Why HTML? 2. Getting Started 3. Writing the HTML Code 4. HTML Basics 5. Getting the Most out of Colleague 6. Advanced Features 7. Tips & Tricks 8. Summary Coeur d’Alene, Idaho

5. OVERVIEW Creating and sending professional HTML Emails using Communications Management Coeur d’Alene, Idaho

6. OVERVIEW – THE OLD & UGLY No Branding No Formatting Colorless Image-free Big Block of Text Students tune-out Looks unprofessional / impersonal BORING! Coeur d’Alene, Idaho

7. OVERVIEW – THE NEW & PROFESSIONAL Basic Branding Basic Formatting Bulleted lists Text formatting Embedded links and images Professional Look Use of whitespace Presentation is everything! Coeur d’Alene, Idaho

8. GETTING STARTED Planning and designing Coeur d’Alene, Idaho

9. GETTING STARTED – PLANNING  Planning  Identify existing / new communications to be sent  Naming conventions  Identify web links  Branding and design mockup Coeur d’Alene, Idaho

10. GETTING STARTED – DESIGN FOR THE INBOX  Start in Test  Know Your Audience  Electronic vs. Printed  ADA Compliance  Consider Technology  Lowest common denominator  Output medium Coeur d’Alene, Idaho

11. HTML BASICS Basic HTML coding, images, links, and Colleague-specific tricks. Coeur d’Alene, Idaho

12. HTML BASICS – HTML EMAIL REQUIREMENTS  MIME Header  First two lines are placed at top and are required  Other MIME commands can follow  Document Type  Colleague supports  Allows most HTML 5 formatting  HTML Tags  Body Tags Coeur d’Alene, Idaho

13. HTML BASICS – ADDITIONAL MIME COMMANDS Short list here, more can be found at: http://tools.ietf.org/html/rfc4021 http://tools.ietf.org/html/rfc4021 IMPORTANT NOTE: Any items in the MIME header will override settings in EMLD (E-mail Document Options). Your school should decide on a best practice. Coeur d’Alene, Idaho

14. HTML BASICS – IMAGES & LINKS  Publicly Available URLs  Standard HTML  Embedding Email in Graphic – Just Say No!  ‘Click Here’ vs. Full URL  Alt Text  Colleague-Specific Challenges  Create and edit in text editor  Do not copy and paste from Colleague – only into  Hard enter after … and beginning tags Coeur d’Alene, Idaho

15. HTML BASICS – IMAGES & LINKS Coeur d’Alene, Idaho

16. HTML BASICS – IMAGES & LINKS Coeur d’Alene, Idaho

17. GETTING THE MOST OUT OF COLLEAGUE Inserting fields and working with multiple paragraphs Coeur d’Alene, Idaho

18. COLLEAGUE – ADDING FIELDS  Set Merge File in DPAR  Use @FIELD.NAME  Space Must Follow  Examples:  ID# @ID.  @FIRST.NAME @LAST.NAME Coeur d’Alene, Idaho

19. COLLEAGUE – CUSTOM HTML  Can use information drawn from Colleague to create custom HTML  For instance: A link to allow students to opt-out of an emaile  Build long mailto link that includes Colleague fields  This:  Generates this email Coeur d’Alene, Idaho

20. COLLEAGUE: MULTIPLE PARAGRAPHS  Can Use Multiple Paragraphs  For Example:  Standard Opening Paragraph  Followed by 6 Custom Paragraphs Triggered by Rules  Department-Specific Signature Paragraph  Standard Closing Paragraph  Any Number of Custom Paragraphs  Position Field 1-6 Only  Same Numbered Paragraphs Included in Top-To-Bottom Order Coeur d’Alene, Idaho

21. HTML + SQL Combining HTML with SQL for multi-valued fields Coeur d’Alene, Idaho

22. ADVANCED FEATURES – HTML + SQL  Multi-Valued Fields  Unordered Lists  Simple! Coeur d’Alene, Idaho

23. ADVANCED FEATURES – HTML + SQL  SQL  Fairly straight forward, but beyond scope of this session  Code that generated this field between the … related tags.  Can reference CSS stylesheet  Allows change in style without altering field  Use sparingly!  Remember, in-line styling is recommended Coeur d’Alene, Idaho

24. TIPS & TRICKS Best practices Coeur d’Alene, Idaho

25. TIPS & TRICKS  Use a text editor  Create the HTML Email in a text editor  Use a text editor to make changes  Do not copy and paste from Colleague  The dreaded Black List  Use the subject line  Enter Return and Reply Email addresses  Always test links  Use captions for images  Testing  Multiple browsers  Different output devices (computers, tablets, phones, printed)  Consider email clients Coeur d’Alene, Idaho

26. SESSION SUMMARY Coeur d’Alene, Idaho  Fully Branded & Formatted  Color  Images  Professional  Embedded Links & Images  Information Presented in Separate Blocks – Use of Whitespace  Formatting Adjusts for Mobile Devices

27. QUESTIONS & ANSWERS  Be sure to leave about 10–15 minutes for questions from your audience Coeur d’Alene, Idaho

28. THANK YOU! Mark Kremkow Mark.Kremkow@Clackamas.edu Tammy Robertson Tammy.Robertson@nic.edu Coeur d’Alene, Idaho