azcazandco

The Tao of Web Design - Part 2

November 3rd, 2006

True refinement seeks simplicity. - Bruce Lee

Websites are a funny old thing, for some reason they make you want to add more to them all the time and I for one love doing it but where do you draw the line? When it comes to web design I think we can draw parallels to the economy of motion theory but in order to clarify what I mean let me quote something from Wikipdedia then take you through the various points.

A. Stop hits & stop kicks
This means intercepting an opponent’s attack with an attack of your own instead of a simple block. JKD practitioners believe that this is the most difficult defensive skill to develop. This strategy can be a feature of some traditional Chinese martial arts. - Wikipedia

One of the key elements in web development is understanding the problems that lie ahead, what with all the browser quirks and inconsistencies in CSS support between them it is important to know what might cause you problems. For example, a bad way to enter into a project would be with the gung ho approach, coding full tilt and adding CSS Hacks , non semantic containers and inline styles all over the place just to get the job done. Along that road lies trouble!

A sensible way of approaching coding a web page is to look at the information you are presenting and then mark it up using the relevant tags that represent the type of information you are displaying. Proper use of heading tags and paragraphs might seem like a simple thing to do but so many people just don’t think about HTML on even such a basic level.

With a good understanding of the information you are presenting and an awareness of the pitfalls that lie ahead you can then employ your own web design version of the stop hit / kick to make sure you stop things before they get out of hand.

In case you are wondering what I mean, here are some simple examples of what I would consider to be stop hit / kicks in the land of web design:

1. Plan the structure of your document before you begin to code it
2. Use minimal markup to achieve your desired results, choose your id’s and classes carefully as you probably don’t need as many as you think
3. Use CSS to style your document and be sure to use shorthand to save yourself both time and bandwidth
4. Try to keep things simple, I for one am bad for coming up with some crazy ideas but simplicity is very powerful when it comes to building a website, always ask yourself is that really necessary before going ahead with something. Just because you can, it doesn’t mean you should!

B. Simultaneous parrying & punching
When confronting an incoming attack; the attack is parried or deflected and a counter attack is delivered at the same time. Not as advanced as a stop hit but more effective than blocking and counter attacking in sequence. This is also practiced by some Chinese martial arts. - Wikipedia

I think building websites is a pain in the ass but I still love it, just like in a fight you are constantly jostling for position (or maybe I should heed my own advice) and maneuvering the pieces of your web page puzzle into place. A good understanding of CSS bugs is a good place to start, I’m not going to claim to know them all inside out but I have a good idea of how to get to the bottom of a problem.

Even the best laid plans go to rest as some folk say, in the event that you do run into trouble it is important to have a backup plan and that is where debugging comes in. The beauty of building tabless web sites is that everything is done at the block level, you are dealing with chunks of code and a document tree which allows you to work your way back until you have a solution.

The way I tend to work is to isolate what is causing the problem by creating a test case, I re-save the document I am working on and then start to remove parts that do not affect the problematic area. For example, I might remove everything within a navigational area but keep the navigation block in place to see if that has any affect, if it doesn’t I might then move onto a content chunk and remove that.

This is largely a trial and error process and can sometimes take a while but eventually you end up with what I call a test case, the bare minimum of code required in both a CSS stylesheet and HTML document to replicate the error. Once you are rid of all the non essential components it is then much easier to find a solution to your problem and once you have done that you are free to carry on as you were, much closer to your goal of winning the fight.

Simplicity is again key in this technique as you are cutting away the clutter in order to have a moment of clarity.

C. No high kicks
JKD practitioners believe they should target their kicks to their opponent’s shins, knees, thighs, and mid section. These targets are the closest to the foot, provide more stability and are more difficult to defend against. However, as with all other JKD principles nothing is “written in stone”. If a target of opportunity presents itself; even a target above the waist one could take advantage of the situation without feeling hampered by this principle. - Wikipedia

I have talked in this article about how you should keep things simple and how simplicity can help overcome problems but what about doing all the funky stuff? I would class this as a high kick and should be used sparingly which brings me to the concept of progressive enhancement.

Progressive enhancement is the high kick of web design, you can take an already stable, well constructed page and add little niceties that add value to your user experience and a little bit of flare to your page. There are many ways in which you can enhance you pages but any enhancements must degrade gracefully.

For example, an .htc file can be used to allow you to use the hover anything technique in Internet Explorer. By making good use of JavaScript & the DOM you can do all sorts of lovely effects that are just not possible by using HTML alone, sprinkle a little bit of the XMLHttpRequest and the Hijax technique and you can be doing server requests on the fly to update your page without leaving it. These techniques can be used to great effect by adding visual cues for your user and creating a more seamless browsing experience but they also have their pitfalls if done wrong.

I once saw a beautiful technique which is only possible in the Safari browser where you can add really nice drop shadows to text, this technique is fine but just won’t work in other browsers, Mike Rundle has done a great write up on how he did the site if you want to read more about it. Another technique you may want to implement might be using Microformats to add another semantic layer to your document, embedding usable data within your existing code that adds even more value to your finished product.

One last thing I wanted to bring up on this point is MOSe which I think is a totally sensible way of approaching progressive enhancement.

MOSe relies on IE6’s inability to pick up child and adjacent selectors, or > and + as they’re known by. As well, some basic CSS3 selectors are becoming more and more usable in everything but IE (see CodeBitch’s CSS3 support chart) so we can use these to our advantage as well. - Dave Shea

I think and often forget that using attribute selectors and some other CSS3 can be an immensely powerful, think about simple things like styling external links for example. Visible to good browsers and not slightly less advanced browsers, completely valid and a perfect example of progressive enhancement.

So where does that leave us? High kicks are always impressive, although screw them up and you are likely to cause yourself an injury and this is why you should not rely on them to get a job done. Wow factor is just wow factor and if the rest of the puzzle isn’t in place it doesn’t hold much water, there are many sites out there on the web that have wow factor and no functionality… and that is even before we go to look at full Flash sites.

So, that about wraps this article up, web development is a fluid medium, things are always changing and just like a good martial artist, you should get yourself a good grounding in the techniques before you start trying to pull of fancy maneuvers. Bruce Lee got it right with JKD, understand all of the tools at your disposal and use the right tool for the job, don’t restrict yourself to one method when there is a more economical and effective technique to get the job done.

Exciting isn’t it?