PhotosCafe TalkAbout this site


Web Building

The CoffeeKid Bookstore
in association with
All contents are 1998-2002 by Mark Prince, all rights reserved. Please do not borrow, take or steal anything without permission.

Check out CoffeeGeek! or my personal site Spiffle, or my company, WebMotif Net Services.
Building the Websites
Home >> Obsessions >> Web Building
Fueled by Perrier

Hey, so you want to know what it takes to build the CoffeeKid website? A lot of Perrier. That's the secret. We need that carbonated water, baybee. Flowing through our veins. That, and copious amounts of coffee.

Seriously though, it takes a lot of hard work to make this site happen. And trust me when I say this -  this site wouldn't exist if I didn't enjoy every minute I've spent building the pages, taking the photos, writing the stuff, and even paying good wages to my company's talented programmers to build the "back end" that drives this site.

Site History
What you're looking at now is officially version 2.0 of the CoffeeKid site, but in actual fact, there has been about 5 different design versions of this site. This is the fifth one. The previous design that many are familiar with was actually the fourth version of this website (and the one that ran the longest - about 3 years). There were three other versions that, frankly, sucked. I try not to think too much about them, but what the hell - this site is about honesty as well.

The very first version of CoffeeKid was a port from a section I had on my old personal site - just a subsection about my love of coffee. At the time my main brewing device was a Delonghi Trieste steam toy / auto drip brewer combo machine that could froth milk automatically. Hey at the time it was innovative. That initial site lasted about a month. I called it version 0.1 of this website.

The second version was a frames nightmare. Let's not go there.

The third version was online for three weeks. It was even worse than version two. It scared me. Think lime green, dayglo yellow, and pee yellow colours. Ugh.

Version four, the 3 year run version, or 1.0 as I like to call it, was pretty good in its time. It garnered a lot of awards online, won a lot of praise (and a lot of criticism), and got my footing in the online world as some kind of quasi coffee expert (the jury's still out on that one, and there's plenty of folks online who would debate that point). I liked it, but it became a monster.

Version five, or 2.0, is what you're visiting now. This design was just one of those "it feels so right" kind of things. I tooled around with a few different looks, including one that was only slightly modified from the previous version, but once I drew this one out on paper, then did my first photoshop layouts, I was very, very happy with it.

That's a rare thing for me. Frequently I'm not happy at all with my designs and implementations. I'm my own harshest critic when it comes to my graphic design work, but on those rare occasions, I strike gold. At least I think I do. This site design was gold for me, both in look and functionality. The rest came relatively easily.

Usability and other Tricks
Usability is a pet hobby of mine, which is a good thing considering the business I am in - web development and interface design. I worked really hard to make this site as usable as possible, even though it is a departure from my previous site's usability patterns. Here's some of the obvious, and no so obvious usability tweaks:

  • on every subpage, there's a coffeekid logo on the right top side of the page. Clicking it brings you back to the home page.

  • on every page except the main page, you'll see the "breadcrumb" linkage. That's where it might say home >> espresso >> nirvana . Each link takes you a step up in the hierarchy of this site.

  • on every sub-sub section page (for instance, every page that is in the vac pots subcategory, a category within the "coffee" parent category), clicking the title graphic right at the top will bring you back to it's parent page (in my example, the main vac pot page).

  • the left side navigation menu is very dynamic, and driven by a combination of intelligent graphical placement, CSS encoding of submenu items, and some DHTML tossed in. Notice how when you are in the coffee section, you see all the subsection (or child) documents listed right below a text and graphic combo that says "coffee". If you visit one of these child documents, you'll notice it becomes all uppercase, and is no longer hyperlinked. If it has its own child documents, and you visit one of them, that navigation menu link remains all caps, but is hyperlinked again. That's just one of the tweaks it has.

  • every page except the main page has a secondary navigation control on the bottom of every page.

  • the entire rants directory is special - it allows for very easy surfing. Check out the archives under rants - if you go and read a rant from July 2000, there will be three months displayed on the right side of the page - in the middle is the current month you're on. The next month (August 2000) is above, and the previous month (June 2000) will show up below. That month structure follows you automatically depending on which archived rant you're reading.

  • every section on this site has its own colour scheme. Note how the right side column colour pattern stays the same within each section, giving you a slightly subliminal clue you're still within the espresso section, or still within coffee, etc etc.

  • I've purposely used a larger font than I originally intended to, for the main column text on every page (the column this text is laid out in). This gets the average wordcount per line of text down to 10 or 12 words on an average screen. Studies show this is the ideal wordcount per line for easy readability on screen.

  • some small fonts are used here and there, but the usage is minimized.

  • contrasts, for the most part, are very stark for easy readability (eg white on black, yellow on blue, etc). I'm still fine tuning this aspect.

And there's more, but I don't want to give all my secrets away :). The point I'm trying to make is this - a lot of usability concerns went into the design of this site. It's another passion and hobby of mine, and I hope I've succeeded.

What Drives this website
The current (and future) builds of CoffeeKid use 100% of our latest and greatest version of WIPS... Web Integrated Publishing System. When I say 'our', I'm talking about WebMotif Net Services, Inc., the company I am Creative Director for.

To say WIPS is versatile is a bit of an understatement. It is built in such a way that it can be customized for virtually any website currently online. Everything from document management, discussion boards, polls, shopping carts, searches, auction sites, ordering systems, database integration, even movies and images and sounds can be utilized and/or controlled with WIPS in ways you wouldn't believe. I'm constantly amazed at the power the software has, and big time kudos go to the guy primarily behind it - Wayne Venables. It's a solid piece of software.

WIPS does things on the CK site like auto-build the image/description tables you see in the CoffeeKid Bookstore. It also controls the front page poll, and automatically updates the front page "what's new" columns, showing you the most recent content. It auto generates the nifty calanders you see on my rants pages. It controls image placement, sizes and even the occasional popup full size images you may see. In fact, it controls pretty much every single piece of "content" you see on this site, from title graphics to text, from thumbnail images (created on the fly) to full size images with descriptions.

I guess you can guess I'm pretty proud of our WIPS software :)

CoffeeKid Home Page