UI & Flash

smooth accordion effect with yahoo UI

2008-06-12T10:55:00.001+05:30

http://dev.notoptimal.net/2008/06/simple-yui-powered-accordion-widget.html

Tools for IE

2008-06-12T09:47:00.001+05:30

Finding Ui bugs in IE was always a problem..
I found some good tools for this

IE Developer Tool bar

Dev Toolbar type for IE:

for multiple IE version in the same machine

http://tredosoft.com/Multiple_IE

http://www.debugbar.com/

And a very interesting concept:

http://www.my-debugbar.com/wiki/IETester/HomePage

rounded corners without images

2008-03-19T10:02:00.001+05:30

Nifty Corners: rounded corners without images

Stripe it to get it rounded

The basic idea of Nifty Corners is to get some coulored lines to get the rounded effect. This is the markup to get a rounded div:

<div id="container"><b class="rtop"> <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b><b class="rbottom"> <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b></div>

And here's it the basic CSS:

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

You can see the final effect on this simple example. A few words on the use of the <b> element. I needed an inline element to obtain the rounded corners, since it could be nested in almost every kind of tag mainting the markup valid. So the choice fell on b because it doesn't have semantical meaning and it's shorter than span, like Eric Meyer said.

The technique works even on floated, absolute positioned or percentage-width elements. It fails on element with fixed height, or with padding. Both of the problem could be easily solved with an extra wrapper around the content.

Known bugs are: text-indent won't work on the element that has been rounded in Opera, and IE (both Mac & version 6 PC) would mess up on floated elements without specific width.

The support should be extended to all modern browsers: the technique has been tested with success in Internet Explorer 6, Opera 7.6, FireFox 1.0, Safari 1.1 Mac IE. It fails on IE 5.x PC.

Easy, isn't it? But we can do much better.

Looking forward with DOM

In the example we saw how to get rounded corners without images, sparing about 6-8Kb of page weight. But we love webstandards and semantic markup and we'd like to maintain the HTML clean and light.

Nifty Corners with CSS and Javascript

So, the next step was to provide the unnecessary <b> elements with javascript and DOM making some functions to get rounded corners on almost every element on the page without adding a single line of extra HTML or CSS apart from the basic rules we saw. Let's have a look at the example with Nifty Corners. As you can see from the source code, no extra markup is in it. The solution is a combination of CSS and Javascript. The technique is made up of four essential parts:

CSS file for the screen
CSS file for the print
Javascript library to get Nifty Corners
the javascript calls to round the elements you want

The first three components just don't need changes, whatever you want to accomplish. They need just to be declared in the head section of any HTML page like this:

To understand how to implement the fourth part, you need first to understand how the javascript library for Nifty Corners is implemented. Don't worry: you aren't requested to know javascript to use Nifty Corners...

The javascript functions

If you see the code of the example, you'll notice that I left embedded the CSS and part of the javascript to show how the page is build. Let's see the embedded javascript code:

The function NiftyCheck performs a check for DOM support and excludes IE5.x PC for running the script. If the test has passed, the Rounded function is called. It accepts four parameters:

A CSS selector that indicates on wich elements apply the function
Outer color of the rounded corners
Inner color of the rounded corners
an optional fourth parameter, that if is setted to "small" would render small Nifty Corners

The real strenght of the function is that is capable of accepting a CSS selector to target the elements to round. The accepted parameters are:

Tag selector, i.e. "p" or "blockquote" or "h2"
Id selector, with specified tag of the element: for example "div#content" or "p#news" or "li#home"
Class selector, with specified tag of the element: for example "div.entry" or "h2.highlight"
Descendant selector, with some limitation: this has to be composed by an id selector followed by a tag selector. Valid examples are: "div#news div" or "ul#menu li"

About the colors: they should be specified in hex code with # symbol in three or six digits. The outer color could be also set to transparent.

The fourth parameter is optional and must be setted to "small" to get small rounded corners. Let's see an example:

window.onload=function(){
if(!!NiftyCheck())
return;
Rounded("div#header","transparent","#C3D9FF","small");
}

I' ve provided also two additional functions that you could find very useful: RoundedTop and RoundedBottom that receive the same parameters of the Rounded function and allow to get rounded corners just on the top or on the bottom of page elements, or all four corners but with upper ones that differ in color from the lower.

Now.. let's see some examples.

The examples

Now the fun part.. I did some examples to show the possibilities of Nifty Corners. For each example will be reported on this page just the javascript calls to Rounded, RoundedTop and RoundedBottom functions, but keep in mind that these calls should be included in the following code:

window.onload=function(){
if(!NiftyCheck())
return;
/* here the calls to add Nifty Corners */
}

Now, let's begin!

Example one: a single div

This is the example we saw in the opening. The javascript call is:

Rounded("div#nifty","#377CB1","#9BD1FA");

Example two: 2 divs

In this example, two divs were rounded. The js calls are:

Rounded("div#content","#fff","#9DD4FF");
Rounded("div#nav","#fff","#E5FFC4");

Example three: small corners

In this example the heading has small rounded corners. The code:

Rounded("div#header","transparent","#C3D9FF","small");
Rounded("div#box","#FFF","#E4E7F2");

Example four: newsboxes

In this example we'll see how to make 2-colour newsboxes. The code is:

RoundedTop("div.news","#FFF","#91A7E3");
RoundedBottom("div.news","#FFF","#E0D6DF");

Example five: transparent, tabbed menu

This example show the power of the discendant selector and transparency to get a tabbed menu with a single javascript call:

RoundedTop("div#nav li","transparent","#E8F0FF");

Example six: a liquid image gallery

I rounded-framed an unordered list used for an image gallery here. The javascript call is:

Rounded("div#minipics li","#DDD","#FFF");

Example seven: rounding a form

In this example, I rounded a form and its labels with two js calls:

Rounded("form","#FFF","#BBD8FF");
Rounded("label","#BBD8FF","#FFF","small");

Example eight: final example

This is the final example wich uses some of the techniques we saw in the previous ones. In this case, I did not use embedded css or javascript. The head section contains the following lines:

The final.js contains all the javascript calls, let's see its content:

window.onload=function(){
if(!NiftyCheck())
return;
RoundedTop("div#container","#FFF","#e7e7e7");
RoundedBottom("div#container","#FFF","#E9F398");
RoundedTop("ul#nav li","transparent","#E8F0FF");
Rounded("div#box","#C0CDF2","#E4E7F2");
Rounded("div#minipics li","#C0CDF2","#FFF");
RoundedTop("div.gradient","#C0CDF2","#B8B8B8");
RoundedBottom("div.gradient","#C0CDF2","#ECECF2");
}

A good practice is in fact avoiding using embedded javascript or CSS in the head section.
Quite easy, isn't it? If we'd use one of the css techiques based on background images, probably we'd used 18 images, maybe some extra and non-semantic wrapper and a lot of css declaration. Could you imagine the kilobytes that were spared? Probably, about 18-20Kb or so.

Download

You could download the zip file containting the script, the html and the css of the example that were presented here.

8 Usability Check-Points You Should Be Aware Of

2008-03-19T09:41:00.001+05:30

You don’t use pop-ups.

Pop-ups interrupt the browsing session of the visitors and require an instant feedback. Respect your visitors.
You don’t change users’ window size.

The same argument as the one against pop-ups holds. Some browsers, e.g.
Internet Explorer, saves the browser dimensions and uses them for
further browser sessions.
“it’s just plain inconsiderate to assume that you know better than the
user how their software environment should be configured?”
You don’t use too small font sizes.

Long passages are harder to read, and to read brief sentences readers
need more time. It holds also for links, buttons, forms, search boxes
and other elements. Good news — in Web 2.0 the opposite is the case.
You don’t have unclear link text.

Links have to be precise and lead to the destination they describe. Ambiguous link descriptions should be avoided.
You don’t have dead links.

There are too many of them anyway; why would you want to point your visitors to a dead end?
You have at most one animation per page.

If blinking images are wide-spread through the site, it’s extremely
hard to focus on one single site element. Give your visitors an
opportunity to perceive your content. Using animated ads, don’t place
them right along your articles.
You make it easy to contact you.

Maybe because you just don’t want to be contacted, but If visitors do
want to get in touch with you, but can’t find any contact information,
you lose their interest and trust. Disastrous for online-shopping, a
missed opportunity for the rest.
Your links open in the same window.

Visitors want to have control over everything what happens in their
browser. If they’d like to open a link in a new window they will. If
they don’t want to, they won’t. If your links open in a new window you
make the decision which is not your decision to make.

toggle visibility for a DIV

2007-11-06T15:50:00.001+05:30

you can call this function like this

onclick=toggleDivOL('elemID')

replace elemID with the id you want to toggle the visibility

Exploring full-screen mode in Flash Player 9

2007-10-31T12:54:00.000+05:30

I found a very good article on Exploring full-screen mode in Flash Player 9. Hope it will be helpful to you...

http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html

print css

2007-07-02T09:58:00.000+05:30

http://css-discuss.incutio.com/?page=PrintStylesheets

http://www.w3.org/TR/css-print/

Star html Selector Bug

2007-06-09T12:13:00.000+05:30

The following Cascading Style Sheet (CSS) selectors are all incorrectly interpreted by Microsoft Internet Explorer as if the first universal selector (asterisk) does not exist:

* html /* basic form */
* * body /* whitespace between asterisks is significant */
* html body /* higher specificity than either of above */

Thus far, this bug has been found in IE5/mac, IE5.15/mac, IE5.21/mac, IE5.0/Win, IE5.5/Win, and IE6/Win. It occurs whether the (X)HTML document is in quirks or standards mode. This bug is not present in Mozilla 0.9.9/Win, Moz1.0/Win, Opera5.02/Win, Opera6.01/Win, NS4.x/Win, Moz1.1/mac.

In valid HTML and XHMTL documents html is always the root element and body is always a child of the root element, and never a grandchild (or great grandchild). Therefore, the first 3 CSS selectors above should not match any element. Nonetheless, they are valid selectors.
If no other major CSS-aware browser that recognizes the universal selector misinterprets the above selectors this bug can be put to good use. By using any of the above erroneous selectors we can specify CSS rules that are meant only for IE. If necessary we can serve alternate rules to other browsers.

If this selector truly targets only IE it is a near converse of the Tantek Çelik Hack, specifically the "be nice to Opera" rule where the child selector is used to hide CSS declarations from IE, The star html selector shows the rule to IE only rather than hide it.

div#normal, div#msie { margin: 1em; padding: 1em; background: #def; }/* the following rule is recognized only by IE */
* html body div#msie { background: #009; color: white; font-style: italic; }

CSS layout: 100% height with header and footer

2007-05-14T11:09:00.000+05:30

Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach.

Min-height

The #container element of this page has a min-height of 100%. That way, if the content requires more height than the viewport provides, the height of #content forces #container to become longer as well. Possible columns in #content can then be visualised with a background image on #container; divs are not table cells, and you don't need (or want) the fysical elements to create such a visual effect. If you're not yet convinced; think wobbly lines and gradients instead of straight lines and simple color schemes.

Relative positioning

Because #container has a relative position, #footer will always remain at its bottom; since the min-height mentioned above does not prevent #container from scaling, this will work even if (or rather especially when) #content forces #container to become longer.

Padding-bottom

Since it is no longer in the normal flow, padding-bottom of #content now provides the space for the absolute #footer. This padding is included in the scrolled height by default, so that the footer will never overlap the above content.

here is the css

/**
* 100% height layout with header and footer
* ----------------------------------------------
* Feel free to copy/use/change/improve
*/

html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;

font-family:arial,sans-serif;
font-size:small;
color:#666;
}

h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}

h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}

p {
line-height:1.5;
margin:0 0 1em;
}

div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:750px;
background:#f0f0f0;

height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/

min-height:100%; /* real browsers */
}

div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#header p {
font-style:italic;
font-size:1.1em;
margin:0;
}

div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align:justify;
padding:0 1em;
}

div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
div#footer p {
padding:1em;
margin:0;
}

Click to Activate" solution!

2007-05-14T10:39:00.000+05:30

here is the solution .

History of this problem:
These are a result of Microsoft losing a lawsuit with a company called Eolas. MS decided to not pay for a patent license and instead patched their browser to work in a way that does not infringe on the Eolas patent.

Solution One:
Visit www.Adobe.com and download the "fix" for Flash called "Active Content Update". This fix adds a publishing option, and also a new "Command". You must use this publishing option and use the Command in order to "add" the fix to your HTML page.

Solution Two:
http://blog.deconcept.com/swfobject/

Solution three:

http://www.webreference.com/programming/ie/

flash over the div tag problem

2007-05-14T10:37:00.000+05:30

* By default, Flash is always on top.
* Applying a wmode of opaque (or, in some cases, transparent) is the solution.

Opaque mode allows your DHTML drop down menus to stay in front of your Flash movie as well as hiding non-essential Flash from screen readers. Yes, transparent mode will also allow your DHTML drop down menus to render properly and will hide non-essential Flash, but due to possible performance issues, that's best left for opaque mode. Use transparent mode to show elements stacked beneath your Flash movie and when actual transparency is needed.

another solution.. check the link below

http://nickcowie.com/2006/layering-flash-and-html-tutorial/

http://www.boldfishclient.co.uk/go/flash
(uses the UFO embedding method with wmode set to transparent)

Browsercam link to screen grabs to see cross browser efficiency:
http://www.browsercam.com/public.aspx?proj_id=344019

css layouts

2007-05-10T12:42:00.000+05:30

http://www.code-sucks.com/css%20layouts/

http://blog.html.it/layoutgala/

Pre-loading sound within a flash animation

2007-05-09T15:52:00.000+05:30

if you want to display a preloader, load the sound in combination with onEnterFrame. Something like

Code:

Sound mySound = new Sound();
mySound.loadSound("my.mp3", true); //stream it
onEnterFrame = function()
{
bTotal = mySound.getBytesTotal();
bLoaded = getBytesLoaded();
if (bLoaded >= bTotal)
delete onEnterFrame;
// do the animation here, based on the percentage represented by bLoaded
}

Sound.loadSound

Availability
Flash Player 6.

Usage
mySound.loadSound(" url ", isStreaming )

Parameters
url - The location on a server of an MP3 sound file.
isStreaming - A Boolean value that indicates whether the sound is a streaming or event sound.

Returns
Nothing.

Description

Method; loads an MP3 file into an instance of the Sound object. You can use the isSteaming parameter to indicate whether the sound is an event or a streaming sound.

Event sounds are completely loaded before they play. They are managed by the ActionScript Sound object and respond to all methods and properties of this object.

Streaming sounds play while they are downloading. Playback begins when sufficient data has been received to start the decompressor.

All MP3s (event or streaming) loaded with the Sound.loadSound method are saved in the browser's file cache on the user's system.

Example
The following example loads an event sound:

s.loadSound( "http://serverpath:port/mp3filename", false);

The following example loads a streaming sound:

s.loadSound( "http://serverpath:port/mp3filename", true);

Flash CS3 (P)reviewed

2007-05-03T17:25:00.000+05:30

Although this is the third iteration of Adobes Creative Suite, for many of us, this is the first true test of the acquisition of Macromedia by Adobe a year and half ago. And based on what we have had a chance to see, it appears the first thing on the agenda was integration. Read our first review here.

With the next version of Flash, the integration is especially evident with both PhotoShop and Illustrator importers. And when they decided to finally bridge that gap, the engineers at Adobe did it right with custom designed panels that give you full control over importing layers, assigning instance names and even allowing for individual compression controls. And as an extra degree of integration, you can also copy and paste right from Illustrator into Flash.

But the integration was not unilateral. Illustrator now has the ability to have symbol names, type (movie clip or graphic), registration points and even enabling it for 9-slice scaling. And all of these options import directly into Flash as if the symbol were created there. Continuing the integration with Illustrator and Flash, users who are used to drawing in Illustrator, the premiere choice for vector-based artwork, can now find the same level of control in Flash. With the newly upgraded pen tool, users now have tighter control over image manipulation on the stage. Even the shortcut key-commands are the same for this tool. And you can not mention integration without talking about the new look and feel for user interface across most of the new CS3 applications including Flash. Not only is the new look very clean, but it also is very functional with the new iconic mode, allowing for more screen real-estate and less clutter. And after integration, Adobe went right to streamlining a lot of different workflows starting with the Actions Panel. Collapsible code chunks is nothing new to other code editors, but in this case it is slightly different in that the Actions panel does not decide where to collapse your code, you do. You simply highlight the section you want to collapse, and click on one of the triangles at either end of the highlighted section. But that is not all you can do with selected code, you can also instantly comment it out as a line-by-line comment, or as a group comment. And removing comments are just as easy.

But that is not where the upgrades to the Actions panel end. When errors occurred in Flash, they would generally appear in the Output panel, and they still do, but now there is a Compile Errors panel that allows users to double click on the error and be taken right to that line of code. And Adobe has even upgraded the debugger to be more inline with the Flex debugger for even more debugging control. Next up is a feature mentioned back at Flash Forward in Austin. Taking the ease and flexibility of timeline based motion tweens and converting them to well structured XML data that can actually sit right within the rest of the code is much more powerful than it first appears. Because the animation is now part of an AS object, it has methods, events and properties of its own including the ability to set the number of loops and be notified when the animation is complete. This is something that is a bit more complicated with traditional tweens. And I thought I might have found something that Adobe had missed when I set the tween to a motion guide, but sure enough when I copied it as AS 3 and pasted it into the Actions panel, I noticed it picked up every position in the motion guide, so the animation still matched identically.

And in the continuing evolution from smart objects to components, I think this set is finally what we have been waiting for. Good functionality is not necessarily new to components, but how about easily being able to skin them? Well it doesn't get any easier than this. You simply double click the component on the stage, and you are presented with the different states of that component that you can quickly re-skin to look the way you want.

And I didn't forget about ActionScript 3 and the new virtual machine that puts to shame the performance of all previous Flash players, but I do not think that it is any surprise to anyone. What might be a surprise is an upgrade to the export abilities of Flash. Up until now, if you wanted to create an animation, and then export it to Quicktime, you had to have everything piece of animation on the main timeline, no sub-movie clip animations or animations controlled by code. But now, you can setup sub-animations and have animations controlled with ActionScript because the export acts more like a screen record than simply exporting the frames. You can even set it to export for a certain amount of time, or when it reaches the final frame.

Flash CS3 makes workspace customization easy. The new panel system lets you keep them open (in this case) or hide them to expand the workspace area.
A few more random things about the next version of Flash:

It boots up and compiles files much faster than previous versions. As an example, I took a large sized file, with well over 250 images in it and compiled it in Flash 8 and Flash CS3. Flash 8 took about 40 seconds, Flash CS3 took about 18 seconds.
The scroll wheel works on the stage and in the timeline. This may not seem like much, but when you have a ton of layers, and a large stage size it really makes a difference.
The object hierarchy has moved from above the timeline to beneathe it. Not really sure why, but it is pretty annoying at first if you're used to it being above.
Switching between different workspaces is pretty easy now with a workspace drop down right underneath the timeline.

This version of Flash not only marks a truly integrated application, but also a sign of things to come from Adobe.

(This review is based on a beta version of Flash CS3 so it may not represent the final product to ship later this year. That is why we call this a preview or a "first look". The version tested is however expected to be feature complete and this article explains what we see as the biggest enhancements.)

Fast Rollovers Without Preload

2007-05-03T10:47:00.000+05:30

When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). We've got one image for each state (normal, hover, active, visited etc). Putting all states into one image makes dynamic changes faster and requires no preload.

Let's have a simple example. The menu items are the a-elements with display:block. Proper padding and background image for a, a:hover and a:active make the rollover. To simplify the rollover, I used only one picture containing three states of a button — normal, :hover, and :active.

Usually, in CSS rollovers, we use background images in this way:

#menu a { ... background: url("button.gif") top left no-repeat; }
#menu a:hover { ... background-image: url("button-over.gif"); }
#menu a:active { ... background-image: url("button-active.gif"); }
/* etc... */

Using one common picture, we don't need to change the background image. We just change its background-position. The :hover state will use the background image moved proper count of pixels (in the example the shift is 157px to the left), the :active state will use bigger shift (by 314px in the example).

#menu a { background: url("button.gif") 0 0 no-repeat; ... }
#menu a:hover { background-position: -157px 0; ... }
#menu a:active { background-position: -314px 0; ... }

That's all. Just one image is used. No preload is needed. State switching is as fast as possible (moving background position is much faster than replacing background image). AFAIK, it works in every CSS2 capable browser (IE5+, Mozilla, Opera, Safari etc.)

IE inherited margin bug: form elements and hasLayout

2007-04-27T10:22:00.000+05:30

Internet Explorer on Windows has a wide variety of rendering bugs.
Many of these bugs can be worked around by giving affected elements
the IE-specific "hasLayout" property and an extensive
analysis of how and when this works is available. This article
describes the opposite situation: an IE rendering bug that is
triggered by elements having layout for which the workaround is to
remove the hasLayout property.

The bug is that certain form input elements whose containing box
has layout inherit the sum of the margins of all of their containing
boxes. Unlike the the well known IE
doubled float-margin bug, this one does not involve floats. There
is a workaround but, so far, no magic-bullet CSS-only
solution.

The Problem

Consider this sample code:

.has-margins { background-color: gray; margin-left: 5em; padding: 1em; } .has-layout { background-color: tan; width: 30em; } <form action="ignore"> <div class="has-margins"> <div class="has-layout"> INPUT tag, type=text:<br> <input type="text"><br> INPUT tag, type=checkbox:<br> <input type="checkbox"> </div> </div> </form>

The outer has-margins box is gray and the full width of the page
except for a left margin of 5em. The inner has-layout box is tan,
30ems wide, and contains four lines of content: two of text and two
form elements. All four lines of content should be flush against the
left edge of the tan box.

Here is how it actually displays:

Consider another example which wraps a second has-margins box
around the inner has-layout box:

<form action="ignore">
<div class="has-margins">
<div class="has-margins">
<div class="has-layout">
INPUT tag, type=text:<br>
<input type="text"><br>
INPUT tag, type=checkbox:<br>
<input type="checkbox">
</div>
</div>
</div>
</form>

The bug seems to occur for all INPUT types except checkbox, radio,
and image as well as TEXTAREA elements but not for SELECT
elements.

Workarounds

The problem only seems to occur when the direct parent of the INPUT
element has hasLayout and any ancestor has margins. This leads to
several possible workarounds:

Set a negative margin on the INPUT element equal to the sum of all
of its parents' margins. This is fine for static sites but if you are
using a CMS it is probably not possible without scripting. Keep in
mind that only some INPUT element types are affected; assigning
negative margins to checkbox, radio, or image inputs will break your
layout.

Remove the margins from all ancestor elements. This is not
particularly realistic.

Remove the hasLayout-granting style from the containing DIV.
Since you presumably put that style there for a reason, this is also
not particularly realistic.

Put inline text, a LABEL, or possibly any inline element at all
immediately before the INPUT element. The fact that this solves the
problem is probably why some people have not noticed it. Example:

<form action="ignore"> <div class="has-margins"> <div class="has-layout"> INPUT tag, type=text, preceeded by inline text:<br> Text: <input type="text"><br> </div> </div> </form>
INPUT tag, type=text, preceeded by inline text:

Text:

Wrap the INPUT element in an unstyled SPAN, LABEL, or, in fact,
any container element without a hasLayout-granting style. Example:
<form action="ignore"> <div class="has-margins"> <div class="has-layout"> INPUT tag, type=text, wrapped in an unstyled SPAN:<br> <span><input type="text"></span><br> </div> </div> </form>

INPUT tag, type=text, wrapped in an unstyled SPAN:

Semantics

2007-04-24T12:38:00.000+05:30

A great deal has been written about semantic markup and its importance. Some of this material has been written by purists who defend semantics because they like the logic and structure that semantic markup can convey. That’s all very well and good, but what does semantic markup mean? And what practical usage does it have?

Semantic means to have, or convey, meaning. In an Extensible/HyperText Markup Language (XHTML/HTML) context, this translates to using elements that actually convey accurate information about the content they enclose. If you have a page header or sub-header, it should be in an H tag (heading element). If you have a nice testimonial quote, it should be within blockquote element rather than basic paragraph tags with applied style. Remember the saying It does what it says on the box? Well, markup provides the boxes for all page content. Semantic markup ensures that your boxes have the right labels. It goes a long way to ensuring that software doesn’t have to open the box and analyse the contents first before figuring out how to render them. After all, if you open a can labeled “Beans,” you expect to see beans, not peaches. If can labeling was as variable as some of the page markup on the web, meal times would be a lot more… well, interesting, if not exactly edible.

Markup First, Style Later
When marking up new content, your first thought should be What kind of content is this phrase? and not What does this say? or How should it look? Concentrate on describing the content by applying the correct semantic markup first. Examine every piece of text on a page to determine what type of content it is and how best to convey that through markup. The humble p element should be your last resort — not your first choice.

Only when this process is complete should you start to look at graphical styling via your Cascading Style Sheet (CSS). If you have made good use of the full range of markup that is available — rather than just relying on p tags and the odd header element — you may even find that your pages are easier to style. You will probably end up with a larger set of elements to style on a single page and you may not have to create so many specific classes or ids to achieve a given effect.

Why Does Semantic Markup Make A Difference?

Well, for a start, you have no real idea how many of your visitors won’t actually see your pages using a graphical browser, so you can’t rely upon purely graphical renderings to convey meaning. Styling your quotes using p tags with added styling to render the text dark red or bright green is pretty pointless if some of your visitors won’t ever see the pretty effect. Google certainly won’t, and that’s one pretty important visitor.

However, from an accessibility point of view, a great deal of the assistive technology out there is reliant upon semantic markup. The assumption is that headings will be in enclosed in H tags; quotations will be marked up properly and lists will use list markup and not just rely on hard-coded line breaks. JAWS, for example offers users the option to jump from header to header without reading the intervening text. This is the audio equivalent of a sighted user scanning a page to see what topics it includes before settling down to read a particular paragraph. However, this feature is useless if a page doesn’t contain any header markup. That line of text at the top of a page may look like a header but, unless it’s marked up correctly, it’s not a header and it certainly won’t sound like one.

Similarly, some screen readers may automatically change voice when encountering quotations that are correctly identified using markup. If you don’t use appropriate quotation markup, it becomes extremely difficult to separate, for example, testimonials, from their surrounding text. Conversely, if you use blockquote inappropriately to simply indent plain text, screen reader users may be presented with a page that no longer makes sense.
Finally, using semantic markup offers the best method of future proofing your content and ensuring that it continues to make sense via a whole range of user agents now or in the future.

Different Strokes

Although adopting semantic markup will, by definition, tend to lead you towards particular approaches and practices, it is worth bearing in mind that there may not be a hard and fast rule in every situation. Even within semantic markup, there is room for a number of equally valid Best Practice approaches. For example, should a page have just one H1 heading element or is it okay to have more than one? There are good arguments for both sides of that particular discussion.

Right and wrong are concepts that should only have limited usage within web design once you get beyond the appropriate World Wide Web Consortium (W3C) specifications. Beyond these documents, there is only opinion and user feedback. The latter is particularly important and should never be under-estimated. Given that web pages are supposedly intended for use by users, this does seem to be stating the obvious but there are times when user feedback can get over-looked in the pursuit of semantic perfection. And that just has to be plain wrong!

Opinions, however, are just that. They are not rules and they are open to discussion. Listen to as many points of view as you can, then think about it on your own until you reach your own informed decision. At the end of the day, that’s what applying semantic markup is really all about — thinking about your content first.

navigation matrix reloaded

2007-04-23T15:42:00.000+05:30

How it works

At first this example might not seem very different from other navigation experiments. But the most interesting part is hidden in the code and the methodology. My example is called navigation matrix because it actually loads a matrix to display the correct graphics for the menu items. Below I included the image that is downloaded — just once.

As you can see it contains all the different states required for the navigation to function properly. In essence it’s based on the method to shift background positions, which of course works faster than shifting individual images. By assigning a specific id to each body tag in individual pages I can target the list elements and set their respective backgrounds. The only thing I need to do is make sure that the background is in the right position for each element.

The first 4 rows are used for the different ul backgrounds. As you can see they perfectly match with the hover states on the individual pages. The other two rows include the other states I need for the navigation to function properly. Of course some tabs are included more than once, but this is needed because I need the entire row to display as the ul background, instead of just individual elements. The size in kilobytes is exactly the same as the previous matrix.

The HTML is given below

<body id="welcome">
<div id="header">
<ul id="nav">
<li id="wel"><a href="welcome2.html">welcome</a></li>
<li id="pro"><a href="products2.html">products</a></li>
<li id="sup"><a href="support2.html">support</a></li>
<li id="con"><a href="contact2.html">contact</a></li>
</ul>
</div>
</body>

The css is

body {
background: #f1efe2;
}

#header {
margin: 0 auto 0 auto;
width: 650px;
padding: 0;
border: 5px solid #fff;
height: 120px;
background: #666 url(header.png) no-repeat left top;
}

ul#nav {
position: relative;
top: 68px;
left: 188px;
width: 346px;
margin: 0;
height: 22px;
list-style-type: none;
overflow: hidden;
}

body#welcome ul#nav
{ background: transparent url(nav_f_2.png) no-repeat 0 0; }
body#products ul#nav
{ background: transparent url(nav_f_2.png) no-repeat 0 -22px; }
body#support ul#nav
{ background: transparent url(nav_f_2.png) no-repeat 0 -44px; }
body#contact ul#nav
{ background: transparent url(nav_f_2.png) no-repeat 0 -66px; }

ul#nav li a {
position: absolute;
top: 0;
width: 84px;
text-indent: -9000px;
text-decoration: none;
padding: 22px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:22px; /* IE5/Win */
background: transparent url(nav_f_2.png) no-repeat;
}

body#welcome li#wel a
{ background-position: 0 0; width: 94px; left: 0; }
body#welcome li#wel a:hover
{ background-position: 0 0; }
body#welcome li#pro a
{ background-position: -94px -88px; left: 94px; }
body#welcome li#pro a:hover
{ background-position: -94px 0px; }
body#welcome li#sup a
{ background-position: -178px -88px; left: 178px; }
body#welcome li#sup a:hover
{ background-position: -178px 0; }
body#welcome li#con a
{ background-position: -262px -88px; left: 262px; }
body#welcome li#con a:hover
{ background-position: -262px 0; }

body#products li#wel a
{ background-position: 0 -110px; width: 94px; left: 0; }
body#products li#wel a:hover
{ background-position: 0 -22px; }
body#products li#pro a
{ background-position: -94px -22px; left: 94px; }
body#products li#pro a:hover
{ background-position: -94px -22px; }
body#products li#sup a
{ background-position: -178px -88px; left: 178px; }
body#products li#sup a:hover
{ background-position: -178px 0; }
body#products li#con a
{ background-position: -262px -88px; left: 262px; }
body#products li#con a:hover
{ background-position: -262px 0; }

body#support li#wel a
{ background-position: 0 -88px; width: 94px; left: 0; }
body#support li#wel a:hover
{ background-position: 0 -44px; }
body#support li#pro a
{ background-position: -94px -110px; left: 94px; }
body#support li#pro a:hover
{ background-position: -94px -44px; }
body#support li#sup a
{ background-position: -178px -44px; left: 178px; }
body#support li#sup a:hover
{ background-position: -178px -44px; }
body#support li#con a
{ background-position: -262px -88px; left: 262px; }
body#support li#con a:hover
{ background-position: -262px 0; }

body#contact li#wel a
{ background-position: 0 -88px; width: 94px; left: 0px; }
body#contact li#wel a:hover
{ background-position: 0 -44px; }
body#contact li#pro a
{ background-position: -94px -88px; left: 94px; }
body#contact li#pro a:hover
{ background-position: -94px 0; }
body#contact li#sup a
{ background-position: -178px -110px; left: 178px; }
body#contact li#sup a:hover
{ background-position: -178px -66px; }
body#contact li#con a
{ background-position: -262px -66px; left: 262px; }
body#contact li#con a:hove
r  { background-position: -262px -66px; }


p { text-align: center; }
p a
{ color: #666; text-decoration: none; font: 11px/1.5 tahoma, arial, verdana, sans-serif; }
p a em
{ font-style: normal; border-bottom: 1px solid #999; }
p a:hover em
{ color: #333; border-bottom: 0; }




you can see the navigation tab here

css- tab navigation

2007-04-23T15:33:00.000+05:30

here is the code for a css tab navigation.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta name="author" content="Didier Hilhorst" />
<title>CSS Based Navigation</title>
<style media="all" type="text/css">

</style>
</head>

<body>
<ul>
<li id="bu1"><a href="#"><span>homepage</span></a></li>
<li id="bu2"><a href="#"><span>business</span></a></li>

<li id="bu3"><a href="#"><span>personal</span></a></li>
<li id="bu4"><a href="#"><span>information</span></a></li>
</ul>
</body>
</html>

sticky footer

2007-04-20T16:19:00.000+05:30

here is the XHTML markup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head>
<title>A CSS Sticky Footer</title>

<link rel="stylesheet" type="text/css" media="screen" href="layout.css" /> <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head> <body>
<div class="wrapper">
<div class="header"> <h1>CSS Sticky Footer</h1> </div>
<h2>A CSS sticky footer that just works</h2> <img src="browsers.gif" width="127" height="122" alt="Browser Icons" /> <p>We've all tried to use a <strong>sticky footer</strong> one time or another, but they never seem to come out right, do they? Well, the days of a hard to understand CSS-based <strong>sticky footer</strong> are thankfully over. In just a few simple CSS classes with minimal extra HTML markup, I've fashioned a <strong>sticky footer</strong> that even beginners can get a handle on. It's been tested in IE 5 and up, Firefox, Safari and Opera.</p> <h2>Usage of the CSS</h2> <p><q>Great! this is exactly what I'm looking for! Can I use it?</q></p> <p>Absolutely. There are no terms, licenses, fees or requirements. Use it as you will. If you find the kindness to link to me on your site, I'd appreciate it, but it's by no means necessary. Have fun, and don't be afraid to ask me any questions or send me your thoughts.</p> <p class="download"><a href="layout.css">View the CSS</a> or <a href="sticker.txt">download the HTML</a></p>
<div class="push"></div>
</div>
<div class="footer"> <p>Copyright © 2006-2007 Ryan Fait All rights reserved.<br /> You may not reproduce this example without written permission from Ryan Fait</p> </div>
<script type="text/javascript" src="http://www.google-analytics.com/urchin.js"></script>; <script type="text/javascript"> _uacct = "UA-271290-1"; urchinTracker(); </script>
</body></html>

here is the CSS

/*
STICKER - A valid, easy to use CSS sticky footer by Ryan Fait
This is the basic CSS you need along with the one extra emptydiv and the wrapper required to achieve the effect. I suggestthat you leave the * { margin: 0; } code in while testing andbuilding your site because margins do have a tendency to messthings up a bit. Have fun!
Copyright (c) 2006-2007 Ryan Fait
*/

* { margin: 0;}html, body { height: 100%;}.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */}.footer, .push { height: 4em; /* .push must be the same height as .footer */}

/*
TROUBLESHOOTING
I've received a few comments about vertical margins causing afew problems with the layout. If you want space betweenparagraphs or headers, use padding instead of margin. It's assimple as that.
*/

Rounded Corner Boxes the CSS3 Way

2007-04-20T11:28:00.000+05:30

If you’ve been doing CSS for a while you’ll know that there are approximately 3,762 ways to create a rounded corner box. The simplest techniques rely on the addition of extra mark-up directly to your page, while the more complicated ones add the mark-up though DOM manipulation. While these techniques are all very interesting, they do seem somewhat of a kludge. The goal of CSS is to separate structure from presentation, yet here we are adding superfluous mark-up to our code in order to create a visual effect. The reason we are doing this is simple. CSS2.1 only allows a single background image per element.

Thankfully this looks set to change with the addition of multiple background images into the CSS3 specification. With CSS3 you’ll be able to add not one, not four, but eight background images to a single element. This means you’ll be able to create all kinds of interesting effects without the need of those additional elements.

While the CSS working group still seem to be arguing over the exact syntax, Dave Hyatt went ahead and implemented the currently suggested mechanism into Safari. The technique is fiendishly simple, and I think we’ll all be a lot better off once the W3C stop arguing over the details and allow browser vendors to get on and provide the tools we need to build better websites.

To create a CSS3 rounded corner box, simply start with your box element and apply your 4 corner images, separated by commas.

.box {
background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
}

We don’t want these background images to repeat, which is the normal behaviour, so lets set all their background-repeat properties to no-repeat.

.box { background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; }

Lastly, we need to define the positioning of each corner image.

.box { background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-position: top left, top right, bottom left, bottom right; }

And there we have it, a simple rounded corner box with no additional mark-up.
As well as using multiple background images, CSS3 also has the ability to create rounded corners without the need of any images at all. You can do this by setting the border-radius property to your desired value as seen in the next example.

.box { border-radius: 1.6em; }

Setting Type on the Web to a Baseline Grid

2007-04-20T11:04:00.000+05:30

We web designers get excited about the littlest things. Our friends in the print world must get a kick out of watching us talk about finally being able to achieve layouts on the web that they’ve taken for granted for years. Let’s face it: it’s easier these days to embed a video on the web than it is to set type consistently or align elements to a universal grid.

But we’re scrappy folks, web designers. We don’t give up easy. In the long slow battle with browser support and platform inconsistencies, we’ve been able to bring more and more sophisticated print techniques onto the web—sometimes kicking and screaming.

We have the technology

Over the last year or so, there’s been a lot of talk about grid systems and using column grids for website layouts. Mark gave us a lesson plan, Khoi gave us a case study and Cameron gave us a toolkit. The message is clear: we have the browser support, the know-how, and the tools we need to create consistent multi-column grid layouts on the web.
We can apply the same principles of proportion and balance to the type within those columns by borrowing another technique from our print brethren: the baseline grid.
The main principle of the baseline grid is that the bottom of every line of text (the baseline) falls on a vertical grid set in even increments all the way down the page. Imagine those old Big Chief ruled writing pads they gave you in grade school to practice penmanship and you’ve got the basic idea. The magical end result is that all the text on your page lines up across all the columns, creating a harmonious vertical rhythm.
In print, it’s not that hard. Just enable the baseline grid in Quark or InDesign and set the increment based on the line-height you want. On the web of course, it’s another story. It’s hard enough to align things vertically with CSS because it’s tough to predict where every element will fall, and it only gets worse when we’re dealing with type, which is hard enough to size consistently on its own. But with a little math and a slightly obsessive attention to detail, we can make it work.

Firing up the grid

Note: I’ve used pixel units for sizing text in the examples for this article. Recognizing that this may be a surprising recommendation for an article in this publication, I’ve addressed some of my reasons for doing so—as well as some alternate techniques that use relative units—further down.

The first thing we have to do is set a line-height for our grid. I’ve chosen a pretty standard base font size of 12 pixels, and set the line-height at 18 pixels, which gives us a nice open leading of about 150%. It’s important to think about your line-heights up front. You want a ratio of font size to line-height that’s a good balance for readability and that’s easily divisible into smaller units (more on this later).

I’ve also borrowed a trick from Khoi and created a tiling background image that I can use on the page while I’m working to make sure everything lines up where I want it to. You can see the end result with the grid turned on in this example.

You’ll notice in the previous example that the text doesn’t fall directly on the grid lines. Because of the way CSS renders line-height (by adding space above and below the letters) it’s a lot easier to line the text up within the grid lines rather than directly on them. It’s possible to adjust your background image to take this into account, or tweak the padding on certain elements so the text starts in a different place, but there’s no point making this more complicated than it needs to be.

Paragraphs and headers

I’ll start by resetting the margin and padding on everything to zero so we don’t have to worry about default browser styles. In practice, you’ll probably want to use something a little more precise, but for the purposes of this example, a good old star selector will do just fine.

* {
margin: 0;
padding: 0;
}

We want space between paragraphs, but the default top and bottom margins of 1em (which works out in this case to 12 pixels) won’t work with our 18 pixel grid, so we’ll set the bottom margin on paragraphs to 18 pixels.

p {
margin-bottom: 18px;
}

As we set the font size for headers, we also need to set appropriate line-heights in multiples of 18, as well as adding the 18 pixel bottom margin.

h1 {
font-size: 24px;
line-height: 36px;
margin-bottom: 18px;
}

h2 {
font-size: 18px;
line-height: 18px;
margin-bottom: 18px;
}

h3 {
font-size: 12px;
line-height: 18px;
}

The pattern is pretty simple. Any time you add vertical space with a margin or padding, you need to add it in units of 18 pixels to maintain the baseline grid. You don’t always have to add it in one place, but you need to add it in pairs that add up to 18 pixels. For instance, you could set a top margin of 12 pixels and a bottom margin of 6 pixels.

Lists

Lists are a little bit tougher. We’re used to adding a little padding between each list item and before or after a nested list. Depending on your grid size, you may have to choose between adding a lot of extra space (adding a full grid line) or adding none at all and letting list items fall on the regular grid lines.
Since the 18-pixel line-height we started with is pretty generous, the “none at all” option works pretty well here. I’ll just add the bottom margin of 18 pixels.

ul, ol {
margin-bottom: 18px;
}

As for nested lists, it’s possible to add half of your line-height (in this case, 9 pixels) of margin above and below nested lists. Adding half a line to the top and another half to the bottom means the contents of the list will be “off the grid,” but the grid will get back on track once the list ends. It’s a compromise, but sometimes worth it for designs in which you need to accommodate especially long or complicated nested lists.

Floats and sidebars

Here’s where a little discipline comes in. Images and other elements floated within your text need to be sized vertically in multiples of your grid increment: in this case, multiples of 18. If they’re sized correctly, you can add margins around them that add up vertically to a multiple of 18, and the text will always break in the right place, directly under your image.

.left {
float: left;
margin: 0 18px 18px 0;
}
.right {
float: right;
margin: 0 0 18px 18px;
}

Other floated elements like callout boxes are a little bit more complicated, since it’s harder to predict their height based on the content inside. As long as all text and images inside the float follow the 18-pixel rules, and you always add vertical padding and margins in groups that add up to 18, everything should line up no matter what you put inside.

.callout {
border: 1px solid #ddd;
padding: 8px 10px;
margin-bottom: 18px;
}

Notice that I added 8 pixels of padding to the top and bottom of the floated element, since the border width already accounted for 2 pixels of added height (8 + 8 + 1 + 1 = 18).
I’m also going to suck out the bottom margin on the last element in the callout so we don’t end up with too much extra space inside. This isn’t a critical layout feature (the grid is still intact without it), so I’ll go ahead and use the :last-child pseudo class since it doesn’t require me to add any extra markup. IE6 won’t get it, but it won’t break the layout.

.callout :last-child {
margin-bottom: 0;
}

The important thing to remember with callouts and sidebars is to keep the line-height the same even if you make the text smaller. You might be tempted to tighten it up, but even for 11- or 10-pixel font sizes, 18 pixels is still a very readable line-height.

All your baseline are belong to us

You can see it all put together in this example. If you don’t believe me, put your rulers away and check it out with the background grid visible.

You can start to see why baseline grids aren’t used very often on the web. It’s pretty tough to keep up with it—especially as your layouts get more complicated—and we’ve only touched the surface of some of the relatively manageable challenges. Just as in print, baseline grids are not always the right choice for every layout, and sometimes you need to make exceptions or exclude certain elements from the grid to make a layout work.

But it’s definitely possible, and something that’s worth experimenting with, especially in combination with a horizontal or column grid. A nice balanced baseline grid—even just within the main content area—can add polish and readability as we move typesetting on the web to the next generation with CSS3 and beyond.

Don’t fear the pixel

One final note on font sizing: I’m using pixels instead of ems in this example for one reason: it makes everything simpler. With pixels, I can set one base line-height for the entire document and I don’t have to recalculate it whenever I use a smaller font size. When designing a practical system like this, it’s important that it’s relatively easy (for yourself and others) to use and maintain.

You can use relative sizes, but it quickly becomes a lot more difficult to maintain as the math becomes more complicated. It’s easy to get 12 out of 18 (just set the line-height to 1.5em), but when you want to adjust the text size but keep the same line-height, the fractions start to get messy, and predicting how browsers are going to round your values makes it hard to be exact. It’s certainly possible however, and if you’re interested in trying something similar with relative text sizes, I’d recommend checking out Richard Rutter’s excellent 24 ways article, Compose to a Vertical Rhythm.

In the end, it’s a tradeoff. Most browsers will scale pixel-based line-heights proportionally along with the text. Of course, the margins don’t scale, and neither do the images. But is it worth making the system more complicated just to make the margins scale if the images don’t? It depends on the situation. In the end, it’s up to you.

At some point as designers we have to strike a balance between creating pixel-perfect layouts and infinitely flexible ones. When you get down to it, resizable text is primarily an accessibility feature, not a design feature. Ideally it’s something that should be provided by the browser, no matter how the page is built, and in modern browsers it is. As long as all your content is readable and accessible at all sizes, it’s not necessarily true that the design must maintain integrity as you scale.

Breadcrumb Navigation Increasingly Useful

2007-04-20T10:52:00.000+05:30

Not all design decisions are a matter of website survival. Of course, it's important to get the big things right, or you won't have any users. But getting the small things right enhances usability and fosters user comfort. A perfect example here is the breadcrumb trail.

Breadcrumbs won't help a site answer users' questions or fix a hopelessly confused information architecture. All that breadcrumbs do is make it easier for users to move around the site, assuming its content and overall structure make sense. That's sufficient contribution for something that takes up only one line in the design.
Breadcrumbs have always been a secondary navigation aid. They share this humble status with site maps. To navigate, site visitors mainly use the primary menus and the search box, which are certainly more important for usability. But from time to time, people do turn to the site map or the breadcrumbs, particularly when the main navigation doesn't quite meet their needs.

Despite their secondary status, I've recommended breadcrumbs since 1995 for a few simple reasons:
Breadcrumbs show people their current location relative to higher-level concepts, helping them understand where they are in relation to the rest of the site.

Breadcrumbs afford one-click access to higher site levels and thus rescue users who parachute into very specific but inappropriate destinations through search or deep links.
Breadcrumbs never cause problems in user testing: people might overlook this small design element, but they never misinterpret breadcrumb trails or have trouble operating them.
Breadcrumbs take up very little space on the page.

So, despite the merely mid-sized benefits, the overall cost-benefit analysis comes out quite strongly in favor of breadcrumbs. Their downside is incredibly small: while they do take up space, that space is minute. When you divide a mid-sized numerator by a tiny denominator, the resulting fraction is substantial.

The main argument against breadcrumbs is that many users overlook them. So, why do something that only benefits a minority?

As I've long argued, breadcrumbs are different than most other little-used design elements for the simple reason that they don't hurt users who ignore them.

Growing Popularity

The case against breadcrumbs is crumbling. Every year we see more people use breadcrumbs in our studies. Because breadcrumbs are not important enough for a dedicated study, I don't have an exact number for the current percentage of breadcrumb users. But it's definitely growing over time.

In testing an e-commerce site last month, for example, one user complained: "This is missing a feature to go back to the previous page."

I found this apparent request for a Back button puzzling, since the button was featured prominently in the browser and the person had easily used it earlier in the test session. Also, for six years, it's been an established guideline to avoid duplicating browser functionality in the page design.

It quickly became clear, however, that the user wasn't asking for a duplicate Back button. Elaborating on the previous complaint, she pointed to the place on the page where breadcrumbs typically appear and said she wanted the list of links to higher-level pages.
In other words, the user wanted breadcrumbs. She'd seen them before, but didn't know what they were called, so she asked for them using words that -- if taken literally -- would have been easily misinterpreted.

This is a great example of the hard-won lesson of usability: don't comply with user requests. Give more attention to what study participants do than to what they say.

Consistency Breeds Familiarity

Human behavior doesn't change much over the years. My recent book documents a few cases where Web design guidelines from the mid-1990s have changed. But mainly, usability guidelines stay the same decade after decade.

Why are people now using breadcrumbs to the extent that they actually miss them when sites don't offer them?

It's exactly because of breadcrumbs' modest nature that people are becoming accustomed to them. There aren't too many ways to mess up breadcrumbs in a design. No fancy stuff, just a line of textual links.

Breadcrumbs are almost always implemented the same way, with a horizontal line that
progresses from the highest level to the lowest, one step at a time;
starts with the homepage and ends with the current page;

has a simple text link for each level (except for the current page, because you should never have a link that does nothing); and

has a simple, one-character separator between the levels (usually ">"). This consistency means that people know a breadcrumb trail when they see one, and immediately know how to use it. Consistency breeds familiarity and predictability, which breed usability. This again means that you must comply with conventions in the design of your own breadcrumbs.

Breadcrumbs are also useful for intranets: 80% of this year's award-winning intranets use breadcrumbs.

Hierarchy or History?I'm sometimes asked whether website breadcrumbs should follow the fairytale model of Hansel and Gretel. In that story, the children walk through a bewildering forest, dropping breadcrumbs behind them in hopes that they might later find their way out.
In user interface design, it's often dangerous to take metaphors too far, and breadcrumbs are again the perfect example. Offering users a Hansel-and-Gretel-style history trail is basically useless, because it simply duplicates functionality offered by the Back button, which is the Web's second-most-used feature.

A history trail can also be confusing: users often wander in circles or go to the wrong site sections. Having each point in a confused progression at the top of the current page doesn't offer much help.

Finally, a history trail is useless for users who arrive directly at a page deep within the site. This scenario is when breadcrumbs show their greatest usability benefit, but only if you implement them correctly -- as a way to visualize the current page's location in the site's information architecture.

Breadcrumbs should show the site hierarchy, not the user's history.
For non-hierarchical sites, breadcrumbs are useful only if you can find a way to show the current page's relation to more abstract or general concepts. For example, if you allow users to winnow a large product database by specifying attributes (of relevance to users, of course), the breadcrumb trail can list the attributes that have been selected so far. A toy site might have breadcrumbs like these: Home > Girls > 5-6 years > Outdoor play (note that the links should be colored as well as underlined, but I don't do this here to avoid confusion with these dummy links).

Looking ahead, people will use breadcrumbs even more because they're an important navigation tool in Windows Vista. Most users don't distinguish clearly between the operating system, applications, and content or websites. Users will thus transfer their understanding of Vista's interaction techniques to your website.

If you don't have breadcrumbs, it's time to start planning for them. They'll improve your usability a bit now, meet increasing user expectations in the future, and -- most importantly -- they won't hurt.

css for table

2007-04-19T16:22:00.000+05:30

Here is the HTML for table

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
< title>CSS Tables< /title>
< link href="styles.css" rel="stylesheet" type="text/css" />
< /head>
< body>
< table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
< caption>Table 1: Power Mac G5 tech specs < /caption>
< tr>
< th scope="col" abbr="Configurations" class="nobg">Configurations< /th>

< th scope="col" abbr="Dual 1.8">Dual 1.8GHz< /th>
< th scope="col" abbr="Dual 2">Dual 2GHz< /th>
< th scope="col" abbr="Dual 2.5">Dual 2.5GHz< /th>
< /tr>
< tr>
< th scope="row" abbr="Model" class="spec">Model< /th>
< td>M9454LL/A< /td>

< td>M9455LL/A< /td>
< td>M9457LL/A< /td>
< /tr>
< tr>
< th scope="row" abbr="G5 Processor" class="specalt">G5 Processor< /th>
< td class="alt">Dual 1.8GHz PowerPC G5< /td>
< td class="alt">Dual 2GHz PowerPC G5< /td>

< td class="alt">Dual 2.5GHz PowerPC G5< /td>
< /tr>
< tr>
< th scope="row" abbr="Frontside bus" class="spec">Frontside bus< /th>
< td>900MHz per processor< /td>
< td>1GHz per processor< /td>
< td>1.25GHz per processor< /td>

< /tr>
< tr>
< th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache< /th>
< td class="alt">512K per processor< /td>
< td class="alt">512K per processor< /td>
< td class="alt">512K per processor< /td>
< /tr>

< /table>

< p>< a href="styles.css">→ download stylesheet< /a>< /p>
< /body>
< /html>

And this is the CSS

body {
 font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 color: #4f6b72;
 background: #E6EAE9;
}

a {
 color: #c75f3e;
}

#mytable {
 width: 700px;
 padding: 0;
 margin: 0;
}

caption {
 padding: 0 0 5px 0;
 width: 700px; 
 font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 text-align: right;
}

th {
 font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 color: #4f6b72;
 border-right: 1px solid #C1DAD7;
 border-bottom: 1px solid #C1DAD7;
 border-top: 1px solid #C1DAD7;
 letter-spacing: 2px;
 text-transform: uppercase;
 text-align: left;
 padding: 6px 6px 6px 12px;
 background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}

th.nobg {
 border-top: 0;
 border-left: 0;
 border-right: 1px solid #C1DAD7;
 background: none;
}

td {
 border-right: 1px solid #C1DAD7;
 border-bottom: 1px solid #C1DAD7;
 background: #fff;
 padding: 6px 6px 6px 12px;
 color: #4f6b72;
}


td.alt {
 background: #F5FAFA;
 color: #797268;
}

th.spec {
 border-left: 1px solid #C1DAD7;
 border-top: 0;
 background: #fff url(images/bullet1.gif) no-repeat;
 font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
 border-left: 1px solid #C1DAD7;
 border-top: 0;
 background: #f5fafa url(images/bullet2.gif) no-repeat;
 font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 color: #797268;
}

show-hide DIV

2007-04-18T18:00:00.000+05:30

suppose there are 10 divs in a page. you need to show each div while clicking the corresponding link

here is the javascript

<script language="javascript" type="text/javascript" >

</script>

and call the javascript inside an anchor tag like this onClick=showdiv(1)

Javascript for show-hide Div

2007-04-04T10:25:00.001+05:30

Shown below is the function for showing and hiding two div containers

The function showHideDiv has two variables for passing the values for which div has to show and which div has to hide.

function showHideDiv(divToShow, divToHide)

{
document.getElementById(divToShow).style.display = "block";
document.getElementById(divToHide).style.display = "none";
}

Call the function as shown below.divToShow has to replaced by the ID of the div tag to be shown and divToHide has to replaced by the ID of the div tag to hide.

showHideDiv('divToShow','divToHide');">Protection Area

Deep Linking is Good Linking

2007-04-02T13:14:00.000+05:30

Links that go directly to a site's interior pages enhance usability because, unlike generic links, they specifically relate to users' goals. Websites should encourage deep linking and follow three guidelines to support its users.

Supporting Deep-Link Users

A website is like a house with a million entrances: the front door is simply one among many ways to get in. A good website will accommodate visitors who choose alternate routes.
Here are three guidelines for enhancing usability for users who enter your site at interior pages:

Tell users their arrival point, and how they can proceed to other parts of the site by including these three design elements on every single page:
Company name or logo in upper left corner
Direct, one-click link to the homepage
Search (preferably in the upper right corner)

Orient the user relative to the rest of the website. If the site has hierarchical information architecture, a breadcrumb trail is usually the best way to do this. Also, include links to other resources that are directly relevant to the current location. Don't bury the user in links to all site areas or to pages that are unrelated to their current location.

Don't assume that users have followed a drill-down path to arrive at the current page. They may not have seen information that was contained on higher-level pages.

Top Ten Guidelines for Homepage Usability

2007-04-02T12:50:00.000+05:30

A company's homepage is its face to the world and the starting point for most user visits. Improving your homepage multiplies the entire website's business value, so following key guidelines for homepage usability is well worth the investment.
Homepages are the most valuable real estate in the world. Each year, companies and individuals funnel millions of dollars through a space that's not even a square foot in size. For good reason. A homepage's impact on a company’s bottom line is far greater than simple measures of e-commerce revenues: The homepage is your company's face to the world. Increasingly, potential customers will look at your company's online presence before doing business with you -- regardless of whether they plan to close the actual sale online.

The homepage is the most important page on most websites, and gets more page views than any other page. Of course, users don't always enter a website from the homepage. A website is like a house in which every window is also a door: People can follow links from search engines and other websites that reach deep inside your site. However, one of the first things these users do after arriving at a new site is go to the homepage. Deep linking is very useful, but it doesn't give users the site overview a homepage offers -- if the homepage design follows strong usability guidelines, that is.
Following are ten things you can do to increase the usability of your homepage and thus enhance your website's business value.

Make the Site's Purpose Clear: Explain Who You Are and What You Do

1. Include a One-Sentence Tagline

Start the page with a tagline that summarizes what the site or company does, especially if you're new or less than famous. Even well-known companies presumably hope to attract new customers and should tell first-time visitors about the site's purpose. It is especially important to have a good tagline if your company's general marketing slogan is bland and fails to tell users what they'll gain from visiting the site.

2. Write a Window Title with Good Visibility in Search Engines and Bookmark Lists

Begin the TITLE tag with the company name, followed by a brief description of the site. Don't start with words like "The" or "Welcome to" unless you want to be alphabetized under "T" or "W."

3. Group all Corporate Information in One Distinct Area

Finding out about the company is rarely a user's first task, but sometimes people do need details about who you are. Good corporate information is especially important if the site hopes to support recruiting, investor relations, or PR, but it can also serve to increase a new or lesser-known company's credibility. An "About " section is the best way to link users to more in-depth information than can be presented on the homepage.

Help Users Find What They Need

4. Emphasize the Site's Top High-Priority Tasks

Your homepage should offer users a clear starting point for the main one to four tasks they'll undertake when visiting your site.

5. Include a Search Input Box

Search is an important part of any big website. When users want to search, they typically scan the homepage looking for "the little box where I can type," so your search should be a box. Make your search box at least 25 characters wide, so it can accommodate multiple words without obscuring parts of the user's query.

Reveal Site Content

6. Show Examples of Real Site Content

Don't just describe what lies beneath the homepage. Specifics beat abstractions, and you have good stuff. Show some of your best or most recent content.

7. Begin Link Names with the Most Important Keyword

Users scan down the page, trying to find the area that will serve their current goal. Links are the action items on a homepage, and when you start each link with a relevant word, you make it easier for scanning eyes to differentiate it from other links on the page. A common violation of this guideline is to start all links with the company name, which adds little value and impairs users' ability to quickly find what they need.

8. Offer Easy Access to Recent Homepage Features

Users will often remember articles, products, or promotions that were featured prominently on the homepage, but they won't know how to find them once you move the features inside the site. To help users locate key items, keep a short list of recent features on the homepage, and supplement it with a link to a permanent archive of all other homepage features.

Use Visual Design to Enhance, not Define, Interaction Design

9. Don't Over-Format Critical Content, Such as Navigation Areas

You might think that important homepage items require elaborate illustrations, boxes, and colors. However, users often dismiss graphics as ads, and focus on the parts of the homepage that look more likely to be useful.

10. Use Meaningful Graphics

Don't just decorate the page with stock art. Images are powerful communicators when they show items of interest to users, but will backfire if they seem frivolous or irrelevant. For example, it's almost always best to show photos of real people actually connected to the topic, rather than pictures of models.

When to Work on Usability

2007-04-02T12:45:00.000+05:30

Usability plays a role in each stage of the design process. The resulting need for multiple studies is one reason I recommend making individual studies fast and cheap. Here are the main steps:

Before starting the new design, test the old design to identify the good parts that you should keep or emphasize, and the bad parts that give users trouble.
Unless you're working on an intranet, test your competitors' designs to get cheap data on a range of alternative interfaces that have similar features to your own. (If you work on an intranet, read the intranet design annuals to learn from other designs.)
Conduct a field study to see how users behave in their natural habitat.
Make paper prototypes of one or more new design ideas and test them. The less time you invest in these design ideas the better, because you'll need to change them all based on the test results.
Refine the design ideas that test best through multiple iterations, gradually moving from low-fidelity prototyping to high-fidelity representations that run on the computer. Test each iteration.
Inspect the design relative to established usability guidelines, whether from your own earlier studies or published research.
Once you decide on and implement the final design, test it again. Subtle usability problems always creep in during implementation.

Don't defer user testing until you have a fully implemented design. If you do, it will be impossible to fix the vast majority of the critical usability problems that the test uncovers. Many of these problems are likely to be structural, and fixing them would require major rearchitecting.
The only way to a high-quality user experience is to start user testing early in the design process and to keep testing every step of the way.

Turning a list into a navigation bar

2007-04-02T11:36:00.000+05:30

The HTML

The markup is very simple. It’s an unordered list, with each link in a separate list item:

Home

About

Archive

Reviews

Contact

Why use a list? Because a navigation bar, or menu, is a list of links. The best (most semantic) way of marking up a list of links is to use a list element. Using a list also has the benefit of providing structure even if CSS is disabled.
At this stage, with no CSS applied, the list will look like any old (normally bulleted) list, styled only by the browser’s defaults.
I’ve given id attributes to the ul and li elements. The id attribute for the ul element is used by the CSS rules that style the entire list. The li elements have different id values to enable the use of CSS to highlight the currently selected link. This is done by specifying an id for the body element. More on that later.

The CSS

I’ll describe the CSS I’ve used to style the list in a step-by-step fashion.
First of all, I set the margins and padding of the list and list items to zero, and tell the list items to be displayed inline:

#nav {
margin:0;
padding:0;
}
#nav li {
display:inline;
padding:0;
margin:0;
}

This will make all the links display one after another on the same line, as if the list wasn’t there. It will also remove the list bullets, since they are only displayed when display:list-item (the default display mode for list items) is used. Some browsers are said to incorrectly display the list bullets even though display:inline has been applied to the list items. I haven’t seen this happen in any of the browsers I tested in, but if you want to make sure that no browsers display list bullets, you can add list-style-type:none to the rule for #nav.

Next, it’s time to start styling the menu tabs. I do this by adding styles to the links, not to the list items. The reason for that is that I want the entire area of each tab to be clickable. First a bit of colour to make the changes more obvious:

#nav a:link,
#nav a:visited {
color:#000;
background:#b2b580;
}

Note that I’m styling the normal and visited states of the links to look the same. the next step is to add a bit of padding to the links:

#nav a:link,
#nav a:visited {
color:#000;
background:#b2b580;
padding:20px 40px 4px 10px;
}

That’s a bit better. But there is a potential problem that isn’t visible here. Since the links are inline elements, their vertical padding will not add to their line height. It’s easier to see this if the ul element has a background, so I’ll add a background colour and a background image:

#nav {
margin:0;
padding:0;
background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
}

Oops. Now the links are sticking out of the list element. To fix this, I’ve turned the links into block boxes by floating them to the left. I’ve also set their width to auto, to make them shrink to fit their content:

#nav a:link,
#nav a:visited {
color:#000;
background:#b2b580;
padding:20px 40px 4px 10px;
float:left;
width:auto;
}

Adding display:block to the CSS rule for the links would also have made them block boxes, but since a floated element automatically generates a block box, that isn’t necessary.
As you may have noticed, the background disappeared when the links were floated. That’s because floated elements are taken out of the document flow, which causes the ul element containing them to have zero height. Thus, the background is there, but it isn’t visible. To make the ul enclose the links, I’ve floated that too. I’ve also set its width to 100%, making it span the whole window (except for the padding I’ve given the body element in this example):

#nav {
margin:0;
padding:0;
background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
float:left;
width:100%;
}

To visually separate the links from each other, I’ve added a right border to the links. Then, to give the first link a left border as well, I’ve used a :first-child pseudo-class to apply a rule only to the link in the very first list item. I’ve also added top and bottom borders to the ul element:

#nav {
margin:0;
padding:0;
background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
float:left;
width:100%;
border:1px solid #42432d;
border-width:1px 0;
}
#nav a:link,
#nav a:visited {
color:#000;
background:#b2b580;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}

The :first-child pseudo-class is not recognised by Internet Explorer for Windows, so the first link won’t have a left border in that browser. In this case, that isn’t a major problem, so I’ve left it like that. If it’s really important to you, you’ll need to add a class to the first list item (or the link in it), and then use that to give the link a left border.

Next I’ve changed the way the link text is displayed by removing the underlining, making the text bold, specifying font size, line-height, and a different font family, making the text uppercase, and adding a little bit of drop shadow. The drop shadow is created with the text-shadow property, a CSS3 property that is currently only supported by Safari and OmniWeb:

#nav a:link,
#nav a:visited {
color:#000;
background:#b2b580;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 2px 2px 2px #555;
}

To give some visual feedback when the links are hovered over, I’ve given their :hover state different text and background colours:

#nav a:hover {
color:#fff;
background:#727454;
}

In the final step, I’ve added rules that will make the selected link look different than the others, to show visitors where they are on the site.

In case you haven’t seen an example of specifying an id attribute for the body element to style the “current” navigation tab differently before, that’s what the first two rules do. In the examples linked to from this article, I’ve set id of the body element to “home”, which makes the “Home” tab the current one. Changing it to “about” would make the “About” tab the current one, and so on.

I’ve also made the selected link stay the same when it’s hovered over. It can be argued that the current menu item should not be a link at all. In this case, I’ve chosen to leave the link in the markup and use CSS to remove the visual feedback on hover.

To give some visual feedback when you click on one of the links, I’ve given the :active state of the links the same styling as the selected link:

#home #nav-home a,
#about #nav-about a,
#archive #nav-archive a,
#lab #nav-lab a,
#reviews #nav-reviews a,
#contact #nav-contact a {
background:#e35a00;
color:#fff;
text-shadow:none;
}
#home #nav-home a:hover,
#about #nav-about a:hover,
#archive #nav-archive a:hover,
#lab #nav-lab a:hover,
#reviews #nav-reviews a:hover,
#contact #nav-contact a:hover {
background:#e35a00;
}
#nav a:active {
background:#e35a00;
color:#fff;
}

the finished navigation menu.

That’s it. This step-by-step tutorial makes the whole thing look more advanced than it really is. View source on the final example to see the complete set of CSS rules. By the way, with a couple of small exceptions (the left border on the first link, and the text shadow), this works in just about any browser, even Internet Explorer (version 5 or newer).

I hope you’ve been able to follow along well enough to be able to create your own navigation menu. The styling possibilities are almost endless.

What (Definition of Usability)

2007-04-02T11:35:00.000+05:30

Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process.

Usability is defined by five quality components:

Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
Efficiency: Once users have learned the design, how quickly can they perform tasks?
Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
Satisfaction: How pleasant is it to use the design?

There are many other important quality attributes. A key one is utility, which refers to the design's functionality: Does it do what users need? Usability and utility are equally important: It matters little that something is easy if it's not what you want. It's also no good if the system can hypothetically do what you want, but you can't make it happen because the user interface is too difficult. To study a design's utility, you can use the same user research methods that improve usability.

Debugging CSS in Internet Explorer - Part 1

2007-04-02T11:14:00.000+05:30

For web designers and developers, fixing CSS issues in Internet Explorer is a daily chore. Not too long ago I decided to document these issues and what I did to fix them. This article will be the first in a series of articles containing real world CSS problems and solutions. Although some of these problems have been talked about elsewhere, I hope this article will help designers and developers to debug CSS issues quicker and make the most of their time.

The W3C's XHTML and CSS Validators

It may seem obvious, but I've seen so many css issues resolved because of some unclosed elements or simple spelling errors. Some of the validators' feedback may seem cryptic at first but after using it over and over, you will be able to instantly pick out problems. Make sure you turn on the "show source" option in the validators so you can quickly match the problems line by line.

A Reality Check

If you're working with a test server, separate from your local machine, make sure you're working with the correct files. I've made this mistake and I've seen others make this mistake; it's always good to double check.

CSS Problem Solving

Elements are disappearing

When dealing with floated elements in Internet Explorer it is possible that some elements seem to completely disappear. This is commonly referred to as the peekaboo bug. If you apply position:relative to the vanishing element it should pop right back into place. I've also seen elements disappear in print and not screen despite using the same stylesheet in IE7.

Margins seem to be doubled

Another float issue found in Internet Explorer. Some people might be tempted to take the easier way out and deliver different CSS code to Internet Explorer, whether by hacks or comments. It's best to avoid these practices and try an alternate route. Although Internet Explorer can become clueless with margins and float, it will still understand padding. If possible, set the margins to 0 and try to compensate with padding either on the element itself (if it doesn't affect the appearance) or on a parent element.

Element with a height of 1px, but Internet Explorer increases it to 10px

Internet explorer uses the line-height of an element as a kind of unintentional min-height. So, if you try to set a div to height:1px for example (such as a decorative element) and the default line-height (probably inherited from parent elements) for that element is set to 10px, the height of that element will be forced to the line-height in Internet Explorer. To get around this, you can set line-height:0 and manually set the height.

An empty anchor tag is not clickable

It may seem unusual, but in my experience I have come across this more than once. Say you have an anchor element that you've given display:block and some dimensions with no content or background image, in order to make a clickable area, but in Internet Explorer it's not clickable. In order to keep the anchor invisible you can add a transparent 1px background-image. Suddenly, Internet Explorer understands that this is a clickable element.

An element's text is squished, causing it to flow downward

More than likely this is caused by floating an element without setting a width or by a floating sibling element's width being slightly too small where the squished element can't break out. Try setting a width on the squished element, or a larger width on the sibling element. If these methods don't work, use clear to break the element away from the floated sibling element.

Quick Tips to Make Accessible Web Sites

2007-03-30T12:12:00.000+05:30

Images & animations: Use the alt attribute to describe the function of each visual.
Image maps. Use the client-side map and text for hotspots.
Multimedia. Provide captioning and transcripts of audio, and descriptions of video.
Hypertext links. Use text that makes sense when read out of context. For example, avoid "click here."
Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible.
Graphs & charts. Summarize or use the longdesc attribute.
Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported.
Frames. Use the noframes element and meaningful titles.
Tables. Make line-by-line reading sensible. Summarize.
Check your work. Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG

What is Web Accessibility

2007-03-30T12:08:00.000+05:30

http://www.w3.org/WAI/intro/accessibility.php

Web Content Accessibility Guidelines 1.0

2007-03-30T11:59:00.000+05:30

Must read

http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/

XHTML™ Modularization 1.1

2007-03-30T11:48:00.000+05:30

Must read for UI designers

http://www.w3.org/TR/xhtml-modularization/

XHTML 1.0 and 1.1: Current Ideas and New Directions

2007-03-30T11:41:00.000+05:30

XHTML 1.0 is the reformulation of HTML as an XML application. This means that documents as well as syntax must conform strictly to the concepts and DTDs of the language version. The ideas from HTML 4.0, especially the separation of document structure from presentation and issues concerning accessibility and internationalization, are intact in XHTML 1.0. What’s more, the three DTD offerings (strict, transitional, and frameset) originally from HTML 4.0 and later refined by HTML 4.01 are essentially the same DTDs found in XHTML 1.0.

XHTML 1.0 is best seen as a transitional language that helps puts professional Web authors in the position of writing specification-oriented markup. It puts browser manufacturers on the hot-seat and tells them “get your acts together!” It also moves us toward the extensible intelligence of XML and away from the limitations of HTML.
But transition also means that readying yourself for XML is very important, too. Fortunately, XHTML contains enough of each to help strengthen your HTML skills and to get those of you unfamiliar with XML more comfortable with its applications. Several of the primary XML concepts introduced in XHTML 1.0 are as follows:

Reintroducing structure back into the language. Picking up on the SGML and XML idea that documents should be written in conformance with the rules set out within the languages, XHTML insists upon a variety of syntax and semantic rules that must be adhered to. One such rule is the idea of well-formed.

Providing authors with incentives to validate documents. The validation of documents is somewhat controversial for a number of reasons. Certain people believe that validation is an unnecessary part of the process so long as the documents are well-formed. However, I personally feel that validation is a powerful learning tool that helps us find our mistakes, fix them, and in the process, understand the way a specific DTD works. Validation, therefore, is encouraged throughout.

Accommodating New Devices. Part of the drive to accommodate XML in the Web development environment has to do with an intriguing phenomenon. If the 90s were the years of information explosion and the movement of the PC from the workplace to the home, this decade will be known for the movement away from the desktop.

With XHTML 1.1, the concept of separation of structure and presentation is complete. XHTML 1.1 has only one public DTD, based on the Strict DTD found in XHTML 1.0. Web authors also have the option to work with modularization. Modularization breaks HTML down into discrete modules such as text, images, tables, frames, forms, and so forth. The author can choose which modules he or she wants to use and then write a DTD combining those modules into a unique application. This is the first time we really see the extensibility introduced by XML at work, because instead of having only the public DTDs to choose from, authors can now create their own applications.

HTML 4.0 and 4.01: Concepts

2007-03-30T11:39:00.000+05:30

Within HTML 4.0 are specific ideas necessary to study if you’re to have a full understanding of the versions and languages that have followed. Specifically, HTML 4.0 provides these critical concepts as follows:
Deprecation of presentational elements in favor of style sheets. Consider this the heart and soul of contemporary Web design. HTML 4.0 clearly states that the separation of structure and presentation are an imperative goal in order for Web authoring to progress. CSS is the suggested alternative, which in HTML 4.0’s emergence in 1997 was more problematic due to browser support than it is today.

Awareness of Accessibility and Internationalization. HTML 4.0 is very concerned with ensuring that pages are available to those individuals using alternative user agents, whether due to a disability or simply by virtue of circumstance. Internationalization concerns are brought forth in HTML 4.0, and discussions about how to Internationalize and Globalize HTML and XHTML are ongoing.

Improved rendering of Web documents. HTML 4.0 added several elements, specifically in terms of tables, that aid in accelerated interpretation and rendering of markup.

Introduction of three unique DTDs. With HTML 4.0 came the concept of three unique public DTDS: Strict, Transitional, and Frameset. The Strict DTD is HTML 4.0 at its most ideal, with the presentation of a document relying on CSS almost entirely. The Transitional DTD allows for the use of deprecated elements, understanding the transitional need for presentation in HTML. Finally, the Frameset DTD formalizes the use of frames in HTML 4.0 and provides a specific set of rules for their implementation.

HTML 4.0 really upped the ante in terms of offering real options and alternatives to Web developers interested in also writing documents that conformed to W3C goals. However, many authors have missed learning these important concepts, which lay the foundation for XHTML.
With HTML 4.01, a few errors and editorial

What are the advantages of using web standards?

2007-03-30T10:32:00.000+05:30

Accessibility

To software/machines
Complying with web standards can give your web pages greater visibility in web searches. The structural information present in compliant documents makes it easy for search engines to access and evaluate the information in those documents, and they get indexed more accurately.Because use of web standards makes it easier for server-side as well as client-side software to understand the structure of your document, adding a search engine to your own site becomes easier and gives better results.Standards are written so that old browsers will still understand the basic structure of your documents. Even if they can’t understand the newest and coolest additions to the standards, they’ll be able to display the content of your site. The same, of course, applies to robots - systems that collect information from your site on behalf of search engines and other indexers.Compliant code gives you the opportunity of validating your page with a validation service. Validators process your documents and present you with a list of errors. This makes finding and correcting errors a lot easier, and can save you a lot of time.Compliant documents can easily be converted to other formats, such as databases or Word documents. This allows for more versatile use of the information within documents on the World Wide Web, and simplified migration to new systems - hardware as well as software - including devices such as TVs and PDAs."

To people

Accessibility is an important idea behind many web standards, especially HTML.
Not only does this mean allowing the web to be used by people with disabilities, but also allowing web pages to be understood by people using browsers other than the usual ones - including voice browsers that read web pages aloud to people with sight impairments, Braille browsers that translate text into Braille, hand-held browsers with very little monitor space, teletext displays, and other unusual output devices.
As the variety of web access methods increases, adjusting or duplicating websites to satisfy all needs will become increasingly difficult (indeed, some say it’s impossible even today). Following standards is a major step towards solving this problem. Making your sites standards-compliant will help ensure not only that traditional browsers, old and new, will all be able to present sites properly, but also that they will work with unusual browsers and media.
Some consequences of ignoring standards are obvious: the most basic consequence is that you will restrict access to your site. How much business sense does it make to limit your audience to only a fraction of those who wish be a part of it? For a business site, denying access to even small portions of a target audience can make a big difference to your profit margin. For an educational site, it makes sense to allow access not only to affluent, able-bodied school-children with graphical browsers, but also to children in regions with poorly-developed infrastructure who are best served by text-only browsing, or disabled students using specialized browsers.
The same principle applies to all types of websites — while straying from the standards and taking advantage of browser-specific features may be tempting, the increased accessibility which comes from standards-compliance will lead to far greater rewards in the long run.

Stability

Most web standards are generally designed with forward- and backward-compatibility in mind — so that data using old versions of the standards will continue to work in new browsers, and data using new versions of the standards will “gracefully degrade” to produce an acceptable result in older browsers.
Because a website may go through several teams of designers during its lifetime, it is important that those people are able to comprehend the code and to edit it easily. Web standards offer a set of rules that every Web developer can follow, understand, and become familiar with: When one developer designs a site to the standards, another will be able to pick up where the former left off.

Conclusion

As web developers, we are constantly trying to address the problem of inconsistencies between the renderings of web pages by different browsers and browser versions. This necessitates either time-consuming double/multiple coding, or coding for a single browser which makes it harder, if not impossible, for some of the public to use the site. This situation will be made even worse with the advent of additional hardware and software which will be able to browse the Web, such as telephones, pagers, and PDAs.
Web standards are not arcane laws decreed by ivory-tower organizations. As we have described, the standards are for the most part decided by representatives of the same people who use them — browser makers, web developers, content providers, and other organizations.
Writing web pages in accordance with the standards shortens site development time and makes pages easier to maintain. Debugging and troubleshooting become easier, because the code follows a standard. No longer do you have to worry about the coding and maintenance for several versions of code that are supposed to accomplish the same presentation. One version of your site, and that is it.
The universal adoption of web standards is becoming of paramount importance. The mission of The Web Standards Project is to make the Web a better place, for developers and for end-users, by encouraging browser and web page editor makers to follow the standards in their applications. This effort will be greatly helped when web developers use the standards as a matter of course, and insist that generators and renderers of their code comply with the standards.
The reasons we have given should give you, the web developer, plenty of incentive to begin using standards, and also plenty of ammunition with which you can encourage your place of business and fellow developers to use those standards.

What are the W3C standards?

2007-03-30T10:30:00.000+05:30

2.1.3.1 HTML 4.0 - HyperText Markup Language
HyperText Markup Language (HTML) is widely used on the Web for adding structure to text documents. Browsers interpret these documents, representing the structure in media-specific ways to the user. For example, visual browsers typically display the strong element ( … ) as bold text, while text-to-speech readers might emphasize that text when pronouncing it.With the help of Cascading Style Sheets (CSS) the author may define how structural elements are to be represented, overriding the browser defaults."

XML 1.0 - Extensible Markup Language
Example of part of an XML document

Bill Gates
bgates@microsoft.com

Marc Andreesen
marca@netscape.com

Jon S. von Tetzchner
jon@opera.com

Extensible Markup Language (XML) is a markup language like HTML, but instead of having a single, fixed set of elements, it allows you to define your own - or use a set made by someone else. It even allows using multiple sets within a single document - by using XML namespaces.
Some applications of XML, such as XHTML and MathML, have already become W3C Recommendations. Others are currently W3C Working Drafts.
Style sheet standards, such as CSS and XSL, offer a variety of options for specifying how XML elements are to be rendered. Standards-compliant support for direct rendering of XML is spotty in browsers, so for presenting information to humans, HTML (or XHTML) with CSS-driven styling is the way to go. XML is mostly used for machine-to-machine communication today.
XML is more flexible than HTML, primarily because of the ability to add your own elements and make your own structural systems. This makes it an ideal format for the organization of large quantities of data - it is already in use in many databases and search engines.

2.1.3.3 XHTML 1.0, 1.1, and Modularization

XHTML 1.0 is a reformulation of HTML as an XML application. XHTML 1.0 can be seen as ideologically coming from HTML 4.01, and being technically stricter because of XML’s influence.
XHTML will display in your browser identically to the equivalent HTML. You might want to use XHTML if there is any chance you’re going to need to reprocess your content, for example to send it to a PDA; XML’s stricter syntax rules make automatic processing of XHTML much easier and cheaper than ordinary HTML.
Ideologically, XHTML 1.0 inherits the following general concepts from HTML 4.01:
That presentation and document formatting should be separated via style sheets
That documents should be made accessible
That documents should be internationalized
XHTML 1.0 also uses the model of three DTDs: Strict, Transitional, and Frameset. This model originally emerged in HTML 4.0 and followed through to HTML 4.01.
Some important technical practices from XML onto XHTML includes:
That all document types are declared via the correct DOCTYPE declaration
That the structure of a conforming document contain the DOCTYPE declaration, an html element with the XHTML namespace declared, a head element including the title element, and a body element
That all elements and attribute names are written in lower case, and that all attribute values are quoted
That all non-empty elements (e.g. p, li) are properly terminated with a closing tag
That all empty elements (e.g. br, hr, img) are properly terminated with a trailing slash (
)
That documents validate against the DTD that is declared
For templates, please see Learn > Templates
XHTML 1.1 is made up of three primary parts:
The XHTML 1.0 Strict DTD (with minor modifications)
XHTML Modularization
The Ruby Annotation
If you’d like to author documents in XHTML 1.1, you can do so in a couple of ways. The first is by using the public XHTML 1.1 DTD. By doing this, your work will be extremely structured because there are virtually no presentational attributes in XHTML 1.1. The separation of structure and presentation is complete here, and all of your presentation work will go in a style sheet.
Another means of authoring documents in XHTML 1.1 is to tap into XHTML Modularization. This is the breakdown of familiar components of HTML and XHTML (such as text, tables, frames, forms) into discrete chunks. You can then write your own DTD and use only those components you require. This is extensibility in action, essentially giving you, the web author, the opportunity to customize your markup.
The Ruby Annotation is a special means of dealing with certain Asian character annotations. Ruby falls under the work being done with Internationalization.

CSS - Cascading Style Sheets

Cascading Style Sheets (CSS) is a mechanism for changing the appearance of HTML or XML elements, by assigning styles to element types, self-defined classes of elements or individual instances.
Stylesheets can be used to consistently define the appearance of an entire site. Following the introduction of CSS, the W3C recommended that layout-specific features in HTML be phased out and replaced by stylesheets, creating a simpler and more structural World Wide Web.

DOM 1 - Document Object Model Level 1

The DOM allows the full power and interactivity of a scripting language (such as ECMAScript, the standardized version of JavaScript) to be exerted on a web page. (In programming terms, the Document Object Model (DOM) Level 1 is an Application Programming Interface (API) for interacting with web pages.) It gives the scripting language easy access to the structure, content, and presentation of a document which is written in such languages as HTML and CSS.
The DOM is compatible with future improvements in technology; it will allow any scripting language to interact with whatever languages are being used in the document. This standard will not only make it easier to program dynamic HTML, but will also make adapting to future Internet technology much less painful.

ECMA Standards

2.2.1 What is the ECMA?
The European Computer Manufacturers Association (ECMA) is an organization officially founded in 1961 in order to meet the need for standardizing computer operational formats, including programming languages and input/output codes.
The ECMA is based in Geneva, Switzerland, near the headquarters of the International Organization for Standardization (ISO) and the International Electrotechnical Commission (IEC). In 1994, the organization’s name was changed to the ECMA - European Association for Standardizing Information and Communication Systems, in order to reflect its broader range of activities.

What does it do?

The main role of the ECMA is to develop Standards and Technical Reports in the area of information and communication technology. As ECMA is an association of companies and not an official standardization institute, they often collaborate with official national or international institutes.
ECMA Standards have been accepted as a base for international and European standards. So far more than 270 ECMA Standards and 70 Technical Reports have been published.
Of these standards 85 have been accepted as international standards by the International Organization for Standardization (ISO). In addition, 25 have been accepted as European standards by the European Telecommunications Standards Institute (ETSI).

What are the ECMA standards?

2.2.3.1 ECMAScript (standardized JavaScript)
ECMAScript is a standardized scripting language, based largely on Netscape’s JavaScript and Microsoft’s JScript. The ECMAScript standard is defined by ECMA’s Technical Committee 39 (TC-39).
The main use of ECMAScript, which is an object-based language, is to manipulate the objects in web pages which are specified by the Document Object Model (DOM). These objects (effectively, the elements which make up web pages, or the web pages as a wholes) can then be added to, deleted, moved, or have their properties changed. This lets web developers implement such effects as animated text, graphic roll-overs, and pages that change based on user input without having to be reloaded.
The current ECMAScript specification is ECMA Standard ECMA-262,

1. Introduction

2007-03-30T10:19:00.000+05:30

Tim Berners-Lee’s dream for his invention, the World Wide Web, is a common space where users can share information to work together, to play, and to socialize (The World Wide Web, A very short personal history). As web developers, creating business, social, and educational sites, we turn this dream into reality.
But in this period of tremendous growth, the Web needs guidance to realize its full potential. Web standards are this guidance. These standards help ensure that everyone has access to the information we are providing, and also make web development faster and more enjoyable.
Standards compliance makes it easier for people with special needs to use the Web. Blind people may have their computer read web pages to them. People with poor eyesight may have pages rearranged and magnified for easier reading. And people using hand-held devices can browse the Web just as easily as those using high-end workstations.
As we will explain, there are also many practical reasons for developers to be concerned with web standards. Search engines can do a better job of indexing sites, for example. Using browser-specific code often doubles or triples the work to create web pages, and leaves a lot to be desired when new media are introduced. This situation will only get worse without the sound direction of web standards.
Some people fear that standards are limiting. In reality, they remove much of the tedious labour involved in web development, and give developers more time and more flexibility to be truly creative. They are both open to future improvement and mindful of past technology.
Many uses of the Web, including some that are only dreamed of today, will not be possible, or will be more difficult, without widespread standards compliance. At the moment, there are systems and software that are very common, seemingly close to universal, but who knows what tomorrow will bring? Tying ourselves to the control of any single company means limiting our future to the fortunes and misfortunes which that one company can or will provide. Maintaining universal standards will allow the Web to survive while encouraging innovation to continue at its current pace.