IANR WEB MANAGER NETWORK Meeting 10/20/2016 9:00am

Meeting Agenda IANR Web Manager Network Update – Anne Holz Content Strategy – Anne Holz

Update Next meeting will be in January 2017, date TBA UNLcms Updates: page title, promo image, image caption Forms security update Webaudit changes WDN Board Nomination

Hide Page Title Do not hide unless necessary for the design Update Hide Page Title Do not hide unless necessary for the design <h1> element does not need to be inserted manually.

Update Page Title Hide Page Title

Image Frame with Caption Update Image Frame with Caption San-serif font, easier to read small text

WDN Board Nominations 3 seats open, 2 year term Submit nomination form on wdn.unl.edu by Nov 1, 2016 Voting Nov 8 – Dec 1 New board announced Tuesday, Dec 13 Board meets twice a month, 4-6 hours a month commitment WDN Board Nominations

Why do you need a content strategy? Keeps content unique, fresh and up- to-date Helps content show up in search engines Delivers content in the best format for a good user experience Ensures a professional look and feel that is consistent with the brand Why do you need a content strategy?

Who is your target audience? Students Educators Community Stakeholders Knowing who your target audience is helps you decide which content to feature more prominently on the home page

What type of content would interest your audience? Content Strategy What type of content would interest your audience? Degree and Program information Research information Stats/Awards Tools and resources Maps Staff directory How to apply Events Extension/Outreach News and announcements

Content Strategy Workflow

Get Content Identify content contributors Determine the best way for contributors to deliver content to you (email, upload to Box, enter into UNLcms) Communicate the best file format for content to be delivered (word doc, excel spreadsheet, text file, jpg image, PDF) Get Content

Get Content Establish a publishing frequency to keep content fresh Set dates to periodically review site content and make sure it’s up-to-date Search IANR sites, IANR News, IANR faculty blogs and Extension Publications for related news and content you can link to Get Content

Determine Where Content Should Go on the Site Should it be featured on the Home page? Which main section does it fall under? Does at least one other page link to it? Should it be in the event calendar? Should it be on the site? Determine Where Content Should Go on the Site

Text Images Links Responsiveness Accessibility Add Content

When formatting text on the Web, form follows function. Content strategy

Search Engine Optimization (SEO) is the process of making your site more discoverable in search engines. Search keywords are phrases someone might type in Google to find the type of content that is on your site. Page Title One of the most important elements for search engine optimization (SEO) Can display in Google search results Should contain good search keywords Automatically displays in the URL, <title> tag and <h1> tag by default

Places the Title Displays Content Strategy Places the Title Displays Title in Url Breadcrumbs Browser title Page title <h1>

Title in Google Search Results Content Strategy Title in Google Search Results Title

Headings Organizes content into sections on the page Important for SEO and screen readers In the editor start with <h2>, the page title is already using <h1> and there can only be one <h1> As you step down a level, the number gets larger, you can repeat a number but don’t skip over one Should have non-heading text directly under them Should Include relevant keywords when possible Headings The <h1> tag is generally reserved for the page title text. This is dynamically generated in UNLcms. Start with <h2> in the UNLcms editor. Usually display bigger and bolder than paragraph text <h1>…<h6> where <h1> is the most important Use heading tags only on headings and not to format text that isn’t a heading

Which headings are in the proper order from top to bottom? Content Strategy Which headings are in the proper order from top to bottom? a) <h1> <h2> <h4> <h3> b) <h1> <h2> <h3> c) <h1> <h2> <h3> NO NO YES Repeating is ok Can not skip over 3 when going down a level Can not have more than one <h1>

Colors Use accent colors only for emphasis Content Strategy Colors Use accent colors only for emphasis Avoid using link color on text that isn’t a link

Colors Text on a background color must have a contrast ratio of 4.5:1 Content Strategy Colors Text on a background color must have a contrast ratio of 4.5:1 How it might look to someone with Color-Blindness

Color Contrast Checker Content Strategy WCAG 2 AA must display YES to pass Color Contrast Checker https://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=333333

Images should reflect the organization’s brand Content strategy

Post Good Quality Images Shoot with the highest resolution available on your camera, in a well lit area and make sure the image is in focus Collect and sort through photos taken in the field or at an event Buy photos from Ucomm http://ucomm.unl.edu/photography Avoid scaling an image to make it larger (it can make it blurry or cause jagged edges) Post Good Quality Images

Hero Image Replaces the old Promo Image code Optimized for mobile Content Strategy Hero Image Replaces the old Promo Image code Optimized for mobile 1600 x 900px recommended size Avoid using images that have text embedded in them, use HTML text instead Hero Code http://wdn.unl.edu/wdn/templates_4.1/examples/#hero.html

Image name should be descriptive words separated by hyphens (not spaces %20) Photos usually work best saved as a .jpg with a Photoshop compression quality of 60 Images inserted in the editor should be at least 350px wide Always enter an Image Description (alt text) for screen readers Image Best Practices A screen reader is assistive technology that converts text to speech for people who are blind or visually impaired.

Alt Text in WYSIWYG Editor Content Strategy Alt Text in WYSIWYG Editor Alt Text goes in the Image Description when inserting an image in the WYSIWYG editor.

Image Name and Alt Text Image name cattle-feedlot.jpg Alt text Content Strategy Image Name and Alt Text Image name cattle-feedlot.jpg Alt text Alt=“two cows in a feedlot”

Art is protected by copyright the moment it’s created Art is protected by copyright the moment it’s created. Just because you find an image on the Web doesn’t mean you can use it Ucomm provides over 4,000 icons developed by Streamline that you can download and use The Icon Factory is a tool you can use to search the Ucomm icon library, select a size and color Icon Factory Icon Factory http://experimentstation.unl.edu/IconFactory/

Icon Factory Search by keyword or select a category Content Strategy Icon Factory Search by keyword or select a category Enter title for accessibility Select icon Select color Enter link if clickable

Anchor text should describe the content it links to. Content strategy

Include text, headings and images on the page and not just a list of links External links should only go to authoritative sites (.gov, .edu etc.) When possible, link descriptive anchor text instead of “click here” or URLs Don’t duplicate content or files, link to the original source instead Links

Displaying File Downloads Content Strategy Displaying File Downloads Let user know clicking the link will download a file Display the type of file (PDF, excel, word, etc.) Display size of the file (KB, MB, etc.)

Content Strategy Which anchor text (in red) is the best choice to link to http://extension.unl.edu? Nebraska Extension is making an incredible impact on the success of our state. Nebraska Extension is making an incredible impact on the success of our state. http://extension.unl.edu Nebraska Extension is making an incredible impact on the success of our state. Click here.

Answer More Accessible Better for Search Engine Optimization (SEO) Content Strategy Answer a) Nebraska Extension is making an incredible impact on the success of our state. More Accessible Better for Search Engine Optimization (SEO) Contains a good keyword phrase Text is relevant to the page you’re linking to Gives more context to the link for people who are blind and using a screen reader Indicates to search engines that the page http://extension.unl.edu is relevant when someone searches for “Nebraska Extension”

A responsive website automatically adapts to fit the device’s screen size and orientation. Content strategy

Responsive website Content can be viewed without having to scroll horizontally Text size is readable without having to pinch-zoom Media (images, video…) scales to fit when screen orientation changes Same content is available on all devices Clickable areas are large enough for the average human finger

Responsive page layout In WYSIWYG editor, select alignment “left” or “right” to wrap text around an image (enter 7-10 for vertical and horizontal space) and enter a width Use tables for data only, not for page layout Use grids to display content in columns Responsive page layout Responsive Table Generator http://ianrmedia.unl.edu/responsive-table-generator-tool Responsive Table Generator http://ianrmedia.unl.edu/responsive-table-generator-tool Responsive Table Generator http://ianrmedia.unl.edu/responsive-table-generator-tool Responsive Table Generator http://ianrmedia.unl.edu/responsive-table-generator-tool Responsive Table Generator http://ianrmedia.unl.edu/responsive-table-generator-tool

Web accessibility is a Federal requirement. ADA – Education Information Technology Accessibility Policy in October Content strategy

WEB Accessibility An accessible website allows people with disabilities to navigate, understand and interact with the site without barriers. It includes visual, auditory, physical, speech, cognitive, and neurological disabilities.

Follow Accessibility Guidelines Proper use and ordering of headings <h1>… <h6> Image alt text is required Avoid images with embedded text Text on a background color must have a color contrast ratio of 4.5:1 Video captions and titles are required Use valid HTML5

Click the "QA Test" link in the footer of your UNLcms site to view errors for the page you are on The Webaudit Report checks links, HTML and accessibility Webaudit

Webaudit Page Report “notice” does not affect score Does Not Pass “Fail” needs to be fixed Passes

Webaudit Page Report Review sections with “NP” (no pass) Review table rows that display “Fail” in the PASS/FAIL column and click “Fix” for more information “Notices” do not affect your webaudit score After fixing errors you can click “RESCAN THIS PAGE” Webaudit Page Report How to Fix Common Webaudit Errors http://wdn.unl.edu/documentation/common-problems-found-webaudit

Promote Content Share on Facebook and Twitter Link to it in an email newsletter Include a link to the site in print pieces Ask relevant authoritative sites to link to it Promote Content

Online Resources Content strategy

Online resources Color Contrast Tool https://snook.ca/technical/colour_contrast/colour.html Web Accessibility Image Tutorial http://www.w3.org/WAI/tutorials/images/ Icon Factory http://experimentstation.unl.edu/IconFactory/ Responsive Table Generator http://ianrmedia.unl.edu/responsive-table-generator-tool UNL Media Hub (supports .mp4 video and .mp3 audio files) http://mediahub.unl.edu Webaudit Report Strategy for Fixing Errors http://ianrmedia.unl.edu/resources/webaudit-report-strategy-fixing-errors Online resources

IANR WEB MANAGER NETWORK Next meeting January, 2017 TBA