Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

LIS650 lecture 3 Minor CSS, Krug on web site by xbh15356


									      LIS650 lecture 3
Minor CSS, Krug on web site
         Thomas Krichel
• advanced CSS
  – crafty selectors
  – select properties
• Information Architecture
             ORing selectors
• When we write elementary several selectors
  separated by commas, we refer to all of them
• Example
 h1, .heading {text-align: center}
 will center all <h1> and all elements that are that
 are in the “heading” class.
             fun with selectors
• * selects any element.
• E selects any element called E
• E F selects any F element that is in the contents
  of an E element, as a child, grand-child etc
• E > F selects any F tag that is a child of an E
  element. This is more restrictive than the
  previous selector.
• E:first-child selects E when E is the first child of
  its enclosing element
• E:link selects an E element if it is in the contents
  of an <a> element
               more selectors
• E:visited selects element E if E if it is in the
  contents of a link and the link has been visited.
• E:active, E:hover, E:focus selects element E
  during certain user actions with the mouse.
• E:lang(c) selects element E if it is in the human
  language c
• E + F selects any F element immediately
  preceded by a sibling element E.
               more selectors
• E[a] selects any E element with an attribute "a",
  whatever the value
• E[a="v"] select any E element whose "a"
  attribute value is exactly equal to "v".
• E[a~="v"] selects any element E whose "a"
  attribute value is a list of space-separated
  values, one of which is exactly equal to "v".
  Useful for classes, because you can put an
  element into several classes, separated by
                more selectors
• E[lang|="en"] selects any E element whose
  "lang" attribute has a hyphen-separated list of
  values beginning (from the left) with "en". This
  would select all en languages, be they en-us or
• E:first-letter selects the first letter in the content
  of element E
• E:first-word selects the first word in the contents
  of element E
          convenient shorthand
• We have already seen some.
• E.m is a convenient shorthand for E[class~="m"]
• E#myid is a convenient shorthand for
• .m is a convenient shorthand for *.m
           E:before and E:after
• E:before or E:after can be used to add contents
  before or after a element E.
• We will deal come to these when we discuss
  generated contents properties.
• This will be coming up after the examples for
  selectors that we will discuss now.
• h1, h2, h3 { font-family: sans-serif }
• h1 { color: red }
  em { color: red }
  h1 em { color: blue }
• div p *[href]
• body > p { line-height: 1.3 }
• div ol > li p
• h1 + p {text-indent: 0}
               more example
• h1 + h2 {margin-top: -5mm}
• h1.opener + h2 {margin-top: -5mm}
• h1[title] {color: blue}
• span[class="example"] {color: blue }
• span[hello="Cleveland"][id="Columbus"] { color:
• a[rel~="copyright"] {color: red}
• a[href=""] {background-color:
• *[lang=fr] {display: none}
               more examples
• *[lang|="en"] {color : red }
• .dialog.romeo {voice-family: "Lawrence Olivier",
  charles, male}
• a:link {color: red}            /* unvisited links */
• a:visited {color: blue}        /* visited links */
• a:hover {color: yellow}        /* user hovers */
• a:active {color: lime}          /* active links */
• a.external:visited {color: blue}
                 more examples
• html:lang(fr) { quotes: '« ' ' »' }
• html:lang(de) { quotes: '„' „”'}
• *:lang(fr) > q { quotes: '« ' ' »' }
• *:lang(de) > q { quotes: '„' „”'}
  (quotation style depending on the surrounding
  language, not the language of the quote!)
                more examples
• a[rel~="copyright"]
• a[href=""]
• div > p:first-child
• a:focus:hover
• p>*>p
• div[class~="ny"][id="albany"]
 example: drop caps with uppercase
  p { font-size: 12pt; line-height: 12pt }
  p:first-letter { font-size: 200%; font-style: italic; font-
    weight: bold; float: left }
  span { text-transform: uppercase }
  <p><span>The first</span> few words of an article in
    The Economist.</p>
    generated contents properties
• generated contents is, for example, the bullet
  appearing in front of a list item.
• {content:} can be used with the :before and :after
  selectors.The content can be
  – a text string
  – a url(URL) where the contents is to be found
  – a attr(att) where att is the name of the attribute, the
    content of which is being inserted
• Example
• p.note:before {content: "note"} will insert the
  string "note" before any paragraph in the class
  generated contents properties II
• Here are some counter properties
  – {counter-reset: counter} resets a counter counter
  – {counter-increment: counter} increments a counter
  – {counter(counter)} uses the counter
• Example
  h1:before {counter-increment: chapter_counter;
  counter-reset: section_counter;
  content: "Chapter " counter(chapter_counter) ":"}
  and then we can use h2 for the sections, of
• browser support uncertain!
        user interface properties I
• There is a {cursor:} property to change the shape
  of the cursor. It takes the following values
  – auto          -- crosshair -- default
  – pointer (something suggesting a link)
  – e-resize –ne-resize –nw-resize –n-resize –se-resize
  – sw-resize, --s-resize –w-resiz (Indicate that some edge
    is to be moved)
  – text (usually as an I) --wait (watch or hourglass)
  – help (question mark or balloon)
  – url (with a uri to svg file, that has the graphic to show)
• use these to totally confuse your users
       paged media support                 I
• CSS has the concept of a page box in which
  paged output should be placed into.
• @page rule can be used to specify the size of
  the page
• @page {size: 8.5in 11in}
• Valid values are one or two lengths and they
  words „portrait‟ and „landscape‟. The latter will
  depend on the default print sheet size, country-
       paged media support                  II
• You can add {margin: }, {margin-top: }, {margin-
  left: }, and {margin-right: } properties. They will
  add to the margins that the printer will set by
  default. The default printer margins are beyond
  your control.
• You can add a {marks: crop} property to add
  crop marks
• You can add a {mark: cross} property to create
  registration marks.
      paged media support              III
• You can use three pseudoclasses to specify
  special cases
  – :first for the first page
  – :left for any left page
  – :right for any right page
• Example
  – @page :first {margin-top: 3in}
                named pages
• You can give a page rule an optional name.
  @page rotated { size: landscape}
• Then you can use this with the „page‟ property to
  specify specific ways to print things. Example
  table {page: rotated}
  will print the table on a landscape sheet. This
  comes in handy for bulky tables.
           actual page breaking
• Pages will break if
  – the current page box flows over  or if
  – a new page format is being used with a {page: }
• You can take some control with the {page-break-
  before: } and {page-break-after: } properties.
  They take the values
  – auto   – always      – avoid      – left – right
   The latter two make sure that the element is on
  a left or right page. Sometimes this will require
  two page breaks.
               more examples
• I have made a stolen and simplified example
  available for three column layout, with flexible
  middle column,
• Unfortunately, this example relies a lot on
  dimensions that are fixed in pixels.
                Web site design
• This is supposed to be a big topic in the LIS
• There are a lot of articles about using individual
  web sites, but there is little scientific material out
  there related to actual design.
• But it really comes down to common sense.
• There is no absolute right/wrong.
       Learn from some experts
– Experts discussed here
  • Krug
     – not technical
  • Nielsen
     – has tons of technical advice
     – weak on overall site design
  • Morville and Rosenfeld
     – site architecture focus, but mainly common-sensical blah
– Much of their advice discusses active web sites,
  not passive ones as the ones that we will build
                  Krug's book
• Short
• Deals mainly with the issue of how to build
  commercial web sites.
• Here user confusion is the cause of lost money.
• He mainly deals with sites that have
  – extensive scale
  – searching and browsing
  – user interaction
• Our sites for this course do not have these
                  Krug's advice
• Krug's rule #1: Don‟t make me think.
  – a site should be obvious
  – if it can not be obvious, it must be self-explanatory
• Things that make think
  – non-standard terms
     • jobs
     • employment opportunities
     • job-o-rama
  – links and buttons that are not obvious to find
                search example
• Contrast
  for search.
• Note, however, that search forms are not part of
  this course.
       How people use the web

• Received wisdom would suggest
  – people read the page
  – then make the best decision.
• That is wrong. Instead, people
  – scan pages
  – look for something that seems vaguely related to the
    current aim
  – click on it if clickable
• User satisfice (term by Herbert Simon, a cross
  between satisfying and sufficing)
          why do they do that?
• Why do users satisfice?
  – Users are in a hurry.
  – The penalty for a wrong guess is low.
  – Weighing option does not seem much help.
  – Guessing is more fun.
• Users don't figure out how things work. They
  muddle through
  – It does not matter how things work
  – When they have found something that is useful to
    them, users stick with it.
                Krug's advice
• Create clear visual hierarchy.
  – the more important something is, the more prominent
    it should be
  – things that relate logically should relate visually
  – things that are part of something else should be
    nested visually within it.
• Use conventions
  – they have proven useful
  – users have seen them before
• Break pages into separate parts
• Make obvious what is clickable
• Reduce visual noise.
                 Krug's advice
• Krug's second law: it does not matter how many
  times I have to click as long as each click is a
  mindless, unambiguous choice.
• Krug's third law: Get rid of half the words on
  each page, and then get rid of half of what is left.
  – no happy talk
  – no instructions
              Building navigation
• For commercial web sites, people are usually
  trying to find something.
• It is more difficult than in a shop
  – no sense of scale
  – no sense of direction
  – no sense of location
• Navigation can
  –   give users something to hold on to
  –   tell users what is here
  –   explain users how to use the site
  –   give confidence in the site builder
              Navigation elements
• Site ID
• Sections of items
• utilities
   – link to home page
   – link to search page
   – separate instructions sheet
• Current location needs to be highlighted.
           ways to do navigation
• Breadcrumbs like "store > fruit & veg > tomato"
• Tabs, like the ones seen in
  – Krug's favorite.
• A table on the left or right hand side that stays
  the same
  – will do just fine for us
• Pull-down menus
• Rollovers
navigational elements on the page
• All pages except should have navigation except
  – home page
  – search page
  – instructions pages
• Page names are also important
  – every page needs one
  – in the frame of contents that is unique to the page
  – the name needs to be prominent
  – the name needs to match what users click to get
                Home page design
• For large site, it is a mission impossible
• But above all it has to convey the big picture
  – tagline
      •   clear and informative
      •   just long enough
      •   differentiating
      •   clear benefit showing
      •   lively, personable and sometimes clever
  – welcome blurb
  – but no mission statement
             bad home pages
• put a banner add even though they don't need it
• let deals drive the home page
• promote everything
• are greedy for user data
  That's about all from Krug, folks
• The rest of the book is about how to do usability
• But there is a second edition out there, on which
  I will work for the next course.
           W3C tips on anchors
• When calling the user to action, use brief but
  meaningful link text that:
  – provides some information when read out of context
  – explains what the link offers
  – doesn't talk about mechanics
  – is not a verb phrase
          W3C tips on anchors
• Bad: “To download W3C's editor/browser Amaya,
  click here.”
• Bad: To download Amaya, go to the Amaya
  Website and get the necessary software.
• Good: “Get Amaya!”
• Bad: “Tell me more about Amaya”
• Good: “Tell me more about Amaya”
          W3C tips for headings
• Use <h1> for your top heading.
• If it is too big a font in the most common
  browsers, you can scale it down.
• But then you have a scale down other headers
              W3C tips for alt=
• If the image is simply decorated text , put the text
  in the alt attribute
• If the image is used to create bullets in a list, a
  horizontal line, or other similar decoration, it is
  fine to have an empty alt= , but it is better to use
  things like list-style-image in CSS
• If the image presents a lot of important
  information, try to summarize it in a short line for
  the alt attribute and add a longdesc= link to a
  more detailed
• There are two versions of the Web Contents
  Accessibility Guideline (WCAG) published by the
• Version 1 had 14 guidelines and each guideline
  has 1 or more checkpoints. It is stable.
• Version 2 is being developed right now supposed
  to be
  – easier to understand
  – easier to implement
  – easier to test
  It still looks rather rough!
                 WGAG principles
•   4 principles
    –   Content must be perceivable
    –   Interface elements in the content must be operable.
    –   Content and controls must be understandable
    –   Content must be robust enough to work with current
        and future Web technologies
•   3 implementation docs
    – 1 for HTML
    – 1 for CSS
    – 1 that is technology independent
            WCGA HTML tasks
• Set a DTD using the DTD declaration
• Set a <title>
• Use the <address> to give a document's author,
  e.g. <address>This page was written by <a
• If you have a glossary, have it <link/>ed to with
  the rel=glossary in the <head/>.
• Do not use redirects that are timed, only
  immediate redirects. (redirects are covered later)
• Do not refresh page by themselves.
• Reveal the structure of the site through the <link
  rel="…"/> element.
• Use <h1> to <h6> to give the structure of the
  document. Don't use them for visual effects.
• Use <html lang="…"/> to give the language for
  the document
• Note changes of language with the lang=
  attribute. e.g. <span lang="fr">voiture</span> will
  avoid it being pronounced as "voter" by an
  English reading software.
• Use <strong> and <em> rather than <b> and <i>.
• Use <abbr> with the title= to explain an
  abbreviation eg <abbr title="Long Island
  University">LIU</abbr>. Same with <acronym>
  for accronyms.
• Use <q> and <blockquote> for quotes, but don't
  use <blockquote> for formatting.
• Avoid <b> <i> <tt> <big> <small>.
• In nested lists, use compound counters.
• In tables, use the headers= and scope= attributes
  to explain the structure of your table.
• Avoid using tables for layout. If you must do it,
  only use <table>, <tr> and <td> elements and
  border= cellspacing= and cellpadding= attributes.
• Provide useful link text. If you have an image and
  text for your link, combine them in the same <a>.
• You can use the accesskey= attribute with <a> to
  give users a key that is used to access a link.
• Hide the navigation links for challenged media.
• Use alt="" for purely decorative images.
• Avoid ASCII art.
• Use emoticons judiciously.
• Do not embed text in images.
• Do not use background images.
• Whenever possible use markup and text, rather
  than images, to convey information.

• (there are other guidelines but they talk about
  things that we did not cover here, such as frames,
  forms, scripting.)

    Please shutdown the computers
            you are done.

      Thank you for your attention!

To top