WHAT NOT TO WEAR ON THE WEB

(A Fashion Show of Sorts)

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

LESS IS MORENikki Massaro Kauffman presents…

LESS IS MOREHow 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

LESS IS MOREAdapting 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?

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)

LESS IS MOREHow to Write for the Web

1. Answer the 5W/H immediately.2. Use inverted pyramid method.3. Cut word count in half.

LESS IS MOREUsing 5W/H

Answer the following in the few lines:1. Who?2. What?3. When?4. Where?5. Why?6. How?

LESS IS MOREInverted Pyramid

LESS IS MORECut 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

LESS IS MOREBreaking Up Your Content

• Chunking• Lists• Highlighting

LESS IS MOREChunking 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.

LESS IS MOREUsing 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)

LESS IS MOREUsing 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).

LESS IS MOREUsing 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.

LESS IS MOREHighlighting 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).

IT’S ALL ABOUT THE LABELAndrew Calvin presents…

IT’S ALL ABOUT THE LABEL

How to “Dress Up” Your Content with a Professional, Credible Appearance:

• Good Language Choice• Valuable Information• Quality Sources• Consistency

IT’S ALL ABOUT THE LABELMaking Good Language Choices

1. Use professional, thoroughly-proofread language.

2. Avoid slang and regional language.3. Avoid jargon, acronyms and

abbreviations.4. Avoid "marketese".

IT’S ALL ABOUT THE LABELAvoiding 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.

IT’S ALL ABOUT THE LABELAvoiding 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.

IT’S ALL ABOUT THE LABELProviding Valuable Information

1. Avoid duplicate content.2. Eliminate outdated content.

IT’S ALL ABOUT THE LABELAvoiding Duplicate Content

1. Coordinate information efforts to avoid duplicates (including interdepartmental).

2. Give preference to the source that is closest to your control: DepartmentPSUExternal

IT’S ALL ABOUT THE LABELEliminating 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.

IT’S ALL ABOUT THE LABELUsing Quality Sources

1. Select valid sources.2. Check for updated sources.3. Use balanced sources.4. Cite your sources.

IT’S ALL ABOUT THE LABELMaintaining 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.

IT’S ALL ABOUT THE LABELAvoiding 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.

HOW TO ACCESSORIZERobin Smail presents…

HOW TO ACCESSORIZE

How to “Complement” Your Content by:

• Replacing Verbiage with Visuals• Matching Your Graphics & Color Palette• Following the “Rule of Three”

HOW TO ACCESSORIZEFollowing 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)

HOW TO ACCESSORIZEMatching 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).

HOW TO ACCESSORIZEReplacing Verbiage with Visuals

• Tables

• Charts, Graphs and Diagrams

• Screenshots, Images and Multimedia

HOW TO ACCESSORIZEUsing Tables

1. Make it a quick, simple reference (comparisons, not complex data). (Examples 1, 2, 3)

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.

HOW TO ACCESSORIZEUsing Charts, Graphs and Diagrams

1. Use to summarize complex data, structures or processes. (Examples 1, 2, 3)

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.

HOW TO ACCESSORIZEUsing 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)

COMFORT MEETS STYLENatalie Harp presents…

COMFORT MEETS STYLE

How to Provide a “Comfortable” Experience for All for Visitors:

• Usability and Accessibility• “Drive-Thru” Navigation• “One-Size-Fits-All” Design

COMFORT MEETS STYLEUsability 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

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.

COMFORT MEETS STYLEUsing Simple File & Folder Names

1. Use descriptive, one-word names.

2. Use all lowercase letters.

3. Don't use special characters.

COMFORT MEETS STYLEFollowing 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.").

COMFORT MEETS STYLEProviding 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.

COMFORT MEETS STYLEConsidering 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.

COMFORT MEETS STYLEUsing “One-Size-Fits-All” Design

1. The Basics: alt tags for images/title tags for links

COMFORT MEETS STYLEUsing “One-Size-Fits-All” Design

2. Considering Color: sharply contrasting colors to differentiate plus cues other than color alone

COMFORT MEETS STYLEUsing “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

COMFORT MEETS STYLEUsing “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!

COMFORT MEETS STYLEUsing “One-Size-Fits-All” Design

5. Finally, Validate!: validate your html and Section 508 (W3C, Cynthia says, Bobby)

ASK US!Questions???