Looking Back on Old School Web Design & Development Methods

| June 30th, 2011 | , , ,

Old School Web Design & DevelopmentThe Web, as we know it today, has advanced a considerable amount from it’s original incarnation. HTML hasn’t changed as much as the web browser, and web designer and developers have advocated and implemented higher standards in their work. From CSS improvements to better use of semantic HTML, the Web has (mostly) become a better online environment for both designers, developers and those who casually and professionally use the Web every day.

It wasn’t always this way. It used to be the Web was used primarily for collecting and sharing information. Web-based applications were in the minority, and even then they weren’t very good. To illustrate just how far we’ve come in web design and development, here is a collection of ‘best-practice’ tips from the 1990s, before the wild west of the Web was tamed and us settlers had a whole different way of building Web sites.

Validation? What validation?

Validation was not an issue. Why? Because it was not possible to have a site that validated and looked the way we wanted it to in every browser. And faced with this predicament, we ignored what we’d been taught in design school and went with our designer’s instinct — function follows form. Besides, no one was really pushing the issue because the Web was still in its infancy. We all knew it was going to explode at some point, but we didn’t know how.

The four horsemen of the <body> element

Every web site we developed started out with the same four parameters in the <body> tag — LEFTMARGIN, TOPMARGIN, MARGINWIDTH, MARGINHEIGHT. It was the only way to make sure the margins around the Web page worked in every browser. CSS existed, but browser support was fickle, and this just worked.

Pixel precision layout with tables

The <table> tag and it’s ilk were your most used tool. Throw in a transparent GIF and no layout was too challenging. Any layout, no matter how rigid, could be designed and developed on the Web by using empty <td> elements containing a 1×1 pixel transparent GIF, resized to whatever size the margin needed to be. The table HTML tag was synonymous with a grid layout, not tabular data. And there were great apps out, like NetObjects Fusion, that made designing and developing Web sites in this manner a no-brainer. Today we see Web sites implementing tables mostly for tabular data and utilizing all parts of the table specification — head, body, and foot.

Seven different font sizes using the <font> tag

Everything from headlines to captions could be accomplished by nesting the items inside the <font> tag. Sure, we had to copy and paste the <font> tag repeatedly inside of every table cell that contained text, but it gave us more control of text display in the Web browser.

Graphical text: When the <font> just wasn’t enough

The <font> tag only gave us seven options. The elaborate comps we had designed in Photoshop, however, had more variations in text. It also had navigation text that changed color when you moused over it, and headlines branded with a similar non-standard typeface. So we cut our Photoshop text into several tiny pieces and saved each one as a GIF image that could be easily read by a human, but was invisible to search engines and screen readers. And we didn’t seem to mind maintaining Web sites that used graphical text. We just kept a PSD file laying around that we could open up, edit the copy, cut, paste, save as, and upload.

Looking back…

We’ve come a long way since the 1990s, a time when function followed form, when we treated the Web much like the wild west, a world with it’s own rules, many of which we got to make up ourselves. Thankfully, Web browsers, along with HTML and CSS standards, have improved. And the collective knowledge of today’s Web designers and developers have been leaders in making that happen, advocating for a better Web, where finally, form follows function. We’ve learned to work inside the limitations of the Web browser, recognizing it as an evolving medium where the classic rules of good graphic design still apply. In 2001, Jeffrey Zeldman wrote a great article about the state of Web design and development and where we were headed.

The separation of style from content is at ALA today, but tomorrow, or the day after, it will be at all sites. Far from seeming revolutionary, difficult, dangerous, or non-user-friendly, it will simply be the way the medium functions. It is, after all, the way the web was always meant to work.
— Jeffrey Zeldman, 2001

Fortunately, much of his vision for the future of Web design and development has been realized. Web design and development has evolved, the separation of style and content has been embraced as a best-practice, and the Web has become ubiquitous in both our personal and professional lives.

For more information on web standards, check out the Web Standards Project, a “grassroots coalition fighting for standards which ensure simple, affordable access to web technologies for all.”

I’ve only mentioned a few of the web design and development methods common in the 1990s. Please chime in and comment on your experiences.

Photo credit: agjiminez

Intervals blog updates in your inbox!

Lear

3 Responses to “Looking Back on Old School Web Design & Development Methods”

  1. Cody Rapley says:

    That takes me back, I remember crow barring HTML code until things worked, gifs, tables, frontpage. CSS was unheard of, PHP 4 was in. The web as really begun to mature as a medium, I think it is important to retain a perspective on what it has developed from.

    Cody

  2. Web Design Bolton says:

    I think really validation is a not a big matter,Yes i agree with that all the websites developed with four parameters tag — LEFTMARGIN, TOPMARGIN, MARGINWIDTH, MARGINHEIGHT

    ——————————
    Stephen

    Web Design Bolton

Leave a Reply

The Intervals Blog
A collection of useful tips, tales and opinions based on decades of collective experience designing and developing web sites and web-based applications.

What is Intervals?

Intervals is online time, task and project management software built by and for web designers, developers and creatives.
Learn more…

Contributor Profile
John Reeve

John is a co-founder, web designer and developer at Pelago. His blog posts are inspired by everyday encounters with designers, developers, creatives and small businesses in general. John is an avid reader and road cyclist.
» More about John Reeve
» Archived posts by John Reeve

Contributor Profile
Michael Payne

Michael is a co-founder and product architect at Pelago. His contributions stem from experiences managing the development process behind web sites and web-based applications such as Intervals. Michael drives a 1990 Volkswagen Carat with a rebuilt 2.4 liter engine from GoWesty.
» More about Michael Payne
» Archived posts by Michael Payne

help.myintervals.com
Videos, tips & tricks