The first web pages couldn’t show you graphics.  They were simply text interfaces to information.  It wasn’t until the guys at NCSA got involved and created Mosaic, that the image tag was added and suddenly we had a potential graphic interface to the world wide web.

I say potential because now we had left justified images with left justified text, black, on a grey background with blue underlined hyperlinks.  It was a bit after this point that I discovered the web.

I wasn’t working at the time and I had discovered the internet was available on two phone lines in my location in Hampton, Virginia.  I’m a fast learner and when I’m in the room with someone, I do quite well with holding discussions even about topics I’m learning during the discussion.  I talked my way into volunteering in their office and helping them with things as they grew.  It was a three person ISP called Wyvern Technologies that they later sold.  Three ex-navy squids with eyes on commercial success.

I’d rebuilt a Gopher server for them, Gopher being a line-based precursor to the web.  I’d rebuilt their text based user interface as well.  They had also shown me the text interface to the web, and it was interesting, but it was very basic as just text.

One day Tom said he wanted to show me something.  He sat down at a system that was connected to ethernet and therefore directly to the internet.  Then he opened Mosaic and opened my eyes to the potential of this thing called The World Wide Web.  It was early 1994 and that was the moment my autistic obsession with the web began.

I wanted it.  Why couldn’t they offer SLIP or PPP over their equipment?  Those were two internet protocols that would work over a phone line.  They told me the equipment was only able to do text based or IP based but not both.  It wasn’t possible.

Impossible is a word I don’t accept easily.  I took the manuals home.

Looking back, it probably wasn’t the smartest idea to reconfigure their equipment remotely over telephone modem connection to the very equipment I was reconfiguring.

The next day I disconnected the Ethernet to one of their machines and hooked up my USR 14.4 modem.  I called them into the room, connected with the modem and showed them a working SLIP connection.

They gave me a nice check and a full time job.  Now I could use the graphic web at work and at home.  Now, I could study the web most of my waking moments.  And I did.

January 1st, 1996 marks the official launch of the company I was part of in Silicon Valley, Project Cool.  I was CTO of our little two person company with no money and no real investors but I got to play with the web all day long and to write and talk about it and there were people to talk to about my major obsession.  The office was anything but cool, but it was a great area to be in.

The default width of Netscape Navigator on a Macintosh was 460 pixels across, if I am remembering correctly.  That’s the size I designed for and then made sure it worked at different sizes if I needed to.  Advertisers wanted to place banners that were 480 pixel across. I could have those numbers wrong after all this time, but you get the idea.

There were also a lot of designers coming to the web from print design.  Print design is very static.  It doesn’t move and it always fits what it’s printed on.  There were a lot of sites showing up that were static.  You had to adjust your browser size to view them.

This lead me to one of my mantras of web design that I would often speak of.  The user should never have to think about their browser while using your website.  If they have to adjust the browser window, you’ve failed.

If the user shouldn’t need to adjust their browser to view your webpage, then your webpage would need to adjust to the browser it was in.  A browser window is a container and the webpage is a liquid your pour into it.  It should adapt to the container it is in, and still present a good design esthetic.  

Now the problem was to get other people to think in terms of designing websites that worked everywhere, no matter the browser.  Don’t worry, we’ll cover web standards in another article, but for now we’re just talking about the size of the window the user had.

People now don’t see the kind of things we saw in those days, for them liquid is the norm, it just has another name these days, responsive design.  It’s a better name, really.

I see the materials that make up a website design as being three things, Liquid, Gelatin, and Ice.  Back in the day I used the trade name Jello because everyone could identify with and understand it quickly.  For this, I’m going to use Gello.

Ice, is a piece of solid content.  In ‘96 many sites were solid ice and your browser had to fit them for you to use them properly.  We still use ice today, but in smaller chunks, floating in the liquid.  Ice was a good name for a solid.  It matched.

Gello is something that is centered.  I would call an ice site that was self-centering Gello.  It wiggles it jiggles, it centers itself.  Sidebar:  In the slide I used at conferences, I misspelled it and the text said “giggles.”  I never corrected the slide.  Perfection is overrated.

And then there’s the previously mentioned Liquid.  Liquid holds it all together and flows where it needs to to fill a container and if the site is well designed, it holds appealing styling no matter the browser.  So in 1996 I started talking about this new way to think about web design.

There were many different ways to approach a liquid design in those days.  There were additions to HTML tags that allowed you to set an alignment like “align=left” to left justify something or move it against something already on the left.

You could use transparent images to position things just so, then assign a percentage width to make sure it stays spaced appropriately in the window.

You could do it with a combination of frames and the above techniques.

You could do it with tables and careful cell arrangements.

So I started talking about it and demonstrating it.  I didn’t convince everyone, but when you roll a snowball, sometimes it takes time to pick up snow.

This page fits your web browser because it’s presented as a Liquid.  It was poured by a server as well as a bit of scripting and styling that helped determine the best graphic presentation it could offer you in the space you have available.  In this case, Gello.  The menu at the top? A bit of Ice.  

Three materials.  That’s what the web’s built on. 

Now you know.