Colophon

The Where's and Why's of Building fatDOG.

Introduction

It's tough for me to imagine you actually give a damn about how the fatDOG web page works behind the scenes. That's essentially what the colophon is: my chance to tell you the stuff that went into making this site. If you're not on your geek wavelength at the moment, you might not want to read this.

But if you are, oh boy....

Typeface and Colors

It's hard to specify information about colors, because you may have gone into the customize section and chosen some colors of your own. If you'd like information about the colors that appear on a given scheme, you should attempt to download style.css and check it out. That is the style sheet that runs behind the default color scheme.

In general, type is black on white backgrounds. The idea behind the background colors is that there are normally two varying shades of the same or similar colors that appear in the headers/footers and the actual background.

Large headings are 16 point, bold. Subheadings are normally a different color and appear in 10 point, bold. Headings on the sidebars are traditionally 8 point and bold. The bottom margin on all headings is 0 point. Speaking of fonts: the default font used for the site is Tahoma, which may appear as Verdana, Arial, or Helvetica depending on your system's configuration. Tahoma is a pretty standardized font nowadays.

The fatDOG logo is done in Arial Narrow, bold ("fat") and Tahoma, orange ("DOG"). The font in the header descriptions is Trebuchet MS.

Photography

Photos are by Colin McCloskey, Drew Housten, or one of few other sources. Splash images are all designed by Colin McCloskey, with the exception of the "Drew Cyborg" image which was contributed by Mike Lee.

McCloskey's camera is an Olympus D-510Z digital camera. It offers 2.1 million pixel images, though the photos shot are typically of only 640x480 pixels with a 100dpi depth.

The photographs are used to bring a face-to-face appeal to the articles that are written on the mainstream. It's more fun to read a piece with the author looking right back at you, anyway. The other idea behind the photos is that we can find a slightly embarassing photo of an author and slam it onto all of their articles with comedic results. And I think that's very true.

Construction

The site is designed on paper completely before anything else. My meticulous geekiness shines supreme if you give me a pair of pens and a piece of paper when I've got an idea for one of these designs. I normally draw a number of pretty detailed sketches that position a few of the features of the site and make some mention of how specific elements of the page will function (or be eye-catching).

Next step is to create a mockup image, which is just that - an object-oriented image file that I build in Corel Photo Paint 10. This file becomes the scratch-plate for ideas about buttons, alignment, and finally - colors. Some retouching of a few things is normally required, but since my design style normally relies on cut lines and edges, there is never a good deal to rebuff.

Finally, I splice the mockup into a set of images and create an HTML file. This is where I figure out how to build a web page to immitate the drawings. Normally pretty tricky, this is done with a text editor (TextPad 4) and a set of browsers (Microsoft FrontPage has been completely removed from the design phase with this version and is only used as an uploading and file-containing vessel). I always attempt to create pages that function in Internet Explorer, Netscape, and AOL. Just recently, I've begun to tailor to Opera, as well.

This is the phase during which I really hammer out some geekiness and write code to make things work. The bulk of the design is done in HTML, CSS (Cascading Style Sheets), and with images that come from the mockup. For example, this version of the site makes pretty extensive use of CSS layers (aka DIV tags) to produce some nifty rollover effects and it makes use of server-side scripting to set user preferences and write those preferences back to the page.

Finally, I make everything data active. I construct a database in Microsoft Access (I use Access 2000 file formats with Access XP) and write code that allows visitors to pull from and write to the database. This code is not difficult to learn or master, but is sometimes finicky and some of the things are a pain. fatDOG runs on ASP (Active Server Pages) utilizing VBScript at the server side. SQL (Structured Query Language) is used to select the appropriate information from the Access database.

Inspirations

This new version of fatDOG was largely inspired by a few random ideas I've had in my head. I wanted to clear up a few design aspects from the last version (aka fD skyStorm) by making better use of screen real estate (this version fills a larger width) and to play with some new technologies (extensive JavaScript on the client-side is totally new to the site with this version). But fatDOG as we know it had a few inspirations:

Adam Mathes built an application called organizine at the end of 2000. It was an online application very similar to Blogger that utilized XML and an amazingly wonderful interface to allow people to create sites that updated from themselves (i.e., on fatDOG there's no need to upload your articles, because you write them on the page and click submit). When his service failed to go live, I felt the desire to build my own site in that style.

David Heliotis has always been willing to help me make design decisions and was the one person I was trying very hard to impress with the new data-active editions of fatDOG. He has always been a huge part of my design process, making suggestions and providing advice along the way. And yeah, he is the original PhatCat.

Finally - the authors and visitors to fatDOG keep making me want to improve the product. The fact that the site has remained so well-trafficked with us all in college and headed our separate ways is wonderful and inspiration in itself. Keep visiting, keep writing, and I will keep creating!

Thanks for it all, guys.