• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
What Not to Wear on the Web

What Not to Wear on the Web



Presented as a "fashion show" with four speakers who walked down a "runway"--some even stripped down from overloaded layers of clothing to the basic style--to music before presenting their sections, ...

Presented as a "fashion show" with four speakers who walked down a "runway"--some even stripped down from overloaded layers of clothing to the basic style--to music before presenting their sections, including "I'm Too Sexy", "Material Girl" and "Sharp Dressed Man".



Total Views
Views on SlideShare
Embed Views



3 Embeds 38

http://www.personal.psu.edu 34
http://www.slideshare.net 3
https://blogs.psu.edu 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    What Not to Wear on the Web What Not to Wear on the Web Presentation Transcript

    • 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…
      • 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
      • 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 ?
    • 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
    • LESS IS MORE Breaking Up Your Content
      • 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.
    • 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 )
    • 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).
    • 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.
    • 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).
      • Andrew Calvin presents…
      • 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".
    • 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.
    • 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.
    • IT’S ALL ABOUT THE LABEL Providing Valuable Information
      • 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
    • 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.
    • IT’S ALL ABOUT THE LABEL Using Quality 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.
    • 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.
    • HOW TO ACCESSORIZE Robin Smail presents…
      • 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
      • 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
    • 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.
    • 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.
    • 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)
      • Natalie Harp presents…
      • 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
      • 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.
    • 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.").
    • 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.
    • 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.
    • COMFORT MEETS STYLE Using “One-Size-Fits-All” Design
      • 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
    • 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
    • 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!
    • COMFORT MEETS STYLE Using “One-Size-Fits-All” Design
      • Finally, Validate!: validate your html and Section 508 (W3C, Cynthia says, Bobby)
    • ASK US!
      • Questions???