Space1999.org - Homage to the Space: 1999 science fiction series.
> Turn off print friendly version.

Learn more about Space: 1999...Learn more about the new Thunderbirds movie...
FAQ
FEATURES
DISCUSSIONS
GALLERY
REVIVAL

 

  Home
  FAQ
  Features
  Discussions
  Gallery
  Revival

  About this Site
  Conventions
  Open Content Model
  Site Index
  Search
  Store
  Webrings/Links
  Help
  Contact Us (E-mail)

  See also: FAB (Other Gerry Anderson-inspired works)


  Choose the style:

  Classic Theme
  Moonrise Theme
  Black Sun Theme
  Printer Friendly

Space1999.org Site Redesign

By Michael A. Faries (5 August 2003)

This document is intended to provide a light overview of the redesign of www.Space1999.org -- and some of the interesting developments which may benefit other webmasters as they work on their own fan-based entertainment web sites. A knowledge of current web terminology (circa 2003) and intermediate HTML/XHTML and CSS web programming is recommended. This is not a "how-to" document, but a brief overview of some of the things which went into the redesign.

Table of Contents

Chapter One: Introduction

Welcome to the ongoing evolution of web site design!

During late June 2003, it was determined that Space1999.org would undergo a site-wide web design change. (The prior web site redesign was done in 2001 to migrate FONT tags to CSS Level 1 and change some aspects of the layout.) In less than a month's time, three construction phases were established and initiated. (Phase One would be completed for the August 1st site relaunch.) The site was successfully re-launched 5 August 2003.

This web redesign required the study of W3C web standards for CSS 1, 2 and 3; new JavaScripting; and W3C validation requirements. This exercise wasn't for the weak of heart. The project required true dedication, patience, and self-teaching exercises... and a healthy dose of humor in the face of building multiple site layouts; facing code limitations; finding numerous development issues; and incurring plenty of late night programming sessions. Let it be said: Do not try this without a prior sanity check! ;-)~

Per our Open Content Model (OCM), this web site's XHTML and HTML web design framework code and CSS code is available for non-commercial use. Yes, those hundreds of hours of development time, tweaks and coding is freely available for other webmasters to analyze and use. (The use of specific Space1999.org logos and some artwork is forbidden, though.) Further details for obtaining the layout/code are found in another chapter.

Several (dozen) Phase One design goals were established in the redesign of the web site. Among them:

Phase Two (date undetermined), would include:

Phase Three (date undetermined) would include:

Chapter Two: Layout

One of the primary goals of the Space1999.org redesign was a complete overhaul of the layout.

Disclaimer: As of this writing, the webmaster of Space1999.org uses Mozilla 1.4 and Mozilla Firebird 0.6 as his primary web browsers on Windows, Solaris (UNIX) and Linux platforms. (Netscape 7.x, which he also used to use, had been discontinued by AOL in July 2003.) He also uses Microsoft IE 6.x on Windows as a secondary browser.

The original look-and-feel design of Space1999.org was preserved for the new design, although the new pages would be created from scratch. Once the new site architecture and site navigation was decided, the layout work began. Adobe Photoshop was used to create a diagram of the intended page layout. (See Figure 1.)

The page layout was a linear exercise. Boxes (defined by CSS <DIV> tags) would hold the content. For example: The side navigation would reside in one box, the main content would reside in another, etc. Every box was modular; any box could be repositioned by modifying the CSS file. (See Chapter Three: CSS.)

As the design was theorized, the page layout grew from one possibility to many. CSS could be used to hide boxes, place boxes in different page areas, etc. Finally, four layouts were selected:

For the new layout, a single .html page would be created as the main template. Literally every single box (which resided within the four layouts) would reside in the one web page, not four separate pages. In some instances, CSS would simply change box positions when a new layout was selected by the user (using a JavaScript widget; see Chapter Four: JavaScript).

From the start, the site layout was designed as rigid. There were certain elements, such as the small rightboxes, which had to be locked into certain regions. I had wanted the site to expand/scale -- as a user expanded their web browser -- by using % instead of fixed px, em or pt attributes within CSS. I found that my specific design requirements mandated a rigid design. Grumble.

In constructing the main template layout, three things were developed simultaneously:

    • HTML/XHTML code (page framework)
    • CSS code (attributes of the layout)
    • JavaScript code (in this case, for switching CSS styles on the fly)

The coding was accomplished with a simple text editor. Because web tools, like Macromedia Dreamweaver MX and Adobe GoLive, are NOT available across multiple cross-platforms, like Solaris and Linux, they were abandoned for this redesign effort. There is also a noticeable issue with the rendering engines of each product; CSS does not show up properly within the WYSIWYG display window. And each web tool has a tendency to add extra, unwanted code (or remove code) at times, depending on the task.

In terms of (future) site-wide changes, comment tags were also added throughout the code.

Example:


    <!-- // This is a comment tag. -->

or


    <!-- // Side Navigation Level 1 START -->

    (Content resides in-between the comment tags.)

    <!-- // Side Navigation Level 1 END -->

This way, "Find and Replace" calls (in your tool of choice) could be performed to make site wide changes. For items, like Navigation, the terms "Level 1", "Level 2", etc. were used to identify what level the page resided within the site. That way, a global find and replace wouldn't affect the wrong pages. For example, Space1999.org uses relative paths (example: ../images/eagleone.png), not absolute paths (examples: http://www.space1999.org/images/eagleone.png or /images/eagleone.png). With relative paths, a change to one directory level is much different than higher or lower levels, where a few "../" edits could break every link.

The site layout was frozen before any content insertions (text, graphics). Because a single page was used to create the main web template -- and all CSS files were accessible for this page -- the layout would have been easy to change, if needed.

With the main template completed, the HTML/XHTML and CSS code was validated by the free W3C MarkUp Validation Service at http://validator.w3.org. While the code is not 100% validated as accurate, due to some minor enhancements like non-standard Microsoft IE color bars (defined within CSS), it is clean code. It will work in all current-day browsers... and more importantly, in all browsers which support open standards.

Chapter Three: CSS (Cascading Style Sheets)

Better known as the Holy Grail of web design.

I applaud, cheer, and generally worship the individuals who made CSS a reality -- and demonstrate how to push the design envelope with it. As CSS matures, it continues to make web design more extensible and flexible in wonderful ways.

CSS usage was also the toughest portion of the entire site redesign.

The seemingly endless amount of time I invested into tweaking and honing the CSS code to generate the right colors, font styles, new elements was nothing compared to adjusting how some CSS elements affect the presentation of other elements within a page. Margins had to be adjusted; padding modified in places; float attributes edited in places... the list goes on. But the end result is well-worth the time spent. And my knowledge of CSS (and how it works) has grown immensely from the experience.

Now try replicating the workload of one CSS file for another CSS file... and another... and another. (Remember, I use four different CSS files/designs for Space1999.org.) You'll notice that the "Thunderbirds Are GO!" site uses two styles: The classic one and the print friendly one. That's all the energy I had after doing the "Space: 1999" CSS files!

Let's briefly discuss CSS and layout

Here's a sidebar on why CSS is awesome for layout.

As CSS is based on positioning and layer depth, it is a paradigm shift for those accustomed to TABLE coding. After defining the layout (see previous chapter), you ask yourself, "How do I define a box on a page?"

It's actually incredibly easy, once you learn the attributes of a DIV tag in CSS. Within the CSS code you define what the box is: Size, position, height, width, transparency, bordering, color, etc.

The page layout was a linear exercise: Boxes were mapped to specific places. Because there were strict design requirements for the placement of some content elements, the CSS would be used to affix each box.

In the case of Space1999.org, the CSS files are placed into individual .css files, not embeddded within each page. (The CSS file itself is called from code within the web page when the web browser calls the CSS code on a web page.) This way, the CSS attributes can be changed in one place -- and instantly affect the other pages when it calls the CSS. Otherwise, you would be changing the CSS attributes on every single page. Yuck.

This isn't intended to be a lesson in "CSS 101." I strongly recommend the following web sites to learn more about CSS:

Chapter Four: JavaScript

Again, this isn't a lesson on teaching JavaScript, but shows some of the forethought that went into the current web redesign.

A number of JavaScripts were incorporated into the new design. Many of the scripts are baked into each page. Where possible, though, I tend to place my JavaScripts into .js files.

Chapter Five: Validation

Yes, we all need validation... but that's not the subject here. HTML, XHTML and CSS validation is what we're discussing.

The Space1999.org code was validated to prevent against major coding snafus. While we aren't 100% perfect (hey, who is? Alright, some folks generate perfect, validated code), we have created a site without any significant coding issues. It was difficult, as we did have perfect, validated code a couple of times during the redesign. As we tweaked the layout further -- and added extra items, like the IE-specific CSS code -- we lost the ranking.

You can validate your own code here at http://validator.w3.org/

Chapter Six: Web Standards

I'll let this site (http://www.webstandards.org/about/) explain why Web Standards are important -- and applicable to our web redesign.

Chapter Seven: Source Code

Our source code is granted for use under two provisions: Creative Commons License and Space1999.org's Open Content Model.

Our main xhtml web template and css files are released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/. You may use these files as a foundation for any new, non-commercial work, but you may find it easier to start from scratch. Not all elements are defined in this file, so you'll most likely want to refer to the xhtml as well. Images should be linked as if the CSS file sits in the same folder as the main index.html page, looking to the 2nd level images directory.

Per our Open Content Model (OCM), you may download the web site design per the designer and web site owner, Michael A. Faries, provided you use it for non-commercial endeavors. No support is provided. The Space1999.org logos and artwork which include the logos may not be reproduced, used and/or distributed. Content from Space1999.org may be republished for non-commercial use, with credit to the author(s)/creator(s), under the rules of both the Creative Commons License and Open Content Model.

Choose the file format you wish to download

    Click here Download .ZIP (16k)

    Click here Download .RAR(23k)

Chapter Eight: Open Content Models and Creative Common Licenses

Hoarding content is such an ugly thing.

Since before 1999, when Space1999.org, I have endeavored to make my web content available to others for non-commercial use via an "Open Content Model." In the same vein as open source projects, like Linux, Mozilla, StarOffice and others, people can utilize content for their own sites, provided they a.) provide full credit to the author(s), artist(s), and creator(s) of the content; b.) do not modify the content without express permission of the originator; c.) do not use the content for commercial purposes; and d.) provide any changes back to the originator (so, if you publish an article, do extra research, get permission to edit the article, you need to give the edits back to the article owner, if they wish to update their article with your edits). You can help the content grow and improve in quality with your contributions. Read our Open Content Model web page for more specifics/information.

Content, such as official contents and copyrighted materials which cannot be republished, is excluded from the Open Content Model. In other words, you couldn't republish the entire Space1999.org site as your own, even if you place a "By Michael Faries" on each page. The site is unique; the logos establish the identity. Use the source files to create something unique of your own... and incorporate content via the Open Content Model.

It's a paradigm shift in thinking. People say, "Huh?" about this. They don't understand that they can ramp up their own web sites with content. Be sure to give credit where it's due.

I've discovered that others have the same idea. Recently, the CommonCreatives.org site came to my attention; they champion a similar concept as the Open Content Model. Our web content and design falls within a certain Common Creatives license as well.

Borrow content -- and wield it responsibly!

Chapter Nine: Final Thoughts

It has been a pleasure to be an official part of the Space: 1999 and Gerry Anderson Internet fan community since 1999 (and a Gerry and Sylvia Anderson fan since the U.S. broadcasts of "UFO" in the early 1970s). I've been on the Internet since October 1994 and never cease to be amazed by new technological developments. The next site revamp ought to be interesting, since it will likely use tech which hasn't been conceived of yet! (After all, Aural Style Sheets, SVG and XHTML were drawing board ideas just a few years ago!) The next big, BIG thing is yet to happen... ;)

Copyright 1999-2003 www.Space1999.org. All Rights Reserved. Legal notice.
This work is licensed under a Creative Commons License, in conjunction with our Open Source Content Model. This site uses XHTML and CSS and looks best with a standards compliant browser.

Back to the Top

Maya
Tony Verdeschi
Dr. Helena Russell
Commander John Koenig
Alan Carter
Sandra Benes