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

Transcription

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

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

3 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

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

5 Update Page Title Hide Page Title

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

7 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

8

9 Why do you need a content strategy? Keeps content unique, fresh and upto-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

10 Who is your target audience? 1. Students 2. Educators 3. Community 4. Stakeholders

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

12 Workflow

13 Identify content contributors Get Content Determine the best way for contributors to deliver content to you ( , 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)

14 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

15 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?

16 Add Content Text Images Links Responsiveness Accessibility

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

18 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

19 Places the Title Displays TITLE IN URL BREADCRUMBS BROWSER TITLE PAGE TITLE <h1>

20 Title in Google Search Results TITLE

21 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

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

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

24 Colors Text on a background color must have a contrast ratio of 4.5:1 HOW IT MIGHT LOOK TO SOMEONE WITH COLOR-BLINDNESS

25 WCAG 2 AA must display YES to pass Color Contrast Checker

26 Images should reflect the organization s brand Content strategy

27 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 Avoid scaling an image to make it larger (it can make it blurry or cause jagged edges)

28 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

29 Image Best Practices 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 A screen reader is assistive technology that converts text to speech for people who are blind or visually impaired.

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

31 Image Name and Alt Text Image name cattle- feedlot.jpg Alt text Alt= two cows in a feedlot

32 Icon Factory 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

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

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

35 Links 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

36 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.)

37 Which anchor text (in red) is the best choice to link to a) Nebraska Extension is making an incredible impact on the success of our state. b) Nebraska Extension is making an incredible impact on the success of our state. c) Nebraska Extension is making an incredible impact on the success of our state. Click here.

38 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

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

40 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

41 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 Table Generator table- generator- tool

42 Web accessibility is a Federal requirement. Content strategy

43 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.

44 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

45 Webaudit 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

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

47 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 How to Fix Common Webaudit Errors problems- found- webaudit

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

49 Online Resources Content strategy

50 Color Contrast Tool Online resources Web Accessibility Image Tutorial Icon Factory Responsive Table Generator UNL Media Hub (supports.mp4 video and.mp3 audio files) Webaudit Report Strategy for Fixing Errors

51 IANR WEB MANAGER NETWORK Next meeting January, 2017 TBA