May 2004 Archives

So we've walked through setting up Movable Type to be a project management system, and then some best practices for how I use it. Now for the final piece, a simple entry point for the entire system.

The Project Log Index

Its awfully convenient for you and anyone else looking at your projects to have a gateway that lists all of your projects in one place, and when the last time it was updated. To this end I cooked up a simple index page with some PHP and MySQL.

The index queries the MT database to find the blogs that are in your projects folder (which you set up in Part I). It then grabs the blog's name, URL, and the date of the last entry. The PHP jumps in there and displays them in an unordered list. That's it (I told you it was simple).

I've never needed more than the date indicator for my own purposes, but there are tons of possibilities to customize this index to your needs. I can see someone adding the latest entry from each log, or the latest milestone that was activated as a progress indicator, just to name a couple.

Download

If you want to give the index a try, you can download the PHP file. You will need to modify the file with your own database connection information and also the "$blogfolder" variable to the root folder of your system.

FTP the file into the root folder of your project system setup and you're ready to rock.

Project System Demo

I've created a demonstration of this index and the project system for the development of my own site, Inspired Nonsense (which I am trying to do out in the open).

Make It Yours

The index, and the system for that matter, is open for your interpretation. Make the system work for you (it's supposed to be a tool remember?). All I ask is that you send me a link when you're done tweaking so I can see how you use it!

Most of all, I hope that this helps you as much as it has helped me in my professional life. I can attest to getting ahead in my projects at work (sometimes as much as 2 weeks) instead of always working on deadline. The system has also improved communications and expectations with my coworkers and clients related to my projects. But most important, I've gained piece of mind because it remembers everything I can't (which is considerable when multitasking 6-10 projects at any given time) which allows me to sleep better at night.

I sincerely hope this can help you too.

When I'm talking about the internet, I might as well be speaking Japanese to my co-workers. A couple of them have worked to varying degrees in the field, so they can rough out a translation here and there. But for everyone else, I'm the web designer from a different country.

Every week I come up against this, and as hard as I try, the people I work with have a really hard time understanding how the web works. I'm not sure, but I think the mental model that applies to the web is just not intuitive at all, and leads to real communication problems. Mostly this is just annoying and insufferably isolating, but sometimes it can be dangerous.

If a client or a co-worker doesn't "get" what you are telling them, or worse, they come away with a completely different translation of the encounter, your job could be on the line. Doubling the problem, is the fact they won't tell you they are not understanding you. Instead, you get a smile and nod that looks a lot like comprehension but is really just fear. Its infuriating, but for some reason our culture makes it scary to say the phrase "I don't get it".

Hell, I do it too. Sometimes if I'm caught in an awkward spot, I will spout off a diatribe centered on a tiny nugget of knowledge about the subject rather than say "I don't know". Its silly, and I strive to avoid it, but it still happens.

I can't expect to change behaviors learned from childhood, so I need to adapt my approach. In doing so the question becomes, how do I make sure someone "gets" the point I'm making without coming off as condescending or patronizing? Its not like I can throw a pop-quiz and grade their performance. I need to find a simple way to communicate the complexity of the web. Sure, no problem.

I've tried graphs, diagrams, charts to no avail. I continually tone down the verbosity and terminology in the interest of finding common ground, but still get nowhere. I'm certain the problem is creating a shared understanding of how the web works, but I'm having a hell of a time figuring out their conceptual model.

Frankly, I'm running out of ideas on how to bridge the barrier. Does anyone have the Cliff Notes?

Last time I walked through the steps for setting up Movable Type as a project management system. Today, I'll show you how to use the different "features" (aka. hacks) when logging entries about your project and some tips on how I use this system to keep my sanity.

Using the Project Log

Keep in mind, this is just a project log on mini-steroids. Use it and abuse it. Log any and all pertinent information regarding your projects. The more you have in the log, the less you have to remember and the more powerful the tool becomes.

Milestones/Categories

For your sake, and the sake of your clients and team members, you should have some project milestones. It gives everyone a sense of the scope and path for any project. I tend to keep my milestones simple because most people I work with are not familiar with web design, or any design process for that matter. I mentioned these last time, but here are my simple milestones:

• Strategy
• Structure
• Visual
• Build
• Launch

I use the Category Description field to attach dates to these milestones (see image). The system will look for this field when it rebuilds the homepage, and will only show it if you've put something in there.

But what if your project is more exploratory and isn't on a set process? Make up some categories of your own. It makes it much easier for you and anyone else to find info on your weblog if you group your entries by topic.

Entries

The heart and soul of your project log is the content you keep in it. I firmly believe that you should log as much information in your weblog as possible. Just get in the habit of typing up notes from a meeting, when certain design documents are completed, approvals, and whatever else you think is pertinent. If you use it semi-religiously, this weblog will save your hide one day when you least expect it (it's saved mine many times).

Be sure to set the category for each entry because its easy to forget.

Attaching Project Files and Links

I've also added a bit of code that allows you to pull out files and links attached to each milestone and date them (a cheap way to CV). To use this, type up an entry then use the Upload File feature or simply FTP it to your server. Once its uploaded (where you put it is up to you, but it makes sense to at least keeping it in the project folder it pertains to), select the Show HTML option. Then copy the link markup and paste it into the Entry Excerpt box. Hit Save and your done.

The scripting in MT will pull in the link and the date from the entry and display it next to the milestone/category on the project homepage. Quick and dirty versioning.

To make the log truly version your files, you will need add the date to the filename that you upload (e.g. "strategy_document_05-20-04.doc"). That will prevent overwriting the existing file, and give you and anyone else looking at the log a good picture of progress through each version.

Don't forget to use this function to call out links to prototypes and drafts of your website in progress too!

What This System Won't Do For You

This system is not far from a glorified hack and is pretty lightweight. As a consequence it won't allow for the following (unless someone can devise a way to hack it in):

Authentication

It will authenticate authors, but not users. If you need to put your log behind a password the easiest answer is an .htaccess file. If you are looking for something more robust, maybe someone can find a way to pull this system into WordPress or Textpattern. Some people have even worked out a way to use phpbb's authentication in conjunction with MT.

Gantt Charts

I'm sure someone could devise a way to do this with PNG or something, but until that time the only progress indicator is the Project Map on the left hand side.

Time Tracking

Again, its a simple system. Timekeeping can get pretty complex and down to the quarter hour or less. I use other tools (such as my day timer) to keep track of my time on projects. Not all that glamorous, but it works.

Next Time

In the third (and final) part of this series I'll show how I use a little bit of SQL and PHP to put in a simple index page on all of the project logs.

I debated doing this because there is a lot of discussion (and animosity) over Movable Type and their new pricing scheme right now. But project management is a necessity for any web designer, and hopefully this can help by providing an affordable tool.

First and foremost, this is for all the poor schmoes that need some sort of project management solution, and can't afford Basecamp (a very good online service provided by 37signals at a very reasonable price). Unfortunately, I'm left to my own devices because I work for a billion dollar company that asks me why I need pencil lead. If you've got cash, get Basecamp. If not, here's Plan B.

Overview

Basically, I've put together a system of weblogs that organizes entries according to project milestones. Also, with a little extra work I've devised a way to use MT to show files attached to each milestone (e.g. Design Documents, Diagrams, etc.) and date them for versioning. To tie it all together, I created an index file that grabs the data directly out of the MT SQL table and shows the link as well as the date of the last entry. The only thing missing is a gantt chart.

What You Will Need

You will need the following software for this:

• Movable Type (I use version 2.661, but it should work in 3.0D). You must use the MySQL install for this to work
• PHP installed on your webserver
• Brad Choate's MTSQL Plugin
• Brad Choate's IfEmpty Plugin
• Kevin Shay's Compare Plugin

I won't bother going through installation information here, since all are well documented. Got everything installed? Great, lets move on.

Folder Structure

The system uses multiple weblogs inside separate folders underneath a master "Projects" folder. Each project is in its own folder for easy maintenance. You will want to set-up a similar folder structure on your web sever.

Setup

Once you've created your folder structure, open up Movable Type and create a new weblog. Make sure that the Local Site Path is set to one of the sub-folders inside your new Projects folder. Once you've saved your new weblog, click over to Preferences.

Weblog Configuration

In the Preferences window, change the number of words in the Entry Excerpt to zero (see image below). Once you've done that, click over to Archiving.

In Archiving, make sure that Individual, Monthly, and Category archives are all selected. Set the Archive File Template for the Individual Archive to:

This will allow us to organize all the individual entries in folders according to project milestone. It also removes cruft from the URL except for the extra date on the end, which allows for you to have multiple entries with the same title (e.g. "Meeting Notes") and not have any conflict. Next, set the file template for the Category Archive to:

This puts the index for the archive directly in the folder. If you've not set your own Archive File Templates before, Elise explains the whole process really well.

Note: Setting up folder structures and file naming conventions is really a personal choice for most people, but you will need to set your weblog up this way if you wish to use the Templates I'm providing without any tinkering.

Templates

First, remove all of the RSS feeds and the archive index so all that is left is the Main Index, Stylesheet, Category Archive, Date-Based Archive, and Individual Archive. RSS feeds could be really useful here, but I have yet to meet an executive with and RSS aggregator.

Once you're done deleting the extra files, download these templates and save them into a folder on your web server (this makes it much easier to set up multiple weblogs in the future).

Use the Link this template to a file box within each template to import them into MT (be sure to clear the existing template out of the box before hitting save or it won't import it). Each template is named clearly inside the .zip file:

• index.html - Main Index
• styles.css - Stylesheet
• category.html - Category Archive
• date.html - Date-Based Archive
• individual.html - Individual Archive

There is also a template file called header.html. Create a new Template Module titled "Header" using this template.

Categories

One more step to go before you can hit rebuild and get on with it. Create categories for the milestones in your project. I keep mine pretty simple and consistent to the development process I follow (hat tip to Jesse James Garret and his Elements of User Experience):

• Strategy
• Structure
• Visual
• Build
• Launch

If you want to show it, put the deadline for that milestone in the Category Description field (found by clicking on the Category Attributes link).

Note: Be sure to put them in order when entering them into the system or they won't show up in order on your weblog (more on this later).

Hit Rebuild All Files and you've got your first Project weblog. Repeat these steps for each project you have.

Next Time

Tomorrow I'll cover the details on using the system, and point out some of the hacks that make it work. After that, I'll walk through the setup of the index file that puts a nice little front on your new project management system.

"Too much analysis can lead to paralysis" - co-worker/team member

Recently I've been working on a project to revamp the internet site of the company I work for. We are still in the beginning stages, yet I'm already feeling the pressure from the team to start producing even though it seems like we are missing too much of the user experience picture.

I'm pushing to get a clear understanding of our user base and I still feel that is absolutely necessary, but a little voice is in the back of my head asking "where is the line?". When does analysis turn into paralysis?

No one in the group questions the need or value of user research. In fact its heralded as a necessity, just one that cannot be afforded,yet. So we're stuck in a tough spot fleshing out the details of what the project needs to accomplish, so we can secure funding. But we are doing so with a limited understanding of the user base needs and desires which we can't get without the said funding. Catch 22.

Which leads me to a crisis of conscience. I feel like I'm shorting the business and the customer by not exploring the very unique audience that our industry has, and understanding better how to satisfy their needs. And I believe the product will suffer for it. But the project needs to move forward, and therefore I need to find the middle ground. The line.

I'll let you know if I find it.

Two words: Don't go.

I'm not terribly picky about movies. Even though I was a film major and happen to know the names of more than 3 different French New Wave directors, I'm just as excited as the rest of America when a reinterpretation of the classic occult/monster horror films comes due. So when Van Helsing promised me not only Dracula, but Frankenstein and werewolves, I was in line for tickets.

Unfortunately the movie just plain sucked. Van Helsing reminded me of xXx, an idea that could have made a killer movie on the fun-o-meter but got so lost in bad writing and direction (and in Van Helsing's case, bad editing) that I was literally laughing at the end during a moment not meant to be funny.

This movie is a lesson in how important "directing" is. They had a good leading man (Hugh Jackman), gorgeous leading lady (Kate Beckinsale), and nearly 100 years of film history to pull from. What we get is the worst portrayl of Dracula I've ever seen, incredibly poor execution of campy lines that try too hard to be like Sommers previous hit The Mummy, and complete decimation of at least 3 horror icons.

Even though the directing was bad, this movie might have been partially salvaged with a little more work in the editing room. But again, someone dropped the ball and the movie doesn't flow, at all. Sometimes this can be a good thing (as in the aforementioned New Wave cinema), but in this basic formulaic narrative, jumping too quickly leaves the audience wondering exactly what the hell is going on, putting attention back on the poor direction and writing.

Inspired Rating: Bored. The only reason I didn't leave was the hope that somewhere along the way, they might salvage the movie. That never happened. As a fellow moviegoer said "I wouldn't even pay to rent that movie".

Creativity and innovation are at the core of a designer's skill set. Its what differentiates us from the rest of the world who just "use" because we always ask "how can this be done better?". Success at improving the world around us depends greatly on our abilities for compassion and empathy. As designers we need to feel so we can understand what people need and desire, then design to that.

Unfortunately, the corporate culture continually works at removing all emotion from the workplace.

Grey walls. Fluorescent lights. Blank, listless stares on people walking by. Flat and banal conversations. All are hallmarks of the hallways inside corporate America.

We have been told that we can voice our opinions, but we need to do so without any emotion. Walking on eggshells so as not to say the wrong word and get written up has become old-hand. Racing to be on time, to the minute, everyday because someone in the office is clock-watching.

Over the past 5 years I've felt like my thoughts and desires have been ratcheted slowly to a concrete floor, and it scares me. I don't want to continue living the majority of my waking hours in a place that works at sucking out every ounce of my humanity through a small straw. What really kills me is I can't think of any plausible reason why corporate life has to be this way.

Breathe Life Back In

It might come as a surprise, but I actually have no objection to the work I get to do, or the fact that it is in a corporation of 10,000+ employees. Hell, I even like most of my co-workers! However, I do object to having to work that much harder every day to claw through the well built walls of "corporation" to find that spark that sets my creativity aflame. So how do we combat this?

Personally, I did the only thing I could, I dropped the guise. I let my emotions roll when I feel I have a good point in a conversation. I don't mask my pleasure or displeasure with people, situations, or life in general anymore. I've stopped hiding.

Life is too short to just go through the motions. I need to feel alive. Not just for the sake of bing a better designer, but also for quality of life.

Hopefully I'll escape the corporate binds sometime soon, but I'll never be able to escape the culture completely. Political correctness pervades everything we do these days when , and I will have to play ball to some extent.

But that doesn't mean I have to play by the rules (More on that one next time I'm in the mood for another good rant).

Not to long ago, Jared Spool wrote a great article on rebuilding a website through gradual evolution of smaller changes rather than engaging in a massive redesign project. Many sites have adopted this method of continually updating, adding, and changing the design or structure of their site using small moves.

So am I.

I've been making small tweaks to the site over the past couple of weeks (such as earlier today when I flipped the columns, and changing the MovableType file naming conventions the day before), and will continue to do so frequently over the next couple of months. So please bear with my mess while I design this site progressively, piece by piece.

Thank you.

PS - I'll be keeping a log of my development updates. Its pretty thin right now, but I'll have much more in there shortly (I promise).

Internet radio makes it easy to find new music, organizes it thematically, and doesn't cost me a penny (except for what I feel like donating).

Godsend for the Lazy

Don't get me wrong, I love music, I just don't have the dedication needed to build a playlist of my own MP3's burned from my CDs or downloaded off of iTunes. So I let someone else do it for me. I open my streaming software, peruse the listing, click on a stream and kick back to great, commercial-free music.

Don't Take My Word for It

Intrigued? Try it out for yourself! Here's what do you need to partake:

1. A Streaming Media Client:

   PC - WinAmp

   My personal favorite because of the built-in radio tuner that uses the Shoutcast listings, and small memory footprint

   Mac - iTunes

   Also has a built in tuner, and native support for AAC format (the same one iPod uses). I know there is a Windows version of this too, but it is such a memory hog that I prefer to stick with WinAmp for now.

2. High-speed internet access. DSL/Cable or higher.
3. Playlists! There are many stations listed in radio browser, you will settle on your favorites pretty quickly
4. Good speakers or headphones. I prefer the latter because I listen mostly while at work, and they are always around when I need them

Thats it! You're on your way to new worlds of music that most of us would never find on our own. Remember that the built-in tuners have a lot of stations listed, but not all of them. If you get a hankering for something particular, say Cuban music, try a search in Google and see what you get. That's how I found the Radio Cubik Network with great latin and cuban stations!

Places to Start Listening

I flip around a lot, but there are a few stalwarts I listen to often:

Secret Agent Radio

Just plain cool, down-tempo music with bits from 007 movies thrown in between.

Radio Wazee

Alt rock how it was meant to be. Sprinkled with some popular songs, there is something new on this station every other day.

Digitally Imported Radio

The best background music when working. All Trance all the time.

KEXP

I know this is a real radio station in Seattle, but it is possibly the best college station out there and you can hear it anywhere in the world. Listen in the mornings with John.

Donate to the Cause

Few if any of these stations are actual businesses, and are often paid for out of pocket. With the recent LOC and CARP rulings, internet radio broadcasters need to pay royalties on the songs they play. So if you find you like internet radio like I do, give a little back.

This is the first in a set of entries detailing different tools I use when designing a website, and how I'm applying those tools to the design of this website, Inspired Nonsense.

Strategic Definition Documents

Cousin Joe-Bob calls from his pizza stand and decides he needs a website because Pizza Hut has one and he thinks its "the bomb". You say, "sure thing Joe-Bob" only you have no idea what's involved in the pizza business other than 10 bucks and a phone call gets you pie in 45 minutes or less. So, where do you begin?

The concept behind a Strategic Definition document is to help you and the person you're building the website for, define three core elements (Audience, Site Objectives, User Needs) with as much clarity as possible so that they can serve as the guide for the rest of the design process.

Audience

Who exactly are you building this site for anyway? "Everyone and Anyone" is not an answer unless your client is Google. Keep in mind that your website's audience is not just your target audience, but others that may happen across your site so be sure to write down any secondary and teritiary possibilities you can think of.

Site Objectives

Every website exists because someone (or a group of someones) had a need or desire that was fulfilled by creating it. Ask, cajole, and persuade your client to reveal what he/she wants from the site (this can be a lot tougher than it sounds because most clients have no idea what they want from a site). Once you start getting some answers, go deeper. Its very important to be as specific as possible, and define where the hard, actual benefits are for the site owner. This will help eliminate bad objectives while providing a basis for measuring success on the rest.

User Needs

Your audience has needs. Anticipate your user's needs, and they just might come back to your site in the future. Research, ask, beg, and empathize with the audience and you'll start getting an idea of what those needs are. Also be as specific as possible here, it will benefit you greatly when doing usability testing down the road.

Strategy for Inspired Nonsense

Since this is a personal site, the strategic definition for this was really fairly easy:

Audience

Primary: Web Design Community. My peers, comrades & acquaintances, novices, possible employers.

Secondary: Family & Friends (the non-web designer types).

Tertiary: Damn near anyone.

Site Objectives

Share my opinions and knowledge as a web designer with the web design community.

Create a place for me to rant and get things off my chest I can't always express at work without getting written up, or worse...

User Needs

New concepts and ideas. Brilliant insight into all things web related.

"How to" articles. How did I do this, that, or the other thing. Preferably with a good description.

That's pretty skimpy to start from, but that's the beauty of the strategy document because its never done (plus, its a personal site, so the only true metric is the value I get out of writing it and whatever value you get out of reading it).

Needs change, businesses go in new directions, and it all usually happens right in the middle of your process, so be flexible. Update this document when every you feel there is a need, and then assess how it affects the decisions on the rest of your design. Its always better for your brand and the user's experience to fix what you can before you put something live.

Props

Resources and further reading on user experience design and strategy documents:

• Jesse James Garret's "Element of User Experience". Required reading for anyone who designs websites, or anything else.
• AIGA Experience Design site. Get on the mail list because there are some wicked discussions going on there.

Next up

Content Maps!! Savior or bane of the project, depending on your personality type.