One requirement of a good web site is the ability to change the look and feel without much difficulty. There are at least two broad strategies for accomplishing this. One strategy is to use templates to generate the HTML for a page. Changing the template(s) changes the site.

Within the last few years, Cascading Style Sheets (CSS) has become a popular method to create radically different looks for the same HTML. The CSS Zen Garden is the poster site for this technique. By submitting a new CSS file and associated graphics, web designers can radically change the presentation of identical HTML.

It is no small task to create clean HTML which is properly prepped for this technique. Web browser compatibility complicates the process further.

Tasks like this require the development of a framework to simplify the decision making process and avoid the need to reinvent the wheel for every site. I believe the use of microformats is one way to tackle the underlying HTML structure.

Google has also come up with an interesting approach called BlueprintCSS, which deserves some consideration. They have addressed some of the common layout and flexible design issues by creating screen and print CSS stylesheets which act on a standardized naming convention for HTML classes. They have also included a “Plug-in” architecture which really make their solution interesting.

The result is a feature set which includes: “an easily customizable grid, sensible typography, relative font-sizes everywhere, a typographic baseline, an extendable plugin system, perfected CSS reset, a stylesheet for printing, compressed version, no bloat of any kind”

This seems like a good starting point and at the very least it can serve as guide when creating a custom framework for your own site.

I recently created some Flash applications that utilized “bouncing” motions. After trying a variety of methods to acheive this effect, I eventually developed a surprisingly simple and flexible solution. Since I like the effect so much (and am sure that this is no real invention of mine), I decided to put together the following example and provide the source code.

Due to WordPress Blog limitations, please load the Flash file externally.

View the ActionScript code for the animation above. As you can see, the really useful code in the “onEnterFrame” function is only five lines long, and could be less. The concept of this method is simple: Calculate the clip’s acceleration using the “distance” to the goal, and use it accordingly. This works because, as the clip moves past its goal (via it’s momentum), the acceleration becomes negative and begins to counteract that momentum. Energy is taken from the system so that the clip will eventually reach stasis.

It would take a calculus and/or physics lesson to explain how position, speed, and acceleration are related… I’ll save that for another time. All that matters is that it works, right?

Finally, this solution is very flexible, as you can easily alter the speed and strength of the bounce by changing the “_accelStrength” and “_energyRetained” variables. Play around with these values, and let me know if you find any interesting results!

It often saves time and money if you can learn from the efforts of others. That saved effort can also allow you to propel an idea beyond its initial capabilities.

In web development and programming in general, the concept of patterns has emerged. There are user-interface patterns, object-oriented-programming patterns, information architecture patterns and more.

For months I have been contemplating the need for a web site that outlines common database design patterns. After all, the relational database is at the heart of most web applications and many of the same strategies are required for web applications. Many websites deal with user authentication and validation, hierarchical catalogs of products or data, dynamic site navigation, shopping cart systems, integration with backend systems, scheduling, etc.

The Data and Object Factory is a great resource for the classic Gang-of-Four OOP design patterns.

Dey Alexander Consulting has a nice resource page for links on user experience design patterns, and it includes a link to welie.com–another site I have found useful on this subject.

If you want to track web design trends, check out Design Melt Down for many ideas, or go to the Website Layouts Cookbook for hundreds of wire frames to kick off your design process.

And now, without further adieu, go to Database Answers for a large repository of database patterns. I hope this site takes off and provides ways to enhance, rate or validate database design patterns.

I recently discovered an clever idea known as “Sparklines“. Sparklines are “data-intense, design-simple, word-sized graphics” and the concept was developed by Edward Tufte, a professor emeritus at Yale University who specializes in the presentation of informational graphics.

I am particularly fond of anything related to the role of symbols in communication and this immediately caught my eye. I have written the following paragraph to demonstrate one use of sparklines.

A web developer must consider the popularity of web browsers when designing a web site to ensure the widest audience will be able to access the site’s content effectively. Internet Explorer won the first browser war with Netscape and remained unchallenged and unchanged for several years. A relatively new web browser called Firefox has put Microsoft on guard. Over the last year Firefox has been able to exceed 25% market share. You can see in red each month that Firefox has had higher than 25% market share since January 2005.

After several years of dormancy in the browser space, Microsoft has literally apologized and released IE7 (Beta 2). It is interesting to watch the adoption rate of a new browser, therefore I have prepared some statistics on three well known browsers.

• Internet Explorer 7 adoption has been steady with a low of .2% in January and a high of 1.1% in May of this year.
• Firefox has had its ups and downs but has increased from 16.6% in January 2005 to 25.7% in May of this year.
• Netscape 7 never really got off the ground and is at its lowest mark to date. Its highest market share was 1.6% in November of 2003. Currently only .3% of web users are browsing with Netscape.

It will be interesting to see if IE7 can pull market share from the loyal following that Firefox has for good reasons already engendered.

As you can see, sparklines offer a quick intuitive look at information by embedding it compactly within the text itself.

These are simple examples that are utilizing the code written by Eric W. Bachtal. Eric’s code is a .NET implementation of the Python CGI program developed by Joe Gregorio. These guys have made it very easy to incorporate different sparkline graphs into your web site. Just assemble an image source tag with data points and instructions and the “web service” will create and return the graph.

Here is a simple example:

img title="IE7 adoption rate" xsrc="http://www.elexicon.com/sparkline.ashx?type=smooth&d=0,3,4,5,9
&height=15&min-color=red&max-color=blue&step=10&max-m=true&min-m=true&scale=true"  

There is a lot of potential here. Bissantz has some clever and attractive implementations of sparklines for Microsoft Office and the web.

Sparklines are a nice tool to consider for densely representing data. Using them inline with text or in mobile applications, where screen space is limited, can be an effective way to give the user a little more help decifering and remembering the content you are trying to communicate.

I have wanted SQL Server intellisense for a long time. At the PDC05 Show Off, Damian Mehers submitted a demo of his newly created PromptSQL product. I was pretty excited about this and rushed to get it. Damian released several versions back-to-back, adding new features and improving the performance.

Well, he apparently got the attention of red-gate software. They have a number of very useful industry-recognized SQL Server management tools and they bought the application and called it SQL Prompt. After working on the application to spruce up the UI and improve the usability, red-gate has released version 2.0.

Overall the software is pretty solid. It not only suggests field names, but also can show syntax suggestions, stored procedure and function parameters, join suggestions, system variables, keyword capitalization, snippets and more. It is fairly configurable and makes it easier to discover and utilize T-SQL language features.

While they were working on the new version I noticed on the red-gate forums that they were thinking about a $99 price point. The original was $25 so I was glad I got in early, but now red-gate is actually offering it for free. I don’t know how long this will last or if the free license will expire, but I say, get it while it’s hot.