Web 2.0

Monday, April 13, 2009

HTML Entity Codes

Standard ASCII set, HTML Entity names, ISO 10646, ISO 8879, ISO 8859-1 Latin alphabet No. 1

Browser support: All browsers

ASCII		Symbol	HTMLNumber	HTMLName	Description
Dec	Hex	Symbol	HTMLNumber	HTMLName	Description
32	20				space
33	21	!	!		exclamation point
34	22	"	"	"	double quotes
35	23	#	#		number sign
36	24	$	$		dollar sign
37	25	%	%		percent sign
38	26	&	&	&	ampersand
39	27	'	'		single quote
40	28	(	(		opening parenthesis
41	29	)	)		closing parenthesis
42	2A	*	*		asterisk
43	2B	+	+		plus sign
44	2C	,	,		comma
45	2D	-	-		minus sign - hyphen
46	2E	.	.		period
47	2F	/	/		slash
48	30	0	0		zero
49	31	1	1		one
50	32	2	2		two
51	33	3	3		three
52	34	4	4		four
53	35	5	5		five
54	36	6	6		six
55	37	7	7		seven
56	38	8	8		eight
57	39	9	9		nine
58	3A	:	:		colon
59	3B	;	;		semicolon
60	3C	<	<	<	less than sign
61	3D	=	=		equal sign
62	3E	>	>	>	greater than sign
63	3F	?	?		question mark
64	40	@	@		at symbol
65	41	A	A
66	42	B	B
67	43	C	C
68	44	D	D
69	45	E	E
70	46	F	F
71	47	G	G
72	48	H	H
73	49	I	I
74	4A	J	J
75	4B	K	K
76	4C	L	L
77	4D	M	M
78	4E	N	N
79	4F	O	O
80	50	P	P
81	51	Q	Q
82	52	R	R
83	53	S	S
84	54	T	T
85	55	U	U
86	56	V	V
87	57	W	W
88	58	X	X
89	59	Y	Y
90	5A	Z	Z
91	5B	[	[		opening bracket
92	5C	\	\		backslash
93	5D	]	]		closing bracket
94	5E	^	^		caret - circumflex
95	5F	_	_		underscore
96	60	`	`		grave accent
97	61	a	a
98	62	b	b
99	63	c	c
100	64	d	d
101	65	e	e
102	66	f	f
103	67	g	g
104	68	h	h
105	69	i	i
106	6A	j	j
107	6B	k	k
108	6C	l	l
109	6D	m	m
110	6E	n	n
111	6F	o	o
112	70	p	p
113	71	q	q
114	72	r	r
115	73	s	s
116	74	t	t
117	75	u	u
118	76	v	v
119	77	w	w
120	78	x	x
121	79	y	y
122	7A	z	z
123	7B	{	{		opening brace
124	7C	\|	\|		vertical bar
125	7D	}	}		closing brace
126	7E	~	~		equivalency sign - tilde
127	7F				(not defined in HTML 4 standard)
128	80				(not defined in HTML 4 standard)
129	81				(not defined in HTML 4 standard)
130	82				(not defined in HTML 4 standard)
131	83				(not defined in HTML 4 standard)
132	84				(not defined in HTML 4 standard)
133	85				(not defined in HTML 4 standard)
134	86				(not defined in HTML 4 standard)
135	87				(not defined in HTML 4 standard)
136	88				(not defined in HTML 4 standard)
137	89				(not defined in HTML 4 standard)
138	8A				(not defined in HTML 4 standard)
139	8B				(not defined in HTML 4 standard)
140	8C				(not defined in HTML 4 standard)
141	8D				(not defined in HTML 4 standard)
142	8E				(not defined in HTML 4 standard)
143	8F				(not defined in HTML 4 standard)
144	90				(not defined in HTML 4 standard)
145	91				(not defined in HTML 4 standard)
146	92				(not defined in HTML 4 standard)
147	93				(not defined in HTML 4 standard)
148	94				(not defined in HTML 4 standard)
149	95				(not defined in HTML 4 standard)
150	96				(not defined in HTML 4 standard)
151	97				(not defined in HTML 4 standard)
152	98				(not defined in HTML 4 standard)
153	99				(not defined in HTML 4 standard)
154	9A				(not defined in HTML 4 standard)
155	9B				(not defined in HTML 4 standard)
156	9C				(not defined in HTML 4 standard)
157	9D				(not defined in HTML 4 standard)
158	9E				(not defined in HTML 4 standard)
159	9F				(not defined in HTML 4 standard)
160	A0				non-breaking space
161	A1	¡	¡	¡	inverted exclamation mark
162	A2	¢	¢	¢	cent sign
163	A3	£	£	£	pound sign
164	A4	¤	¤	¤	currency sign
165	A5	¥	¥	¥	yen sign
166	A6	¦	¦	¦	broken vertical bar
167	A7	§	§	§	section sign
168	A8	¨	¨	¨	spacing diaeresis - umlaut
169	A9	©	©	©	copyright sign
170	AA	ª	ª	ª	feminine ordinal indicator
171	AB	«	«	«	left double angle quotes
172	AC	¬	¬	¬	not sign
173	AD				soft hyphen
174	AE	®	®	®	registered trade mark sign
175	AF	¯	¯	¯	spacing macron - overline
176	B0	°	°	°	degree sign
177	B1	±	±	±	plus-or-minus sign
178	B2	²	²	²	superscript two - squared
179	B3	³	³	³	superscript three - cubed
180	B4	´	´	´	acute accent - spacing acute
181	B5	µ	µ	µ	micro sign
182	B6	¶	¶	¶	pilcrow sign - paragraph sign
183	B7	·	·	·	middle dot - Georgian comma
184	B8	¸	¸	¸	spacing cedilla
185	B9	¹	¹	¹	superscript one
186	BA	º	º	º	masculine ordinal indicator
187	BB	»	»	»	right double angle quotes
188	BC	¼	¼	¼	fraction one quarter
189	BD	½	½	½	fraction one half
190	BE	¾	¾	¾	fraction three quarters
191	BF	¿	¿	¿	inverted question mark
192	C0	À	À	À	latin capital letter A with grave
193	C1	Á	Á	Á	latin capital letter A with acute
194	C2	Â	Â	Â	latin capital letter A with circumflex
195	C3	Ã	Ã	Ã	latin capital letter A with tilde
196	C4	Ä	Ä	Ä	latin capital letter A with diaeresis
197	C5	Å	Å	Å	latin capital letter A with ring above
198	C6	Æ	Æ	Æ	latin capital letter AE
199	C7	Ç	Ç	Ç	latin capital letter C with cedilla
200	C8	È	È	È	latin capital letter E with grave
201	C9	É	É	É	latin capital letter E with acute
202	CA	Ê	Ê	Ê	latin capital letter E with circumflex
203	CB	Ë	Ë	Ë	latin capital letter E with diaeresis
204	CC	Ì	Ì	Ì	latin capital letter I with grave
205	CD	Í	Í	Í	latin capital letter I with acute
206	CE	Î	Î	Î	latin capital letter I with circumflex
207	CF	Ï	Ï	Ï	latin capital letter I with diaeresis
208	D0	Ð	Ð	Ð	latin capital letter ETH
209	D1	Ñ	Ñ	Ñ	latin capital letter N with tilde
210	D2	Ò	Ò	Ò	latin capital letter O with grave
211	D3	Ó	Ó	Ó	latin capital letter O with acute
212	D4	Ô	Ô	Ô	latin capital letter O with circumflex
213	D5	Õ	Õ	Õ	latin capital letter O with tilde
214	D6	Ö	Ö	Ö	latin capital letter O with diaeresis
215	D7	×	×	×	multiplication sign
216	D8	Ø	Ø	Ø	latin capital letter O with slash
217	D9	Ù	Ù	Ù	latin capital letter U with grave
218	DA	Ú	Ú	Ú	latin capital letter U with acute
219	DB	Û	Û	Û	latin capital letter U with circumflex
220	DC	Ü	Ü	Ü	latin capital letter U with diaeresis
221	DD	Ý	Ý	Ý	latin capital letter Y with acute
222	DE	Þ	Þ	Þ	latin capital letter THORN
223	DF	ß	ß	ß	latin small letter sharp s - ess-zed
224	E0	à	à	à	latin small letter a with grave
225	E1	á	á	á	latin small letter a with acute
226	E2	â	â	â	latin small letter a with circumflex
227	E3	ã	ã	ã	latin small letter a with tilde
228	E4	ä	ä	ä	latin small letter a with diaeresis
229	E5	å	å	å	latin small letter a with ring above
230	E6	æ	æ	æ	latin small letter ae
231	E7	ç	ç	ç	latin small letter c with cedilla
232	E8	è	è	è	latin small letter e with grave
233	E9	é	é	é	latin small letter e with acute
234	EA	ê	ê	ê	latin small letter e with circumflex
235	EB	ë	ë	ë	latin small letter e with diaeresis
236	EC	ì	ì	ì	latin small letter i with grave
237	ED	í	í	í	latin small letter i with acute
238	EE	î	î	î	latin small letter i with circumflex
239	EF	ï	ï	ï	latin small letter i with diaeresis
240	F0	ð	ð	ð	latin small letter eth
241	F1	ñ	ñ	ñ	latin small letter n with tilde
242	F2	ò	ò	ò	latin small letter o with grave
243	F3	ó	ó	ó	latin small letter o with acute
244	F4	ô	ô	ô	latin small letter o with circumflex
245	F5	õ	õ	õ	latin small letter o with tilde
246	F6	ö	ö	ö	latin small letter o with diaeresis
247	F7	÷	÷	÷	division sign
248	F8	ø	ø	ø	latin small letter o with slash
249	F9	ù	ù	ù	latin small letter u with grave
250	FA	ú	ú	ú	latin small letter u with acute
251	FB	û	û	û	latin small letter u with circumflex
252	FC	ü	ü	ü	latin small letter u with diaeresis
253	FD	ý	ý	ý	latin small letter y with acute
254	FE	þ	þ	þ	latin small letter thorn
255	FF	ÿ	ÿ	ÿ	latin small letter y with diaeresis

Thursday, April 2, 2009

Section 508 Web Standards

A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). [See Note 1]

Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

Documents shall be organized so they are readable without requiring an associated style sheet.

Redundant text links shall be provided for each active region of a server-side image map.

Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

Row and column headers shall be identified for data tables.
Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

Frames shall be titled with text that facilitates frame identification and navigation.
Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. [See Note 2]

When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.
When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet [See Note 3, Note 4, Note 5]

When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

A method shall be provided that permits users to skip repetitive navigation links.

When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

Note 1: Until the longdesc tag is better supported, it is best to use it in conjunction with a standard link to a longer description.

Note 2: "Text-only" and "accessible" are NOT synonymous. Text-only sites typically only help people with certain types of visual or cognitive disabilities. They are usually not helpful to users with disabilities.

Note 3: Standalone media players are usually more accessible than embedded media players.

Note 4: A PDF file can be made accessible to screen reader users, but it may be best to include an accessible HTML version of a document instead of or in addition to PDF.

Note 5: PowerPoint files are currently not directly accessible unless the user has a full version of the PowerPoint program on the client computer. It is recommended that an accessible HTML version be provided instead of or in addition to the PowerPoint version.

Monday, January 5, 2009

DIV Based Layout with CSS

We see it every day. As we surf the huge network of the Web, we are able to appreciate several page layouts through different websites. They run the gamut from classical but highly effective two and three-column designs, to those exotic and certainly uncommon designs which seem not to fall into a specific category.

For many years, Web designers have been sticking firmly to table-based layouts, achieving coherent and consistent looks by the use of complex table nesting techniques, gif spacers and other well-known design processes. Currently, table layout still continues to have a strong presence on the Web, since it provides wide cross-browser compatibility. Tables are pretty well supported elements for browsers, and that’s an extremely powerful reason to use them for Web page layouts. But this strong compatibility comes with an extra cost. Most of the time, nested tables introduce lots of additional markup, and increase file size, download times and server requests when using graphics as spacers, even if they are cached later.

Extra HTML pushes the important content farther down in the source code, making it less likely that a search spider will give Web pages a high relevance score for the keywords. With the use of CSS and DIV tags, we can achieve the same table-based layout effects, reduce our markup code noticeably, get faster page downloads, and separate content from its visual presentation. We are getting closer to standards-compliant code, and our Web pages are more appealing to search engine spiders.

Now, is everything good about CSS? No, unfortunately. The major drawback with CSS is that browsers don’t display reliably some CSS rules because most of them are not completely compliant with Web standards. Still, the advantages of using CSS and DIV tags for page layout are numerous, and certainly are appealing to many Web designers, as modern browsers add more reliable support.

With the pros and cons in our hands, let’s see the basics of how table design works.

The table-based approach

One of the most common page layouts using tables is easy to do with the ALIGN attribute. This is a left-hand navigation bar with a larger content section, directly to the right of it, building only two tables.

Here is the code:

<table align=”left” width=”20%” height=”100%”>
<tr>
<td valign=”top”>Navigation links are placed here</td>
</tr>
</table>
<table align=”right” width=”80%” height=”100%”>
<tr>
<td valign=”top”>Main content is placed here</td>
</tr>
</table>

We build this simple two-column layout, placing the tables as mentioned above: one is located to the left and the other is located to the right. The ALIGN attribute helps us to turn complex tables into simpler ones.

We can use this technique with nested tables too, to keep our layout easier to maintain and display, while it’s still quite appealing to search engines spiders.

A note about this: the attributes ALIGN, WIDTH and HEIGHT are deprecated elements in HTML 4.01 (they are marked for deletion in future versions), but they aren’t likely to disappear any time soon. Currently, all browsers recognize these attributes.

From this point on, we could attach an external style sheet that contains all the proper style declarations for each table, continuing to improve the code like this:

<table id=”content” width=”80%” align=”right” height=”100%”>
<tr>
<td valign=”top”>Main content is placed here</td>
</tr>
</table>
<table id=”leftnavigation” width=”20%” height=”100%”>
<tr>
<td valign=”top”>Navigation Links are placed here</td>
</tr>
</table>

The layout is the same as before, but note the ID attribute for each table. Assigning ID contextual selectors from an external style sheet allow us to build the visual appearance for data contained into each table.

So far, this is a simple sample for table-based layout. It can be easily expanded to more complex layouts, adding nested tables techniques and so. However, I would strongly recommend using DIV tags and CSS for page layout, as we shall see in a moment. Trust me.

The mighty DIV tag

According to the O’Reilly HTML Reference, “the DIV element gives structure and context to any block-level content in the document. Each DIV element becomes a generic block-level container for all content within the required start and end tags.” As we can see, the DIV tag is a powerful generic element well suited for being used as a container within our Web page. This turns it into a good candidate for creating sections or divisions (hence "DIV") of Web documents.

The concept is very intuitive. Instead of using tables as layout elements, we are going to take advantage of DIVS as excellent content containers to build our page layout. In conjunction with several CSS declarations, DIVS based layout are pretty easy to get.

Before we explain any further, two general categories used for Web page design must be clearly differentiated: “fixed” and “liquid" design. When referring to “fixed” design, we are talking about a Web page that has “fixed” dimensions. Widths (and optionally, heights) for each container element are assigned normally in pixels.

The final result of this approach is that Web pages are displayed with a determined “fixed” size, and they don’t “expand” to cover all the space in the computer monitor. Many “big” websites currently use this technique for achieving a consistent look and size across several user screen resolutions.

On the other hand, Web pages built over a “liquid” design principle will display as “elastic” documents, expanding as needed according to different monitor resolutions. Normally, dimensions for any container element are expressed in a percentage. “Liquid design,” when used properly, looks much more professional and takes one step further the definition that conceives a Web page as an “elastic” element, not a desktop document.

With all of these basic concepts out of the way, we will see different approaches for page layouts, depending on whether we follow a “fixed” design or a “liquid” design pattern.

Fixed layout design with fixed boxes

Now, it’s time to build a basic two-column layout with fixed sizes.

Here is the code for styling our DIVS:

And here’s the HTML code:

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>

The complete code is as follows:

<html>
<head>
<title>TWO-COLUM FIXED LAYOUT WITH FIXED BOXES</title>
<style type="text/css">

</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

Let’s see what’s happening here. We have given fixed dimensions and absolute positions to all our DIVS. Widths and heights are expressed in pixels, as well as top and left coordinates.

For the sake of this article, CSS code is within the same Web page, but it should always be attached as an external file. Please remember, separating content from visual presentation is a key concept that makes websites easily maintainable and accessible. The visual output for the code is the following:

Three-column fixed layout

With little additions to the code, we can easily build a three-column fixed layout. Let’s see how it works:

The HTML code is the following:

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="rightcol">Right Section</div>
<div id="footer">Footer Section</div>

Here is the complete code:

<html>
<head>
<title>THREE-COLUMN FIXED LAYOUT WITH FIXED BOXES</title>
<style type="text/css">

</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="rightcol">Right Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

Here is the visual output:

As stated above, with minor modifications to the code, we can easily add another column to our existing layout, keeping widths and heights expressed in pixels. These simple examples show clearly that once we have defined our general layout, we are able to add more DIVS into the main containers or other elements, building more complex layouts with little or no effort. In a moment, we’ll see another interesting approach for styling DIVS: floating boxes.

Web 2.0 how-to design guide

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!

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?

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

Wednesday, March 26, 2008

Simplicity

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

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:

Remove unnecessary components, without sacrificing effectiveness.
Try out alternative solutions that achieve the same result more simply.

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

Central layout

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

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

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.

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

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.

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.

Example: The top section is separated with a solid line, rather than being solid colour itself.

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

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.

Simple navigation

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.

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

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

Bold logos

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

Why?

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

When & how?

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
be recognisable and distinctive
represent your brand's personality and qualities on first viewing

Bigger 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!

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.

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

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.

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

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.

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

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.

Gradients

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.

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

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

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.

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.

Reflections

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.

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.

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

Various attributes of cute icons:

Simple and clean
Cute and quirky
Richly detailed

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