How to dissect a site...or how to learn without plagiarizing

I’ve seen a fair number of posts about plagiarism on popular design blogs (mezzoblue , airbag, and shauninman.com for example). In every case, it seems as though the excuse thrown out has been some variation of “I was just using it to learn”, or “it’s not on a public site”.

Even assuming no malicious intent, the bottom line is that there’s no excuse for publicly hosting someone else’s code without their permission or knowledge. Period.

I’m not suggesting that we shouldn’t learn from others. Some actively encourage it. Take, for instance this note in the source code of Jon Hicks’ site:

look, dissect, ask me questions, but don’t steal
Everytime someone steals a design, God kills a kitten.
Then he comes after you, in the guise of an old woman.

So how to learn?

Drink from the Source

There’s a remarkable tool built in to every browser out there: View Source. More often than not a simple poke around in the source of a site (easily done while viewing it live) is perfect for determining how a particular design element is put together.

If you’re using Firefox (what am I saying, of course you’re using Firefox), then there are a number of great tools to make life easier. Go get the Web Developer extension and install it. Do it now, then come back. I’ll wait.

I like to think of it as the web dissector extension. Among the most useful features is the live editing of CSS: you can tweak a site’s CSS and see the presentation live in the browser, without making any permanent changes. Nothing, and I mean nothing, is easier to use when dissecting a site…and you can do it live, without any real impact on the host. Try it here on this site. With the web developer extension (you did run out and get it, right?), select Edit CSS – in the default configuration, you’ll see this page’s stylesheet scroll down to the #head and replace the url listed there with a url of your choosing – perhaps the Google Logo (http://www.google.com/images/logo.gif). Pretty cool, eh?

Sometimes, though, that’s not enough. Then it’s time to

Take it offline

This is where people seem to get themselves in the most trouble (at least those who are truly attempting to use this as a learning exercise, and not just co-opt the design for their own use). If you’re going to grab an entire page, then take that entire page offline. There are a variety of methods to do this – most browsers feature some sort of Save functionality, which grabs the html and any associated files (images, styles, etc.) and saves them to a directory of your choosing. You can then open that local copy using File->Open in your favorite browser. No need to be running a web server to do this. Take care when working with offline files, however, as there may be links back to the source site.

Remember, Stealing’s wrong

The whole idea here is to learn learn from others, not to pass their work off as your own. At least that should be the goal…
Then again, I’m a hack, so what do I know.