Issuu on Google+

treehouse. A We b D e v e l o p m e n t M a g a z i n e

December 2005

ISSN :1558-013X

I nsid e



From the Editors




To the Editors


Network News


by Ke v i n Ha le

L e t t e r s & C o m m e n ts

Ro b o t Te a Pa r ty

Aro u n d 9 r u l es

Marketplace C l a s s i f i e ds


Better User Customization

D e si g n


Valerio Proietti Treehouse Cover by Brian Campbell

Treehouse Logo

by Julius Santiago

Book Review

Ag i l e We b De ve l o p m e n t w i t h R a i l s

Best of the Web C o d e Li n ks

Psychology & Usability

12 16 17


Cederholm & Hicks Book Review Ph o t o s h o p C S 2 f o r Ph o t o g ra p h e r s

Best of the Web De s i g n Li n ks

B u sin e ss


Learning From Babble

James Archer Book Review Fre a k o n o m i c s

Best of the Web Bu s i n e s s Li n ks

24 29 30



by Ja m i e Ti b b e t t s



by Da ve Mu n g e r

by St e p h e n Ha l l g re n



Dynamic Resolution Based Layouts


A Quick Guide to Prototype


by Ke v i n Ha l e


by Ry a n Ca m p b e l l

45 46



E di t o r s

treehouse. A Surreal Reflection By Kevin Hale Decembers in Florida are a surreal experience. There is a sort of collective image in the minds of Americans about what the winter holidays should look and feel like and Florida fails to deliver on all atmospheric accounts. Not that this is a bad thing (I love the weather here). Just surreal.

Inspired by the work done over by the folks at Born Magazine, we’re trying out a new format for our interviews. Basically, we’ve asked two web professionals to interview each other about their experiences in the industry. To help kick things off right, the venerable Dan Cederholm and the honorable Jon Hicks stepped up to help us out. There’s been a lot of that around here. Feel- It turned out to be a lot fun and I’ll expect you’ll ing surreal. I don’t think we could have asked see more of these in issues to come. for a better year. The Particletree team has been In addition to the new features, we’ve made blessed with a great many opportunities in the 6 some great improvements to help streamline our months we’ve been up and running (this publi- editorial process. Our favorite new toy is Backcation being one of our favorites) and it makes pack. It has become invaluable around here and it very easy to be excited about the future that’s it feels great to use online tools to build a publiabout the unfold for us. cation about building online tools.

This issue is our third iteration through the Being the end of the year, I’ve started taking process and we think it’s our best issue to date. a lot more time pausing and holding my breath, We’re sporting two new features in this issue: gathering my thoughts for reflection. This year demo screenshots and conversations. has been a great year for innovation in the web Tutorials are now accompanied by screenshots development community and I think a great of online demos in action. In addition to provid- number of people will look back on 2005 as a ing some nice eye-candy, they help illustrate ideas sort of renaissance--a turning point towards and concepts for readers who prefer to print out something great and transformative. I can’t wait to see what the new year will bring. our publication.

December 2005

Volume I. Issue IV. Editor-in-Chief Ke v i n Ha le

Managing Editor Ry a n Ca m p b e ll

Business Manager C h r i s Ca m p b e ll

Copy Editor

El i z a b e t h De h n a r t

u O ur M ission

To make the web easier to improve.

O ur M antra

Give them our best and toss in a little fun while we’re at it.

u © 2005 Particletree Inc. All rights reserved.

All scripts, however, are managed under a Creative Commons License and individual articles are the copyright of their respective owners.

F Letters & Comments To t h e E d i t o r s u Letters to the editors are taken from the comments on the Particletree web site, discussions on the Treehouse website and emails to the staff. If you have something to say, spit or praise about something you’ve seen here on Treehouse, let us know! Good or bad, we love it all because open discourse is our favorite flavor of salvation.

Treehouse Web Site Treehouse Email Particletree Web Site u

irst off, I have to say that I’m a big fan of the magazine. I genuinely enjoy it, I think it’s well written and designed, and this November issue shows a great balance of topics from design to code to business. Great stuff.

is too high. Especially considering the fact that you only get a PDF file, and not an actual hardcopy (you know, that physical stuff they call paper...) I have a hard time justifying paying the $15 for a six issue subscription when I can get a 14 issue subscription That being said, I also need to say that the to a “real” paper magazine for about $20. copy editing is lacking in this issue. Now I don’t happen to know how this issue came In my opinion, the PDF should be free and together, if it was really rushed, if Elizabeth you should charge $15 for a year subscription didn’t have enough time to really proof every- to a paper version of the magazine. Well, I’m thing, etc. And I’m sure that she is generally sure you have your reasons for charging the a very talented and capeable editor. But after price you’ve set, but I just wanted to give you stumbling across one typo or misspelling after my feedback for whatever it’s worth.... another, it’s really getting a bit distracting, and it’s beginning to ruin the magazine for me. Richard Davies on Treehouse PDF Format Again, without knowing what the production situation is for you guys, I feel kind of bad y making this comment. Maybe this isn’t even Elizabeth’s fault at all. As mentioned above, i :) I just wanna send my deepest maybe she was rushed through the job. But readmiration for a excellent publication! gardless of the circumstances, I just feel that if The subscription is my best spent $15 ever. Uh, you are going to ask people to pay for a prod- well maybe not, but it’s up there somewhere :) uct like this, your quality standards need to be Thanks! a little higher. Bjarne Gårdebratt on Mike on Treehouse November 2005 Treehouse November 2005 y y ot sure if you have read the [ JeffreyVeen] ’ve been reading the first issue of your magbook The Art and Science of Web Deazine. I’ve found the content quite interest- sign, it is 5 years old and you can download ing and it’s been an enjoyable read. I would for free look forward to reading each upcoming issue, but personally, the subscription price




To The Editors


Letters & Comments

In this book he outlines exactly what you have to retrieve the partent node first and then done here and adds in conditional resizes as parentNode.getElementsByTagName, but with well. Thought it would be good to credit him the className approach you can’t do this, you in this article. need to pass the parent as the second argument in the function (e.g. getElementsByClassName Like the implementation, but would be more (‘foo’, ‘parentNode’);) useful if it could also be combined with elements being left fixed like flash can do. Real- Justin Palmer on ize this may make for some serious amounts Quick Guide to Prototype of JavaScript though and lots more documentation. y BenScott on Dynamic Resolution Dependent Layouts


n interesting use of this technique is to automatically switch to a handheld stylesheet if the resolution gets too low. That y makes sure people who use handhelds which aren’t identified as so or people who just reat write up Ryan. Just to clear up some browse with really small windows will still be things that might confuse your readers, able to properly view the website. getElementsByClassName behaves exactly like getElementsByTagName with one exception: Peter Akkies on Dynamic Resolution Dependent Layouts


var children = $(‘header’).getElementsBy


TagName(‘p’); // will not work var children2 = $(‘header’).getElementsB yClassName(‘foo’); var children3 = document.getElementsByCl assName(‘foo’, ‘header’);


t’s good to see some solid documentation. I know that the scriptaculous wiki has a fair amount of prototype documentation and to this day there really seems to be no place to ‘find it all’. Nevertheless this article can prove to be another solid reference.

When you want to specify a parent object to Dustin Diaz on start from, the tagName approach would be Quick Guide to Prototype

Everyone Needs a Hug.

code. “Programming today is a race between software engineers stirring to build bigger and better idiot-proof programs, and the universe trying to produce bigger and better idiots. So far, the universe is winning.� Rich Cook

Code Discuss

Better User Customization By Stephen Hallgren


hile there are many ways to modify a stylesheet, the two most common methods focus on either loading completely separate stylesheets, or modifying the styles of elements by their ID. Unfortunately, these methods are not always the most practical for manipulating styles on a webpage. More often than not, they’re tedious to implement and usually fail to give the end-user the greatest amount of flexibility. Direct CSS manipulation Direct CSS manipulation opens up a vast amount of flexibility and user customization. This method allows for any style declared in a stylesheet to be updated directly. For example, you could update all <p> tags that had the class .foo attached to them. Or you could update any class, .foo, regardless of what it was applied to. If you wanted to be extremely specific you

could, for example, update all <p> tags within the ID #content containing the class .foo.


Why Is This Practical?

• Text Size Demo

The most practical example is modifying text. With direct CSS manipulation you can provide a text field for the user, or if you want to get all fancy, a slider. With a slider, a user can access any size they want between a specified min and max (view text size demo). This would update any styles specified on the fly, with no need for multiple stylesheets and no need to call multiple IDs for different elements

• Font Type Demo

Let’s run with the text example and think about the font of text on a web page. Web pages are generally limited to only a few fonts, although there are techniques to accommodate for this (flash and image replacement scripts). But why not let the user choose

• Color Demo • Download Source

Better User Customization


By Stephen Hallgren

whatever font they want? This can be achieved by using a text field for Safari recognizes both. input of the user’s favorite font (view font demo). Direct CSS manipulation will update the style sheet and display the font in real time as Modify the CSS the user types. With font faces that aren’t valid, the style will degrade back to the browser font. The function changeCss(), as its name suggests, does the actual changing of the stylesheet. The code here is very straightforward: This flexibility is endless and has many real-world applications. ColourMod is one practical example that uses direct CSS manipulation function changeCss(myclass,selector,value,modifier) { to update colors of objects on a web page via CSS. Instead of textif (!modifier) size sliders, ColourMod uses hue, saturation, and value sliders. These var modifier = ‘’; sliders determine a new hex value. The hex value then updates whatever if (value != ‘’) { style(s) are passed to ColourMod (view color demo). value = value + modifier; myclass = myclass.toLowerCase();

Show Me The Code

var safariclass = myclass.replace(/\#([\w\-]+)/g, “*[id\”$1\”]”); for (var i = 0; i < document.styleSheets.length; i++) {

A simplified version of the code that I have developed contains two functions checkBrowser() and changeCss(). The checkBrowser() function contains code that determines what DOM method to use when accessing the contents of the stylesheet based upon the browser type.

var theRules = checkBrowser (); var theSheet =

var theStyle = theSheet[j]; var theStyleName = theStyle.selectorText.toLowerCase();

//Check that browser for proper DOM element

if (theStyleName == myclass || theStyleName == safariclass){

function checkBrowser () {[selector] = value;

if (!document.styleSheets)




else if (document.styleSheets[0].cssRules)


return “cssRules”;


else if (document.styleSheets[0].rules) return “rules”; else }


for (var j = 0; j < theSheet.length; j++) {

} }




function loops through each stylesheet

The obvious difference between the two methods are the words “css- for (var i = 0; i < document.styleSheets.length; Rules” and “rules”. Internet Explorer recognizes only the “rules” modifier, Mozilla/Firefox/Netscape recognizes the cssRules modifier, and and then for each stylesheet loops through each class.


Better User Customization By Stephen Hallgren

Demonstration Web Screenshots

Why not let the user choose whatever font they want? Direct CSS manipulation will update the style sheet and display the font in real time as the user types. With font faces that arenâ&#x20AC;&#x2122;t valid, the style will degrade back to the browser font.


Better User Customization


By Stephen Hallgren

for (var j = 0; j < theSheet.length; j++);


function checkModifier(value, modifier) { var newValue = ‘’;

Once the script has found the right class, it then updates that particular class with the updated selector and value.

if (!modifier) var modifier = ‘’; if (modifier == ‘#’) {

if (theStyleName == myclass || theStyleName == safariclass){

switch (value.length) {[selector] = value;

case 1:


for (var i = 0; i < 6; i++) {


newValue += value; }

To accommodate for some quirks in how each browser reads the stylesheets, I convert all classes to lowercase.

newValue = modifier + newValue; break; case 2: for (var i = 0; i < 3; i++) {

myclass = myclass.toLowerCase();

newValue += value; }

Safari also adds some crazy garbage to ID-based styles. For example, if your ID is #header, Safari’s DOM would interpret it like this, *[ID”header”]. The following line of code is used to accommodate that discrepancy.

newValue = modifier + newValue; break; case 3: newValue = value.substring(0,1) + value.substring(0,1); newValue += value.substring(1,2) + value.substring(1,2); newValue += value.substring(2,3) + value.substring(2,3);

var safariclass = myclass.replace(/\#([\w\-]+)/g, “*[id\”$1\”]”);

newValue = modifier + newValue; break; case 4:

What About the Hex Values?

newValue = ‘’; break; case 5:

Hex values are a unique case in which the modifier needs to be placed in front of the value instead of at the end. Another problem with hex values is that IE sends Javascript errors when a partial hex value is given, even if it is a valid hex abbreviation (e.g., #FFF).

newValue = ‘’; break; case 6: newValue = value; newValue = modifier + newValue; break; }

To allow for hex values, a function can be added to check to see whether a hex value is being used or not.

} else { newValue = value + modifier; } return newValue; }

Better User Customization By Stephen Hallgren

Treehouse 11

You will need to modify the changeCss() func- of separator. This separator will be what de- to storing cookies except that using a database tion to by replacing these two lines termines where to split the single value. allows for a more structured way of storing and retrieving the proper data. if (!modifier) I use the “|” (pipe) to separate the values since var modifier = ‘’; the colon, semi-colon, and comma are already Known Limitations being or could possibly be used within the valwith this ues. What if you have multiple selectors be- There a couple known limitations that I have ing updated for only a single style? Glad you run across. The main limitation is Opera’s lack newValue = checkModifier (value, modifier); asked. To allow for this, I separate out each se- of support for this DOM method. As of verlector and corresponding value with a “\”. You sion 8 Opera does not allow Javascript to upTaking It Further really could use any separator you like, as long date the stylesheet directly. as you know it will not be a part of the data Cookies : Cookies always get mentioned, you want to store in the cookie. The informa- Another limitation is the way different browsmainly because they are so yummy. There are tion that would be stored in a cookie called ers recognize certain CSS selectors. Univermany ways to use cookies to store the user- .foo might look something like this: sal, adjacent, attribute, and child selectors, to specified stylesheet values and then call and name a few, are not recognized the same way update a style with them on page load. The color|#333\fontFamily|Georgia,Verdana,sans-serif by all browsers. Knowing this, it is possible detailed mechanics of doing this really should to allow for these differences by writing extra be saved for another article, but the general To extract the proper selector and correspond- code to fix the problems. To see a few examconcept goes like this: Since cookies are able ing value you would split at the “\” giving you ples of how each browser views a stylesheet, to store only two values—the name of the check out, an excellent recookie and the value of the cookie—it is nec- color|#333 source on DHTML. essary to think creatively when setting cookies. The obvious first step is to set the cookie and y name to the style name. Therefore, if the style .foo is being updated, the cookie name will fontFamily|Georgia,Verdana,sans-serif Stephen Hallgren is the creator and designer of be “.foo.” ColourMod. Recently joining the ranks of Unborn Splitting these values at the “|” will separate Media Incorporated he pretends to know things So what happens to the rest of the informa- the selector from the value. You can now as- about design, XHTML, DHTML and CSS. On tion? The rest of the information needs to sign the proper values to the right selector and his freetime you can f ind Stephen volunteering as be stored in the cookie value. Since we are class. Art Director for the Noah Institute and chasing starting with three distinct values and storing after his daughter, Ella. them in a single cookie value, it is necessary to AJAX : The concept for using AJAX to store combine the values together using some kind updated stylesheet information is very similar


Treehouse : Who makes up the mad4milk team? Introduce yourselves and let us know your specialties. Valerio Proietti : Mad4milk is a small Italian web agency, and is run by two 23-year-old guys, Giorgio Piacentini and Valerio Proietti. We’ve always been friends—went to school together and such—so we cooperate really well in both backend and frontend parts. Giorgio is the PHP guru, especially when it comes to object-oriented PHP, PEAR, Smarty, and MVC pattern, while I do fancy stuff with frontend coding and interface design. TH : Tell us why you decided to release your moo.fx library. Is the library a result of mooflex, your content manager, or did you make the library to fill a void?

code written by someone else?

Valerio Proietti Interview Valerio Proietti was born in Rome, Italy 24 years ago. Just three years ago he left his full-time job with a microsoft partner company and started mad4milk with his friend Giorgio Piacentini. They’re working 27 hours a day on mooflex, mad4milk’s upcoming content management system.

VP : Moo.fx was born while we were developy ing mooflex. It was really a practical choice: we needed some very simple effects just to let the user feel what’s going on while using Ajax There’s nothing wrong with that, right? :) calls. It came out pretty clean and lightweight, so, with a bit of additional work, we thought it TH : Common libraries like prototype, scripwould be cool to let the world have this. taculous, and moo.fx are convenient, but many developers use them without fully unI admit I also decided to release moo.fx so peo- derstanding them. What words of caution or ple would have come to know about mooflex. advice do you give to developers when using

VP : Especially for JavaScript libraries, I suggest using extreme caution. While it’s not practical for everyone to fully understand every line of a library’s code, we all should understand the basic functionalities and use them to our advantage. If a library is too big and bloated, consider removing the parts you don’t need. A 60kb JavaScript library can make your browser respond slowly, even if it takes only a second to download the page. TH : We have to know, what is the obsession with the cows? VP : Ahah, well, the obsession is with milk, actually. Cows are just the milkmakers, hence our love. You know, when you stay up all night finishing a job, or a script or a design, you need something to eat and drink. TH : You guys drink milk? VP : Yes, we drink milk and eat some candies. TH : Content managers are becoming a crowded market that may be tough to penetrate. What inspired you to take on this chal-

Valerio Proietti



lenge, and what gap does mooflex fill that other content managers are missing? VP : We were not satisfied with other content managers, so we began building mooflex for ourselves and our clients, and it always helped us to speed up our work in a unique manner. We’re not really into today’s other content managers: from what we’ve seen they usually write HTML tags automatically, or need many plugins to make them work the way you want, and are not really a practical solution for a quick and clean job. We can say mooflex helped us to get our job done quickly, without hacks, plugins, or other addons, and always gave us full control over the sites we were building. It may be not full featured, but it’s flexible enough to let you do what you want in an intelligent way. TH : You write on your blog that mooflex will run with or without JavaScript. With all the Ajax surrounding mooflex, that is quite an accomplishment. How did you approach making your application degradable, and did it lengthen your development time significantly? VP : Mooflex is not fully Ajax driven. We definitely used a bunch of Ajax in the areas where we thought it would enhance the user experience. The toughest part was to implement Ajax handling in our framework. We


“Moo.fx was born while we were developing mooflex. It was really a practical choice: we needed some very simple effects just to let the user feel what’s going on while using Ajax calls. It came out pretty clean and lightweight, so, with a bit of additional work, we thought it would be cool to let the world have this. ”

figured out a way to call an action with or without Ajax by loading as a response in the same Smarty template. Now, when we need to add something new, Ajax is just there, and we can decide whether or not it’s a good idea to call it with Ajax. It’s just a matter of rewriting the link (or the form action) with JavaScript and adding Ajax as a parameter. TH : What are your favorite features of mooflex? What has been the toughest to implement? VP : I really love the fact that I can choose which stylesheets and templates to load in each section. This makes my work on sites a lot easier. Another good thing is the tagging; we’ve gone completely crazy with tags. The fact that I can browse my articles by tag, by section, or by a combination (a selected tag in a specified section) also inspires me. Another cool feature is the built-in smart 404 (a search is thrown when the page is not found), although that was easy to implement. The toughest to implement was without doubt the multiple files upload. Let me explain: you’re writing a tutorial and you have to include an image for each “step.” You can add an unlimited number of images for each

Valerio Proietti Interview

Treehouse 14


Application Screenshots

Add Article : Adding a new article using mooflex brings a new level of convenience to the user. Tagging, options, and URL rewriting are on seen on the same page, and can be modified without a page refresh.

Adaptable : Well structured markup with a mix of creativity can go a long way, which is exactly why mooflex can adapt itself to all screen resolutions. The screen cap shows the application in an unusually small window size.

Appropriate Ajax : Mooflex becomes more responsive through the use of Ajax. A large, recognizable animation lets the user know something is going on, so all confusion is eliminated.

Valerio Proietti Interview

article, give it a unique name and include in the article with a smarty tag. So if you find out you uploaded the wrong image, just re-upload, leaving the name intact, and your article will never have to change.

Treehouse 15

mooflex? And if you had to choose another content manager, what would you choose and why?

VP : Our full site is powered by mooflex. We truly don’t know other applications very well, The fact that I can link these images in articles but I think we’ll choose Wordpress, because and in templates is also cool. For example, if I we like to keep our templates on files. want to include a thumbnail for each article, I just name the image “thumb” and link directly TH : Ajax and Animation are leading the to it in the template. way for JavaScript, but both have a difficult learning curve. What has been invaluable to Another goody is our MVC framework itself: you, and what are some of the mistakes you’ve it’s easy to add a completely new functionality, made along the way that you can recommend like a shopping cart, maybe. You’d better stop other developers avoid? me, or I can go on for hours. VP :Our biggest mistake at first was not fully TH : When can we start playing around with learning the libraries we used, both PHP and mooflex? How much will it cost us, and what JavaScript. After using these for a long time, does our server setup have to look like to run we had to rewrite lots of our code to make it? it better and cleaner, by taking full advantage of the libraries. A library is an invaluable tool VP : We hope a mooflex public beta will be that can be a developer’s best friend and is like out for Christmas. Mooflex will be free for a programming language: master a library and non-commercial use, and will cost around $80 you’ll end up writing less and smarter code. for commercial applications, with a per-site y license. Your server will need Apache, PHP and MySQL, with no specific configuration. Of course, it will take advantage of stuff like .htaccess for cleaner URLs and GDI for image manipulation, if these extensions are available. TH : Is your blog currently powered by

There is less to this than meets the eye Designing Information. Elegantly. Mark Boulton //

Book Review P u r c h a s e B oo k

Agile Web Development With Rails Review by Ryan Campbell


ragmatic Bookshelf ’s Agile Web Development with Rails is the first book to make an attempt at fully introducing Ruby on Rails. The framework offers a completely new perspective, approach, and logical process to a project that will stimulate all programmers regardless of background. Given that Rails is still in its infancy, this book has the daunting task of explaining difficult concepts to readers who can be assumed to have no prior knowledge. This challenge proves difficult as the book successfully educates the Rails enthusiast, but is not a warm introduction for beginners.

While the back cover claims the range of target audiences runs from beginner to expert, the book admits from the beginning that prior knowledge of the Ruby programming language is needed. Upon completion of the 15 minute introductory “Hello World” app that required help from outside resources, it became obvious to me that the book does not intend to hold the reader’s hand.

Those with an intermediate understanding of Rails, however, will find the book quite informative. Learning the correct approach to projects from the leading minds in Rails makes this an invaluable resource. A unique approach splits the book into two halves: a full application walk through on one side with syntax teaching on the other.

The demo project not only deals with code, but covers other facets A helpful appendix eases the likes conceptualization and thorlearning curve, but is frankly ough bug testing. There is enough not enough for beginners. The content packed within this book to technical approach along with the produce a professional Rails proinherit difficulty of the framework grammer as a result. make this an intimidating read for programming newbies.

ABOUT THE BOOK Author: Dave Thomas, David Hansson, Leon Breedt, Mike Clark, Thomas Fuchs, Andrea Schwarz Paperback: 450 pages Publisher: Pragmatic Bookshelf Language: English ISBN: 097669400X

Best of the Web Code Links · Dec 2005

1. 2. 3. 4. 5.

How To Write Unmaintainable Code http:/

Try Ruby!

‘Beta’ Becomes a Long-Term Label

Top 10 custom JavaScript functions of all time

Free Programming Tips are Worth Every Penny

design. â&#x20AC;&#x153;The details are not the details. They make the design. â&#x20AC;? Charles Eames

D e si g n Discuss

Psychology & Usability: More Connections Than You Think By Dave Munger


lot of usability is common sense. Jakob Nielsen makes a career out of lambasting the common-sense errors that designers make when creating applications. But Nielsen’s advice can probably be summed up in a single phrase: design with the user in mind. Unfortunately, that’s a lot easier to say than it is to do.

Attention Research and Web Design

Consider the problem of how to handle browser refreshes. Have you ever noticed how difficult it is to notice changes to a page when the window reloads? Last year Matthew Linderman proposed an interesting method of alerting users to changes on pages with forms: briefly highlight the change in yellow and then I’m not a professional web designer, or even a usability gradually fade it away. It’s an easy way to direct attenexpert, but I do read and analyze a lot of psychol- tion to the part of a page that’s changed. Linderman ogy research, and I believe that psychology research calls it the Yellow Fade Technique. But is it the best or methods can tell us a lot about how to test usability most effective way? Some recent psychology research effectively. What psychologists do for a living is try to may offer some answers. understand human behavior and since the information they collect is useful for any professional trying Previous research had led to two different hypotheses to guide behavior, it’s important that the tests used to —either the appearance of a new object, or a change determine interface effectiveness are well-constructed in the luminance (brightness) of an area of our field and ask the right questions. of view is what attracts our attention. In cases like the

REFERENCED STUDIES The studies mentioned in this article have all been analyzed in greater depth on Dave’s blog Cognitive Daily. For more information, you can click on the “video games” category or search for “cell phones” at

Psychology & Usability


By Dave Munger

Yellow Fade Technique, both of these changes occur at the same time.


Video Games: Design Meets Controversy

But design problems are not always that simAttention researchers Steven Franconeri, ple. Consider the job of a video game designer. Andrew Hollingworth, and Daniel Simons The game designer needs to create something designed an experiment to determine which that users will want to play over and over change actually attracts our attention. They again, a game so compelling that people will created two different animations—one where pay upwards of $50 for the privilege of playing a shrinking ring briefly obscured a set of let- it. Most importantly, the designer must make ters, and one where the ring passed behind the a game that people will buy instead of buying same set of letters. the hundreds of other video games out there. In both cases, all the letters changed, and a new letter also appeared. If the new letter appeared while obscured by the ring, it took just as long for users to notice the new letter as it did for them to notice the old ones: we only notice a new object faster if we can see it appearing—that is, if the appearance is accompanied by a change in luminance. So when a browser page goes white as it refreshes, this effectively removes any benefit of a new object in attracting our attention. The luminance change of a Yellow Fade is one solution, but the Franconeri group’s research suggests another potential solution: avoid a browser refresh. If a new item could simply appear without the entire page going blank first (I’m not a programmer, so you’ll have to figure out how to do this for yourself ), then users should notice it just as quickly as if it had been highlighted in yellow.

“So what does all this say about usability? Well, usability, like video games, disdains oversimplified explanations. Since behavior is infinitely broad and complex, a researcher needs to be aware of deceptively simple questions.”

And what grabs attention the best? Sex and violence! The problem is that there is a downside to this type of content: games are often purchased by parents for their children, and parents are worried that violent games will be a negative influence. This is not exactly a usability issue, but the process of finding the answer to parents’ concerns demonstrates how difficult it often is to find the real source of a problem. Conducting the Right Studies When parents began to complain about the violence in games, the gaming companies were ready—they threw back studies showing that there was no link between video game play and violence. People who played lots of video games were no more likely to resort to physical violence outside of their games than people who didn’t play at all. Now, the first set of studies was well-designed, but their results didn’t make sense to a number of researchers who for years had found connections between television violence and reallife aggression. They knew that it wasn’t just television viewing that correlated to violence; it was watching violent television, so they conducted a new set of studies, and this time, they found that violent video games did indeed correspond to real-world aggressive behavior. In one study, Craig Anderson and Karen Dill found that after playing just 15 minutes of

Psychology & Usability


By Dave Munger


Wolfenstein 3D, participants were more likely to subject a fellow game competitor to a painful blast of noise in his or her headphones.

0.4 0.3

Average Effect Size (r value)

But other researchers weren’t convinced. Dmitri Williams and Marko Skoric conducted a month-long study of users of the violent roleplaying game Asheron’s Call 2. In this game, players cooperate with others to violently defeat common enemies, and even after 50 or more hours of game play over the course of a month, participants displayed no more aggressive attitudes than non-game-players—perhaps because the game encouraged not only violence but also cooperation. Williams’ and Skoric’s conclusion: video games are so complex that no single study is going to be able to show conclusively that violence in the games is or is not a problem.

Correlation with Playing Violent Video Games

0.2 0.1 0 -0.1 Not Best Methodology Best Methodology

-0.2 -0.3 -0.4

Aggressive Behavior

Aggressive Cognition

Aggressive Affect

Helping Behavior

Physiological Arousal

Applying the Lessons of Psychology to Usability So what does all this say about usability? Well, usability, like video games, disdains oversimplified explanations. Since behavior is infinitely broad and complex, a researcher needs to be aware of deceptively simple questions. A Unix terminal can be perfectly usable for a trained computer programmer, but it’s not usable at all for untrained travelers at an airport check-in kiosk. But more to the point, an airport kiosk that’s usable for business travelers who travel weekly might be a nightmare for families who travel once a year or less. So

Video Games and Aggression: An analysis of dozens of studies shows that experiments with the best methodology consistently demonstrate the highest correlations between violent game play and aggression.

when we say “design with the user in mind,” the first question we should ask is “who is the user?” Is it more important to have an interface that can be navigated quickly by repeat users, or one that’s easy to understand for novices?

while novices poke through a difficult interface than by viewing a few extra screens in a simpler interface when they finally make their way to the front of the line. Taking a Psychological Approach to the Problem

Even that question is more complex than it seems, for at the real airport, the veteran trav- But is interface design the only issue we need elers might be more annoyed at waiting in line to test? Consider another problem psycholo-

Psychology & Usability


Probability of MIssing Signal

By Dave Munger


gists have been enlisted to answer recently: driving with cell phones.



Tracking Error

For additional reading in cogniThe first cell phone studies focused tive psychology research, I can on the physical aspects of driving 6% recommend the following sites: with cell phones: holding the handset, dialing numbers, and answering • Mind Hacks 4% calls. By testing “drivers” in video • Optical Illusions and Visual simulations, researchers arrived at the Phenomena 2% startling conclusion that operating a cell phone was no more distracting • SOSIG Psychology Gateway than tuning the radio or adjusting 0 • Psychological Science the heater. Cell phone users took this Driving Only Listening to Radio Talking on Cell research as confirmation that they and Driving Phone and Driving Be sure to check out the free PDF could continue conversing and driving, versions of a fantastic resource, but researchers like David Strayer and Psychological Science in the Hands-free Cell Phones: Even using a hands-free cell phone drastically increases William Johnson realized that this Public Interest the chances of missing a traffic signal. was just the beginning of the research process. They tested drivers as they participated in actual conversations—on hands-free cell phones—and Driving Only found that they were nearly twice as likely to miss a traffic signal while 40 Driving and Repeating Words engaging in conversation than when driving in silence or even while Driving and listening to the radio. 30 Generating Words


10 0

Easy Course

Difficult Course

Generating is the Problem: On a difficult driving course, repeating words doesn’t result in significantly more driving errors, but generating new words does.

So what is it about talking that’s different from listening? Strayer and Johnson did a new study in which they asked participants to drive either while repeating back words an experimenter read to them on a hands-free headset, or while generating new words starting with the last letter of the word the experimenter gave them (for example if the experimenter said “salmon,” the volunteer could respond “nicotine”). The drivers who merely repeated back the same words performed no worse than driving in silence, but those who had to generate new words performed significantly worse. So it appears that generating responses is the element of simultaneously driving and operating a cell phone

Psychology & Usability


By Dave Munger

that causes all the problems. Further studies have found that many drivers can compensate for the knowledge that driving with a cell phone is dangerous, but others (most notably older women) can’t, even when they’re confident that they can adjust. This type of result makes me glad that I’m a science writer and not a policy maker: who wants to tell a group of older women that they can’t talk on their phones while driving, but everyone else can? The Take-Home Message The techniques used by psychology researchers provide some clear guidelines for usability testers.


in a first-person shooter. What makes sense Malamuth, N., & Wartella, E. (2003). The for a personal blog design might not work for influence of media violence on youth. Psychoa corporate home page. logical Science in the Public Interest, 2003 4. Never stop testing. Remember, people adapt to technology. Five years ago, we designed web pages that didn’t require vertical scrolling. Now, with the advent of blogs and scroll mice, it would be silly not to make use of that technology. But what about horizontal scrolling? That’s a usability factor that would be worthwhile to test.

Franconeri, S.L., Hollingworth, A., & Simons, D.J. (2005). Do new objects capture attention? Psychological Science, 16(4), 275-281. Lesch, M.F, & Hancock, P.A. (2004). Driving performance during concurrent cell-phone use: are drivers aware of their performance decrements? Accident Analysis and Prevention, 36, 471-480.

5. Control, control, control. Usability tests are meaningless unless you can compare them Strayer, D. L., & Johnston, W. A. (2001). to something. Don’t just ask “does this design Driven to distraction: Dual-task studies of work?” but ask “does this design work better?” simulated driving and conversing on a cellular 1. Usability testing should address questions telephone. Psychological Science, 12, 462-466. that are as specific as possible: Not “is Inter- 6. Read studies conducted by others. When face Design A better?” but “Which interface you see how others have solved similar prob- Williams, D. & Skoric, M. (2005) Internet fandesign can be navigated more quickly?” lems in usability testing (or even cognitive tasy violence: A test of aggression in an online psychology), that information can help you game. Communication Monographs, 72, 217-233. 2. Don’t assume the first question you ask is develop more effective tests of your own. y the most important one. Just as the controls of a cell phone turned out not to be the most If you’d like to read the original research reports Dave Munger holds graduate degrees in English important safety factor, speed in navigating used in this article, here is a full bibliography: and science education and has written four college through an e-commerce web site might not be as important as giving users a sense of se- Anderson, C.A., & Dill, K.E.(2000).Video writing textbooks. Based in Davidson, North curity. games and aggressive thoughts, feelings, and Carolina, he currently writes the blogs Cognitive behavior in the laboratory and in life. Journal of Daily and Word Munger. Previously he was a co3. Try to account for as many external factors Personality and Social Psychology, 78, 772–790. owner of the design f irm The Davidson Group, whose clients included McGraw-Hill, Prenticeas possible. People use products in a variety of different contexts: violence in a cooperative Anderson, C.A., Berkowitz, L., Donnerstein, Hall, Addison Wesley Longman, and Davidson multiplayer game is not the same as violence E., Huesmann, L.R., Johnson, J., Linz, D., College.


Dan Cederholm: I first met Jon Hicks at the SXSW Interactive conference in Austin, Texas, in 2005, but prior to that, I’d long been a fan of his work. Jon’s a true digital artist, and has been cranking out some amazing designs over the past several years, not to mention helping the web standards revolution look impeccable. Jon Hicks: When I first got into web standards and was learning how to really use CSS, there were three designers/bloggers that were obviously leading the pack: Doug Bowman, Dave Shea, and Dan Cederholm. They were my gurus. Dan in particular would scare me with his SimpleBits Quizzes and high profile makeovers of sites like Fast Company. I’ve since had the chance to meet him, and realize that he is a true gentleman of the web. He doesn’t have an arrogant bone in his body. If “being Dan Cederholm” was possible, I’d like to try it out.

ate amazing visuals. I will now focus on my Bezier curves (right-handed) with my trusty mouse.

Cederholm & Hicks Conversation y

retouching or collaging in Photoshop. Those lines blur a lot though, and I annoy myself putting the mouse aside to make room for a Wacom tablet and then switching back again. I have this image of you never having to do that, always using the right tool instantly. I now also have this vision of you eating food with both hands. That’s crazy.

Hicks: You managed to make a name for yourself as a designer for high-profile projects (Fast Company, Odeo, and Rollyo, to name a few), an author (Web Standards Solutions and Bulletproof Web Design), and an icon artist, for Pete’s sake. Have you managed to spread yourself out without getting typecast as being just one thing? Cederholm: And I always thought I was typecast as “the guy who can’t decide what he is.” :-)

It’s something I’ve always loved about the web—that it really ties together one’s interests in a cohesive way. If you like to draw, or create icons, or write books, or take photographs, or design logos, you can do all of this under a web-centric umbrella. It keeps things interesting, and I can remember this is what kept me Cederholm: Jon, I’m left-handed, but use the interested in web design early on: that the web mouse with my right hand. Am I crazy? Also, Cederholm: Eating food with both hands is (and the variety of web sites) can be about a do you use a mouse or a drawing tablet when something I’m proud to have developed over myriad of topics. doing logo or illustration work? the years. But, seriously, pen for retouching and mouse for vector work makes good sense. It can also drive you nuts, not knowing what Hicks: Sounds to me like a perfect solution. And I always had this vision of insane digital to zero in on. But instead flying from one type You see, I use both. I like a mouse for vector illustrators such as yourself wielding a Wacom of project to another, I’ve tried to limit myself illustration, but a pen for anything involving pen in blindingly fast motions in order to cre- to just a few. I also have been enjoying sleep a

Cederholm & Hicks



bit more lately—so I may need to limit even more. Hicks: I think it’s a very healthy thing, though, to have many fingers in many pies. This industry is moving fast, and the skill set that is expected from you is changing rapidly with it. I often worry that one day I’m going to wake up and realize that its all moved along without me…like the old-school print designers who look at a Mac and just scratch their heads. I’ve decided if that point ever comes, I’ll change careers and become an art teacher at a primary school. I originally trained as an illustrator, and I quite fancy teaching young ‘uns how to do it. Do you have a backup plan if it all goes wrong? Cederholm: I think having a backup plan is so essential, even if the chances of actually having to cash it in are slim to none. I’d bet the farm that we won’t see a Mr. Hicks art class, though. Your work is just too good and too relevant, and will continue to be sought after.


“Sometimes it takes so long to get to a launch at all, and I often employ bad hacks and practices just to get to bed. If I could get away with it, I would just use a large .gif for the whole page. I’m a visual designer, and when I’m trying to solve browser bugs, I feel so far away from what I should be doing. ”

Cederholm: I think that’s just it. In the case of “bad food container film design,” it might be a question of the product designer solving the problem of sealing the container—but never thinking about the next step. Sure, it’s sealed, but it’s potentially impossible to open without the aid of a sharp knife. Terribly annoying. I think as web/UI designers, we’re constantly looking at how to improve usability. Changes are fast and easy when dealing with pixels, and perhaps that’s why I get impatient and frustrated with poor design in the non-virtual world. Changes aren’t as easy and immediate, and at times there’s less room for experimentation. How does food-packaging design fare in the UK?

Hicks: I hadn’t thought of that, but yes, when it comes to pushing pixels, you can iterate, and improve if something isn’t working. That immediacy was something that originally excited me about the web, and lured me away from print. Suddenly, there was no waiting for a But I’m with you on how fast things move, and proof, and then once the final printed product the pressure of feeling as though it’d be easy was created, it could be out there immediately. to be left behind. My backup plan involves Impossible with packaging design—I guess either becoming a chef or starting a pretzel people would have to be injured before somecompany. I think the simplicity of a pretzel is Hicks: In Film Critic you railed against the thing was recalled and changed! appealing—there are so few ingredients. That stupidity of product design. Is this a case of said, I’ve never yet attempted to bake a pretzel people designing the product and then never As for the state of packaging design in the UK, actually using the product once they’re done? I think we suffer similar problems, although on my own. Hopefully, I’ll never have to. you do see products advertising “New! Easy-

Cederholm & Hicks



open pack!” as if it was something extra! Now then, Mr Cederholm, it seems like every week a new web app is released, along with a new Google service in beta, and we’ve both been involved in such products. Do you think this growth can continue, or are we heading for another burst bubble? Cederholm: You’re absolutely right. The web app craze has officially reached peak status. I’m all for it, as long as the majority of what’s being developed appears to be useful at least for someone. I think the great thing about the current boom is that people are much smarter than they were in 1999. Launching a web app is increasingly easier, cheaper, and won’t require millions in venture capital or 200 employees. In 2005, if a new venture fails, the fallout will certainly be considerably less destructive. The key now is to weed out the hype-riding nonesense from the trendsetting, useful tools. We’re seeing more apps, but hopefully that means that many or them (or at least some) will be worth checking out. I think it’ll be survival of the fittest all over again.


Hicks: The problem with my own site and Pimp My Safari is that there is so little time for them as unpaid projects. I think they could be so much more, and PMS’s home page especially needs work (there’s no real path for the eye to follow), but these things get pushed aside for jobs that pay the bills! Having said all that, though, yes, it is very satisfying. Especially with PMS, as I felt that I was justified in only testing it in one browser! It brought back a lot more of the fun of creating and designing a site. The bugfixing for IE’s “HasLayout” problems really suck any enjoyment out of a project for me. Cederholm: As a well-known designer for the web, do you find it hard to publicly discuss your work? For instance, you’ve created this amazing identity and site design for a client. You’re really thrilled with the results, and the client’s development team has done an OK job at implementing your work. Yet people get hung up on validation, a quirky problem in last night’s build of Firefox, or other such things out of your control. I usually cry myself to sleep at night, but I’m curious about your thoughts.

receive a much higher level of scrutiny. I fret so much about things like validation and clean semantic code (as these things are important), but a small part of a bigger picture. Sometimes it takes so long to get to a launch at all, and I often employ bad hacks and practices just to get to bed. If I could get away with it, I would just use a large .gif for the whole page. I’m a visual designer, and when I’m trying to solve browser bugs, I feel so far away from what I should be doing. It’s funny that you mentioned Firefox bugs, as when I was creating the interface for Riffs, it was the first time I’d come across problems in Firefox. The gap between 1.07 and the 1.5 beta revealed so many odd rendering problems in the current (1.07) version. I also don’t want to start making apologies for the state of the code, as that’s such a kick in the teeth to the developers you work with. Do you feel the same problems?

Cederholm: Yes, absolutely. And you’re very right that publicly apologizing for code that you have no control over is often a put-down for the developer. It puts us in a tight spot— More and more UI designers are becoming initially having so much control over the vitheir own clients. Do you see yourself going Hicks: You’ve touched on a real problem here, sual design and how it’s marked up, but then this route? For instance, you’ve built an excell- one that I experience with every project. After passing the baton with hopes that every client lent (and may I say highly attractive) resource doing all that work, you really want to show will just “get it.” Luckily, the number of cliin Pimp My Safari. Is it more satisfying to people, right? But if you have any kind of ents that do get it is increasing. And those are have complete control over a project from reputation or profile (built up by others, not the types of clients that are usually a dream to start to finish? yourself, I might add), that work is going to work with.

Cederholm & Hicks



But, realistically, we just do our best, and try to understand that the ebb and flow of the web means it is constantly changing. So that fudged template that we’d previously perfected in every major browser isn’t the end of the world. It’s certainly not easy to get accustomed to. And now to completely shift gears. As an expecting parent, I’m wondering what advice you can give a fellow one-person design shop who also needs a home life. I’ve heard that your office is closed on Fridays—does that work out for you? Hicks: Sort of! To be honest, it’s a real struggle to balance both sides. I’d been wondering whether going back to working in a studio would result in me working fewer hours and being around more for the family. After much thought, I’ve decided that working in a studio would be much, much worse. Being freelance means I can stop at 5:00 p.m., spend time with them, and start working again after they go to bed. I’ve found that it means working when everyone else is asleep, but at least I have the flexibility to do that. It gives me the opportunity to not miss out on all those wonderful stages of their growth.


“I think the great thing about the current boom is that people are much smarter than they were in 1999. Launching a web app is increasingly easier, cheaper, and won’t require millions in venture capital or 200 employees.”

of web design work out there as the official “web design season.” That season shows no sign of turning over, so choosing the best projects at the right time is often a tough choice for a one-person business. With only being able to take on a certain number of projects, it always comes down to timing. And inevitably, a great project comes along, just as you’ve signed on to another. Do you find that knowing when to say no is just as important as saying yes to a particular project? Hicks: Absolutely. I find that I usually know when to say no, but it’s very hard to say! Actually, the hardest part of all for me is responding to work inquiries. It takes so long, and often leads to nothing, but I don’t feel I can just ignore the requests.

One thing I’d love to know—what do you do in those moments when the creative cupboard is bare? How do you get over that? Or maybe the situation by asking “which is more impor- you don’t have those moments…in which case, tant here?” One thing that helps me is letting curse you.) go of the guilt of not replying to every single email that comes in, and saying no to side Cederholm: A great question. Having no forprojects or other commitments. Do you find it mal design training, I often think that anything hard to stop yourself from saying “Yeah, sure! I pull off that comes out halfway decent is the The part I find particularly hard is balancing I’d do that!” result of a happy accident. I’m learning how married life. I end up with less time for Leigh to make those happy accidents more frequent. when I work around the children. There’s no Cederholm: Saying no is certainly an art form. But inspiration comes in all shapes and sizes, easy formula; I just try to get perspective on Earlier this year I referred to the current surge and sometimes you just get stuck. I find that

Cederholm & Hicks Conversation

when things are going slowly, I end up trying to force things, and the result is terrible. I usually take a break, go for a walk. Maybe grab a mocha latte, or a glass of wine (depending on the time of day). Mabye I’ll crack open a magazine or do something different for a bit. Another trick I’ve found useful is to just start over from scratch—start sketching something vastly different from where you left off. Even if it doesn’t materialize, it may reinforce your earlier intentions, while taking it in a slightly different direction. What does Jon Hicks do for designer’s block? Jack Daniels? A trip to the zoo? We’d all love to tap into even a smidgeon of your design sensibilities. Hicks: What usually happens is that after a couple of hours, I realize that I’ve been sitting staring at the screen with nothing happening. When I finally realize, I get up and walk outside, or take my laptop somewhere else to work. The change of environment and getting fresh air and exercise is usually enough to get the brain working again and thinking differently. Generally, I find that working in the same position and place for too long dulls creativity. The change can be as simple as working standing up, or two feet to the left. After that, I get influence and ideas from places like Netdiver and Grafik magazine. Changing the music I listen to helps a lot, too. If I need to relax and think through something, Miles Da-

Treehouse 28

vis is good. If I know what I need to do, and the UK sometime. Last week I finally got to just need something to keep me going, I play see Jeff Tweedy from Wilco play again, and something like Embrace. he was just superb. The last time I’d seen him play was with Uncle Tupelo over 10 years ago! When I mentioned in a post last year that I Now I feel old! had just discovered the band Low, I remember you replied that this was one of your favorites. Cederholm: Ditto that on Uncle Tupelo! One of How did you come across them, and what else my favorite bands, and possibly the best live show are you listening to at the moment? I’ve seen. Fingers crossed for reunion at some point. And yeah, makes me feel old, too. :-) Cederholm: Yeah! Low. I first came across them in the late 90s—before I knew what a Hicks: I don’t think a reunion is in the cards, CSS selector was. I was playing guitar in a sadly. Too many egos at play there, I think! band (I suppose it would’ve been labeled “in- Dan, it has been a genuine joy to do this! To strumental slow-core” or something). Low was wrap up, what is your favorite curse or putcertainly an influence there, with their slow, down? Mine is an old medieval saying: “May minimalist but melodic stuff that seemed so all that hinders and smarts affect you in your different and fresh from everything else that nether parts.” was out at the time. There were others like Idaho, Slint, and Codeine that were equally Cederholm: It sure has been a pleasure, Jon! inspirational. I wish I was as hip to what’s And your wrap-up question is a fantastic one. new in music now as I was then, but recently, It’s hard to choose a single favorite curse— I’ve been digging Rogue Wave, Nada Surf, the there are so many. But if hard-pressed, I’d go Shout Out Louds, the Jam, Hall & Oates…. with “ass clown.” I don’t use it much, but anything I do use on a regular basis would probHow about yourself? Judging from your playl- ably be better off not printed. ist on hicksdesign, we have very similar taste in music (minus, perhaps, the Hall & Oates). Now for a final question to you: fixed or fluid? What are your favorites of the moment? Just kidding. But how about #39c or #9c3? Hicks: My favorite record of the year has so Hicks: I’ve been a #9c3 man for so long, mayfar been Sigur Ros’ Takk. It’s a really beautiful be it’s time for a change? ;o) DC pick-me-up record. I’m still listening to a lot y of Starflyer 59, and wishing that they’d tour

Book Review P u r c h a s e B oo k

Adobe Photoshop CS2 for Photographers Review by Kevin Hale


n an age when most tutorials (especially Photoshop tutorials) are abundant and free for the consumption of the masses, I have particularly strong views on what I expect from a how-to software book. For anyone that’s actually gone through the Adobe Photoshop documentation and Adobe’s web site for tutorials and demonstrations, you’ll know that the official stuff doesn’t skimp out. A companion book to the software should therefore not just be a regurgitation of the feature list found in the manuals nor should most of the content be found online.

And so it was with great excitement that I picked up Martin Evening’s updated CS2 edition to Adobe Photoshop for Photographers. Evening’s textbook features 700 beautiful pages of full-color examples and demonstrations of intermediate and advanced Photoshop techniques to help users do with the software what it does best, manipulate photos.

Adobe Photoshop CS2 for Photographers also presents all shortcuts for both PC and Mac versions and makes the book valuable for both sides of the computing spectrum.

What’s unique about this book, aside from the excellent presentation, is that the examples are practical and taken from actual projects used in professional situations. The tips feel transportable and the writing does an excellent job eluciFor those looking for a quick over- dating some of the more complex view of the new features offered in ideas on color management and the new Creative Suite version, the printing. first chapter presents a nice concise overview of each new tool and While this book isn’t targeted at screenshot of the feature in action. beginners, I recommend it highly to anyone interested in getting se-

ABOUT THE BOOK Author: Martin Evening Paperback: 704 pages Publisher: Focal Press Language: English ISBN: 0240519841

Best of the Web Design Links · Dec 2005

1. 2. 3. 4. 5.

Pandora’s Box (Model) of CSS Hacks

CSS Layout Challenge

Email Design Guidelines for 2006

WebPatterns and WebSemantics

Printing a Book with CSS: Boom!

ISSN :1558-013X

ISSN :1558-013X


ISSN :1558-013X


A We b D e v e l o p m e n t M a g a z i n e


A We b D e v e l o p m e n t M a g a z i n e

A We b D e v e l o p m e n t M a g a z i n e

Month One


Month One

2 3 Month Subscription of Treehouse. Only $9. So cheap. So good.

Month One


Robot Tea Party By Jack Fields

Comic Discuss

We’ve all made friends and connections on the Internet that never would have been possible without our blogs. While grateful for those we have met, there still could be hundreds of like minded people that we haven’t met. A group of 9rulers (and others) are attempting to bridge this gap with Inksmith. Stay tuned for details.

Uncertainty surrounds every startup, and the next twist for the recently formed Particletree is a trip to Silicon Valley. A recent acceptance to the Winter Founders Program sends them out west to hole up and write software for three months. Demo day in March will determine if the project has what it takes to get off the ground.

The Avalonstar mentorship program is now open for business. Brian has decided that sharing will help web apprentices’transition into the industry. So, if you need some help writing, designing or coding then go give him a ring. While his future email and instant messenger overload is not enviable, such generosity deserves respect.

Nathan Smith has been focusing his efforts on Godbit, a community site aimed at bringing up web standards awareness in the Church. Currently, many developers have the power to abuse and take advantage of the Church by overcharging for outdated technologies, and Godbit is determined to set things straight.

Network News Around 9rules

Third round inductee, Matt Brett, has experienced success with the new CSS Reboot redesign of his site. To show his thanks, he has written up the dissection of this site, part 1 and part 2. Rumor has it that Matt will be releasing a Wordpress theme based off of the design around mid December. Holiday sharing at its best.

9rules recently accepted round 3 submissions, and the community response was nothing short of amazing. Unexpectedly, over 500 sites applied to be part of the network. Continue to watch the results unfold while the 9rules team filters through emails, and the applicants continuously click on refresh waiting for theirs.

Kyle Neath (Warpspire) and Marco van Hylckama Vlieg (The Net is Dead) are giving back to the community by providing two templates for Typo, an open source content management system. Go enjoy Kyle’s sleek, simplistic Hemmingway and the customizable, feature packed Lush by Marco. Be sure to click the ladybug at the bottom!

Go to school, get good grades, get a job and work 9 to 5. That’s the life so many of are taught, and that we don’t want to follow. So it is always nice to see a fellow college graduate take the road of self employment, which is exactly what Darice, a new 9ruler, is attempting. Check out her design service, Froggy Studio.

business. “My son is now an ‘entrepreneur.’ That’s what you’re called when you don’t have a job.” Ted Turner

Business Discuss

Learning From Babble By Jamie Tibbetts


he new wave of innovative products that are letting users collaborate, do this and do that on the web are generating quite a bit of buzz in the industry. Interestingly enough, however, one of the fastest growing sectors online hasn’t been getting much attention. The online casual gaming market is the silent sleeper of the web, and it’s growing like gangbusters. The industry has grown from almost nothing in 2002, to well over $600M in 2004 in the U.S. alone. Industry experts anticipate that the market will reach over $2 billion by 2008 in the U.S. If you’ve been trying to think up the next big social/tagging/bookmarking/sharing website, it might be time for you to concentrate instead on the next big game.

The casual games that are getting most of the attention these days are the Java- and Shockwave-based games on portals like GameHouse, Yahoo! Games and Shockwave. However, the average game on these sites usually takes a team of 3 to 5 people about nine months to build, at a cost of around $100,000. And there’s the small hurdle of possessing the skill to actually program the game. These requirements put developing such a game out of reach for the vast majority of us. So is there any hope for us lowly entrepreneurial web developers? Have no fear. With a little ingenuity and creativity, you can do some impressive things.

The Origin of Babble A couple of years ago I had an idea for a fun game site. I didn’t really think about it much from a business model standpoint. I just knew that I liked playing Boggle, and I assumed I was not alone in the world. So I set out to create a word-finding game called Babble. I told myself I’d figure out how to make money later on if it became popular. Unlike regular games, which are limited only by the imagination and talent of the developer(s), mine was limited by the constraints of having only PHP, MySQL, and HTML at my disposal. I wanted to try to avoid JavaScript if I could. I decided that Babble would consist of

Learning From Babble


By Jamie Tibbetts

a single daily puzzle and players would have all day to find as many words as they could. It was a simple solution, and needed only a couple of PHP scripts and cron to automate. So far, so good. This wasn’t enough to differentiate myself from the other word-finding games out there, though, so I also gave each letter/tile a point value, thus assigning each word a score. And to add a little competitive spice to the site, I created a rankings page where players could see their rank among the other players. I thought that by appealing to people’s competitive spirit, I would keep the players coming back for more. After only a couple of weeks of obsessive PHP coding and a generous mention by Jason Fried on Signal vs. Noise, people starting signing up. Community is King


“The online casual gaming market is the silent sleeper of the web, and it’s growing like gangbusters. The industry has grown from almost nothing in 2002, to well over $600M in 2004 in the U.S. alone. Industry experts anticipate that the market will reach over $2 billion by 2008 in the US.”

game—added what can sometimes be the fundamental aspect of games and websites: community. At first, the chat log was simply a place for players to brag about the big words they were finding, but it didn’t take long before it became the lifeblood of the site. Players came for the game, but stayed to talk to other players in the chat log. New friendships were formed, and soon the chat log expanded beyond the game. It became a place not only to talk about the game, but to swap stories about what players did last night, talk about movies, and even pass around recipes. If you’re going to create a gaming website, this kind of friendly community is a great thing to achieve. It gives players a reason to come back to the site more often and to stay longer. Let the Passengers Drive the Bus Now, I’m not saying that you should let the inmates run the insane asylum and throw sinks through windows, but sometimes it’s best to sit back and let your users decide the direction of the site. Users will let you know which areas need polishing, which areas aren’t working, and can even surprise you by introducing entire concepts previously unforeseen.

It wasn’t more than a few days, however, before I realized that something was missing: friendly chatting (i.e., smack talking). I thought how competitive could players be playing a word game by themselves with no contact with the other players? I decided to create a chat log, which turned out to be the genesis of Babble’s success. of the site. Simply allowing players to talk It was the Babble players, not me, who were to each other while playing—whether about responsible for transforming the entire spirit The chat log soon became the foundation Babble or things completely unrelated to the of Babble and making it into what it is today.

Learning From Babble


By Jamie Tibbetts

Players began using the chat log to ask for and give clues to words. They even created their own Babble language to do so. Phrases like “Take the co6/27, drop the silent letter, and add 3 letters to the end—meaning an age, or a period in time” became commonplace. The main goal of players was no longer to get the top score, but to finish the entire puzzle with the help of other players. What started as a competitive web site slowly became one of peace, love, and cooperation.


as well as someone who’s looking for an evening’s entertainment when there’s nothing to watch on TV. I’m glad that I decided to make the puzzles on Babble last all day, because it allows players to play as often as they want for as long as they want. They know that if they leave, they can always come back and pick up right where they left off. People Like to Waste Other People’s Time I’m sure we’ve all seen links online that say “don’t click on this if you want to get any work done today” or “only click this if you have a few hours to kill.” Do you ever heed the warning? Some of you might, but I never do. I get giddy at the prospect of discovering a new pointless, addicting game that is going to devour my entire afternoon.

One player, Brandyjack, even wrote his own little script that would find all the words in a puzzle and spit back complete puzzle stats, which he would share with the other players by posting it to the chat log every morning. His daily puzzle stats soon became a fundamental part of playing Babble for most players. Players would clamor for it to be reposted all day long so that it would always be near the I mean, how many of us haven’t wasted time top of the chat log. playing the Whack the Penguin game? And how many of us haven’t created a Penguin Belt Everyone Plays Games…and Often that gets passed to whomever of your friends has the record for the longest penguin smack? Jupiter/Media Metrix reports that in 2004, What? Really? I’m the only one? Okay, but my casual gaming portals had the highest time point is, if you create a good, addictive game, spent per user online of any type of site. Play- gamers young and old will sing your praises ers don’t often spend long periods playing, throughout the web world. however. Casual gamers usually play multiple short sessions throughout the day, so games Making a Few Bucks have to be very adaptable to people’s schedules. Your game has to appeal to someone The big question is how to make money creatlooking to kill the last few minutes at work ing games. You have a few options:

QUOTE The ruling class of online gamers isn’t pimply young boys, it’s moms - and grandmas. Ruth Lyon is a 66year-old retired nurse in Honor, Michigan. Instead of watching Jeopardy or reading, she spends three or four hours a night playing euchre and bridge online with her son in California and her daughter in Ohio. And, since she lives tucked away in a cottage on a remote lake, she finds it a convenient way to make friends. — The Wrinkled Future of Online Gaming

Learning From Babble


By Jamie Tibbetts

1. Advertising. The most common examples are web games surrounded by typical advertising banners and badges. This is an easy way to go, but is probably the least profitable. Also, it can distract from your game play and annoy the players.


is fairly integral to the design process. I was mostly ignorant of my choices when I started Babble, and so was forced to learn the hard way what does and doesn’t work.

After struggling with a few attempts at using the advertising model, I decided upon the 2. Try Before You Buy. There are two major feature-restricted, try-before-you-buy option. versions of this revenue model. Both involve My goal was to create a set of “must-have” feahaving a free version of your game, but with tures that players would be willing to pay to different hooks to get players to pay. use. You can release a full-featured game with limits and game play, i.e., users can play for free until they reach a certain point in the game or a certain time limit. When the limit is reached, the player is prompted to pay a fee to remove the game play limit. Or you can release a feature-restricted game that provides players with unlimited free game play, but doesn’t allow them to access some features. Players are regularly encouraged to pay a fee to “unlock” the additional features. 3. Subscription Based. If you think your game has enough staying power, you can opt to charge a small monthly fee.

cessful on Babble. Some players upgrade to Pro just so they can have a buddy icon of their pet schnauzer, and others just so they can access the stats panel. Plan Ahead

Even the best ideas for games can have logistical problems if you don’t account for rapid growth. While you’re developing, continually ask yourself if the feature you’re currently working on will hold up to large influxes of The chat log was getting to be a pretty friend- new players. I didn’t do this when I originally ly place with people building up their online developed Babble, and I paid the price. personas and getting to know other players quite well. I decided that most of the regular The original incarnation of Babble had a players would like to have their own buddy hefty amount of unnecessary server load. Evicons and online profiles. ery time someone entered a word, the entire page would refresh, causing a player’s entire The integration of Brandyjack’s daily stats word list and the entire chat log to be fetched. round-up into everyone’s routine was also One day, Babble was mentioned on a large something I knew I could capitalize on. I de- blog and appeared in a major newspaper at the cided to give “Pro” users access to their very same time. The flood of new players brought own dedicated, interactive stats panel, allow- the server to its knees, gasping for air. ing them to view complete puzzle stats as well as chart their current progress. Ajax to the Rescue

I also threw in the ability for Pro players to have their own little country flags in the chat Deciding on a Revenue Model log. Babble was being played in over 15 countries, so I decided players would like to show You can always switch revenue models down off their patriotism. the road, but it’s a good idea to at least have a specific model in mind before you start. It The addition of the Pro features has been suc-

To ease the server load, I needed a solution that didn’t require the entire page to be reloaded every time someone entered a word or posted a message to the chat log. I could use frames, but come on, it’s 2005. I decided instead to use the great savior: Ajax.

Learning From Babble By Jamie Tibbetts

Treehouse 39

Switching Babble over to Ajax made it possible for players to submit words and post to the chat log without the need for a page refresh. Web server hits skyrocketed because the chat log now required a little timer script that pinged the server every few seconds to see if any new messages had been posted. This minor increase in server load was far outweighed, however, by the drastic load decrease on the MySQL server. Ajax gave Babble the ability to grow far beyond its original capacity.

themselves. Text can change on the fly. Images can move or be dragged around.

Ajax gives game developers the ability to incorporate pseudo-synchronous communications between the browser and the server. I say “pseudo” because it’s not truly synchronous, but if you set up a tiny Javascript timer script that continually pings the server via Ajax for new data, you can give the appearance of being synchronous.

Son of a beautician and an astrologer, Jamie Tibbetts gained wide fame after he wrote, directed and starred in the smash hit Rocky in 1976. Oh, wait, that’s Sylvester Stallone. Jamie is actually a self-employed web designer, who spends most of his time developing fun websites for fun people. All while trying to stay one step ahead of The Man and impending employment.

Turn-based, multiplayer games like Euchre or Hearts are now possible using Ajax. Low-level collision detection is possible. (I’m waiting for a crazy genius out there to create the world’s first Ajax Pong game.) As I write this, there are even a couple of Ajax-based MMOGs in the works.

So the next time you have a great idea for a Ajax is the Future cutting-edge social bookmarking/tagger/feed aggregator, you may want to think instead Ajax is opening up a door to a whole new realm about joining the rapidly-growing world of of possibilities in the casual gaming market. In casual gaming. Armed with a little scripting the past, if you didn’t know Flash or Java, you knowledge and some imagination, you can dewere relegated to one-way traffic—from the velop the next popular online game, and most user to the server. You really couldn’t get any importantly, have fun doing it. feedback from the server unless a subsequent request was sent to the server. y

Pages no longer have to be refreshed to see if new posts have been added to a chat log or discussion board—they both can update




Treehouse : Forty Media: how did you come up with that name? Fruitcast, too, while you’re at it. James Archer : The number 40 has a lot of symbolic connotations, usually involving trials or a long journey (40 days of mourning, 40 years in the desert, etc.), and I felt that it was a meaningful but subtle way to convey the strength and determination of our company. It also refers to my own personal goal of working a mere 40 hours a week at some point!

James Archer Interview James Archer is the CEO of Forty Media Corporation. He writes about branding, marketing, and business at Strange Brand, and about web design and development at The Return of Design.

The idea for “Fruitcast” actually came from my wife, if I recall correctly. (Thanks, honey!) I think we latched on to that name because it hinted at the tremendous impact that Apple has had on the podcasting community, but without getting so close to their own ideny tity that we get into trademark issues. It also prevented some strong visual ideas, which helped us during the design process. It has some negative connotations and opens us up JA : Following through with our desire to stay to easy puns and one-liners, but I think that lightweight and agile, the company has so far only helps lock the name into people’s brains. consisted of myself as the ringleader and about a dozen highly-talented contractors who I TH : How many people make up the core work with as their availability allows. of Forty Media? Is it just you or is there a regiment of web developers under your com- I have never wanted to allow Forty Media to be mand? Who are the people involved and what limited by my personal capacity, so I’m doing are their roles? everything I can to put the actual work into

the hands of other individuals. Our growth has been ridiculous over this past year, and our biggest struggle has been finding enough talented people to take it on. I’ve been turning down leads for the last month or so simply because we can’t grow fast enough. We just hired a full-time operations manager, though, and she’ll be starting in the next couple of weeks. We’re very excited to have her on board, since she’ll be able to relieve some of the pandemonium we’ve been experiencing lately as our business has exploded. We’ve also got a few brilliant designer/developers who we’re trying to woo into joining Forty Media full time. If you guys are reading this—I’ll throw in a video iPod as a signing bonus! TH : What are some of the qualities you’re looking for in your developers? How do you know when you’ve spotted someone good? JA : I look for people who are dedicated to their craft, not who enjoy it as a hobby and are thinking of making a few bucks doing it. I want the kind of person who reads books on the subject, follows the industry web sites, attends conferences, etc., rather than coasting on what they already know. What I’m really

James Archer



looking for are the brilliant people who will eventually become rockstars in their industry—but they may not realize it yet. Core skills aren’t enough, though. We need professionals, people who can deliver what they promise with a minimal amount of drama and excuses. And they have to be funny, too. As far as knowing when I’ve spotted someone worth investigating further, that usually happens after about 15 seconds of reviewing their work. I very seldom read resumes. It’s all about the portfolio. TH : So what are your feelings about outsourcing? Do you prefer to manage well or hire well? JA : Part of the reason that I started Forty Media was that I was tired of being managed by other people, and we try to give that same consideration to the folks who we hire. Find people you can trust, and then trust them.


“This may seem extremely obvious, or even blunt, but I can’t tell you how often this gets overlooked. Cash flow is the most important detail for any small business to manage. Managing a business is far too much work to be under compensated.”

want to run a business, or simply be a freelancer. It’s not too difficult for freelancers—some basic bookkeeping, maybe some tax help, and lots of networking will keep you operating quite well and leave you with plenty of time to focus on your work. If you want to run it as more of a business (which is the route we took with Forty Media), then you need to realize that running a business can be nearly a full time job, and may not leave you with much time to play in Photoshop. Though my skills definitely come in handy, I still spend the vast majority of my time dealing with marketing, administration, finances, project management, etc., and leave most of the actual creative and technical work to contractors.

I had a lot to learn, and I expect most new web entrepreneurs—of which there seem to be a large number lately—will be in the same situation. These are things you often can’t find with Google, so I’d recommend first hitting the library and reading up about small busiIt’s an idealistic viewpoint, because it’s hard nesses and startups, and then talking with to scale that way, but we’re going to hold onto TH : It’s not uncommon for web designers both a lawyer and an accountant to get the that approach for as long as we possibly can. to be a little uncomfortable with marketing, details on what you need to do for incorporaThe trick to finding good people is simply taxes, legal concerns, and other business-re- tion, accounting, etc. to get involved with the community and see lated issues. What would you recommend to who’s out there. There’s a lot of tremendous web entrepreneurs out there who aren’t very TH : Libraries are great, but at what point is new talent coming into the industry—the business savvy? it really necessary to get a lawyer and an actrick is just spotting it early before someone countant? else snaps it up. JA : It comes down to deciding whether you

James Archer




JA : As soon as you begin to feel like you’re in over your head. After a while you’ll start getting tax forms that you just have no idea what to do with, and that’s when you call an accountant and ask for some help. You don’t need them to do everything for you—probably just answer the occasional question, and then maybe take care of your year-end work.

ity checkpoint for us—we have to be careful about what we put out there simply because we know there are thousands upon thousands of people watching us. It works for us because we have a genuine desire to share what we have. Though we always knew that they could serve as a great marketing tool, that isn’t why we created them.

We’ve had one minor legal scuffle in which we brought in a lawyer just to make sure that we were in the right (we were), but apart from that we haven’t really needed one for anything. The incorporation process was straightforward enough that we didn’t really need help with that, either. I guess the trick is to make sure you’re running a very ethical firm—it’ll save you a heap on legal fees!

The real question about business blogs is this: “If your blog had to be anonymous, would you still maintain it?” If the answer is yes, then you’re on to something. Otherwise, you’re just dabbling with the latest marketing fad, and your audience will pick up on that. A genuine desire to communicate is essential.

TH : On Forty Media’s about page, you openly state that you’re “not cheap,” yet we TH : There are good number of skeptics out know business is good for you guys right now. there about the positive impact of blogging What’s the secret? How are you able to charge for businesses. You, however, run a brand- a premium, yet still have to fight customers ing and marketing blog at Strange Brand and off with a stick? Are businesses starting to rea web design blog at Return of Design. On alize there is a difference between web develvarious occasions you’ve talked about how opers? these blogs do a great job at bringing in business and traffic to Forty Media . Do you think JA : The web has reached a point of acceptance blogging can work for everyone? Why does it within society that businesses have moved bework for your business? yond the “any web site will do” mentality. It’s no longer enough to have something on the JA : We wouldn’t be where we are today if it web. It’s gotta be good. weren’t for those sites. The large audience that they have has not only given us a huge amount We’re able to charge a premium simply beof business, but it has also served as a qual- cause we work so hard at what we do. We use

the best talent available in the country (including many industry rockstars whose names you’d recognize), and we strive to bring genuine benefit to our customers instead of just delivering a lump of code and images. That may be overkill for many potential clients, and that’s fine—we pick our clients carefully, to ensure that they’re a good fit for our approach. It saves both us and them a lot of frustration. TH : From a business point of view, what role does designing with standards play? Are clients asking for accessibility now or do you still have to sell and promote standards in your sales pitch? How much competitive advantage does knowing standards give you against the competition? JA : We have a few people come to us because of our experience with standards-compliant development, but we don’t usually make it a significant part of our sales pitch, unless we’re specifically trying to get a project on which we’re up against other firms that don’t offer it. It can certainly be used as a strong selling point, but we typically do it just because it’s the right way to do things. We don’t take on projects on which we’re asked to create or work with non-standards-based code, simply because it’s usually not in the best interests of our client. If we don’t think something is great for them, we don’t want to touch it.

James Archer



TH : With the release of Fruitcast, you’re obviously betting on the rise of podcasting as an expressive medium on the web. What lead to your decision to build Fruitcast ? What are some of your favorite podcasts? JA : The idea popped into my head over lunch with a colleague, and after a bit of research I realized that nobody seemed to be doing it already. We got a small amount of funding to help us through, and we built it in a matter of weeks. I’m definitely excited about podcasting, which so far seems to be one of the fastest-growing technologies of all time. I just came back from the Portable Media Expo and Podcasting Conference , which was an eye-opening event for me. You can expect big things from Forty Media related to podcasting. My favorite podcast would have to be Merlin Mann’s 43 Folders podcast. He keeps it brief, amusing, and insightful, and it’s a perfect role model for anyone out there looking to start their own podcast. TH : In a matter of weeks? Wow, what technologies did you guys use to make Fruitcast happen? What was your secret to getting it out so fast? JA : We rounded up the most brilliant and hardworking people we could find, gave them a


nearly impossible deadline, paid them for their trouble, and then did a lot of magical project management juggling to keep it all straight. In the final week, I think we had about a dozen people across the country scrambling on various parts of it.

other projects together in the near future.

The decision wasn’t hard—if it weren’t for that small chunk of initial capital, we wouldn’t have been able to take on the project, since it would have settled down to the bottom of the priority list along with the dozen other great It’s a testimony to their talent and profession- ideas we’ve got in the works. Clients have to alism that it all came together as smoothly as come first, and that capital turned an abstract it did. I particularly want to point out the de- idea into a paying client. licious design work of Joseph Wain and the equally beautiful template code produced by TH : A number of design and consulting Mike Rundle. They both did a phenomenal companies (37signals , BlinkSale , Adaptive job (as they always have for us in the past), Path , and you) have ventured into the web and are absolute pros in the way they approach applications business. What’s responsible for their work. this trend? Are you tired of consulting or is there gold at the end of the web app rainbow? For the backend software, we used an in-house Do you see Fruitcast as your chance to get out PHP framework that is roughly equivalent to of the consulting business? Ruby on Rails. I did most of the software development myself, simply because I couldn’t JA : While many of our side projects take the find a software developer who was available form of web applications simply because we and who could code it as quickly as it needed have a lot of expertise in that area, it’s mostly to be done. coincidence that we’re running alongside that particular bandwagon. TH : You mentioned receiving some funding. Is that venture capital or another source? The goal of our web client work has always How did you approach decision to take mon- been to generate capital for other opportuey to build your service? nites, and I’ve always seen Forty Media as an umbrella for a wide variety of interesting JA : It was just a smidge of VC, enough to and rewarding endeavors. Web design is just help us take it on as a project and offset other Phase I, and we’re now scratching the surface client work. It has worked out to be a great on Phase II. It’s all part of the master plan. partnership, and we’ll probably be doing some

James Archer



I don’t think we’ll ever get out of the consulting business, though. It keeps us sharp, and forces us to learn from and adapt to situations we otherwise might not face. The skills we learn on client projects benefit us greatly in our own work. TH : It’s hard work making a web service on the side, especially when you have a ton of other clients you’re trying to deal with. Did you just make yourself a client to dedicate time to the project? What qualities does a company need to help them make the transition effectively? JA : It was quite a juggle for a while there. We were pretty much at capacity before we started Fruitcast , and during the past few weeks we’ve unfortunately had to cut loose a few clients (as gently as possible, of course) simply because we weren’t able to serve them properly with our current workload. If you see the far-off vision and you’re willing to do what it takes to make it a reality, go for it. If you value your video game time, however, then maybe building big side projects isn’t the right path for you. It just depends on what you really want out of your business, and how hard you’re willing to work to accomplish it. TH : If you were to start from scratch, would you start a product or services company? Why?


JA : Definitely a services company. We’re all familiar with the frustrations and annoyances of dealing with clients, but the part that many people seem to miss is that all those problems are good for you. Client work gives you an education that absolutely cannot be replaced by books, web sites, or advice from your pals. TH : Is there any advice you wish you’d known before starting out that you would like to leave for the up-and-comers out there?

the contract; it’s our commitment to help them solve a problem, to make the hurting stop. When you make that commitment, you’ve got to do your best to follow through with it, or you just make it worse. Because of our very high workload over the past couple of months, we were recently in the unfortunate position of having to let a client know that we wouldn’t be able to help them anymore. We had tried like crazy, but it came to the point where our other obligations prevented us from giving them the time they deserved.

JA : Networking. Most of us hate going out and talking to strangers, but it’s absolutely essential for creating a thriving business. Attend networking functions. Talk to everyone you We refunded their money (we lost several can. Get out of your comfort zone. That one hundred dollars on contractor fees) and we’re small step will revolutionize your business. actually still working with them to deliver few remaining pieces so they can get it finished TH : When dealing with clients, what prob- up with a minimal amount of pain. They were lems do you run into most? How do you han- upset, naturally, but I think they understand dle late requests, unsatisfied clients, and cre- that we were trying to do the right thing for ative differences? How do you ensure clients them. receive the product you want to build and the product they want? Give clients the respect they deserve, and don’t play games with them. Don’t make false JA : That’s always a tough one, because I’m promises. Don’t give them overly high hopes. the kind of guy who obsesses about making Let them know the reality of the situation. If sure everyone’s happy. It’s not always possible they can’t deal with it, then you should probwith client work, but we sure try. ably let them know that you’re not the right firm for them. When you take on a client, you’ve got a say cred obligation to take care of them. There’s a commitment that goes beyond the terms of

Book Review P u r c h a s e B oo k

Freakonomics Review by Chris Campbell


hat do sumo wrestlers and public school teachers have in common? Why do crack dealers live with their moms? Why doesn’t reading to your children increase their chances of success, but having books in the house does? Is a gun or a swimming pool more dangerous to your children? In an effort to answer these questions and more, Steven D. Levitt and Stephen J. Dubner Guy collaborated to write a New York Times bestseller, Freakonomics. Freakonomics isn’t your typical economics book and asks both tough and seemingly bizarre questions in order to understand the role incentives play in our

decision making and the validity of “conventional wisdom”. Studying the importance of abortion when reducing the crime rate or the value having of a “white” sounding name will stir your emotions, while knowing the percentage of participants in an online dating website who believe their looks are above average probably won’t change your life too much. What makes Freakonomics particularly enjoyable is its lack of any unifying theme other than the pursuit of answering seemingly unrelated real life questions. A typical chapter begins with a general question, which is then analyzed using a mountain of data. Levitt

takes no sides and uses economics as a means to define how the actual world works, not necessarily how we would like it to work. Although Freakonomics is often located in the businessas section, anyone who enjoys learning will enjoy the book. Steven D.Levitt isn’t your every day economist and Freakonomics isn’t your average economics book. If you enjoyed Blink, are one to challenge the experts “conventional wisdom”, and like to know more about the world, this book is highly recommended.

ABOUT THE BOOK Author: Steven D. Levitt, Stephen J. Dubner Hardcover: 256 pages Publisher: William Morrow Language: English ISBN: 006073132X

Best of the Web Business Links 路 Dec 2005

1. 2. 3. 4. 5.

How to Fund a Startup

Ten Rules for Web Startups

How to Manage Geeks

Full-time freelancing: 10 things learned in 180 days

When clients (and bosses) go bad...

digest. â&#x20AC;&#x153;Nothing is really work unless you would rather be doing something else. â&#x20AC;? Sir James Barrie

Digest S e e D e mo Download Files

Dynamic Resolution Based Layouts

Visit Original

By Kevin Hale


n my previous feature on CSS layouts, I talked a bit about the different CSS layout approaches available to a designer when building a web site. In this feature, I’d like to focus on a dynamic resolution dependent layout implementation that I think provides a strong alternative for those trying to find a balance between fluid and fixed layouts. With dynamic layouts, the possibilities really are quite endless. You can change 3-column layouts to 2-column layouts, provide appropriate font-sizes to increase legibility, and even reward higher resolution viewers with extra content and larger images. And no, you don’t have to put php in the CSS or lose the caching benefits of using external stylesheets to make it work.

scaled exactly the way I wanted them to and tiny fontsizes on higher resolutions, which were okay on lower resolutions, killed content legibility. When I tried to drop 800x600 layouts, I ended up inconveniencing users that didn’t maximize their browser windows. Until I saw The Man in Blue’s article on Resolution Dependent Layouts, I felt fixed layouts failed to take advantage of the dynamic medium of the web and fluid layouts failed to truly adapt to the variety of viewing methods. While The Man in Blue’s implementation is a great piece of work, I think we can create our own version that’s a bit more modular and easier to develop for both programmers and designers. Implementation

Before I really got into JavaScript, I was always frustrated by how I could never really get a fluid layout The first thing we want to do is to place inside the to look right across all the different resolutions us- head element all the stylesheets we’re going to be callers were using to see my sites. Columns never really ing on to determine each dynamic layout. Here’s an

See It In Action :

I’ve built a quick demo page showcasing how a dynamic resolution dependent layout can offer adaptive alternatives with a very basic XHTML wireframe. Just resize your browser to see the layout change accordingly. What’s nice about this method is that I don’t have to load a completely new CSS file from scratch for each layout. I only need to load the rules needed to adapt the default layout to the browser width size. It’s not so much a stylesheet switcher as it is a stylesheet adapter.

Dynamic Resolution Based Layouts


By Kevin Hale

example set from the demo:


function dynamicLayout(){ var browserWidth = getBrowserWidth();

<link rel=”stylesheet” type=”text/css”

//Load Thin CSS Rules

href=”css/default.css” title=”default”/>

if (browserWidth < 750){ changeLayout(“thin”);

<link rel=”alternate stylesheet” type=”text/css”


href=”css/thin.css” title=”thin”/>

//Load Wide CSS Rules if ((browserWidth >= 750) && (browserWidth <= 950)){ changeLayout(“wide”);

<link rel=”alternate stylesheet” type=”text/css” }

href=”css/wide.css” title=”wide”/>

//Load Wider CSS Rules if (browserWidth > 950){

<link rel=”alternate stylesheet” type=”text/css”


href=”css/wider.css” title=”wider”/> }

Notice that we’ve added title attributes to all of the link elements and designated the dynamic CSS stylesheets as “alternate stylesheets” in the rel attribute. Be sure to indicate your primary CSS stylesheet by The heart of our process is in the browser width detection on the first setting its title attribute to “default.” The “default” stylesheet is used line and we’re going to use The Man In Blue’s getBrowserWidth() as the foundation for all of the dynamic layouts and if JavaScript is function to help us find it. Check out the code here: disabled, this will be the stylesheet that the site will use to display the page. If you use multiple stylesheets to build the default view of your function getBrowserWidth(){ if (window.innerWidth){ site, you’ll want to title all of them as “default” so the script doesn’t disreturn window.innerWidth;} card them when the layout is dynamically altered. If you want to adapt else if (document.documentElement && document. this method to create a true CSS switcher, just remove the “default” documentElement.clientWidth != 0){ title attribute and the script will disable the foundation stylesheet return document.documentElement.clientWidth; } completely and use only the rules in the alternative stylesheet. }

else if (document.body){return document.body.

Next, we want to include the dynamiclayout JavaScript file:


<script src=”scripts/dynamiclayout.js” type=”text/



Inside the JavaScript take a look at the dynamicLayout function.

return 0;

For the demo, I’ve set it up so the site adapts to 3 different resolution scenarios based on browser width: smaller than 750px, larger than 750px (but smaller than 950px) and larger than 950px. The changeLayout

Dynamic Resolution Based Layouts By Kevin Hale


Dynamic Layout Demo Screenshots

Dynamic Demo : With dynamic layouts, the possibilities really are quite endless. These screenshots show how the demo page goes from a 1-column layout to a 3-column layout with appropriate font-sizes to increase legibility when the user resizes his browser.


Dynamic Resolution Based Layouts


By Kevin Hale

functions that are used in dynamicLayout correspond to the title attributes in our alternative stylesheets. As you can see, it’ll be pretty easy to tweak the if statements to your own needs. Now, inside of your “alternative stylesheets”, you’ll want to specify the rule changes needed to change your default layout to adapt to that particular resolution scenario. The CSS rules in the alternative stylesheets are applied after the default CSS file is loaded so they’ll override any rules that don’t have !important selectors applied to them. While you could redo every CSS rule in the default stylesheet, often layouts don’t need many changes to make them work in different situations. In the demo, for example, while the “default” stylesheet uses over 10 rules to create the foundation design (some sites use over 100 rules), the “thin” CSS stylesheet need only to change a few rules and selectors to make the site work on small browser widths:


This is one of the key strengths to using this method for creating dynamic layouts. We can easily switch from fixed to fluid layouts based on what’s going to be best for the user and each layout is conveniently contained in it’s own external file, so we only need to specify the changes needed to adapt a design for a particular situation. This makes it easier to understand, faster to design (because it reduces CSS redundancy) and better to develop with because it keeps the presentation layer neatly separated from the behavior layer. To finish up, we’re just use John Resig’s winning addEvent function to run our functions when the page is loaded and when the users resize their browser windows. //addEvent() by John Resig function addEvent( obj, type, fn ){ if (obj.addEventListener){ obj.addEventListener( type, fn, false );

/* ----- Thin CSS Rules ----- */

} else if (obj.attachEvent){


obj[“e”+type+fn] = fn;


obj[type+fn] = function(){obj[“e”+type+fn](


window.event ); }


obj.attachEvent( “on”+type, obj[type+fn] );



line-height: 125px;


} #secondaryContent{

//Run dynamicLayout function when page loads


and when it resizes.

line-height: 125px;

addEvent(window, ‘load’, dynamicLayout);


addEvent(window, ‘resize’, dynamicLayout);


After QuirksMode held the addEvent() recoding contest, John Resig emerged as the victor with his rendition of addEvent(), which maintains this keyword. To read more about the history of addEvent(), read Treehouse’s November 2005 issue.

Dynamic Resolution Based Layouts


By Kevin Hale


If you feel changing the layout on resize is a bit too var defaultSheet = document.styleSheets[0]; jarring, just remove the second addEvent call to dy- defaultSheet.insertRule(“#container{width:500px;}”); namicLayout on resize to limit layout adaptation to occurring only when the web page is first loaded or re- or freshed by the user. One nice thing about using these functions is that you can easily adapt the code with a totalRules = defaultSheet.cssRules.length; little cookie magic to create a better stylesheet switch- lastRule = defaultSheet.cssRules[totalRules - 1]; er to provide your users the choice of what layout op- defaultSheet.addImport(“/css/wide.css”, lastRule); tion they prefer. Yeah, well too bad for us. Most of the syntax for manipulating CSS rules is forked between IE and Gecko Final Thoughts browsers and Safari refuses to change the page renBefore I leave you be, I’d like to take some time to dering even though it recognizes the methods. It’s sad talk about how I think this implementation should to see how this prevents a lot of exciting possibilities have been created. Ideally we should be manipulat- and I hope the recent JavaScript renaissance will help ing the @import CSS rules to choose the appropriate people recognize these limitations so they can ask for stylesheet to tack on the end of the default CSS file. them to be fixed. If you want to read more about the Unfortunately, W3C’s specifications for dealing with problems with CSS rule implementation in JavaSCSS rules in JavaScript are so badly implemented cript, check out Peter-Paul Koch’s article on the subacross the browsers that we have to use a hacked CSS ject. Anyway, I’m off my soap box now. Have fun with stylesheet switcher function based on disabling link dynamic resolution dependent layouts and be sure to elements from 2001 to make dynamic layouts work keep in touch with your favorite browser vendor about sanely. C’mon people, help me with the magic mak- CSS rules! ing. I honestly believe that proper CSS rule implementation by the browser vendors could create the low barrier of entry needed to get a majority of designers to the next level of web development: DOM manipulation. It would be so much easier to learn how to manipulate the presentation layer, if we could use the same vocabulary for making changes in CSS in JavaScript. For example, how nice would it be to be able to use following:



The rule and cssRule objects are different object model names for the same objects. For IE4+, the object is known as a rule (and a collection of them the rules collection); for NN6+/Moz/Safari (and MacIE5), the object follows the W3C DOM recommendation, calling the object a cssRule (and a collection of them the cssRUles collection). A rule object has two major components. The first is the selector text, which governs which element(s) are to be influenced by the style rule. The second component is the style definition, with its set of semicolon-delimited attribute: value pairs. —JavaScript Bible 5th Edition

Digest Visit Original

A Quick Guide to Prototype By Ryan Campbell


with simple examples of how to implement them. This guide is meant to be used hand-in-hand with the JavaScript’s increasing popularity throughout the web more exhaustive unofficial Prototype documentation makes it more important than ever to make sure our by Sergio Pereira, and the documenclient side code is implemented with a nice mix of tation wiki, which I highly recommend every serious stability, speed, and reusability. One of the best ways JavaScript / Prototype developer read. for accomplishing this is to use a simple library and syntax to use as a foundation for every project. Thank- Getting Started fully, Sam Stephenson created an amazing library of functions that we can rely on called Prototype.js to After you have downloaded the files and placed them ease our JavaScript development practices. in your preferred directory, all you need to do is include them in your HTML document like so: After our readers pointed out in an previous feature that our frequent use of Prototype syntax was mak- <script src=”/scripts/prototype.js” ing things a bit confusing, we decided it would be type=”text/javascript”></script> best to create a quick reference page for the library to help ease the learning curve for a lot of develop- Boom. JavaScript just got 10x easier to develop. Now, ers out there. The following tutorial will explain the let’s looks at some of the cool new weapons you just most common methods used in Particletree projects acquired.

Protype Documentation • Unofficial documentation • Scriptaculous Wiki • Library overview • Ajax with Prototype

A Quick Guide to Prototype


By Ryan Campbell


$() Function

HTML fields:

The most used and convenient function, $(), provides an easy way of getting a handle on a DOM element. Normally, if you would like to access an element in the DOM, it would look like this:

<input type=”text” id=”textfield”

node = document.getElementById(“elementID”);

name=”textfield” /> <textarea rows=”5” cols=”5” id=”areafield” name=”areafield”> </textarea> <select id=”selectfield” name=”selectfield”>

//Using $(), we can shorten it up.

<option value=”1” selected>One</option>

node = $(“elementID”);

<option value=”2”>Two</option> </select>

Other than being short and sweet, the $() function is <input type=”checkbox” id=”checkfield” also more powerful than document.getElementById() name=”checkfield” value=”1” checked /> because the ability to retrieve multiple elements is built into the function. We can then access the values in the form easily by using the $F() function. allNodes = $(“firstDiv”, “secondDiv”);

for(i = 0; i < allNodes.length; i++) { alert(allNodes[i].innerHTML); }

$F(“textfield”); // returns the value of the text input $F(“areafield”); // returns the value of the textarea

In this example, we see the $() function now returning an array of our elements, which can then be accessed with a simple for loop. Form Helper Functions Yes, not only are forms a pain in the ass from an HTML and CSS perspective, but also on the JavaScript side of things. Prototype.js provides useful and creative functions that make dealing with forms almost fun. The $F() function returns the value of the form element or ID passed in. If we put together the following

$F(“selectfield”); // returns the selected value of the select $F(“checkfield”); // returns undefined or value if not checked

The ability to get a value regardless of the control makes processing forms incredibly easy in most circumstances. There are only two drawbacks I could find with this function: 1) there is no easy way of accessing the selected value of a radio group (only the individual value of a single radio element) and 2) it is not possible to pass in multiple ID’s, like you can with the $() function.

JavaScript Libraries • Prototype – A core library that tries to provide the essential functions. • Scriptaculous – Creates powerful animation and Ajax techniques that are easy to implement, and it comes with wonderful documentation. • Moo.fx – The lightweight champion of them all, moo.fx weighs in at 3kb. The goal of the library is to provide basic animation without bloating your page. • Rico – Provides essential functionality for quickly building Ajax sites. It supports common functionality such as Drag and Drop, and animations. • Behavior - Unobtrusively lets you use CSS selectors to specify elements to add javascript events to

A Quick Guide to Prototype


By Ryan Campbell

*Another function, Form.getElements() will return an array of every form element, regardless of the type. allNodes = Form.getElements(“myform”); for(i = 0; i < allNodes.length; i++) { //do something to each form field }


totype had added to it to the arsenal as an extension of the document object. It behaves exactly like document.getElementsByTagName(), the only difference being that it checks for className. allNodes = document.getElementsByClassName(“red”); for(i = 0; i < allNodes.length; i++) { alert(allNodes[i].innerHTML);

In this example, we’re getting every element from a } form with the id of myform. If you want to add an onclick effect, or a help window popup to each form An array is returned containing all elements that field, you can loop through as shown above. match the given className. This will also work with elements that have multiple classNames, which is nice. The next method we will look at is Form.serialize(). getElementsByClassName() has become a function When building an Ajax request, you often need to used in nearly every project around here, mainly to format your own post string to pass the data. When attach DOM events so I suggest every developer give the form is submitted, that string is built. serialize() it a try. makes the process easy. Element Helper Functions allNodes = Form.serialize(“myform”);

The Element Object provides a load of helper functions (increasing with each release) that assist in comBuilding the string for us helps out, but what makes mon DOM manipulation practices. Some of these the method even nicer is that it is not biased towards functions create no new ease, while others simplify the type of field. We saw before that $F() had some 10+ lines of code into one call. Let’s take a look at problems with radio groups, but serialize() processes some examples. all of the values correctly for any type of field. These are not the only form methods available, so go check Retrieving the height of an element without the helper: out the Sergio’s documentation for the rest. // returns field1=value1&field2=value2&field3...


getElementsByClassName Why getElementsByClassName()is not already built into JavaScript is beyond me, but it’s not and so Pro-

And now with the helper: Element.getHeight(“first”)

COMMENT Particletree reader, Justin Palmer, points out that getElementsByClassName functions similar to getElementsByTagName except that getElementsByClassName is always referenced from the document object: “When you want to specify a parent object to start from, the tagName approach would be to retrieve the parent node first and then parentNode.getElementsByTagName, but with the className approach you can’t do this, you need to pass the parent as the second argument in the function (e.g. getElementsByClass Name(‘foo’, ‘parentNode’);”

A Quick Guide to Prototype


By Ryan Campbell

In this case, the helper arguably provides no benefit. Now, what if we wanted to remove a className from an element? Here is the long way (taken from the Prototype.js source code): element = $(element); if (!element)


create code that will work regardless of the different JavaScript implementations across browsers. Instead of doing object or browser detection on your own, this function will attempt to execute one path of code until it encounters an error, and then switch to the next path. return Try.these(


function() {

var newClassName = ‘’; var a = element.className.split(‘ ‘);


for (var i = 0; i < a.length; i++) {

jkgjhgjhg //intentional error alert(“firsterror”);

if (a[i] != className) {

return 1;

if (i > 0) },

newClassName += ‘ ‘;

function() {

newClassName += a[i];



return 2;

} }

element.className = newClassName; );

And now with the helper function: Element.removeClassName(“elementID”, “red”);

In the example above, the first path will stop executing at the intentional error. Knowing that, it is important to be cautious with our code because everything before the error will get executed, we must be careful not to execute code twice (once in each try). Overall, Try.these() is not a function we use often around here, but it is nice to know it exists and how it functions.

Nice, eh? Unlike the first example, most of the helper functions save a lot of time and effort by making common tasks easy. And for the sake of consistency, it may be best just to use the Element syntax throughout the project. For a full list of helper functions and how to use them, check out Sergio’s Prototype documenta- Ajax Support tion. There is no shortage of Ajax support functions in this library, and I would like to give you a look at how Try.these Function we primarily create Ajax applications with the help of Try.these() is a great function for helping developers Prototype.js. Taken from the documentation, we can

Element Helper Functions For detailed documentation of the Element helper functions, go to the unofficial Prototype documentation. Here is a list of what you can expect: Toggle: Switch an element between show and hide. Hide: Hide an element using display property. Show: Show an element using display property. Remove: Remove an element from the DOM. addClassName: Add a className to an element. Appends if one already exists. hasClassName: Similar to getElementsByClassName, but allows you to perform a check on one element. removeClassName: Remove a className from an element, and it works with elements that have multiple classNames. cleanWhitespace: Removes white space from elements that are text nodes

A Quick Guide to Prototype


By Ryan Campbell

see a normal Ajax request can be made as follows: var myAjax = new Ajax.Request( url, {method: ‘post’, parameters: data, onComplete: ajax_ response}


After you make an Ajax request, the response is always sent to ajaxresponse(). From there, another Ajax request will be made if bHasRedirect is set to true (a global variable), and if not then the proper code will be executed based on a global array of functions and originalRequest.responseText() (the return value). PeriodicalExecuter


Where method is post or get, parameters is the name/value paired que- Once the PeriodicalExecuter object is initialized, it repeatedly calls ry string, and onComplete is the function that should be called when a desired function at a given interval. This comes in handy when you everything is finished. Once the core functionality is understood, it is wish to auto update an Ajax portion of your site. easy to make repetitive Ajax calls by creating our own functions that utilize the library. First, a simple function to process the Ajax request. function periodicalUpdate() { new PeriodicalExecuter(refreshNews, 10);

function ajax_request(url, data) {


var myAjax = new Ajax.Request( url,

function refreshNews() {

{method: ‘post’, parameters: data, onComplete: ajax_ response}

//Ajax code to grab news and update DOM }

); }

And after the request is finished, send it over to ajax_response(). function ajax_response(originalRequest) { if(!bHasRedirect) { //process originalRequest.responseText; } else { bHasRedirect = false; ajax_request(originalRequest.responseText, “”); } }

The PeriodicalExecuter constructor expects the function to call as its first parameter, and the time interval as its second. Don’t get confused with the time though - the common setInterval() is handled with milliseconds, but in this function we’re dealing with seconds. Also note that while this example assumes Ajax is involved, it can update the page for any reason. Prototype.js also has a Ajax.PeriodicalUpdater class that can ease the process when dealing solely with Ajax. Additional Enhancements While I can’t cover every single function or method that Prototype.js offers, it is still important to emphasize some of the ones not covered here (all of which can be found in the documentation).

A Quick Guide to Prototype By Ryan Campbell

Treehouse 58

observe - This method functions like ad- practices of the company, but I trust that ProdEvent(), and should be used to unobtrusively totype.js will continue to be tested and imattach events to the DOM. proved upon. Given that, and testing within my own projects, I confidently use this library User Interaction - You can find built in glo- in nearly all my projects. bals, such as KEY_TAB to evaluate what key presses the user is making. Additionally, you Prototype.js more than doubles the functioncan find out the coordinates of the mouse, and ality listed in this tutorial, and it is definitely if it has been clicked. worth checking out. If you’re scared of the file size (it’s 30k as of this writing), rememClass Creation - Why stop with what Proto- ber that you can always take out classes that type.js provides? Using the same syntax and you don’t use (minus the few that have defunctions, we can build our own classes to pendencies) and/or compress your JavaScript keep things consistent. Adding a constructor files with PHP before serving them out to and additional methods has never been easier. your user. Also, once you have tried a few of Lookup Class.create() in the documentation. the methods, the rest are easy to learn, so the learning curve is very minimal. Basically, there Wrapping It Up is no excuse not to give it a try. The examples shown above are how we handle things at Is it acceptable to use public code/libraries Particletree, and should not be used without when you do not know the author and do not testing. Remember, this is meant to be an inintimately understand what happens behind troduction to Prototype.js, so always reference the scenes? My answer is yes, as long as you and give credit to the unofficial Prototype thoroughly test the code and trust the per- documentation and the docuson/community that is behind the develop- mentation wiki for all of the hard work put ment of it. In the case of Prototype.js, trust is in to find out the various methods. As always, built from two sources. First, Ruby on Rails if you find any mistakes or possible improvehas integrated prototype support. Since Ruby ments, please point them out. on Rails has a respectable developer base, it y is likely that many bugs have been found and ironed out to make Prototype.js more stable. Second, the developer works for 37signals, who happen to employ the creator of Ruby on Rails. Not only do I trust the development


Marketplace Find what you love. u

Amazon - Web Developer, Payments and Credit Card Team Would you like to do pioneering work in on-line payments, affinity and community technologies, and personal on-line financial management? Are you excited by Web 2.0, ServiceOriented Architecture (SOA), and the next generation of web-based applications? Do you ever look at your bank statements or an on-line check-out process and think “there has got to be a better way”? REA – Web Designer/Developer We are an advertising agency located in Chelsea looking for a web designer/ developer. You must be up to date on current web design best-practices. You should be familiar with web accessibility, usability, and browser compatibility issues. You should be able to develop clean, tableless web sites using valid XHTML and CSS. Hand coding is preferred.

Responsibilities include designing and developing html and flash websites, maintenance of existing websites, creating html emails, and flash animations. Please send a resume, salary requirements and a URL to an online portfolio to Micro Persuasion – TypePad Design Jockey Micro Persuasion is looking for good web designers who can work within TypePad to create compelling templates that we can later tweak (e.g. easily add things to sidebars, etc.) If you fit this description, send an email to with samples of your work and pricing info. ESPN – Art Director The Art Director,, is a nonmanaging position that contributes to the design of the leading sports web site. Working under the supervision of the Design Director, Art Directors are responsible for the look and feel exploration, conceptual and visual development as well as the final execution of design directions. Typically Art Directors “own” one or more pages of This important role requires broad knowledge and advanced skills in visual design, information architecture, user interface, web standards, and a solid understanding of available client-

side technologies. Qualified candidates will share our belief that design is as much about behavior and emotion as it is about utility and ease of use. Art Directors provide leadership in concept development, creation of original art and wire-frames, project design/development, and QA. They are responsible for the development of innovative navigation systems, interface designs, typography, and page layouts for web packages and other interactive media. NPR - Interactive & Multi-Media Web Designer Responsible for daily art and design needs for, the online presence of National Public Radio.Three years professional experience as a graphic artist or designer, preferably in a news or other consumer publishing environment which employed an enterprise level content management system; three years professional experience in Web design and/or graphics; demonstrated ability as an illustrator; specifically experience creating illustrations, information graphics and other types of representational artwork; command of Photoshop, Illustrator, and Flash; demonstrated skill using Flash to create interactive information applications and graphics.

Treehouse12 05