evolt.org Workers of the Web, Evolt!

Many a time you read the same question on message boards, mailing lists and in chat channels - What is the best tool for web development?

A tough one, really, as a good tool should meet so many different requirements.

It should

• make sure that development takes place in a neat and ordered manner
• be cheap and do the job without a lot of fuss
• not be hard to use or confuse more than help
• be usable on the go
• save time and money

There is one tool that does all that. It is called a pen. You use it by rubbing the pin-pointed end against a fitting surface - say paper - and paint and write things with it.

How can that pen thing help us?

One problem with web design is that we are still completely obsessed with it. It is still an exciting and new media - interactive, fast, international and huge.

When we use our computers to surf around and open a fully fledged web development tool, we are likely to get drawn to developing something that is cool, technically challenging, new and colourful. The big danger in that is, that we forget the usefulness, the scalability or, very often, even the purpose of the product.

So let's turn off that computer, or use it to play some music to get our brain going.

Plan it and they will come

Let's take the pen and write down who we want to reach, and what we want to give them. Let's brainstorm and write down all the stuff that we really really want to have in there. To add some fun to it, let's invent some possible visitors or users of our web site, and guess what their likes are and how they access the web. If you are a visual person, doodle them - but don't get carried away. Let's make sure the persona are not the same as us.

Let's take all kinds,

• the fast business executive, who never has enough time
• the lovely lady in the chip shop with the thick glasses
• the computer geek next door who really answers "LOL" when you tell him a joke
• your elderly aunt, who has this slight shake when moving her hand
• the hippie girl from the bus who is just a bit off into dream world all the time, and prefers to play and explore "nice" things rather than facing hard facts.

Sorting the goodies

Then we use another paper and sort the things we want to have online into categories, and, if necessary, into sub categories. Once that is done, let's sort them by priority.

If the things are long and hard to read, let's think of shorter names for them.

Let's go through the list of things and think hard if they really need to be there, or if they are a "nice to have" which can be added later or after we saw how successful the other bits are. Let's take these "nice to have"s and put them on another paper crossing them out on the first one, or - if we have the professional version of pen - use the end opposite of the point to erase them.

Let's sit back, take a sip of coffee or tea, or do something different for a while, come back and have another go at moving things to the "maybe later" paper.

Alright, we have a list of what we want to have. Now let's take another paper and think what our visitors (the doodles, remember?) need or expect to reach them.

Catering for the masses

• The fast business executive doesn't have the time to figure out the navigation (even when it only takes some seconds) - her first goal will be to find a search functionality, that really leads to results. If she can't find it, or the results are meaningless, we lost her.
• The lady with the thick glasses might have trouble reading text and navigation online and therefore has the biggest font setting, let's make sure she can read our navigation, and her big fonts don't mess up our design. This also means we cannot use a graphical navigation, as not all browsers allow for magnification of images, and she might not care for upgrading her browser - this takes too long and is too complex to do.
• The computer geek wants to see what you got and take part, he is likely to register to be able to give comments and take part and give his piece of mind about your work.
• Auntie should be considered when we think about the navigation, looking around the web, we might have seen loads of cool multi-level drop down navigations, but with that shaking hand in mind, they become not so hot an idea out of a sudden.
• The hippie girl wants nice colours and see things change when she does something. Roll-overs might still be a nice and new thing to her, and they don't hurt to add.

Let's write down some of these assumptions.

Moving on

Alright, this is where we got to. The powerfull application "pen" gave us so far:

• A site map of all the pages we want to create, already sorted into categories, which translates to a navigation concept.
• A wish list of the elements we should include into the page to make all of the possible visitors we care about happy.

Bear in mind that we do not have to give them all the same experience, if our web site will offer newest stock market trends, we don't have to cater a lot to the glasses lady, Auntie or the hippie girl.

A web site about game mods and cheats might not really give Auntie or the busy business executive, or even the hippie girl, a kick.

One thing we don't want though is become elitist and block them out. Give them what they can use, and enhance for our target audience, is what we want.

Re-entering the digital world

Now we turn on the computer, and we start our web product. With what? With a folder called "my_website" or something similar. In this folder we create folders with the names of our navigation elements, and the neccessary subfolders.

Now we take a text editor, doesn't really matter which - as long as it is capable of clean text and is portable to various platforms - and start writing the content of each of the pages we want to create. Let's sort the text into headlines, lists and paragraphs, and if we need an image for the content, put that image into the appropriate folder.

Close the text, get a bagel or another coffee, walk the dog or take a breath of fresh air. Come back and delete as much as you could. Remember, users don't read, they scan on the web. Don't smother them with long winded talk, get to the point.

Ok, we are prepared and ready. We can start our web site, with our favourite editor and graphical environment. We can start designing the pages, choose the navigation (left hand, left hand and horizontal, horizontal, tabs, right hand...) and create the pages. Personally I like using includes in PHP, but if you want to use something else or create each page by hand, do that.

The pen helped us a lot in finding, sorting and honing what we want to put on the web, a lot faster and cheaper than trial and error in any fancy web development package. It helped us avoiding flashy traps that might have annoyed a lot of users. And we were able to do that anytime and anywhere.

It also enables people who don't know how to create web sites to prepare the content for the web developers in a clean way, no searching through hundreds of emails or copying and pasting from one word file.

Surely the mightiest web development tool of them all.