www.HellOnEarth.com"contentious content since 1998"
NEWS ] [ CONTENTS ] [ SITE MAP ] [ ABOUT ] [ CONTACT ]

Site Production - The Design

This page describes the design of the old version 1.0 of Hell On Earth (25k GIF screenshot). Version 2.x is described elsewhere.

Design Process

First, a rough sketch of the proposed page layout was scribbled on a piece of paper.

Based on this sketch, the frames were designed with CorelXara. This package gives you anti-aliased vector graphics without the speed trade-offs of bigger packages such as CorelDraw or Freehand.

Eventually, all graphics end up being done in Xara: Creation of border graphics, type elements, export as transparent GIFs (usually with a 16 color palette) and naming of the files. Even bevel shadows (as seen in the lowe right-hand corner of this page) are done here.

Finally, the graphics are split into small pieces (the graphics weight of most pages on this site is no bigger than 5000 bytes) and strung together with HTML by hand, using HomeSite.

In HomeSite, tables are created to contain the layout. The design is tested with three browsers: Opera, Netscape, Internet Explorer. If it looks passable in Opera, I'm happy.

To keep the tables flexible, the connecting cells only contain a transparent pixel. A " " would case problems where smaller columns are needed (such as the Bill Gates page, for instance).

For the elements to keep together in Netscape, an additional empty table cell is needed at the outer edges of each table row (or the alignment goes ballistic). For Internet Explorer 3.x, it is necessary to define some table cells with a width attribute of "300%" in order to avoid problems with the scalability of the pages.

Generally, the idea is to have graphical pages with dynamic width -- and it works with MSIE and Netscape. Unfortunately, Opera won't play; it still looks okay, though.