LIS650 lecture 4

1
LIS650 lecture 4

• Thomas Krichel
• 2004-02-27

2
today

• Advice
• CSS Properties
• Box properties -- List properties
• Table properties -- Classification properties
• (Audio properties) -- Generated content
  properties
• Paged properties
• Nielsen on site design
• http
• Information architecture
• Semantic web

3
advice for cheaters

• Within a style sheet, for example the contents of
  a ltstylegt tag, you can import another file using
  the _at_import command
• _at_import url(http//www.art.org/kitsch.css)
• or
• _at_import "http//www.art.org/kitsch.css"
• these two ways appear to be equivalent

4
media dependent styles

• Remember the media CSS knows about ?
• Using _at_import, you can import different types for
  different media
• _at_import "URI" medialist
• where medialist is a list of one or more
  media, separated by comma
• Example
• _at_import challenged.css" braille, handheld

5
advice about spacing

• Traditionally only use horizontally, the em
  nowadays is the height of the font, and should be
  used vertically as well, as in DIV.menu
  padding 1.5em margin 1.5em
• For body, use ages, as in BODY margin-left
  15 margin-right0
• To create a menu, do something like DIV.menu
  float left width15em

6
the 'inherit' value

• Each property can have the 'inherit' value. In
  this case, the value of the property for the tag
  is determined by the containing tag.
• Sometimes, 'inherit' is the default value.

7
validating CSS

• It is at http//jigsaw.w3.org/css-validator/
• check your style sheet there when you wonder why
  the damn thing does not work.
• Note that checking the style sheet will not be
  part of the assessment of the web site.

8
box properties V

• z-index let you set an integer value for a
  layer on the canvas where the tag will appear.
• A negative value means that the tag contents is
  behind its containing block.
• Thus if tag 1 has z-index value 1 and tag 2 has
  z-index value number 2, they are laying on top of
  each other.
• the initial value is auto
• browser support for this property is limited.

9
box properties VI

• The visibility property sets the visibility
  of a tag. It takes values
• 'visible' The generated box is visible.
• 'hidden' The generated box is invisible (fully
  transparent), but still affects layout.
• 'collapse' The tag collapses in the table. Only
  useful if applied to table tags. used on
  elements otherwise 'collapse' has the same
  meaning as 'hidden'.
• With this you can do sophisticated alignments

10
box properties VII

• The clip properties sets which area of a box
  is visible.
• When the overflow property is not set to
  'hidden' it will take no effect.
• It only applies to absolutely positioned tags.
• p overflow hidden clip rect(15px, -10px,
  5px, 10px)
• IE v6 does not support it.
• Example at http//wotan.liu.edu/home/krichel/
  clip_test.html

11
box properties VIII

• We now look at overflow and clipping. When a box
  contents is larger than the containing box, it
  overflows.
• overflow can take the values
• visible contents is allowed to overflow
• hidden contents is hidden
• scroll UA displays a scroll device at the edge
  of the box
• auto leave to the user agent to decide what
  to do

12
list properties

• list-style-position can take the value
  inside or outside. The latter is the default,
  the property refers to the position of the list
  item start marker
• list-style-image define the bullet point of a
  list as a graphic, use url(URL) to give the
  location of the graphic.
• list-style-property
• takes the values disc, circle, square,
  none with an unordered list
• takes the value decimal, lower-roman,
  upper-roman, lower-alpha, upper-alpha with
  ordered list.

13
table properties I

• border-collapse allows to choose the
  fundamental table model. It can take two values
• 'separate' implies that each cell has its own
  box.
• 'collapse' implies that adjacent cells share the
  same border

14
table properties II

• The properties on this slide are only useful if
  you choose the separated border model.
• You can set the distance between adjacent cells
  using the border-spacing property. Set it to two
  distances to specify different horizontal and
  vertical values
• empty-cells can be set to
• 'show' shows empty cells with their border
• 'hide' does not show the border around an empty
  cell
• there are some other table properties

15
classification properties I

• display sets the display type of an tag, it
  take the following values
• 'block' displays the tag contents as a block
• 'inline' displays it as inline contents
• 'list-item' makes it an item of a list, you can
  then
• attach list properties to it
• 'none' does not display it
• 'run-in' (see later)
• 'compact' (see later)

16
classification properties II

• display also takes the following values
• table -- table-footer-group
• table-row -- table-row-group
• table-cell -- table-column
• table-caption -- table-column-group
• inline-table -- table-header-group
• these means that they behave like the table
  elements that we already discussed

17
run-in box

• If a block box (that does not float and is not
  absolutely positioned) follows the run-in box,
  the run-in box becomes the first inline box of
  the block box.
• Otherwise, the run-in box becomes a block box.
• Example on next page

18
example for run-in box

• ltheadgtlttitlegta run-in box examplelt/titlegt
• ltstyle type"text/css"gt
• h3 display run-in
• lt/stylegt
• lt/headgt
• ltbodygt lth3gta run-in heading.lt/h3gt ltpgtand a
  paragraph of text that follows it and it
  continues on the line of the h3 lt/bodygt

19
compact box

• If a block-level box follows the compact box, the
  compact box is formatted like a one-line inline
  box. The resulting box width is compared to one
  of the side margins of the block box,
• left margin if direction is left-to-right
• right margin if direction is right-to-left
• If the inline box width is less than or equal to
  the margin, the inline box is given a position in
  the margin as described immediately below.
• Otherwise, the compact box becomes a block box.

20
compact box example

• ltdiv style"dt display compact
• dd margin-left 4em gt
• ltdlgt ltdtgtshort ltddgtltpgtdescription goes here.
• ltdtgttoo long for the margin
  ltddgtltpgtdescription goes here.
• lt/divgt

21
classification properties III

• the whitespace property controls the display of
  white space in a block level tag.
• 'normal' collapses white space
• 'pre' value similar to ltpregt tag
• 'nowrap' ignores carriage returns only

22
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. Example
• p.notebefore content "note" will insert the
  string "note" before any paragraph in the class
  'note'. 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

23
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
• h1before 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!

24
Paged media support I

• CSS has the concept of a page box in which paged
  output should be placed into.
• _at_page rule can be used to specify the size of the
  page
• _at_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.

25
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, and these margins you will
  not be able to control.
• You can add a marks crop property to add crop
  marks
• You can add a mark cross property to create
  registration marks.

26
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
• _at_page first margin-top 3in

27
Named pages

• You can give a page rule an optional name.
  Example
• _at_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.

28
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.

29
conclusions

• These are not all the properties.
• Audio properties are still missing
• But I am not sure if I should go into more.

30
Nielsen on site design

• This is the longest of the chapters in his book.
• It is about the organization of sites.
• But the chapter itself is badly organized. It
  looks like a Jackson Pollock painting and reads
  like a bad student essay
• no structure
• things repeated from before

31
Nielsen on site design

• Usually there is more attention on pages design
  than on site design. Presumably because the page
  design is visual.
• But site design is more important.
• Study found that only 42 of users could find
  simple answers to questions on a web site.

32
the home page

• has to be designed differently than other pages.
• must answer the questions
• where am I?
• what does this site do?
• need a directory of main area
• needs a summary of the site purpose
• a principal search feature may be included,
  otherwise a link to a search page will do
• you may want to put news, but not prominently

33
the home page

• make the home pages a splash screen is not a good
  idea
• the name of the site should be very prominent,
  more so than on interior pages, where it should
  also be named
• There should be a link to the homepage from all
  interior pages, maybe in the logo.
• The less famous a site, the more it has to have
  information about the site on interior pages.
• Users should not be "forced" to go through the
  home page.

34
metaphor

• (why does he talk about this here?)
• it is usually not a good idea to have metaphor on
  the home page.
• a notable exception the shopping cart
• has become a standard feature
• but still illustrates some limits of metaphors
• when you want to buy multiple items of the same
  kind
• when you want to move something out of the cart

35
why navigation?

• Navigation should address three questions
• where am I?
• relative to the whole web
• relative to the site
• the former dominates, as users only click through
  4 to 5 pages on a site
• where have I been?
• but this is mainly the job of the browser esp. if
  links colors are not tempered with
• where can I go?
• this is a matter for site structure

36
site structure

• to visualize it, you have to have it first. Poor
  information architecture will lead to bad
  usability.
• Some sites have a linear structure,
• but most sites are hierarchically organized.
• What ever the structure, it has to reflect the
  users' tasks, not the company structure.

37
Nielsen's example company

• A corporate site may be divided into
• product information
• product families
• individual products
• employment information --investor information
• Now consider a page with configuration and
  pricing for SuperWidgets. It may belong to
• company's web site -- Widgets products
• products category -- SuperWidgets
• pricing and configuration
• Nielsen says show all five levels of navigation.
  Have links to WidgetsClassic and MiniWidgets on
  the SuperWidgets page.

38
breath vs depth in navigation

• some sites list all the top categories on the
  left or top
• users are reminded of all that the site has to
  offer
• stripe can brand a site through a distinctive
  look
• an alternative is to list the hierarchical path
  to the position that the user is in, through the
  use of breadcrumbs
• can be done as a one liner
• combining both
• takes up a lot of space -- can be done as an L
  shape
• recommended for large (10k pages) with
  heterogeneous contents

39
large volumes of information

• most user interfaces on the web are clones of the
  design of the Mac in 1984. They are not designed
  to handle vast amounts of information. Nielsen
  does not say why.
• Historically, early web pages had long lists of
  links
• Nowadays, there is more selective linking
• Users want site maps but they don't seem to be
  much help.

40
reducing navigational clutter

• aggregation shows that a single piece of data is
  part of a whole
• summarization represents large amounts of data by
  a smaller amount
• filtering is throwing out information that we
  don't need
• truncation is having a "more" link on a page
• example-based presentation is just having a few
  examples

41
subsites

• most sites are too large for the page belonging
  to them adding much information.
• therefore subsites can add structure
• a subsite is a bunch of pages with common
  appearance and navigational structure, with one
  page as the home page.
• each page in the subsite should point to the
  subsite home page as well as to global homepage
• should combine global and local navigation

42
search and link behavior

• Nielson says that his studies show that slightly
  more than 50 of users are search-dominant, they
  go straight to the search.
• One in five users is link-dominant. They will
  only use the search after extensive looking
  around the site through links
• The rest have mixed behavior. They will make up
  their mind depending on the task and the look of
  the site.

43
search

• site search should be on all pages
• in general it is not a good idea to scope the
  search to the subsite that you are on
• users don't understand the site structure
• users don't understand the scope of the search
• if you have a scoped search
• state the scope in query and results page
• include link to the search of the whole site, in
  query and results page "not found? try to
  ltagtsearch entire sitelt/agt"

44
Boolean searches

• they should be avoided because noone understands
  them.
• Example task.
• "you have the following pets
• cats
• dogs
• find information about your pet"
• users search "cats and dogs" and find nothing.
• geeks or librarians among users will then say
  "oh, I should have used OR".

45
help the user search

• Nielsen says that computers are good at
  remembering synonyms, checking spelling etc, so
  they should evaluate the query and make
  suggestions on how to improve it.
• but I am not aware of systems that do this "out
  of the box".
• use a wide box. Information retrieval research
  has shown that users tend to enter more words in
  a wider box.

46
the results page

• computed relevance scores are useless for the
  user
• URLs pointing to the same page should be
  consolidated
• search should use quality evaluation. say, if the
  query matches the FAQ, the FAQ should give higher
  ranking.
• he has other suggestions that are either
  unrealistic or would be part of serious
  information retrieval research

47
metadata

• Nielsen thinks that metadata should be used
  because humans are better at saying what the page
  is about than machines.
• He recommends writing into the "name" attribute
  of ltmetagt with the value 'description'
• He also says you should add keywords, with your
  own keywords and those of your competitors.
• He mentions no engine that uses these

48
search destination design

• when the user follows a link from search to a
  page, the page should be presented in context of
  the user's search
• the most common way is to highlight all the
  occurrences of the search terms.
• This helps scanning the destination page.
• Helps understanding why the user reached this
  result.
• but will be no good if the term is in the
  metadata

49
URL design

• URLs should not be part of design, but in
  practice, they are.
• Leave out the "http//" when referring to your
  web page.
• You need a good domain name that is easy to
  remember.

50
understandable URLs

• Users rely on reading URLs when getting an idea
  about where they are on the web site.
• all directory names must be human-readable
• they must be words or compound words
• site must support URL butchering where users
  remove the trailing part after a slash
• make URLs as short as possible
• use lowercase letters throughout
• avoid special chars i.e. anything but letters or
  digits
• stick to one visual word separator, i.e. either
  hyphen or underscore

51
archival URL

• After search engines and email recommendations,
  links are the third most common way for people to
  come across a web site.
• Incoming links must not be discouraged by
  changing site structures

52
dealing with yesterday current contents

• Sometimes it is necessary to have two URLs for
  the same contents
• "todays_news"
• "feature_2003-12-06"
• some may wish to link to the former, others
  to the latter
• In this case you should advertise the URL at
  which the contents is archived (immediately) an
  hope that link providers will link to it there.
• You can put a note on the bottom of the page, or
  possibly use a simple convention if it is very
  easy to guess.

53
supporting old URLs

• Old URLs should be kept alive for as long as
  possible.
• Best way to deal with them is to set up a http
  redirect 301
• good browsers will update bookmarks
• search engines will delete old URLs
• There is also a 302 temporary redirect.

54
refresh header

• ltheadgtltmeta http-equiv"refresh" content"0
• urlnew_url"gt lt/headgt
• This method has a bad reputation because it is
  used by search engine spammers. They create pages
  with useful keywords, and then the user is
  redirect to a page with spam contents.

55
.htaccess

• If you use Apache, you can create a file
  .htaccess (note the dot!) with a line
• redirect 301 old_url new_url
• old_url must be a relative path from the top of
  your site
• new_url can be any URL, even outside your site
• This works on wotan by virtue of configuration
  set for apache for your home directory. Examples
• redirect 301 /krichel http//openlib.org/home/kri
  chel
• redirect 301 Cantcook.jpg http//www.foodtv.com

56
http//openlib.org/home/krichel

• Thank you for your attention!