Transcript Web best practices to a fashion show

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
Nikki Massaro Kauffman presents…
LESS IS MORE
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
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?
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 MORE
How to Write for the Web
1. Answer the 5W/H immediately.
2. Use inverted pyramid method.
3. Cut word count in half.
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?
LESS IS MORE
Inverted Pyramid
5W/H and Most Important
Content
Less Important
Information
Least Important
Information
(Details)
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
LESS IS MORE
Breaking Up Your Content
•
•
•
Chunking
Lists
Highlighting
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.
Home
Page
Pathway
Page
Content
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)
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).
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.
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).
Andrew Calvin presents…
IT’S ALL ABOUT THE LABEL
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 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".
IT’S 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.
IT’S 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.
IT’S ALL ABOUT THE LABEL
Providing Valuable Information
1. Avoid duplicate content.
2. Eliminate outdated content.
IT’S 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
IT’S 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.
IT’S ALL ABOUT THE LABEL
Using Quality Sources
1. Select valid sources.
2. Check for updated sources.
3. Use balanced sources.
4. Cite your sources.
1.
2.
3.
4.
5.
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.
IT’S 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.
Robin Smail presents…
HOW TO ACCESSORIZE
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 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)
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).
HOW TO ACCESSORIZE
Replacing Verbiage with Visuals
•
Tables
•
Charts, Graphs and Diagrams
•
Screenshots, Images and
Multimedia
HOW TO ACCESSORIZE
Using 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 ACCESSORIZE
Using 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 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)
Natalie Harp presents…
COMFORT MEETS STYLE
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 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
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 STYLE
Using Simple File & Folder Names
1. Use descriptive, one-word names.
2. Use all lowercase letters.
3. Don't use special characters.
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.").
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.
COMFORT MEETS STYLE
Considering a Print CSS for HTML Pages
1.
2.
3.
4.
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
1. The Basics: alt tags
for images/title tags
for links
COMFORT MEETS STYLE
Using “One-Size-Fits-All” Design
2. Considering Color:
sharply contrasting
colors to
differentiate plus
cues other than
color alone
COMFORT MEETS STYLE
Using “One-Size-Fits-All” Design
3. All About Fonts:
normal, relativesized (e.g. medium,
large), easy-to-read
(e.g. Lucida,
Helvetica, Georgia)
fonts
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!
COMFORT MEETS STYLE
Using “One-Size-Fits-All” Design
5. Finally, Validate!:
validate your html
and Section 508
(W3C, Cynthia says,
Bobby)
Questions???
ASK US!