1. WHAT NOT TO WEAR ON THE WEB (A Fashion Show of Sorts)

2. Presenters: Nikki Massaro Kauffman, Department of Information Technologies, University Libraries Andrew Calvin, Department of Information Technologies, University Libraries Robin Smail, Instructional Design & Development, World Campus Natalie Harp, Instructional Design & Development, World Campus

3. LESS IS MORE Nikki Massaro Kauffman presents…

4. LESS IS MORE How to Strip Your Content Down to the What Visitors Really Want: Adapting Content to the Web Travel-Sized Content How to Write for the Web Breaking Up Your Content

5. LESS IS MORE Adapting Content for the Web Who reads the Web like a book? Who searches Web, then reads what they find? Who searches the Web, prints, then reads?

6. LESS IS MORE Travel-Sized Content A Web page is the "travel-sized", more portable version of your content. 1-2 vertical scrolls (4 max)

7. LESS IS MORE How to Write for the Web 1.Answer the 5W/H immediately. 2.Use inverted pyramid method. 3.Cut word count in half.

8. LESS IS MORE Using 5W/H Answer the following in the few lines: 1.Who? 2.What? 3.When? 4.Where? 5.Why? 6.How?

9. LESS IS MORE Inverted Pyramid 5W/H and Most Important Content Less Important Information Least Important Information (Details)

10. LESS IS MORE Cut Word Count in Half 1.Eliminate meaningless phrases. 2.Trade larger words/phrases with smaller ones. 3.Make sure your nouns and verbs are close to each other. 4.Give the action to your verb, not your noun. "Get rid of half the words on each page, then get rid of half of what's left.-Steve Krug

11. LESS IS MORE Breaking Up Your Content Chunking Lists Highlighting

12. LESS IS MORE Chunking Your Content 1.Upper-level pages should be shorter. 2.Lower-level pages can be longer, using subheadings and white space. 3.Keep like items together in folder hierarchy. Content Pathway Page Home Page

13. LESS IS MORE Using Subheadings 1.Use heading tags (3 levels max). 2.Consider passive voice for headings. 3.Add an anchor to each heading, and put a menu on the top linking to them. 4.Add a back-to-top link at the end of each section. (Example)Example

14. LESS IS MORE Using White Space 1.Use white space to take a long pause between concepts. 2.Use white space before new subheadings. 3.Use whitespace after lists and graphics to separate them from unrelated material that will follow. 4.Avoid "false bottoms" (too much white space that looks like the end of a page).

15. LESS IS MORE Using Lists 1.Replace longer content with lists for more white space. 2.Create links from list items to more detailed pages. 3.Make sequenced or counted items ordered lists; make all others unordered. 4.Use parallel structure for list items.

16. LESS IS MORE Highlighting Key Words & Phrases 1.Use strong (Bold) font for key words. 2.Use strong (Bold) and/or Emphasized (Italicized) font for key phrases or sentences. 3.Do not use underlines. Viewers think they are hyperlinks. 4.DO NOT USE ALL CAPITAL LETTERS. They are harder to read, readers skip over them, and they can be perceived as angry text (flames).

17. ITS ALL ABOUT THE LABEL Andrew Calvin presents…

18. ITS ALL ABOUT THE LABEL How to Dress Up Your Content with a Professional, Credible Appearance: Good Language Choice Valuable Information Quality Sources Consistency

19. ITS ALL ABOUT THE LABEL Making Good Language Choices 1.Use professional, thoroughly-proofread language. 2.Avoid slang and regional language. 3.Avoid jargon, acronyms and abbreviations. 4.Avoid "marketese".

20. ITS ALL ABOUT THE LABEL Avoiding Slang & Regional Language 1.Web sites have a world-wide audience. 2.Penn State has a diverse student, staff, and faculty population. 3.Using slang and regional language in your sites may alienate your audience.

21. ITS ALL ABOUT THE LABEL Avoiding Jargon, Acronyms & Abbreviations 1.Jargon-heavy content may be passed over for simpler content elsewhere. 2.Use jargon, acronyms, and abbreviations sparingly. 3.If you must use them, define them once per section before using.

22. ITS ALL ABOUT THE LABEL Providing Valuable Information 1.Avoid duplicate content. 2.Eliminate outdated content.

23. ITS ALL ABOUT THE LABEL Avoiding Duplicate Content 1.Coordinate information efforts to avoid duplicates (including interdepartmental). 2.Give preference to the source that is closest to your control: Department PSU External

24. ITS ALL ABOUT THE LABEL Eliminating Outdated Content 1.Never use outdated content as a placeholder. 2.When removing an outdated page, update all links to it. 3.Inform other departments when your content changes or is removed in case they need to make changes in their references to it.

25. ITS ALL ABOUT THE LABEL Using Quality Sources 1.Select valid sources. 2.Check for updated sources. 3.Use balanced sources. 4.Cite your sources.

26. ITS ALL ABOUT THE LABEL Maintaining Consistency 1.If you have a Content Management System (CMS), don't hack it. 2.Use consistent fonts, colors, and layout throughout. 3.Use consistent headings and keyword formatting. 4.Use parallel structure on lists, links, etc. 5.Use PSU, college/department branding.

27. ITS ALL ABOUT THE LABEL Avoiding CMS Hacks 1.A CMS provides a consistent look despite different authors/departments. 2.A CMS enables authors focus on content. 3.A CMS allows one author to transition a page to another without knowledge of CSS, JavaScript, etc. 4.A CMS provides dynamic automated features.

28. HOW TO ACCESSORIZE Robin Smail presents…

29. HOW TO ACCESSORIZE How to Complement Your Content by: Replacing Verbiage with Visuals Matching Your Graphics & Color Palette Following the Rule of Three

30. HOW TO ACCESSORIZE Following the Rule of Three No more than three… – Headings – Fonts – Colors Know when this rule can be strategically broken. (ex: Google logo breaks rule but rest of page is simple)

31. HOW TO ACCESSORIZE Matching Your Graphics & Color Palette 1.Consider limiting color choices for backgrounds, images, graphics, logos and navigation to a predefined palette. 2.Limit text and headers to your color palette. 3.Consider those with limited color perception (grayscale print test).

32. HOW TO ACCESSORIZE Replacing Verbiage with Visuals Tables Charts, Graphs and Diagrams Screenshots, Images and Multimedia

33. HOW TO ACCESSORIZE Using Tables 1.Make it a quick, simple reference (comparisons, not complex data). (Examples 1, 2, 3) 123 2.Use the top and/or left columns as headers. 3.Format and align for easy reading. (left-align) 4.Use table headers and summaries for accessibility. 5. Avoid using tables for layouts.

34. HOW TO ACCESSORIZE Using Charts, Graphs and Diagrams 1.Use to summarize complex data, structures or processes. (Examples 1, 2, 3)123 2.Allow enough contrast to distinguish between bordering areas (test in grayscale). 3.Choose the most noticeable color for your most important piece of data. 4.Use the alt attribute and a descriptive caption.

35. HOW TO ACCESSORIZE Using Screenshots, Images, and Multimedia 1.Use ALT+ Print Screen and paste screenshot into an application where you can crop it. 2.Use the alt attribute as well as a descriptive caption for each item that is more than just decorative. 3.Consider accommodations for viewers with disabilities. (Example)(Example)

36. COMFORT MEETS STYLE Natalie Harp presents…

37. COMFORT MEETS STYLE How to Provide a Comfortable Experience for All for Visitors: Usability and Accessibility Drive-Thru Navigation One-Size-Fits-All Design

38. COMFORT MEETS STYLE Usability and Accessibility The terms are different but similar… Usability - optimum design for: – findability – minimizing distractions Accessibility – designing to accommodate users with disabilities – often legally mandated

39. COMFORT MEETS STYLE Drive-Thru Navigation 1.Use simple file and folder names (for simpler URLs). 2.Follow the best practice linking conventions. 3.Provide multiple routes to high-traffic pages. 4.Consider print CSS for HTML pages.

40. COMFORT MEETS STYLE Using Simple File & Folder Names 1.Use descriptive, one-word names. 2.Use all lowercase letters. 3.Don't use special characters.

41. COMFORT MEETS STYLE Following Linking Conventions 1.Target anchors for same window. 2.Target internal links for same window. 3.Target external links for new window (note this in link text). 4.Avoid mixing anchors, internal and external links in same list. 5.Make link text very descriptive (no "click here" or "tools"). 6.Use descriptive title attributes (e.g. title="This link goes to the Penn State home page.").

42. COMFORT MEETS STYLE Providing Multiple Routes to High-Traffic Pages 1.Think of these pages as major cities with multiple routes in and out of them. 2.Include high-traffic pages in your site index. 3.Add links to high-traffic pages on the left or top menu. 4.Add breadcrumb navigation to your pages. 5.Link to these high-traffic pages from related content.

43. COMFORT MEETS STYLE Considering a Print CSS for HTML Pages 1.Same data; no multiple print/Web versions. 2.Web pages can be searched. 3.Saves viewer from downloading and opening. 4.Only a browser is required.

44. COMFORT MEETS STYLE Using One-Size-Fits-All Design 1.The Basics: alt tags for images/title tags for links

45. COMFORT MEETS STYLE Using One-Size-Fits-All Design 2.Considering Color: sharply contrasting colors to differentiate plus cues other than color alone

46. COMFORT MEETS STYLE Using One-Size-Fits-All Design 3.All About Fonts: normal, relative- sized (e.g. medium, large), easy-to-read (e.g. Lucida, Helvetica, Georgia) fonts

47. COMFORT MEETS STYLE Using One-Size-Fits-All Design 4.Using Tables: use the summary attribute, as well as the caption and table header tags; never use tables for layout!

48. COMFORT MEETS STYLE Using One-Size-Fits-All Design 5.Finally, Validate!: validate your html and Section 508 (W3C, Cynthia says, Bobby)

49. ASK US! Questions???