Download minor CSS, design and accessability

LIS650 lecture 3
Minor CSS, accessibility
Thomas Krichel
2006-02-24
more on selectors
• We have seen three types of simple selectors.
• Here we are discussing some more advanced
selectors. Most, but not all, of the selections that
they achieve could also be done by appropriate
class= use.
• CSS can be applied to any XML document,
including, but not limited to XHTML documents.
• Remember that all selectors select elements in
the XHTML or XML document.
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.
more 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, grandchild etc
• E > F selects any <F> element that is a direct
child of an <E> element. This is more restrictive
than the previous selector.
• E + F selects any <F> element immediately
preceded by a sibling element <E>.
more selectors
• E:link selects an <E> element if it is a link.
• 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.
more selectors
• E:first-child selects <E> when <E> is the first child
of its enclosing element
• 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>
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(c) selects element <E> if it is in the
human language c.
• 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
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 }
• p *[href] {font-family: monospace}
• body > p { line-height: 1.3 }
• ol > li {color: black}
• 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 }
a[href="index.html"][title="Thomas"] { 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}
• a:visited {color: blue}
/* unvisited links */
/* visited links */
• a:hover {color: yellow}
• a:active {color: lime}
/* user hovers */
/* 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"] {color: red}
• a[href="http://openlib.org/home/krichel"] {display:
none}
• div > p:first-child {text-decoration: underline}
• a:focus:hover {color: red}
• div > * > div {font-family: sans-serif}
• img[class~="ny"][title="Albany town map"]
{border-style: solid}
example: drop caps with uppercase
• CSS
p { font-size: 12pt; line-height: 12pt }
p:first-letter { font-size: 200%; font-style: italic; fontweight: 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 I
• 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, countryspecific.
paged media support
II
• You can add {margin: }, {margin-top: }, {marginleft: }, 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-breakbefore: } 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.
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 (not published yet)
– 1 that is technology independent (not published yet)
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
="http://highgate.uk/~kmarx">Karl Marx </a>
</address>
• Reveal the structure of the site through the <link
rel="…"/> element. E.g, 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.
• 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="incorporated"> inc.
</abbr>. Same with <acronym> for acronyms.
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.)
lecture history
• LIS650 has always had an element of web site
design.
• Earlier versions of teaching were based on
reviewing books that deal with the topic.
– Krug “don’t make me think”
– Nielson “ … the design of simplicity”
– Morville and Rosenfeld “information architecture” (now
dropped)
this version
• This lecture unites themes and brings in more
web-based resources.
• It was first prepared for the Westchester library
association meeting in Yonkers in 2005.
place of web site design in LIS650
• Now there is one single lecture on web site
design in LIS650.
• It is not clear if it should rather be held at the
beginning of the course or at the end.
assessment
• You return a two-page typed assessment on a
library and information science department web
site.
• A list is at http://wotan.liu.edu/home/krichel
/courses/lis650/doc/departments.html
• Ask me before hand if you want to do a
department web site that is not listed there.
general principle
“Das Gute—dieser Satz steht fest—ist stets das
Böse, was man läßt.”
Wilhelm Busch
Epilogue of “Die Fromme Helene”.
We can learn a lot from failure.
why is there so many bad sites
• I have a sociological theory behind it.
• Most sites are built by consultants.
• They use a snazzy design and animation to
impress the CEO.
• Guess what: The CEO does not use the site.
why a snazzy site
• There is a persistent belief that there is an
“experience” by users to be had when looking at
the site.
• Providers of sites try to impress with good looks
of the site.
• Guess what: the users don’t care.
the aim
• Most users don’t perceive see a web site as a
end in itself.
• Instead they want to
– find out something on the web site
– get something through the web site
• As a consequence they hate things on the site
that distract from the current aim.
• As a consequence, they hate snazzy sites.
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.
• Users “satisfice”. A term coined by the economist
Herbert K. Simon.
not only on the Web
• Satisficing is a general characteristic of human
and has been observed in other areas
– soldiers on a battlefield
– engineers in a disaster zone
why do users satisfice on the Web
• Users are in a hurry.
• The penalty for a wrong guess is low.
• Weighing option does not seem much help.
• Guessing is more fun.
consequences for web behavior
• Users don't figure out how things work.
• They muddle through.
• It does not matter to them how things work.
• When they have found something that is useful to
them
– users try it again;
– eventually, they stick with it.
your site won't change human nature
• You have to work to accommodate users'
behavior.
• You have to make the site as plain and obvious
as possible.
• If it can not be obvious, it must be selfexplanatory.
• That’s a tall order.
you’re not the only one
• Start by avoiding anything that the spin doctors of
“web site experience” tell you.
• There are other web sites, look how they have
done it.
• Resist the temptation to do things differently.
• Just aim for a marginal improvement.
• Use conventions. The users are likely to have
seen them before.
overall approach
• Page design
• Content design
• Site design
• We do not deal with accessibility here.
http://openlib.org/home/krichel
Please shutdown the computers
when
you are done.
Thank you for your attention!