LIS650 lecture 3 Minor CSS, Krug on web site design Thomas Krichel 2005-02-18.

LIS650 lecture 3Minor CSS, Krug on web site

design

Thomas Krichel2005-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

• CSSp { 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

• Exampleh1: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:[email protected]">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!