The Best Web Development Tool Ever

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.