Wednesday, February 27, 2008

Welcome To JavaScript for the Total Non-Programmer

This tutorial will take you step by step through the fundamentals of Javascript. You will learn how to write functions, use data from text boxes, create IF-THEN conditionals, program loops, and generally make your web page "smarter."

I teach computer classes for a living to corporate clients of all levels. After 2 years of teaching, I have learned a lot about communication between people of various levels of computer experience. This tutorial assumes that you have no prior programming experience, but that you have created your own HTML pages.

If you find this tutorial helpful, please let me know (it's my only reward). Also, links are graciously accepted.

What is JavaScript?


Javascript is an easy-to-use programming language that can be embedded in the header of your web pages. It can enhance the dynamics and interactive features of your page by allowing you to perform calculations, check forms, write interactive games, add special effects, customize graphics selections, create security passwords and more.

What's the difference between JavaScript and Java?



Actually, the 2 languages have almost nothing in common except for the name. Although Java is technically an interpreted programming language, it is coded in a similar fashion to C++, with separate header and class files, compiled together prior to execution. It is powerful enough to write major applications and insert them in a web page as a special object called an "applet." Java has been generating a lot of excitment because of its unique ability to run the same program on IBM, Mac, and Unix computers. Java is not considered an easy-to-use language for non-programmers.

Javascript is much simpler to use than Java. With Javascript, if I want check a form for errors, I just type an if-then statement at the top of my page. No compiling, no applets, just a simple sequence.

What is Object Oriented Programming?


Everyone that wants to program JavaScript should at least try reading the following section. If you have trouble understanding it, don't worry. The best way to learn JavaScript is from the examples presented in this tutorial. After you have been through the lessons, come back to this page and read it again.

OOP is a programming technique (note: not a language structure - you don't even need an object-oriented language to program in an object-oriented fashion) designed to simplify complicated programming concepts. In essence, object-oriented programming revolves around the idea of user- and system-defined chunks of data, and controlled means of accessing and modifying those chunks.

Object-oriented programming consists of Objects, Methods and Properties. An object is basically a black box which stores some information. It may have a way for you to read that information and a way for you to write to, or change, that information. It may also have other less obvious ways of interacting with the information.

Some of the information in the object may actually be directly accessible; other information may require you to use a method to access it - perhaps because the way the information is stored internally is of no use to you, or because only certain things can be written into that information space and the object needs to check that you're not going outside those limits.

The directly accessible bits of information in the object are its properties. The difference between data accessed via properties and data accessed via methods is that with properties, you see exactly what you're doing to the object; with methods, unless you created the object yourself, you just see the effects of what you're doing.

Other Javascript pages you read will probably refer frequently to objects, events, methods, and properties. This tutorial will teach by example, without focusing too heavily on OOP vocabulary. However, you will need a basic understanding of these terms to use other JavaScript references.

Objects and Properties


Your web page document is an object. Any table, form, button, image, or link on your page is also an object. Each object has certain properties (information about the object). For example, the background color of your document is written document.bgcolor. You would change the color of your page to red by writing the line: document.bgcolor="red"

The contents (or value) of a textbox named "password" in a form named "entryform" is document.entryform.password.value.

Methods



Most objects have a certain collection of things that they can do. Different objects can do different things, just as a door can open and close, while a light can turn on and off. A new document is opened with the method document.open() You can write "Hello World" into a document by typing document.write("Hello World") . open() and write() are both methods of the object: document.

Events


Events are how we trigger our functions to run. The easiest example is a button, whose definition includes the words onClick="run_my_function()". The onClick event, as its name implies, will run the function when the user clicks on the button. Other events include OnMouseOver, OnMouseOut, OnFocus, OnBlur, OnLoad, and OnUnload.





Chapter 1, The Message Box



This is a very simple script. It opens up an alert message box which displays whatever is typed in the form box below.

Type something in the box. Then click "Show Me"

HOW IT'S DONE







Here's the entire page, minus my comments. Take a few minutes to learn as much as you can from this, then I'll break it down into smaller pieces.


<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Beginning of JavaScript -


function MsgBox (textstring) {

alert (textstring) }


// - End of JavaScript - -->

</SCRIPT>


</HEAD>




<BODY>

<FORM>

<INPUT NAME="text1" TYPE=Text>

<INPUT NAME="submit" TYPE=Button VALUE="Show Me" onClick="MsgBox(form.text1.value)">

</FORM>


</BODY>

</HTML>





Next page


Keyboard Shortcuts for JAWS









Introduction


The following list of keyboard shortcuts should be helpful to a wide array
of individuals and can be used as a quick reference guide. First, this guide
will help JAWS users navigate
within Internet Explorer. Second, this guide will be helpful to
increase the awareness of web content developers regarding keyboard shortcuts
that would conflict with JAWS.
Finally, programmers will find the keyboard commands typical for JAWS user a helpful reference.


Portions of this resource are adapted from the Web Axe list of JAWS Keyboard Shortcuts - external link.




Reading Text

























































































































Command Description
left arrow Say Prior Character
right arrow Say Next Character
Num Pad 5 Say Character
Num Pad 5 twice quickly Say Character Phonetically
Insert + left arrow Say Prior Word
Insert + right arrow Say Next Word
Insert + Num Pad 5 Say Word
Insert + Num Pad 5 twice quickly Spell Word
up arrow Say Prior Line
down arrow Say Next Line
Insert + up arrow Say Current Line
Insert + up arrow twice quickly Spell Current Line
Alt + up arrow Say Prior Sentence
Alt + down arrow Say Next Sentence
Alt+Num Pad 5 Say Current Sentence
Insert + Home Say to Cursor
Insert + Page Up Say from Cursor
Insert + Home twice quickly Spell to Cursor
Insert + Page Up twice quickly Spell from Cursor
Insert + down arrow Say All
down arrow Fast Forward during a Say All
down arrow Rewind during a Say All
Insert + 5 Say Color
Num Pad 5 three times quickly Say ASCII or Hexadecimal Value
Insert + F, twice quickly Say Font
Ctrl + Insert + down arrow Start Skim Reading
Ctrl + Insert + Shift + down arrow Skim Reading dialog box
Insert + Windows Key + down arrow Display Skim Reading Summary



Voice Rate

























Command Description
Ctrl + Alt + Page Down Decrease Voice Rate
Ctrl + Alt + Page Up Increase Voice Rate
Page Down Decrease Voice Rate (when using SayAll)
Page Up Increase Voice Rate (when using SayAll)



Headings and Lists





























Command Description
H Headings Quick Key
1-6 Headings level 1-6
Insert + F6 List of Headings
L List Quick Key
I List Item Quick Key



Tables



Moving within tables





















































Command Description
T Table Quick Key
Ctrl + Alt +down arrow Cell to Right
Ctrl + Alt + left arrow Cell to Left
Ctrl + Alt + down arrow Cell Below
Ctrl + Alt + up arrow Cell Above
Ctrl + Alt + Home First Cell
Ctrl + Alt+END Last Cell
Ctrl + Alt + Shift + up arrow First Cell in Column
Ctrl + Alt + Shift +down arrow Last Cell in Column
Ctrl + Alt + Shift + left arrow First Cell in Row
Ctrl + Alt + Shift +left arrow Last Cell in Row



Table reading





































Command Description
Ctrl + Alt+Num Pad 5 Say Current Cell
Insert + Shift +up arrow Read Current Row
Insert + Shift + Home Read from Start of Row
Insert + Shift + Page Up Read to End of Row
Insert + Shift+Num Pad 5 Read Current Column
Insert + Shift + End Read from Top of Column
Insert + Shift + Page Down Read to Bottom of Column




Forms

































































Command Description
F Form Quick Key
B Button Quick Key
Enter (in a form element) Enter Forms Mode
Tab Navigate to Next form Control
Shift + Tab Navigate to Previous Form Control
Spacebar Select and Deselect Checkboxes
Alt + down arrow Open Combo Box/Jump Menu
Ctrl + Shift or Ctrl + Spacebar Select Multiple List Items
Ctrl+ \ Unselect All But Current
up arrow/down arrow Select Radio Button
up arrow/down arrow or the First letter Select Element in Combo Box
Enter (in forms mode) Submit Form
+ key Exit Forms Mode
Insert + F5 List of Form Elements




Frames





















Command Description
Ctrl + Tab Move from one frame to the next frame within the page.
Ctrl + Shift + Tab Move from one frame to the previous frame within the page.
Ins + F9 Bring up a list of frames that are present within the page



Other Commands

























Command Description
Ctrl + F Search for a word or a phrase
Ins + Esc Refresh Screen, i.e. repaints all the currently displayed items on the screen
Ins + F5 Reformat documents, i.e. reformats multiple column pages to be more readable with speech.
Insert + F1 Help with current element








http://www.webaim.org/resources/shortcuts/jaws.php

Tuesday, February 26, 2008

A sample style sheet for HTML 4.0

This appendix is informative, not normative.
This style sheet describes the typical formatting of all HTML 4.0 ([HTML40]) elements based on extensive research into current UA practice. Developers are encouraged to use it as a default style sheet in their implementations.
The full presentation of some HTML elements cannot be expressed in CSS2, including replaced elements (IMG, OBJECT), scripting elements (SCRIPT, APPLET), form control elements, and frame elements.

    ADDRESS,
    BLOCKQUOTE,
    BODY, DD, DIV,
    DL, DT,
    FIELDSET, FORM,
    FRAME, FRAMESET,
    H1, H2, H3, H4,
    H5, H6, IFRAME,
    NOFRAMES,
    OBJECT, OL, P,
    UL, APPLET,
    CENTER, DIR,
    HR, MENU, PRE { display: block }
    LI { display: list-item }
    HEAD { display: none }
    TABLE { display: table }
    TR { display: table-row }
    THEAD { display: table-header-group }
    TBODY { display: table-row-group }
    TFOOT { display: table-footer-group }
    COL { display: table-column }
    COLGROUP { display: table-column-group }
    TD, TH { display: table-cell }
    CAPTION { display: table-caption }
    TH { font-weight: bolder; text-align: center }
    CAPTION { text-align: center }
    BODY { padding: 8px; line-height: 1.33 }
    H1 { font-size: 2em; margin: .67em 0 }
    H2 { font-size: 1.5em; margin: .83em 0 }
    H3 { font-size: 1.17em; margin: 1em 0 }
    H4, P,
    BLOCKQUOTE, UL,
    FIELDSET, FORM,
    OL, DL, DIR,
    MENU { margin: 1.33em 0 }
    H5 { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }
    H6 { font-size: .67em; margin: 2.33em 0 }
    H1, H2, H3, H4,
    H5, H6, B,
    STRONG { font-weight: bolder }
    BLOCKQUOTE { margin-left: 40px; margin-right: 40px }
    I, CITE, EM,
    VAR, ADDRESS { font-style: italic }
    PRE, TT, CODE,
    KBD, SAMP { font-family: monospace }
    PRE { white-space: pre }
    BIG { font-size: 1.17em }
    SMALL, SUB, SUP { font-size: .83em }
    SUB { vertical-align: sub }
    SUP { vertical-align: super }
    S, STRIKE, DEL { text-decoration: line-through }
    HR { border: 1px inset }
    OL, UL, DIR,
    MENU, DD { margin-left: 40px }
    OL { list-style-type: decimal }
    OL UL, UL OL,
    UL UL, OL OL { margin-top: 0; margin-bottom: 0 }
    U, INS { text-decoration: underline }
    CENTER { text-align: center }
    BR:before { content: "\A" }

    /* An example of style for HTML 4.0's ABBR/ACRONYM elements */

    ABBR, ACRONYM { font-variant: small-caps; letter-spacing: 0.1em }
    A[href] { text-decoration: underline }
    :focus { outline: thin dotted invert }


    /* Begin bidirectionality settings (do not change) */
    BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
    BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }

    *[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
    *[DIR="rtl"] { direction: rtl; unicode-bidi: embed }

    /* Elements that are block-level in HTML4 */
    ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET,
    FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, IFRAME,
    NOSCRIPT, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER,
    DIR, HR, MENU, PRE, LI, TABLE, TR, THEAD, TBODY, TFOOT,
    COL, COLGROUP, TD, TH, CAPTION
    { unicode-bidi: embed }
    /* End bidi settings */


    @media print {
    @page { margin: 10% }
    H1, H2, H3,
    H4, H5, H6 { page-break-after: avoid; page-break-inside: avoid }
    BLOCKQUOTE,
    PRE { page-break-inside: avoid }
    UL, OL, DL { page-break-before: avoid }
    }

    @media speech {
    H1, H2, H3,
    H4, H5, H6 { voice-family: paul, male; stress: 20; richness: 90 }
    H1 { pitch: x-low; pitch-range: 90 }
    H2 { pitch: x-low; pitch-range: 80 }
    H3 { pitch: low; pitch-range: 70 }
    H4 { pitch: medium; pitch-range: 60 }
    H5 { pitch: medium; pitch-range: 50 }
    H6 { pitch: medium; pitch-range: 40 }
    LI, DT, DD { pitch: medium; richness: 60 }
    DT { stress: 80 }
    PRE, CODE, TT { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
    EM { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
    STRONG { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
    DFN { pitch: high; pitch-range: 60; stress: 60 }
    S, STRIKE { richness: 0 }
    I { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
    B { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
    U { richness: 0 }
    A:link { voice-family: harry, male }
    A:visited { voice-family: betty, female }
    A:active { voice-family: betty, female; pitch-range: 80; pitch: x-high }
    }

The grammar of CSS2

The grammar below defines the syntax of CSS2. It is in some sense, however, a superset of CSS2 as this specification imposes additional semantic constraints not expressed in this grammar. A conforming UA must also adhere to the forward-compatible parsing rules, the property and value notation, and the unit notation. In addition, the document language may impose restrictions, e.g. HTML imposes restrictions on the possible values of the "class
The grammar below is LL(1) (but note that most UA's should not use it directly, since it doesn't express the parsing conventions, only the CSS2 syntax). The format of the productions is optimized for human consumption and some shorthand notation beyond Yacc (see [YACC]) is used:

  • *: 0 or more

  • +: 1 or more

  • ?: 0 or 1

  • |: separates alternatives

  • [ ]: grouping



The productions are:


stylesheet
: [ CHARSET_SYM S* STRING S* ';' ]?
[S|CDO|CDC]* [ import [S|CDO|CDC]* ]*
[ [ ruleset | media | page | font_face ] [S|CDO|CDC]* ]*
;
import
: IMPORT_SYM S*
[STRING|URI] S* [ medium [ ',' S* medium]* ]? ';' S*
;
media
: MEDIA_SYM S* medium [ ',' S* medium ]* '{' S* ruleset* '}' S*
;
medium
: IDENT S*
;
page
: PAGE_SYM S* IDENT? pseudo_page? S*
'{' S* declaration [ ';' S* declaration ]* '}' S*
;
pseudo_page
: ':' IDENT
;
font_face
: FONT_FACE_SYM S*
'{' S* declaration [ ';' S* declaration ]* '}' S*
;
operator
: '/' S* | ',' S* | /* empty */
;
combinator
: '+' S* | '>' S* | /* empty */
;
unary_operator
: '-' | '+'
;
property
: IDENT S*
;
ruleset
: selector [ ',' S* selector ]*
'{' S* declaration [ ';' S* declaration ]* '}' S*
;
selector
: simple_selector [ combinator simple_selector ]*
;
simple_selector
: element_name? [ HASH | class | attrib | pseudo ]* S*
;
class
: '.' IDENT
;
element_name
: IDENT | '*'
;
attrib
: '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
[ IDENT | STRING ] S* ]? ']'
;
pseudo
: ':' [ IDENT | FUNCTION S* IDENT S* ')' ]
;
declaration
: property ':' S* expr prio?
| /* empty */
;
prio
: IMPORTANT_SYM S*
;
expr
: term [ operator term ]*
;
term
: unary_operator?
[ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* |
TIME S* | FREQ S* | function ]
| STRING S* | IDENT S* | URI S* | RGB S* | UNICODERANGE S* | hexcolor
;
function
: FUNCTION S* expr ')' S*
;
/*
* There is a constraint on the color that it must
* have either 3 or 6 hex-digits (i.e., [0-9a-fA-F])
* after the "#"; e.g., "#000" is OK, but "#abcd" is not.
*/
hexcolor
: HASH S*
;

Lexical scanner


The following is the tokenizer, written in Flex (see [FLEX]) notation. The tokenizer is case-insensitive.
The two occurrences of "\377" represent the highest character number that current versions of Flex can deal with (decimal 255). They should be read as "\4177777" (decimal 1114111), which is the highest possible code point in Unicode/ISO-10646.
%option case-insensitive

h [0-9a-f]
nonascii [\200-\377]
unicode \\{h}{1,6}[ \t\r\n\f]?
escape {unicode}|\\[ -~\200-\377]
nmstart [a-z]|{nonascii}|{escape}
nmchar [a-z0-9-]|{nonascii}|{escape}
string1 \"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2 \'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'

ident {nmstart}{nmchar}*
name {nmchar}+
num [0-9]+|[0-9]*"."[0-9]+
string {string1}|{string2}
url ([!#$%&*-~]|{nonascii}|{escape})*
w [ \t\r\n\f]*
nl \n|\r\n|\r|\f
range \?{1,6}|{h}(\?{0,5}|{h}(\?{0,4}|{h}(\?{0,3}|{h}(\?{0,2}|{h}(\??|{h})))))

%%

[ \t\r\n\f]+ {return S;}

\/\*[^*]*\*+([^/][^*]*\*+)*\/ /* ignore comments */

"" {return CDC;}
"~=" {return INCLUDES;}
"|=" {return DASHMATCH;}

{string} {return STRING;}

{ident} {return IDENT;}

"#"{name} {return HASH;}

"@import" {return IMPORT_SYM;}
"@page" {return PAGE_SYM;}
"@media" {return MEDIA_SYM;}
"@font-face" {return FONT_FACE_SYM;}
"@charset" {return CHARSET_SYM;}
"@"{ident} {return ATKEYWORD;}

"!{w}important" {return IMPORTANT_SYM;}

{num}em {return EMS;}
{num}ex {return EXS;}
{num}px {return LENGTH;}
{num}cm {return LENGTH;}
{num}mm {return LENGTH;}
{num}in {return LENGTH;}
{num}pt {return LENGTH;}
{num}pc {return LENGTH;}
{num}deg {return ANGLE;}
{num}rad {return ANGLE;}
{num}grad {return ANGLE;}
{num}ms {return TIME;}
{num}s {return TIME;}
{num}Hz {return FREQ;}
{num}kHz {return FREQ;}
{num}{ident} {return DIMEN;}
{num}% {return PERCENTAGE;}
{num} {return NUMBER;}

"url("{w}{string}{w}")" {return URI;}
"url("{w}{url}{w}")" {return URI;}
{ident}"(" {return FUNCTION;}

U\+{range} {return UNICODERANGE;}
U\+{h}{1,6}-{h}{1,6} {return UNICODERANGE;}

. {return *yytext;}

Differences Between CSS1 and CSS2

There are some really interesting differences between Cascading Style Sheets level 1 and level 2. CSS2 offers many new options for accessibility and use across various user agents. Positioning in CSS2 is more flexible and offers more options to the designer. Automated content allows developers to force the user agent to display specific content elements as well as the layout, look, and feel. Also there is support for special cursors in CSS2 as well as dynamic outlining.

Accessibility and CSS2


Aural style sheets


With CSS2, there are now style properties to define an aural style sheet for your documents. This means, that if a customer comes to your Web page with a screen reader that is CSS2 enabled, you can define how your page will sound. And this isn't just useful for blind customers, with aural CSS your documents can be listened to in automobiles, as auditory documentation for training, entertainment, and even for people who simply can't read.

Paging


CSS1 dealt almost solely with "continuous media" - that is, media like Web pages that would run continuously until the end. Paged media, such as paper, slide shows, or transparencies were not handled. But with CSS2, it is possible to define how pages should be displayed or printed. This means that you can specify the size of the page to be printed, add things like crop marks and register marks, or how the page should layout on double- and single-sided printings.

Media Types


CSS2 media types allow you to specify different style rules depending upon how your document is going to be displayed. There are many different types you can specify, including: aural, braille, handheld, screen, print, and tv (plus others).

International Accessibility Features


CSS2 now offers features such as more list styles for international documents, support for bidirectional text, and language-sensitive quotation marks.

There are some differences in the syntax specified in the CSS1 recommendation ([CSS1]), and the one above. Most of these are due to new tokens in CSS2 that didn't exist in CSS1. Others are because the grammar has been rewritten to be more readable. However, there are some incompatible changes, that were felt to be errors in the CSS1 syntax. They are explained below.


  • CSS1 style sheets could only be in 1-byte-per-character encodings, such as ASCII and ISO-8859-1. CSS2 has no such limitation. In practice, there was little difficulty in extrapolating the CSS1 tokenizer, and some UAs have accepted 2-byte encodings.


  • CSS1 only allowed four hex-digits after the backslash (\) to refer to Unicode characters, CSS2 allows six. Furthermore, CSS2 allows a whitespace character to delimit the escape sequence. E.g., according to CSS1, the string "\abcdef" has 3 letters (\abcd, e, and f), according to CSS2 it has only one (\abcdef).


  • The tab character (ASCII 9) was not allowed in strings. However, since strings in CSS1 were only used for font names and for URLs, the only way this can lead to incompatibility between CSS1 and CSS2 is if a style sheet contains a font family that has a tab in its name.


  • Similarly, newlines (escaped with a backslash) were not allowed in strings in CSS1.

  • CSS2 parses a number immediately followed by an identifier as a DIMEN token (i.e., an unknown unit), CSS1 parsed it as a number and an identifier. That means that in CSS1, the declaration 'font: 10pt/1.2serif' was correct, as was 'font: 10pt/12pt serif'; in CSS2, a space is required before "serif". (Some UAs accepted the first example, but not the second.)


  • In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units). To make ".55ft" a valid class, CSS2 requires the first digit to be escaped.




Improved Features over CSS1


Font selection


When choosing which font to use, CSS2 offers both the standard "name matching" system that CSS1 uses, plus three other methods for defining fonts. These are: intelligent font matching, where the user agent uses a font that is the closest match to the requested font. Font synthesis, where the user agent creates a font that matches the metrics of the requested font. And font download, where the user agent retrieves a font over the Web.

Tables


CSS2 recognizes that there might not be a table element (and related elements) in an XML document - but to display tabular data, it is important to have this as a style. So CSS2 allows you to define any element as a table element (and all the related table elements).

Positioning


While CSS1 had some aspects of positioning, CSS2 takes it to the next level. Relative and absolute positioning determine their location based on their placement within the document or based on the user agent. But along with absolute positioning is the concept of fixed positioning. This acts as a sort of "watermark" in continuous media. In paged media, an element with fixed position is repeated on every page. This allows you to create frame-like documents or place a signature on every page of a document.

Cursors


Now you can define how you want your cursor to respond to various actions. For example, you might want the default behavior over a link to be changed over some of the links in your document. With CSS2 you can define how the cursor should look over any element.

There are many other features that are new with CSS2, but these are some of the most exciting ones. There are also elements like text-shadows, new pseudo-classes, the use of system colors, and dynamic outlines. You can find out more about the differences between CSS1 and CSS2 on the W3C Web site.




Changes from CSS1


Contents


  • 1 New functionality

  • 2 Updated descriptions

  • 3 Semantic changes from CSS1



This appendix is informative, not normative.
CSS2 builds on CSS1 and all valid CSS1 style sheets are valid CSS2 style sheets. The changes between the CSS1 specification (see [CSS1]) and this specification fall into three groups: new functionality, updated descriptions of CSS1 functionality, and changes to CSS1.

New functionality


In addition to the functionality of CSS1, CSS2 supports:
  • The concept of media types.

  • The 'inherit' value for all properties.

  • Paged media

  • Aural style sheets

  • Several internationalization features, including list numbering styles, support for bidirectional text, and support for language-sensitive quotation marks.

  • An extended font selection mechanism, including intelligent matching, synthesis, and downloadable fonts. Also, the concept of system fonts has been is introduced, and a new property, 'font-size-adjust', has been added.

  • Tables, including new values on 'display' and 'vertical-align'.

  • Relative and absolute positioning, including fixed positioning.

  • New box types (along with block and inline): compact and run-in.

  • The ability to control content overflow, clipping, and visibility in the visual formatting model.

  • The ability to specify minimum and maximum widths and heights in the visual formatting model.

  • An extended selector mechanism, including child selectors, adjacent selectors, and attribute selectors.

  • Generated content, counters and automatic numbering, and markers.

  • Text shadows, through the new 'text-shadow' property.

  • Several new pseudo-classes, :first-child, :hover, :focus, :lang.

  • System colors and fonts.

  • Cursors.

  • Dynamic outlines.


  • Updated descriptions


    The CSS1 specification was short and concise. This specification is much more voluminous and more readable. Much of the additional content describes new functionality, but the description of CSS1 features has also been extended. Except in a few cases described below, the rewritten descriptions do not indicate a change in syntax nor semantics.

    Semantic changes from CSS1


    While all CSS1 style sheets are valid CSS2 style sheets, there are a few cases where the CSS1 style sheet will have a different meaning when interpreted as a CSS2 style sheet. Most changes are due to implementation experience feeding back into the specification, but there are also some error corrections.


    • The meaning of "!important" has been changed. In CSS1, "!important" in an author's style sheet took precedence over one in a user style sheet. This has been reversed in CSS2.

    • In CSS2 color values are clipped with regard to the device gamut, not with regard to the sRGB gamut as in CSS1.

    • CSS1 simply said that 'margin-right' was ignored if the both 'margin-left' and 'width' were set. In CSS2 the choice between relaxing 'margin-right' or 'margin-left' depends on the writing direction.

    • In CSS1, several properties (e.g., 'padding') had values referring to the width of the parent element. This was an error; the value should always refer to the width of a block-level element and this specification reflects this by introducing the term "containing block".

    • The initial value of 'display' is 'inline' in CSS2, not 'block' as in CSS1.

    • In CSS1, the 'clear' property applied to all elements. This was an error, and the property only applies to block-level elements in CSS2.

    • In CSS1, ':link', ':visited' and ':active' were mutually exclusive; in CSS2, ':active' can occur together with ':link' or ':visited'.

    • The suggested scaling factor between adjacent 'font-size' indexes in the table of font sizes has been reduced from 1.5 to 1.2.

    • The computed value, not the actual value, of 'font-size' is inherited.

    • The CSS1 description of 'inside' (for 'list-style-position') allowed the interpretation that the left margin of the text was affected, rather than the position of the bullet. In CSS2 that interpretation is ruled out.

    • Please also consult the normative section on the differences between the CSS1 and CSS2 tokenizer.

    Friday, February 15, 2008

    Web 2.0 Design Style Guide

    Written by Ben Hunt of Scratchmedia

    Summary of features covered

    The list below is a summary of many of the common features of typical "Web 2.0" sites.


    Clearly, a site doesn't need to exhibit all these features to work well, and displaying these features doesn't make a design "2.0" - or good!


    I've already addressed some of these factors in my introductory Current Style article.


    http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm




    1. Simplicity

    2. Central layout

    3. Fewer columns

    4. Separate top section

    5. Solid areas of screen real-estate

    6. Simple nav

    7. Bold logos

    8. Bigger text

    9. Bold text introductions

    10. Strong colours

    11. Rich surfaces

    12. Gradients

    13. Reflections

    14. Cute icons

    15. Star flashes




    Disclaimer


    Not all these design features are appropriate in all cases. There are always exceptions, and there are lots of bad examples of these features being used wrongly, over-used, or done without sensitivity to the "symphony" of a site's design.


    You can't just take all these elements, throw them together and make a good web page, any more than you can take some eggs, sugar, flour and throw them together and get a cake.


    Making a web page that works requires a lot of sensitivity to the various forces at work. A good design solution is one that balances those (often opposing) forces.


    Web 2.0 ?!


    I'm using the term "Web 2.0 design" to describe the prevailing style of web design I introduce in my current style article.


    Many people use the term "Web 2.0" to describe:



    • a resurgence in the web economy

    • a new level of technological interactivity between web sites and services

    • or social phenomena deriving from new types of online communities and social networks


    Many others also use the term in reference to a recent school of web design. I'm comfortable with using it in that context here.


    In sociological terms, movements impact people on many levels: economic, cultural, political, etc. Is skate-punk about entertainment and sport, music and the music industry, fashion, or the breakdown of society?



    Shortcut to Web2.0 Style


    If you don't have the resources to create your own “2.0”-style site design, TemplateMonster have just (17 July 07) launched a new Web 2.0 Templates section.


    Of course, a purchased template won't always hit your goals perfectly, but a custom design doesn't always guarantee that either!


    Many sites will benefit loads from applying a fresh, current design, and purchasing a template for under $100 can be a great way to achieve that! And TemplateMonster have been doing this for years, so I'd certainly recommend taking a look.


    Small screenshots of TemplateMonster template Small screenshots of TemplateMonster template Small screenshots of TemplateMonster template

    Introduction


    I'm going to take you through the features of the current wave of excellent web site designs, dissect the most significant features, explain why each one can be good, and show you how to use them in your own sites.


    If I had to sum up "Web 2.0" design in one word, it would have to be "simplicity", so that's where we'll start.


    I'm a great believer in simplicity. I think it's the way forward for web design.


    Today's simple, bold, elegant page designs deliver more with less:



    • They enable designers to shoot straight for the site's goals, by guiding the site visitor's eye through the use of fewer, well-chosen visual elements.

    • They use fewer words but say more, and carefully selected imagery to create the desired feel.

    • They reject the idea that we can't guess what people want from our sites


    1Simplicity


    "Use as few features as are necessary to achieve what you need to achieve"


    Web design is simpler than ever, and that's a good thing.


    2.0 design means focused, clean and simple.


    That doesn't necessarily mean minimalist, as I'll explain later.


    I really believe in simplicity. That's not to say that all web sites should be minimal, but that we should use as few features as are necessary to achieve what you need to achieve.


    I've written elsewhere about Occam's Razor, which is a principle I use all the time. One way of interpreting it is: Given any two possible solutions to a problem, the simpler one is better.


    Here are some examples. Note how unnecessary elements have been stripped out from each. There could be a lot more on each page than there is... but would that make them stronger?


    The result is that you have to look at the content. You find yourself interacting with exactly the screen features the designer intended. And you don't mind - it's easy, and you get just what you came for.


    Mozilla storeMedicon Media Etre Simplebits Artypapers Real Meat

    Why simplicity is good



    • Web sites have goals and all web pages have purposes.

    • Users' attention is a finite resource.

    • It's the designer's job to help users to find what they want (or to notice what the site wants them to notice)

    • Stuff on the screen attracts the eye. The more stuff there is, the more different things there are to notice, and the less likely a user is to notice the important stuff.

    • So we need to enable certain communication, and we also need to minimise noise. That means we need to find a solution that's does its stuff with as little as possible. That's economy, or simplicity.


    When & how to make your designs simple


    When?


    Always!


    How?


    There are two important aspects to achieving success with simplicity:



    1. Remove unnecessary components, without sacrificing effectiveness.

    2. Try out alternative solutions that achieve the same result more simply.



    "It seems that perfection is reached not when there is nothing left to add, but when there is nothing left to take away."


    Antoine de Saint-Exupéry,

    Terre des hommes, 1939

    Whenever you're designing, take it as a discipline consciously to remove all unnecessary visual elements.


    Concentrate particularly on areas of the layout that are less relevant to the purpose of a page, because visual activity in these areas will distract attention from the key content and navigation.


    Use visual detail - whether lines, words, shapes, colour - to communicate the relevant information, not just to decorate.


    Here's an example of a design that suffers from not enough simplicity.


    Yaxay's interface uses a lot of pixels, but the vast majority of them are decorative, part of the page background. Relatively few pixels are used to user to find or understand information or interact with the site.




    Yaxay is busy and ineffective Yaxay detail

    See how much "stuff" there is to look at, and notice how few of the pixels are used to clarify actual navigation, actual content, or actual interactive features.


    Edward Tufte is the boss when it comes to the design of information. He uses the terms "data ink" (i.e. detail that enables information transfer) and "non-data ink" (i.e. detail that's just detail) to describe this phenomenon.


    One way Tufte specifically measures the effectiveness of information design (graphs, charts, presentations etc.) is using the ratio of data-ink to non-data-ink. The higher the proportion of data-ink used, the more likely it is that a design is effective.


    Taking the Yaxay detail above, there's a lot of what I call "busyness", i.e. a lot of edges, tonal changes, colour variations, shapes, lines... a lot of stuff to look at. But, in this detail, the only useful features are:



    1. The site logo, and

    2. the label on the nav button (which reads "art gallery")


    All the rest of the "busyness": the shapes in the background, the diagonal lines in the interface panel, the grid, the gradients... all this is noise, it's all "non-data ink", because it's not enabling communication.


    I'm not against richness, complexity or beauty in web design


    Simplicity means:


    Use as many pixels as you need, in whatever way you need, to facilitate the communication that needs to happen.

    Of course, often what you're communicating isn't hard data, but soft information.



    Hard data

    means facts, like news, stock prices, train times, or how much money is in your bank account...

    Soft information

    covers the qualitative aspects of communication, like the first impression about the quality of a company, the sense of how approachable a service provider is, and whether you feel a product will be right for you. It can be just as important!


    Whether what you're communicating is hard or soft, your pixels count, so use them consciously and with care.


    Take the example below:



    Alex Dukal, illustrator



    Alex Dukal's site is rich, interesting and appealing. It uses a range of visual techniques to draw your attention, make you interested and to give you a warm feeling about the quality of Alex's work.


    But it's also simple, because it uses its pixels/ink/busyness with care and sensitivity. It's not gratuitous, it's economical and rich.


    Whatever you're saying, choose wisely where you use your ink/pixels. Use it to communicate, first and foremost. Then, ask whether you can communicate just as effectively with less. If so, do it.


    2Central layout


    (More about this on the Current Style page). Basically, the vast majority of sites these days are positioned centrally within the browser window. Relatively few are full-screen (liquid) or left-aligned / fixed-size, compared to a few years ago.


    Why a central layout is good


    This "2.0" style is simple, bold and honest. Sites that sit straight front & center feel more simple, bold and honest.


    Also, because we're being more economical with our pixels (and content), we're not as pressurised to cram as much information as possible above the waterline/fold.


    We're using less to say more, so we can be a bit more free and easy with the amount of space used, and pad out our content with lots of lovely white space.


    When & how to use a central layout


    I'd say, position your site centrally unless there's a really good reason not to.


    You may be wanting to get more creative with the space, or get as much information on-screen as possible (for example with a web app).


    3Fewer columns


    A few years ago, 3-column sites were the norm, and 4-column sites weren't uncommon. Today, 2 is more common, and 3 is the mainstream maximum.


    Why using fewer columns is good


    Less is more. Fewer columns feels simpler, bolder, and more honest. We're communicating less information more clearly.


    There's also a by-product of the domination of centered layouts. Because we're not filling the whole screen so much, and not trying to get as much on-screen at any one time, we simply don't need as many columns of information.


    37 Signals' home page

    37Signals have always been at the front when it comes to questioning the status quo and coming up with simple answers.


    Here, they use 2 columns. This a great case study in simplicity. It lets the message speak, and adds nothing that could get in the way.






    Apple Expo

    Apple is the other leader in elegant simplicity.


    This kind of layout works really, really well. Each time I experience Apple's simple design, the more convinced I become that its zen approach is the holy grail of design.


    This typical Apple layout shows that someone has honestly asked, "How many boxes/columns/lines do we really need?". Then they've boldly edited out unnecessary elements, and the result is undeniably the cleanest, most effective communication.






    How to choose your columns


    I'd definitely recommend using no more than 3 columns, simply because you should use no more of anything than you need to.


    There are always exceptions, so here are a few examples of more than 3 columns used effectively.


    Derek Powazek's blog

    Derek Powazek's blog site uses 3 columns for the main section of his blog, but 4 lower down.


    The lower section is a kind of pick & mix, where the abundance of columns emphasises the "Take what you like" feel.






    Amazon.co.uk

    Amazon (UK) has two side columns, and products arranged centrally in 3 additional columns.


    It works beacuse the purpose of each column is clear from its design. The left col is definitely navigation; the right column is "other stuff". The products in the middle are clearly tiled and separated by white space, so they don't overwhelm.






    Popurls.com screenshot

    Popurls.com contains loads of pick-n-mix information, collating the hot links from other sites like digg and del.icio.us, but it still keeps to 3 columns for the main blocks of text.


    Further down, it shows thumbnails of popular images on the photo-sharing site Flickr (and there are Youtube vids later). These are tiled in several columns, which is fine, because it's a sit-back, scan and pick your experience moment...






    And here's a site that gets it wrong...


    All things web 2.0 has 2 much

    Here's All Things Web2.0 using 4 columns: 2 side columns and 2 central columns.


    The downside of this layout is that you don't know where to start looking. Everything is somehow low-priority (partly because of the darkish background).


    As we saw, Amazon differentiates the page to this extent, but the design helps you instantly identify what each area of screen real-estate is for, so it's not confusing.






    4Separate top sections


    This means making the top of the screen (the main branding & nav area) distinct from the rest (the main content).


    Of course, there's nothing new about this approach. It's a good idea, and has been used for ever. But it's being used more than ever now, and the distinction is often stronger.


    See how clear the "page-tops" are in these 6 samples, even at small scale:


    Simplebits Mozilla store Medicon Media Curve2 Alsa Crétions Tony Yoo's Protolize

    Why distinct top sections are good


    The top section says "Here's the top of the page". Sounds obvious, but it feels good to know clearly where the page starts.


    It also starts the site/page experience with a strong, bold statement. This is very "2.0"-spirited. We like strong, simple, bold attitude.


    2 of these top-sections contain just branding (Protolize, Mediconmedia), 1 has just navigation (Cross Connector), and the remaining 3 have both.


    The weakness of Cross Connector, in my view, is that the logo comes after the nav. I prefer the nav to be high-up, and clear (like e.g. Simple Bits).


    When & how to use a distinct top section


    On any site, both the main branding and main navigation should be obvious, bold and clear.


    So it's a good idea to create a clear space at the top of a web site design that positions the logo and nav boldly.


    Always put your logo right up the top of the screen. I'd always recommend putting your main navigation right after it.


    It's definitely a good thing to mark the top of the page with a section that marks out the high-level screen features as separate from the main site content.


    The top section should be visually distinct from the rest of the page content. The strongest way to differentiate is to use a bold, solid block of different colour or tone, but there are alternatives.


    Here are 2 examples where the top section is separated with a solid line, rather than being solid colour itself.


    London Pain Consultants Ex Blogs

    And here, the top section contents simply sit boldly outside the main column area.


    Aurum Newtech Steinruck Design

    5Solid areas of screen real-estate


    Leading on from the clearly differentiated top area, you'll notice that lots of sites define the various areas of real-estate boldly and clearly.


    Real estate comes in various forms, including:



    • Navigation

    • Background / canvas

    • Main content area

    • Other stuff

    • Callouts / cross-links


    It's possible to design a web page so that these areas are immediately distinct from their neighbours.


    The strongest way to do this is using colour.


    Medicon Media Jeremy Boles' blog Ex Blogs Curve2




    But white space can be just as effective.


    The risk with strong colour is that it draws the eye, so it can take attention away from other relevant screen elements.


    I think that placing clean content on white space creates an easier experience, helping the viewer to feel more relaxed and free to browse.


    Apple Expo Etre




    6Simple nav


    Permanent navigation - your global site nav that appears on every page as part of the page template - needs to be clearly identifiable as navigation, and should be easy to interpret, target and select.



    • 2.0 design makes global navigation large, bold, clean and obvious.

    • Inline hyperlinks (links within text) are typically clearly differentiated from normal text.


    Navigation from TradingEye Navigation from Cross Connector Navigation from Mozilla Navigation from London Pain ConsultantsNavigation from Protolize

    Why simple navigation is better


    Users need to be able to identify navigation, which tells them various important information:



    • Where they are (in the scheme of things)

    • Where else they can go from here

    • And what options they have for doing stuff


    Following the principle of simplicity, and general reduction of noise, the best ways to clarify navigation are:



    • Positioning permanent navigation links apart from content

    • Differentiating navigation using colour, tone and shape

    • Making navigation items large and bold

    • Using clear text to make the purpose of each link unambiguous


    How to keep your nav simple


    Simply remember the key: navigation should be clearly distinguishable from non-navigation.


    Just follow the guidelines above, regarding differentiation through position, colour and clarity.


    My article about navigation »


    Inline hyperlinks should also stand out sufficiently from the text around them.


    Check out these snippets. In each case, you're in do doubt what's a link. (Personally, I prefer using blue text (non-underlined) which turns to underlined red on hover...)




    Save the Pixel book cover

    Read “Save the Pixel - the Art of Simple Web Design”


    For the best professional insight into how to create super-simple, effective designs, get Ben Hunt's new e-book.






















    It features 10 brand new chapters teaching pro pixel-saving skills, plus 22 worked example case studies. Buy it now, only £15




    Howie Jacobson, author of “Adwords for Dummies”, says...



    “Save the Pixel is the best book on web design and usability I've ever read, and one of the best books on internet marketing in general. If you're sending traffic to your web site via Google AdWords and you haven't discovered the strategies and tactics in Save the Pixel, I guarantee you're throwing away money.


    “It's not just information, but a systematic way of designing a site for your customers rather than your web designer's online portfolio. Save the Pixel is the one book I insist my clients read before I'll roll out an AdWords campaign for them.”





    7Bold logos


    A clear, bold, strong brand - incorporating attitude, tone of voice, and first impression - is helped by a bold logo.


    Here are some (100% scale). Notice that logos are tending to be quite large, in line with the general 2.0 principles.


    Collection of strong logos

    Why?


    Strong, bold logos say "This is who we are." in a way that we can believe.


    When & how?


    See my articles on logos and text-based logos.


    It's very hard to say how to create a good logo, but in brief...


    Your logo should:



    • work visually in its main context, and any other uses in which it may be used (like flyers or t-shirts?)

    • be recognisable and distinctive

    • represent your brand's personality and qualities on first viewing


    8Bigger text


    Lots of "2.0" web sites have big text, compared to older-style sites.


    If you fill the same amount of space with less "stuff", you have more room.


    When you've made more room, you can choose to make more important elements bigger than less important elements (if they're still there).


    Making things bigger makes them more noticeable than lesser elements. This effect has been used throughout the history of print design, on headings, title pages and headlines.


    Not only does big text stand out, but it's also more accessible to more people. That's not just people with visual impairments, but also people looking on LCD screens in sunlight, people sitting a little further from the screen, and people just skimming the page. If you think about it, that could be quite a lot of people!


    Browse Happy 37 Signals' home page Mozilla store Aurum Newtech




    When & how to use big text


    Big text makes most pages more usable for more people, so it's a good thing.


    Of course, size is relative. You can't take a normal, busy site, make ALL the text bigger, and make it more usable. That might not work, that might be worse.


    In order to use big text, you have to make room by simplifying, removing unnecessary elements.


    You also need to haave a reason to make some text bigger than other text. And the text must be meaningful and useful. There's no point adding some big text just because it's oh-so 2.0!


    If you need to have a lot of information on a page, and it's all relatively equal in importance, then maybe you can keep it all small.


    9Bold text introductions


    Leading on from the big text theme, many sites lead with strong all-text headline descriptions.


    These normally set out the site's USP, elevator pitch or main message.


    They tend to be graphical, rather than regular text. The reason for this is that designers want a lot of control over the page's visual impact, especially early on in a browsing experience.


    Apple.com 37 Signals' home page Ex Blogs Cross Connector




    When & how to use a bold text intro


    Only use one if you've got something bold to say. v (If you haven't got something bold to say, maybe it's worth having a think about the purpose of your page/site and coming up with somethign worth saying boldly!)


    If you have a simple message that you want to be seen first, go ahead and headline it. Make it clear by putting it against a relatively plain background.


    10Strong colours


    Bright, strong colours draw the eye. Use them to divide the page into clear sections, and to highlight important elements.


    When you have a simple, stripped-out design, you can use a bit of intense colour to help differentiate areas of real-estate and to draw attention to items you want the visitor to notice.


    Treo mobile

    The Treo Mobile site uses 3 areas of strong colour to mark out and advertise 3 main areas of the site.


    The background colour makes it clear that this isn't main content, and large, bold title text helps you see quickly what's in each one, so you can decide whether it interests you.






    Colorschemer

    Colorschemer sections the page with bands of intense, bright, cheerful colour, set against a more neutral background.






    Apple.com home

    Apple's design has always used a great balanced combination of tone (darks), rich effects and colour to draw the eye.


    It may be the most perfectly designed web site there is, in my opinion.


    In this image, the intense dark areas and strong colour are used sparingly to pick out important content.






    Colour is also a great medium for communicating brand values


    Real Meat

    Here, the colour isn't bright, but it is strong, partly because of the amount of green used.


    This design uses green to communicate the values of "quality" and "health".


    Note: site design doesn't match this image!






    Gear for girls

    This site sells outdoor clothes exclusively for females, and the soft colours reinforce the chosen brand personality.






    Be careful to use intense colour on or around high-value features


    Giddy Kippa

    A nice, effective page design is compromised by the use of large areas of intense colour outside the main page area.


    The result is that the eye is drawn away from the real content.






    Aurum Newtech

    The Aurum Newtech site risks the same effect, but the colour is just pale enough to keep the content noticeable.


    Also, the big, bold and well-spaced content elements help draw attention away from the "attractive" background.






    Remember to use sparingly


    If you're using strong colours to attract the eye, it only works if there's lots of area that isn't strongly coloured.


    If everything is trying to attract the eye, then the eye just gets confused, and the site will feel confusing and chaotic.


    11Rich surfaces


    Most 2.0-style sites use subtle 3D effects, sparingly, to enhance the qualitative feel of the design.


    We all know that these little touches just feel nice, but we may not know why.


    Realistic surface effects (like drop-shadows, gradients and reflections) help make a visual interface feel more real, solid and "finished".


    They may also remind us of certain tactile or aesthetic qualities of real-world objects, such as water droplets, shiny plastic buttons, and marble floors. Making stuff look solid and real can make it look "touchable", which is likely to appeal.







    When & how to use rich surfaces


    The golden rule here is to use with care, and not to overdo it.


    As I explain in the tutorial on 3D Effects, these effects should not be applied to everything.



    Like any of these techniques, a rich surface may add value to your design when used sensitively and appropriately.


    If your navigation/icon/logo/layout sucks fundamentally, you can't polish your way out. Get the fundamentals right first.




    It can also be important to maintain a consistent light-source. Although this can get more complex with the illusion of back-lit diffusion in buttons etc., you still know whether an overall design feels consistent.


    3D effects can also make elements seem to stand out from the page, but only if the rest of the page is relatively flat.


    Avoid trying to make your entire design 3D-realistic because:



    • It's more work

    • It will increase the overall size of the page assets

    • And you don't need to. 3D effects use lots of different pixels, and different pixels should be used deliberately to draw the visitor's attention to key content elements, or to enhance "soft" informational aspects. A little goes a long way.


    12Gradients


    Web 2.0 design has more gradients than the Alps.


    Why gradients are so useful


    Gradients soften areas that would otherwise be flat colour/tone.


    Artypapers

    They can create the illusion of a non-flat surface, used to good effect on Alex Dukal's portfolio.






    Aurum homepage

    Gradients can be used to fade a colour into a lighter or darker tone, which can help create mood.






    Artypapers

    In page backgrounds, they may also create an illusion of distance.


    A common gradient combo is blue-to-white, which evokes the effect of aerial perspective, creating the sense that the background fades away towards the horizon.






    They are commonly used at the very top of page backgrounds, where they help denote the boundary of the viewable area.


    Colorschemer Alex Dukal, illustrator




    They're also an integral part of drop-shadows, and the inner-glows and specular highlights you see on glass- or plastic-style buttons.


    Note that gradients usually work best when juxtaposed with areas of flat colour or tone.


    Curve2

    On the Curve2 homepage, the gradients are more effective because each one is positioned adjacent to a flat white or grey section.


    It's common to find gradients enhancing the base colour (using mix effects like color-burn or overlay in Photoshop), which create subtly different hues.


    Here, the highlighted green colour is warmer and friendlier than the darker base colour. The overall effect is both softer and richer.






    13Reflections


    The illusion of reflection is one of the most common applications on gradients.


    These commonly come in 2 kinds:



    • Highlights caused by light reflecting on shiny surfaces

    • That shiny table effect!


    Specular highlights


    Realistic effects of water droplets, glass beads, shiny plastic buttons etc. have been very popular over the past couple of years.


    I don't know where the trends started, but Apple's web site must have been one of the most influential, preceding their Aqua interface look & feel.


    Here are some examples:



    The classic Apple.com shiny plastic tabs, still in use today.


    These use highlights caused by a light source above the tabs, combined with an inner, diffuse glow that creates the plastic effect.





    These tabs, from one of my recent redesigns, have a polished (from the strong white highlight) carbon-fibre appearance. The carbon effect comes from the warm diagonal-stroke pattern from the icon's glow.





    More nice shiny plastic. Notice how the reflections fall off at the edge of the shape, which create the illusion of rounded edges.





    Similar effect on a square shape looks like a badge.


    The non-horizontal angle creates a sense of dynamism.





    This shiny button from cafepress.com uses a rounded reflection that suggests a wide light source coming off a rounded surface.





    This button from web hosts Mediatemple has a more diffuse reflection, suggesting a matt glass finish.






    That shiny table effect!


    Pioneered by Apple again (I'm sure). This is a really nice effect which is so prevalent now, it's in danger of being overused, now starting to look tired and is falling out of favour with designers.


    Remember, of course, that web designers are usually more sensitive to these things, so even if we're getting turned off by it, the general public may still think it's cool for some time to come.




    The standard Apple look. Greyed-out and fading on a white base.





    On a coloured background





    Fading out to either side (my one this, not published yet)





    More extreme angle, and a rich layered effect reflecting the colour of the solid object








    Here's how to do it (from photoshoplab.com) »


    14Cute icons


    Icons play an important role in Web 2.0 design. Today we use fewer, better icons that carry more meaning.


    Icons can be useful when they're easily recognisable and carry a clear meaning. In lots of other cases, a simple word is more effective.


    In the old days, icons were sometimes overused. It seemed that everyone wanted an icon for every navigation link or tab. Now, we use clear text more extensively, and are less ready to litter a page with icons.


    Where 2.0 designers do employ icons, they are reserved for higher-value spots, where .


    Simpler, more spacious designs demand less attention and allow for a richer icons.


    Some examples, demonstrating various attributes.


    Simple and clean







    Cute and quirky


    Do not necessarily have to feature tiny hills!


    37 Signals Overture




    Richly detailed


    Creatively inspired by Mac OSX. See Enhanced Labs for a great showcase.







    15Star flashes


    These are the star-shaped labels that you see stuck on web pages, alerting you to something important.


    They work by evoking price stickers in low-cost stores. For this reason, they suit the start-up ethic of many 2.0 sites, but for the same reason may cheapen other sites.


    They can really work well, but of course should only be used to draw attention to something important.


    I'd recommend only using one on a page (at most!).


    Another style that's seeming over-used, and will probably run its course over the next year.