Redesign of my work site part 3 (aka cool…)

I’ve decided to go with this design:

The photo will rotate through a number of nature-inspired shots, using a php rotator. This script gets uploaded to the server as image.php. In my code, instead of writing

I write

The script will randomly select an image from within the directory it resides in. You can find a sample of the script “here”:http://www.cb2web.com/tests/rotate.htm.

I’m also going to use the

background: fixed

rule in the css to keep the gradient fixed in place. That way, I can get by with a short bg file, and not have to worry about it repeating if the page grew really long (which it shouldn’t in this case).

Step 5 is _look into scripts/software_. I’ve found a remarkable photo blogging type of script “pixelpost”:http://www.pixelpunk.se/software/. I had offered to put together a photo blog for a cousin who’s just had a baby, and stumbled across this site. The script has just been launched, so I imagine many people haven’t heard of it. It rocks. In additions to helping my cousin share his baby pics with the world, I’ll be using pixelpost to manage the portfolio section on the new site. It is incredibly easy to setup, and extremely flexible. Can I gush any more?

I’ve also decided to use “textpattern”:http://www.textpattern.com to manage the rest of the site. The front page will be static to start. I’ll switch the sidebar over to a textpattern list once I have some news to post. The articles section will be dynamic right from the get-go.

I’m very excited to get pixelpost up and running. It should be fairly easy, yet will allow me update and manage the portfolio with great ease.

I’ll let you know how it goes.

Redesign of my work site part 2 (aka phew…)

I’m taking my own advice for once. And guess what? I might actually know what I’m talking about!

Let’s review. In part 1 of this article, I made up the following to do list:

# Write all the content first.
# Create a mood board based on the content. A mood board is simply a collection of inspiring images, words, colour chips, etc related to the project at hand.
# Sketch sketch sketch
# Create a comp or two. I’ll post them here for feedback.
# Evaluate software/scripts (for the dynamic part)
# Build.
# Test.
# Tear out hair trying to figure out why it doesn’t work with IE.
# Decide to become a bus driver.
# Find the answer on positioniseverything
# Party like its 1999.

I’m up to step 4, and in a moment we’ll get to the actual comps. First though, I want to take a moment to sing the praises of two of my favorite pieces of software: “OmniOutliner”:http://www.omnigroup.com/applications/omnioutliner/ and “TextEdit”:http://www.apple.com/education/accessibility/technology/textedit.html. Both of these are mac only, but I’m sure there are pc equivalents.

I use OmniOutliner for just about every project I do. It’s perfect brainstorm tool. I just write my notes, stream of consciousness style (much like this blog). I can then go back and re-arrange the ideas into any order I like. I can also add new columns of information (ie categories, priorities, etc). The list can also be output as a text file or html file. Very flexible, and very useful.

TextEdit is the mac’s built-in word processor. It is incredibly light and small. No surfeit of formatting. No floating toolbars. Just a simple little box for me to type my words into. Mis-spelled words are highlighted, with the now-standard spelling suggestions just a right click away. Pure word processing love.

Ok, back to the good stuff. Here, as promised, are the comps (click for a full size view):


Let’s call this *the narrow one*.


This is *nav right*


And this is *nav left*

Before I move on to step 5 (_evaluate software/scripts_), I’d love to hear your feedback. It need not be as detailed as “Paul Scrivens”:http://9rules.com/whitespace/our_thoughts/independent_thought.php requires. Just a “hate it because…” or “love it because…” would be swell.

I have about a hundred other things to talk about, so I’m gonna cut this short here. Be on the lookout for part 3, coming soon to a screen near you!

Redesign of my work site (aka ARGGGGHHHHH)

Given the option of designing something for myself, or designing something for a client, I’ll chose the client work everytime. It’s not just that I like to be paid for my work, it’s that I am a horrible client. I can’t make up my mind, I won’t follow proper procedures, I won’t commit… If I could, I think I’d fire myself.

In an attempt to force myself to listen to my own advice (sounding kind of schizophrenic here), I’ve decided to write up this redesign as a tutorial. In keeping with my earlier tutorial, it’s not going to be a do this, then do that kind of thing. Rather I’ll collect my thoughts and processes, in the hopes that my mis-starts and minor victories might be of some use to someone else out there in design-land.

Like many designers, when it comes working for myself I tend to focus too much on the prize, as a result ending up with a steaming pile of you know what.

*Ahhh, I feel better already.*

I’m going to start by quickly reviewing what’s in place, then briefly describe why I feel a redesign is necessary and finally move on to the steps I’ll be taking over the next couple of days.
So without further ado, allow me to present the current version of “Flashlight Design”:http://www.flashlightdesign.com:

!/images/26.gif (screen shot of flashlight design)!

If you squint really really well, you might just make out that the page states this is ver 0.003. *That is a bold face lie.* In fact, that page is ver 7. Seven! _Since April of this year!_ Ok, admittedly it’s been a testing ground for various styles and techniques. It’s been table-based, flash-based, flash-enabled, and now an amalgam of tables and css. That’s gonna change.

*Reason for redesign #1*: Kill all tables and build scalable site.

Far more importantly though, my target audience has changed. When I built this site, I was aiming squarely at potential employers, ie design studios, ad agencies, etc. I’ve been receiving a fair bit of freelance work over the past couple of months though, and have decided that despite my intentions not to, I’ll be pursuing more freelance projects. Given my background in marketing and business, it kind of makes sense. So, the site has to talk to a different audience and deliver a different message.

*Reason for redesign #2*: Talk to different audience.

!/images/28.jpg (flashlight Design redesign portfolio screen shot)!

Take a look at the “portfolio”:http://www.flashlightdesign.com/portfolio.htm section, and you’ll find a couple of things I’m not happy with. There is too much work showing for a general audience. The work isn’t arranged into categories, ie logos, magazines, web, etc. There isn’t any web work listed. Each image gets its own static html page, making it stupidly difficult for me to update the work. This site was thrown together quickly, and this is where it shows.

*Reason for redesign #3*: Develop flexible, dynamic portfolio.

The rest of the content on the site, _my resume_ and _skills_ don’t really belong on a client oriented site. I’d like to get rid of these sections all together and streamline the message. In fact, the message as a whole needs to be re-defined. I’m inventing a new company, and need to both develop and communicate the principles of that company; the “why you should hire us” stuff.

*Reason for redesign #4*: Write and deliver a new message.

Looking at the reasons above, I’ve come up with the following next steps:

# Write all the content first.
# Create a mood board *based on the content*. A mood board is simply a collection of inspiring images, words, colour chips, etc related to the project at hand.
# Sketch sketch sketch
# Create a comp or two. I’ll post them here for feedback.
# Evaluate software/scripts (for the dynamic part)
# Build.
# Test.
# Tear out hair trying to figure out why it doesn’t work with IE.
# Decide to become a bus driver.
# Find the answer on “positioniseverything”:http://www.positioniseverything.net
# Party like its 1999.

This list looks startlingly familiar. Gasp! It’s the same process I use for every job I do! Imagine that.

Well, wish me luck dear reader. I’ve already broken down and designed a couple of comps. Because I don’t know what I’m doing with them though, I just keep pushing pixels from one side to the other, squinting, and trying to decide which looks better. For posterity’s sake, you can view the two recently deceased comps “here”:http://www.graphicdesignforum.com/?f=15&m=80642&g=80738

I’ll report back faithfully.

Using Patterns in Design

“:http://37signals.com/papers/introtopatterns/

If you know me, or if you follow one of the links at the top of this page, you’ll see that I’ve got a thing for patterns. My eyes were naturally drawn to a link offering “An Introduction to Using Patterns in Web Design”:http://37signals.com/papers/introtopatterns/ link on the “Mike Industries”:http://www.mikeindustries/blog.com site. Figuring it was a guide to developing patterns like “these”:http://www.squidfingers.com/patterns/, I enthusiastically clicked on the link.

It was one of those *the stars must be aligned* kind of moments. What I found was not an article about _patterns_ as in the patterns on a rug, but rather an article about patterns of information. It’s actually a how-to. It offers step by step instruction on breaking down the elements of your design, and re-assembling them in a way that maximizes the value of one thing to another. It sounds complicated, but its beauty is that it is not.

The author, Ryan Singer of “37signals”:http//37signals.com, directs his article towards the web designer, but his principals apply to all forms of design. One aspect of the article that I don’t get however, is its insistance in dressing up the subject matter with a big work like _pattern_.

In essense, what’s being discussed is the core of any design project:

  1. Understand your client’s message (described in the article by brainstorming and listing the elements).
  2. Interpret that message (prioritize those elements).
  3. Communicate it to the intended audience in the most effective way.

The article is a helpful reminder not to jump to the design stage, but to let the content inform the design. But I’m failing to see what’s so revolutionary here. Creating the hierarchy of messages, be it branding vs copy vs feature A vs feature B, etc is the root of good design. Is it just that this is a systemized approach?

So what’s going on? Am I missing something, or is this a case of putting an important name on something more elemental?

Actually, I just answered my own question. What Ryan discusses is a *method* of communicating the message in the most effective way.

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.

Colophon

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”:http://www.designbyfire.com/000158.html written by Andrei Herasimchuk at “Design by Fire.”:http://www.designbyfire.com

*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”:http://www.textpattern.com 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)!:http://www.amazon.com/exec/obidos/tg/detail/-/B0000E6XJQ/ref=pd_bxgy_img_2/103-6557341-5300629?v=glance&s=music

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”:http://www.puretracks.com 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”:http://www.jewelboxing.com). I listen to most of my books on my ipod these days, thanks to the fine folks at “audible”:http://www.audible.com, 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”:http://web.media.mit.edu/~nicholas/ 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”:http://www.designbyfire.com/000158.html.

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