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

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

INTRODUCTION  This session will demonstrate  How to create and send professional HTML s 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

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

OVERVIEW Creating and sending professional HTML s using Communications Management Coeur d’Alene, Idaho

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

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

GETTING STARTED Planning and designing Coeur d’Alene, Idaho

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

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

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

HTML BASICS – HTML 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

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

HTML BASICS – IMAGES & LINKS  Publicly Available URLs  Standard HTML  Embedding 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

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

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

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

COLLEAGUE – ADDING FIELDS  Set Merge File in DPAR   Space Must Follow  Examples:   Coeur d’Alene, Idaho

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 e  Build long mailto link that includes Colleague fields  This:  Generates this Coeur d’Alene, Idaho

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

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

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

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

TIPS & TRICKS Best practices Coeur d’Alene, Idaho

TIPS & TRICKS  Use a text editor  Create the HTML 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 addresses  Always test links  Use captions for images  Testing  Multiple browsers  Different output devices (computers, tablets, phones, printed)  Consider clients Coeur d’Alene, Idaho

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

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

THANK YOU! Mark Kremkow Tammy Robertson Coeur d’Alene, Idaho