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”:http://www.csszengarden.com

*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.

_HUH? WTF?_

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”:http://www.blogger.com, “typepad”:http://www.typepad.com/, “etc”:http://www.google.com/search?q=blog+software&ie=UTF-8&oe=UTF-8). 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 @aol.com 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”:http://www.godaddy.com 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”:http://www.textpattern.com. 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”:http://www.designbyfire.com/000158.html. I’ve been reading “Andrei’s”:http:www.designbyfire.com 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”:http://veerle.duoh.com/comments.php?id=208_0_2_10_C 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”:http://www.westciv.com/style_master/academy/hands_on_tutorial/index.html 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”:http://www.sitepoint.com/article/copy-great-designers-steal article by “Cameron Moll”:http://www.cameronmoll.com 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”:http://www.simplebits.com/notebook/2004/09/08/centering.html. Gotta know it…

Inspiration came from 3 main sources, “csszengargen”:http://www.csszengarden.com, “cssbeauty”:http://www.cssbeauty.com, and “cssvault”:http://www.cssvault.com. 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:

bbedit
dreamweaver

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”:http://www.csscreator.com/css-forum/, 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”:mailto:peter@flashlightdesign.com 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.