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

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

VIEWS: 5 PAGES: 53

									      LIS650 lecture 3
Minor CSS, Krug on web site
          design
         Thomas Krichel
           2005-02-18
                        today
• 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
  blanks.
                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
  en-gb
• 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
  E[id="myid"]
• .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.
                      examples
• 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:
  blue}
• a[rel~="copyright"] {color: red}
• a[href="http://www.w3.org/"] {background-color:
  grey}
• *[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="http://openlib.org/home/krichel"]
• div > p:first-child
• a:focus:hover
• p>*>p
• div[class~="ny"][id="albany"]
 example: drop caps with uppercase
• CSS
  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 }
• HTML
  <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
  'note'.
  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
  course!
• 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-
  specific.
       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.
  Example
  @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: }
    property
• 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,
  http://wotan.liu.edu/home/krichel/lis650/examples/
  css_layout/triple_column.html
• 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
  community.
• 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
       blah
– Much of their advice discusses active web sites,
  not passive ones as the ones that we will build
  here.
                  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
  features.
                  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
  – http://www.sl.nsw.gov.au/webcat/srchhelp_w.cfm
  – http://www.amazon.com
  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 Amazon.com
  – 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
  perhaps
  – 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
    there.
                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
  testing.
• 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
  correspondingly.
              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
                     accessibility
• There are two versions of the Web Contents
  Accessibility Guideline (WCAG) published by the
  W3C.
• 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
  href="mailto:marx@highgate.deadnet.uk">Karl
  Marx</a></address>
• If you have a glossary, have it <link/>ed to with
  the rel=glossary in the <head/>.
                     WCAG
• 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
                     WCAG
• 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.
                    WCAG
• 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.
                     WCAG
• 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.
                     WCAG
• 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.)
http://openlib.org/home/krichel

    Please shutdown the computers
                when
            you are done.

      Thank you for your attention!

								
To top