Today's web development is spiked with new challanges - especially since you have to create feature-rich cool looking web sites, but also should make sure they "work".

Techniques used are combinations of CSS - transparent PNGs and loads of dhtml javascript (with or without frameworks like jquery or prototype) and maybe even ajax. By following a few simple rules and knowing a few tricks you can still use (most) of these techniques and with only a minimum of extra work you can make your previously limited web design (only newest browser with everything enabled) into soemthing pretty much everyone can enjoy (yes even on those mobile devices)

I am talking merely about customer facing web applications (like a webshop) - most of the stuff does not apply for your r0x0r-web2.0 ajax based webapp or you drag'n drop admin interface.

With current techniques you can do a LOT - but there are some DONTs which you should take to heart. The most important is:

DON'T use ajax for any critical functions (like the "buy")

In a web application you first have to figure out "primary" flows (typically: browse, login, purchase). These primary flows should be possible no matter what browser, if javascript/css are enabled or not. I am not talking about "should look and feel exactly the same" - but merely about "should work". If you have a shop (actually that should be for every page) you want people with restricted devices (handset/braille display/console) to be able to spend their money/time.

It is important to know HOW to create web-applications with a minimum of fuss (i.e. you dont want to create a new template for every device) that works for a maximum of users (see above).

You need a combination of backend/css/javascript and html to accomplish that.

- so lets start

When you render you page, ALL information should already be in the html. So if you disable css and js on your browser you should be able to see all relevant content, and all links work.

• the drop-down navigation should actually be a ul/li list where each link is a real href (no onclicks) - the drop down -style should be generated by javascript/css
• you hover-boxes with the additional item information and the buy button should be already in the content as divs
• those dynamic tabs should also be visible in the code already 

The css/javascript is where that "cool" and "flashy" stuff happens. When you work with css and those nice frameworks you will easily get great effects without having to change too much cruft in your html code (maybe a surrounding div or some id/classes - but that should be it).

So sooner or later you will have what you want - but there are a few problems you will most definitely run into - and thats where you need to reach into the box of tricks.

This is probably the biggest problem when it comes to coding non-obstrive. While the page loads (which might take a while) - the user with his all-stuff-enabled browser still sees all kinds of stuff that should actually be hidden per default and only visible by hover/onclick effects (a nice example for this is the AT&T webpage where you see the content of all tabs while the page is loading).

To avoid this you can use a javascript trick that allows you to specify two rules: one rule for javascript enabled browsers (dont show the second/third page or the second level nav while loading -but only through javascript).