Here is my definition of the web as I know it.

The website is a spark of wonder.

It is a magical collection of human thought and creativity forged into a single seed which transpires time and space to liberate information. It represents the global human consciousness; it is a living, breathing entity, a rainforest of the collective mind of humanity.

Over the course of a few articles, I hope that through my experience, I can pass on some tricks and perspectives that might help you to build better websites and communicate more effectively through the vacuum of the web.

Web Philosophy 101
Everyone who sees a website sees it differently. Not necessarily because of philosophical or creative differences, but because everyone sees your website with a different computer on a different monitor with a different browser with different settings with different components installed, etc. No two Internet users are the same – much like snowflakes, only warmer.

When you print a few thousand brochures at your local Kinkos, you can expect everyone who reads the brochure to see roughly the same thing. A printed brochure is generally working from the same general frame of reference. 4 inches by 8 inches, open once, open again, etc. A web site is much more inconsistent.

Let’s pretend that you want to print a brochure. Because the printing company decides to save money, your brochures end up on hundreds of different types of paper sizes. They also decided to skimp on accuracy, so they printed sections of the brochure “roughly” where they should have been, according to your original design. Additionally, each of the folds were placed incorrectly, and the fonts are slightly different. An extra kicker- everyone who sees the brochure has varying degrees of color-blindness.

I had a brochure print job turn out like that once, save for possibly the color blindness thing. I can only hope that you have not.

There’s the rub – the indiscernible link between centuries of printed material and this new mechanism of the net. The Internet is young, and most of us, at least subconsciously, still think of the web as a descendant of the written page. I would agree that the web is, at least in part, a child of the printed word. But it is so much more.

When compared against the transience of human life, the written page is immutable, lonely and static, like a rock or a constellation. Not so with a website. A website is an organism, like a tree or a salamander. It grows, it dies, it mutates and evolves, and becomes part of the living rainforest of the web.

If you approach your site like a brochure, it will be lifeless and stagnant.

Consider these points:

 A website needs constant attention
 A website needs to meet people on their turf without prejudice
 A website needs to be pruned
 A website needs to be loved
 Printed material needs none of these things

Let me assure you – the Internet will never replace printed material. For those of you who have held a book (or a magazine) in your hands- and shed a tear at the thought of printed material eventually disappearing- you can relax. Yes, the Internet may save the college kids of the future from spending thousands on boat-anchor-text books, but ‘War and Peace’ will always be available in hard cover.

This is not a problem, until we start designing for the web. We end up forgetting about the possibilities of our media, and try to create a printed brochure in website form. This practice, though misled, is championed by many professional designers. Most professional designers have one foot in a magazine and the other on the Internet (designers are very stretchy). They forget that the Internet is not measured in inches, but in percentages. There is no guaranteed frame of reference.

This leads to an attitude of very static design which looks and feels like a book. Pages are designed to look exactly the same for every visitor. Images and spaces are rigid, and only look the way they were intended to the original designer and a few of his or her friends. Elsewhere, the same site ends up showing dramatically large unused areas of the screen, or, even worse, horizontal scroll bars.

There is nothing worse than viewing a fixed-width design site on a monitor set to a very low resolution, as you can only see a tiny little bit of the site at once. Try cutting out a one by one inch square hole in a blank sheet of paper and reading a book through it. Or try combing your hair in the morning while looking in a dental mirror. Frustrating, isn’t it?

Almost as bad is viewing a site at a high resolution and being forced to focus on a small section of the screen. Imagine yourself reading a newspaper with only one column. Despite the dramatic waste of paper, you could probably never find that job you were looking for. (Not to mention that on Saturdays the newspaper would weigh a quarter-ton)

Real world advice
Having babbled on incessantly, let me see if I can offer you some real-world advice.

There are different ways you can approach the creation of a website: inflexibility and flexibility. Fixed or Mutable, Elastic or Static, Ice or Liquid; call it what you will.

Obviously, with so many components to the web, it is quite difficult to point your finger and pigeon-hole a particular design as one or the other. However, like so many things in life, a good anchored definition makes it easier for us to communicate. For now, we shall create a nice logical, linear definition, where we can define any given design by its inflexibility.

Inflexible = Ice
mid-way flexible = Jello
Totally Flexible – Liquid

Ice

If you decide that total, resolute inflexibility is your thing, then make sure you include: “This browser is best viewed with Internet Explorer at 600×800 resolution on Windows 98” somewhere on your page, then design your site like a static brochure.

Personally, I feel it is unreasonable to demand that a visitor adopt your preference of browser and resolution, unless you are in the habit of making bizarre demands to people who visit your site in general. Perhaps you can extend this draconian inflexibility by adding one of these demands; “You must wear a clown nose to view this site”, or “You must make chicken sounds when clicking (clucking) the links”.

However, inflexibility is still a common design strategy on the web. The pros call it “Ice Design”.

Ice design is like print design, in that it has a fixed layout structure. Other attributes in this definition would include fixed width and a left margin alignment. Ice design is tailored to one specific monitor resolution, and will only display correctly to people using that particular resolution.

For example, check out the www.msn.com site. You’ll see that if you view this site on a high resolution monitor, a huge useless blue section appears on the side of the screen. This site only looks correct to people whose monitors are 800 pixels wide. How accommodating. Please don’t get me started on Microsoft and draconian inflexibility.

Most of us are aware that the poor designers at Microsoft are trying to shoe-horn the entire internet at once onto their home page. But there are other ways to go about this.

Jello

www.yahoo.com uses elastic aspects, a “Jello” trick. Sort of half way between Ice and Liquid. Their site is also built for people with monitors 800 pixels wide, but the site actually centers itself to the visitor with a border on each side. Much better for reading, but still very inflexible.

A “Jello” site can be defined by its tendency to work with different resolutions, while still maintaining a degree of inflexibility. Thus the site “opens up” for people with high resolutions, and doesn’t “slim down” for people with low resolutions.

Further up the Jello mountain would be www.apple.com. This site has a fixed-width centered column, but also contains a graphic that stretches nicely to fill the top of any browser. They are striving to get closer to perfection by meeting more people on their own browser turf. However, they still don’t get my hero biscuit.

Now I realize that from a chemist’s point of view, the linear midpoint between Ice and Liquid is probably not Jello but slush. The word “Jello” is gaining popularity as an Internet term used to describe this methodology. You might not see it on a web lingo site, but if you are reading this article, you are far too cutting-edge to have to visit those sites anyway.

Liquid

You can also be ultimately flexible, by designing your website to accommodate many different browsers. Now, fear not, gentle reader. I am not suggesting that you program to fit six different operating systems, 35 different browsers, 72 different resolutions and create 15120 different sites for different visitors. That’s too easy.

If you know a few tricks, you can get people on every computer around the world to feel the greater vision of your site and navigate with zeal. If your site can adapt to different users, you can save yourself a lot of work, and this is the basis of Liquid design.

The idea behind Liquid Design is that your website grows to fit into the space it is given. If this is done correctly, just about everyone who sees your site will see something which makes sense, and takes full advantage of their browser viewport. You’ve actively accommodated your visitor and made them feel comfortable. Otherwise it’s kind of like inviting someone over for dinner, and then requesting that they make it for you.

A really good example of Liquid design is www.amazon.com. Notice that no matter where your resolution is set, the design meets you in width and shape. Try minimizing your browser and play around with the size of your browser window. Watch the magic as the browser resizes everything to match the window size.

To be a Liquid purist, one would need to forgo the use of images in case the user wanted to shrink their browser window down to 1pixel. I think you are pretty safe if you can lower it to 640×480, as when the web came out, this was the lowest resolution likely to be used.

So how about some tips? Some things are not meant to be resized too much, and some things are not meant to be resized at all.

Monitor Resolution
Know this; no two Monitors are alike in dignity.

Monitors vary in resolution and image quality, and can be set accordingly. Do not mix this up with physical “monitor size”. Although you may try to impress your neighbor with the monolithic beige monument which currently strains the screws holding your desk together – it is not the size that matters. Every monitor can be set to a resolution, typically measured in pixels. The most common resolutions are 640×480, 800×600 and 1024×768. This equation combines the ratio of the width and height of the viewable area of your monitor.

Every monitor has a maximum of 72″dpi, (aka dots per square inch) which means that it can display that number of pixels in one square inch. The resolution of your monitor settings affect the way that your pictures are displayed. The lower the resolution, the bigger the picture will appear on your site.

Allow me to explain. A pixel is about this big – “”. It is used as a unit of measurement, but, unlike an inch, or a centimeter, or a furlong, it has no fixed size, and no vocal wild-haired alliance fighting to define it in wavelengths or finger breadths. It is literally an abbreviation of the term “picture element”, and is the smallest single piece of a digital image. If you look closely enough at your computer monitor (please do this with safety goggles), you can see that it is broken up into thousands (or millions) of these tiny dots. This tricks your eyes so that you think you are seeing something which you are not. Thank goodness for your crummy eyesight, it is the basis for beautiful digital photography.

A picture properly sized for the web should be small. Let’s pretend for now about 100 pixels by 100 pixels at 72dpi. This very same picture will appear differently on a different monitor resolution. It will appear “larger” at a lower resolution, for example, it might take up 100 pixels of a maximum of 640 instead of 100 of a maximum of 1024.

The size of your browser window, and the size and shape of what you see on your computer, and therefore the web, is actually controlled by the settings of your monitor and video card.

Exercise
To start, create yourself a new HTML page in the editor of your choice. I am going to use tables, just for ease of explanation.

Set the margins on your body tag to 0. This makes sure that every browser has a similar absolute zero point. Different browsers have different assumptions on where to start displaying content.

Set a table or div as a “main page container” and set its width to 100%. That way you always have a block level element with which to align everything.

{table border=”0″ width=”100%” height=”100% cellspacing=”0″ cellpadding=”0″}

{tr}

{td}

Rest of Site goes here

{/td}

{/tr}

{/table}

Now, let’s try making a simple navigation bar along the top. Create another table at 100% width, and embed it inside your global table. Then create a third table, with NO width, and place it inside this embedded table.

Use the mid-level table to center the innermost table. Inside this innermost table, insert some links.

Now you have a navigation bar that will always center itself to the browser. It will also break into lines if the browser window gets sized to less than the width of the natural text size of the links.

{table border=”0″ width=”100%” cellspacing=”0″ cellpadding=”0″ bgcolor=”#333″}

{tr}

{td align=”center”}

{table border=”0″ cellspacing=”0″ cellpadding=”0″ bgcolor=”#666″}

{tr}

{td}

LINKS

{/td}

{/tr}

{/table}

{/td}

{/tr}

{/table}

Note that for all of my tables, I am specifying zero cellpadding and cellspacing to ensure that I am controlling this aspect for every browser.

On the next line, create another table at 100% width and put a background pattern on it.

{table border=”0″ width=”100%” height=”50″ cellspacing=”0″ cellpadding=”0″ background=”/IMAGE.jpg”}

{tr}

{td height=”50″}

{/td}

{/tr}

{/table}

Note that I throw a non-breaking space inside the table to make sure the browser doesn’t ignore it, and also set a height of 50 pixels to make sure that it doesn’t collapse. Now I have a table which can collapse or expand infinitely, but still has a background image.

Lastly, take a table with three columns. In each column, embed another table. On the outer two columns, put a background color. By putting a width on one of these embedded tables, you can stop the browser from collapsing it.

In each of the three embedded tables, put your content.

Voila! You have a site which will grow and shrink to meet every browser. I could make a million other suggestions, but really all you need is the idea, and you will find a way of bringing it to life.

Conclusion
Surf around a bit and you will start to notice how all of the major websites have different theories and techniques which you can learn from. Some are closer to ice, and some are more liquid.

There are inevitably many questions that will come up after reading this article, so make sure you bug the editor with your feedback. The important thing is to make sure you build and retain a web presence that you are confident with. Your feedback will present the appropriate topics to address in future articles. Until next time, happy programming!