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

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 MORE Nikki Massaro Kauffman presents…

Nikki Massaro Kauffman presents…

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

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

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?

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)

A Web page is the "travel-sized", more portable version of your content.

1-2 vertical scrolls (4 max)

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

Answer the 5W/H immediately.

Use inverted pyramid method.

Cut word count in half.

LESS IS MORE Using 5W/H Answer the following in the few lines: Who ? What ? When ? Where ? Why ? How ?

Answer the following in the few lines:

Who ?

What ?

When ?

Where ?

Why ?

How ?

LESS IS MORE Inverted Pyramid

LESS IS MORE Cut Word Count in Half Eliminate meaningless phrases. Trade larger words/phrases with smaller ones. Make sure your nouns and verbs are close to each other. 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

Eliminate meaningless phrases.

Trade larger words/phrases with smaller ones.

Make sure your nouns and verbs are close to each other.

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 MORE Breaking Up Your Content Chunking Lists Highlighting

Chunking

Lists

Highlighting

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

Upper-level pages should be shorter.

Lower-level pages can be longer, using subheadings and white space .

Keep like items together in folder hierarchy.

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

Use heading tags (3 levels max) .

Consider passive voice for headings .

Add an anchor to each heading, and put a menu on the top linking to them.

Add a back-to-top link at the end of each section. ( Example )

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

Use white space to take a long pause between concepts.

Use white space before new subheadings.

Use whitespace after lists and graphics to separate them from unrelated material that will follow.

Avoid "false bottoms" (too much white space that looks like the end of a page).

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

Replace longer content with lists for more white space.

Create links from list items to more detailed pages.

Make sequenced or counted items ordered lists; make all others unordered.

Use parallel structure for list items.

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

Use strong ( Bold ) font for key words.

Use strong ( Bold ) and/or Emphasized ( Italicized ) font for key phrases or sentences.

Do not use underlines. Viewers think they are hyperlinks .

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 LABEL Andrew Calvin presents…

Andrew 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

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

Good Language Choice

Valuable Information

Quality Sources

Consistency

IT’S ALL ABOUT THE LABEL Making Good Language Choices Use professional, thoroughly-proofread language. Avoid slang and regional language. Avoid jargon, acronyms and abbreviations. Avoid "marketese".

Use professional, thoroughly-proofread language.

Avoid slang and regional language.

Avoid jargon, acronyms and abbreviations.

Avoid "marketese".

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

Web sites have a world-wide audience.

Penn State has a diverse student, staff, and faculty population.

Using slang and regional language in your sites may alienate your audience.

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

Jargon-heavy content may be passed over for simpler content elsewhere.

Use jargon, acronyms, and abbreviations sparingly.

If you must use them, define them once per section before using.

IT’S ALL ABOUT THE LABEL Providing Valuable Information Avoid duplicate content. Eliminate outdated content.

Avoid duplicate content.

Eliminate outdated content.

IT’S ALL ABOUT THE LABEL Avoiding Duplicate Content Coordinate information efforts to avoid duplicates (including interdepartmental). Give preference to the source that is closest to your control: Department  PSU  External

Coordinate information efforts to avoid duplicates (including interdepartmental).

Give preference to the source that is closest to your control: Department  PSU  External

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

Never use outdated content as a placeholder.

When removing an outdated page, update all links to it.

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 LABEL Using Quality Sources Select valid sources. Check for updated sources. Use balanced sources. Cite your sources.

Select valid sources.

Check for updated sources.

Use balanced sources.

Cite your sources.

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

If you have a Content Management System (CMS), don't hack it .

Use consistent fonts, colors, and layout throughout.

Use consistent headings and keyword formatting.

Use parallel structure on lists, links, etc.

Use PSU, college/department branding.

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

A CMS provides a consistent look despite different authors/departments.

A CMS enables authors focus on content.

A CMS allows one author to transition a page to another without knowledge of CSS, JavaScript, etc.

A CMS provides dynamic automated features.

HOW TO ACCESSORIZE Robin 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 “Complement” Your Content by:

Replacing Verbiage with Visuals

Matching Your Graphics & Color Palette

Following the “Rule of Three”

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)

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 ACCESSORIZE Matching Your Graphics & Color Palette Consider limiting color choices for backgrounds, images, graphics, logos and navigation to a predefined palette. Limit text and headers to your color palette. Consider those with limited color perception (grayscale print test).

Consider limiting color choices for backgrounds, images, graphics, logos and navigation to a predefined palette.

Limit text and headers to your color palette.

Consider those with limited color perception (grayscale print test).

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

Tables

Charts, Graphs and Diagrams

Screenshots, Images and Multimedia

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

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

Use the top and/or left columns as headers.

Format and align for easy reading. (left-align)

Use table headers and summaries for accessibility.

Avoid using tables for layouts.

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

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

Allow enough contrast to distinguish between bordering areas (test in grayscale).

Choose the most noticeable color for your most important piece of data.

Use the alt attribute and a descriptive caption.

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

Use ALT+ Print Screen and paste screenshot into an application where you can crop it.

Use the alt attribute as well as a descriptive caption for each item that is more than just decorative.

Consider accommodations for viewers with disabilities. (Example)

COMFORT MEETS STYLE Natalie Harp presents…

Natalie 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

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

Usability and Accessibility

“Drive-Thru” Navigation

“One-Size-Fits-All” Design

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

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 Use simple file and folder names (for simpler URLs). Follow the best practice linking conventions. Provide multiple routes to high-traffic pages. Consider print CSS for HTML pages.

Use simple file and folder names (for simpler URLs).

Follow the best practice linking conventions.

Provide multiple routes to high-traffic pages.

Consider print CSS for HTML pages.

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

Use descriptive, one-word names.

Use all lowercase letters.

Don't use special characters.

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

Target anchors for same window.

Target internal links for same window.

Target external links for new window (note this in link text).

Avoid mixing anchors, internal and external links in same list.

Make link text very descriptive (no "click here" or "tools").

Use descriptive title attributes (e.g. title="This link goes to the Penn State home page.").

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

Think of these pages as major cities with multiple routes in and out of them.

Include high-traffic pages in your site index.

Add links to high-traffic pages on the left or top menu.

Add breadcrumb navigation to your pages.

Link to these high-traffic pages from related content.

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

Same data; no multiple print/Web versions.

Web pages can be searched.

Saves viewer from downloading and opening.

Only a browser is required.

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

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

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

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

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

All About Fonts: normal, relative-sized (e.g. medium, large), easy-to-read (e.g. Lucida, Helvetica, Georgia) fonts

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

Using Tables: use the summary attribute, as well as the caption and table header tags; never use tables for layout!

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

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

ASK US! Questions???

Questions???