How I Became Almost Cool

!/images/23.gif (How I became Almost Cool)!

Greetings gentle readers. What follows will be not a tutorial in the traditional sense, but rather a collection of my experiences in researching, building and testing my first valid xhtml and css site.

*Phase 1 – the basics*

First, what the heck is valid xhtml and css, and why should I care about it? You should care about it for the simple reason that it will make your life easier (eventually). The idea with using xhtml and css is that it allows you to separate content (the words) from presentation (how the words look). There are numerous advantages to this: by keeping all your styling information in one document, you can make a single change in one place and update the look of your entire site. You can also present your content across different media without having to re-write it. Css/xhtml pages are almost universally smaller in file size, hence faster loading.

Perhaps the most important reason to care is that valid xhtml and css documents are semantically clean markup. Browsers that support the current W3C standards will display valid markup in a consistent way.

This is a real shift from table-based web design, where one document holds all the information. There is a plethora of info out there on the www outlining the advantages of using valid markup. One of the most convincing arguments can be found “here”:

*Phase 2 – the back end*

Ok, so you’re still with me. Wicked.

Let’s take a look at the components that make up my site. There are 3 main components at work:
• the content
• the design
• the content management system

The first two are obvious, the third may be less so. Just about every blog out there uses some kind of content management system (cms). A cms is basically a database, a collection of php scripts, and a back-end.


Ok, you’re gonna build your blog, and you’re gonna update it everyday. You don’t want to have to go messing about with the code every time you make a change, right? You just want to be able to type up your little masterpiece, hit enter, and sit back and watch the hits roll in. That’s what a cms allows you do to.

Basically, your cms holds your articles, your design (the css) and your page code (the xhtml). When a user visits your site, the cms builds the web page for that specific user. You set up the rules telling the cms what to display (ie all articles, the latest 3 articles, all articles relating to cats, etc). Better yet, if you allow it the user can select how she want to view the info. Because your articles are stored in a database, they can also be searched and selected via keywords, categories, etc.

There are a host of cms packages available. Some are no-braniers (“blogger”:, “typepad”:, “etc”: The advantage to these systems is that you simply pick a template, then start writing. Everything is set up for you. Most systems allow some degree of design flexibility, but to many _”real”_ designers, having a blogger site is akin to having an email address.

There are still quite a few options to choose from if you go the “roll your own” route. All of them require some ability to muck around at the server level. You’ll need to set up a database (probably a free MySQL db), and make sure php scripting is turned on. I’d never done anything of the kind before, but my “webhost’s”: support line made it very easy. I’m an advanced computer user, but know very, very little about servers. If I could figure it out, so can you.

I’m using “textpattern”: It was pretty easy to setup, and most importantly, *free*. I highly recommend you check out your options and do a bit of reading. Again, there is a ton of info out there, and its worth putting a couple of hours in now to start thinking about how you are going to be using your site.

Let me just say that it is not necessary at this point to make a decision as to which cms you are going to use. That will come later. But reading about them, and seeing how they work will help the design of your blog start to take shape.

*Phase 3 – the learning*

I did a lot of reading before making the commitment to start up my blog. My aim with this page is to link you to a couple of the articles that cemented my decision, gave me the inspiration, and showed me the way. I read all of these (and many more) before I decided to try my own hand. I suggest you try to do the same.

First, I must start with “this”: I’ve been reading “Andrei’s” blog for a couple of months, and am fan of his insight, humor, and self-depreciating style. This is the guy who’s responsible for the look and feel of Photoshop, Illustrator, etc, so he knows of which he speaks. The article in question basically says “if you’re interested in interface design, build a blog. It’s the perfect exercise”

I had also been reading Veerle’s “fabulous tutorial”: on writing and building a valid blog. This is an important link, as it give a step by step how-to design and code. It’s impossible to get everything into one tutorial, and Veerle does miss a few points, but I haven’t found a better starting place.

Actually, that’s not quite true. “Western Civ’s”: tutorial is probably THE best starting place if you’re looking to learn about css. It’s not a blog-specific tutorial, and is geared towards their own (excellent) piece of software (which you can download for free and use for 30 days while you complete the tutorial). If you’re looking for a good intro to css, it can’t be beat.

“This”: article by “Cameron Moll”: really startled me. It’s titled “Good Designers Copy, Great Designers Steal”. If you do nothing else, read this. I can’t tell you how many times I have started and stopped a personal project because I just couldn’t get the design right. After reading Cameron’s article, my approach to this blog changed from “gotta do something spectacular” to “gotta do SOMETHING. Get it running, then make it earthshattering.” It’s a very liberating mindset.

Simplebits “centering 101”: Gotta know it…

Inspiration came from 3 main sources, “csszengargen”:, “cssbeauty”:, and “cssvault”: What a way to spend a couple of hours. It’s easy to get lost, so be careful! While you cruise these sites, remember Cameron’s words. Make a folder in your favorites just for the sites you love. Look at them and study them. Why do you like them? Is there a certain style? What are the colours? How many columns are used? Where is the navigation? Get a color meter (lots available for free, OS X comes with one), and make notes of the actual colors used. Try not to approach this project with a design already in mind. Look at what you love, and let that inform your design.

*Phase 4 – the design*

As you may have gathered by now, designing with css has its limitations and challenges. It’s important that the design stage not come before you have a good grasp on what you can and cannot easily accomplish. Read and study a bit first, and you’ll be much less frustrated when it comes time to turn your design into reality.

At this point, I recommend working on paper. Keep your design as simple as possible. Remember that you can add stuff to jazz it up later. Working on paper allows you to spend a couple of minutes concentrating on the layout as a whole, without getting bogged down and trapped by the details.

_note: I’ll post a picture of my sketchbook once my scanner gets unpacked_

After working out the rough layout, move to the computer and build a mock up in Photoshop or illustrator or whatever you use. Don’t skip this step. The temptation is to rush right to building the code, but you will regret it. Guaranteed.

The beauty of css is that it allows pixel perfect placement. The trick is that you have to know where you want those pixels to go, hence the mockup. Use the rulers in your app of choice to note the width of your columns, the height of any specific elements, placement of your navigation, etc. You’ll be referring to your mockup frequently, so keep the file open while you work.

CSS and xhtlm are inherently simple languages, but they can become quite confusing if you try to get too complicated too quickly. Keep it simple at first, then add complexity once the main components are working.

A few notes about the design of Almost Cool:

I’m using two column layout with a header and a footer. There is one main container holding all the content. The layout looks something like:

All the graphics were built in Photoshop. If I had to marry an application, it would be Photoshop. I hope she’s a girl…

*Phase 5 – the code*

Now then, you’ve got a sense of how xhtml and css work together, and you have a design. How are you gonna code the thing? Don’t worry, it’s actually very easy. If you downloaded Western Civ’s software, you’re already ahead of the game. Everyone says that “all you really need is notepad”, but that’s crap. True, you can write the whole site blindly by hand (like I did!), but it’s much easier to use a program that has all the various codes and commands built in. There are a bunch:


This is not my area of expertise, but again, if I did it, so can you. It’s not that hard.

*Phase 6 – testing*

This is the hard part. The fact of the matter is that internet explorer doesn’t like to play fair. It interprets xhtml and css in its own special ways. If 90 odd percent of the known world wasn’t using IE, it wouldn’t matter. But until those 90 percent wise up and download firefox, we’re gonna have to make our site work for them.

There are a bunch of esoteric ways of getting ie to like your site. Luckily, my design only had two problems: the nav buttons and about column weren’t lining up properly. I posted my problem on the “cssforum”:, and had the fix within the hour. Highly recommended.

An important note here is that the simpler your design, the fewer problems you will have at this stage. K.I.S.S.

*Phase 7 – start tweakin’*

The nature of a blog is that it’s never finished. It’s an ongoing dialogue and an ongoing design. The beauty of css is that it is SO easy to make site-wide changes. Once you start tweaking, it’s hard to stop.

I hope this little bulletin may have been of some help. I haven’t touched on any specifics, but I have pointed you towards where to find some very good info. I’d love to help if you decide to venture down the blogging path, so please drop me an “email” if you run into a problem, or if you have a suggestion for this article. I can’t guarantee that I can solve your problem (especially if it has to do with code), but I can try, and maybe suggest a resource.


Almost Cool, v1.0

Almost Cool was created in the fall of 2004, while recovering from disc surgery, and trying not to go insane with boredom. The impetus for, or rather the catalyst to doing the actual design and coding was an “article”: written by Andrei Herasimchuk at “Design by Fire.”:

*About the Name*
Do we all remember the heart warming cold-war story of *The Hundredth Monkey*? For those who are too young or too old, the premise of the story is that once a certain percentage of a population learns a lesson (in this case, one hundred monkeys), the whole of the population spontaneously shares the knowlege. I am the 97th monkey. I am not the first monkey, nor the 10th, but I am in that lead group, albeit at the tail end. Hence, almost cool.

*About the Code*
This is where I giggle with glee. I wrote the code by hand! All of it! Tee hee! I’ve never done this before, having relied on Dreamweaver in its various forms and guises to do the work for me. Almost Cool uses valid xhtml and css, and one tiny table (though I won’t tell where).

I use “Textpattern”: to manage the blog, mostly because 1, it’s free, and 2, I could figure out how to install it. As it turns out, once one becomes familiar with its paradigm, it’s simply brilliant.

*About the Author*
Having already compared myself to a monkey, and not a particluarly bright one at that, you may well be wondering who it is pushing the buttons behind the scenes. I dislike having to sum one’s self up in a few sentences. Who am I? Oh boy, there’s a loaded question. Let’s just say this: I am a father to two incredible girls. I am a husband to the love of my life. I am a loved and loving son. I am an ex-bike racer, an ex-windsurfer, and ex-snowboarder (don’t worry, only until my back is better). I am an avid reader, a dis-interested gardener, and a lover of fine foods and wine. I’ve studied business and art, and practice both. I live by the words “help others make wealth, and wealth will come to you”.

How’s that?

You mean I have to get off my ass?

!/images/20.gif (underworld 1992-2002)!:

I want this album. I want it now. But I can’t get it. Oh, it’s at the iTunes store. But I live in Canada, and iTunes doesn’t like us canucks. It may well be available at “puretracks”: but I’m on a mac, and my friends at puretracks don’t like macs:

bq. We value our Mac audience, however the Windows Media player for the Mac platform is not currently compatible with Microsoft protected audio content. Puretracks is currently working to make our service available to Mac users.

This is very irritating. It also offers an interesting insight. I take it for granted that when I want to purchase _intellectual_ goods (ie software, books, music, etc) I can do it without moving my physical body from place to place. All I want is the intellectual good. I don’t want or need the physical packaging that holds the goods (unless it comes in one of “these”: I listen to most of my books on my ipod these days, thanks to the fine folks at “audible”:, and any music I purchase is going straight into iTunes.

It takes an incident like this to shake me out of my reverie. For a few seconds there, I was really annoyed. Then my mind flashed back to an article I read back in the golden age of Wired. It talked about a futuristic technology that had just been deployed at a big US school – Stanford or MIT, I don’t remember. The article described an on-demand music system running over a local network. Sitting at his workstation, the inventor could simply type the name of the song (it was running on unix), _and it would start playing!_ “Yeah right”, I remember thinking.

Flash forward what feels like 15 minutes, and I’m _actually annoyed that I have to go to the music store_. What a world!

This trip down memory lane also reminds me of an article “Nicholas Negroponte”: wrote about the way we assign value to the physical (atoms) vs the intellectual (bits). At the time, Negroponte had been asked to assign a value to his laptop upon checking it in while touring a nuclear facility. “$20,000” was his reply, to which the clerk went “huh?” Clearly, the clerk was thinking “what’s it gonna cost to replace this at best buy”, while Negroponte was thinking “the cost to replace the software, the cost to replace the hardware, plus the cost to re-do all the work this machine holds” (which, as an aside, would make for an interesting exploration: what happens to the value of an intellectual good if it’s stored in multiple places? More on this later).

My point being that the differentiation between the atom and the bit has begun to melt. When forced to convert to the old paradigm, I get annoyed. I shall henceforth dub this *atom rage*, and report on it faithfully.

What about you? Have you experienced atom rage?

About Almost Cool

!/images/21.gif (97)!

Almost Cool is the wildly derivative web log of the Toronto-based freelance designer Peter Flaschner. This blog was created after reading “this”:

*Now, to explain the name:* Do we all remember the heart warming cold-war story of *The Hundredth Monkey*? For those who are too young or too old, the premise of the story is that once a certain percentage of a population learns a lesson (in this case, one hundred monkeys), the whole of the population spontaneously shares the knowlege. I am the 97th monkey.

By the time I become aware of a trend, it’s only weeks away from being blithely tossed off in a _New Yorker_ metaphor (“He was Sisqo to her Eva Mendes”), or appearing on a late, late show monologue.

I am, in other words, a barometer of cool. A _cool-o-meter_, if you will. Now, this is not nearly as glamorous as it may sound, stuck as I am on the corner of Nebbish and Cool. But it does have certain benefits. I’m a fairly good predictor of average. Given that I make my living interpreting and communicating my clients’ messages to the widest possible audience, knowing that audience comes in handy.

As for the “Wildly Derivative” part, I think it was Picasso who said “good artists copy, great artists steal”. Far be it from me to edit the master, but I think what he’s _really_ saying is that all experience is derived from the experiences that preceeded it. _Almost Cool_ is the logical extension of the truly cool work that has come before it.