Design begins with a consideration of the intended audience. Most people viewing this site would be using dial-up modems, so the complexity and volume of downloaded files would make a big difference to how easily my intended audience could browse the site. I consequently decided not to use icons to decorate pages and navigate the site. Each icon file would have added to download time and increased the chance of a download failing. The site is about photography, so pictures and text should provide enough decoration.
I know lots of sites use frames, but they clutter up the window and can often have unpredictable results. I decided to make frames entirely optional, with the default being no frames. The overriding principle in the design of these web pages was to keep the html as simple as possible, thus minimising the risk of incompatibility with any individual browser or environment. The navigation bar at the bottom of each page is actually coded as a table.
The Times Roman font that most browsers use by default is a bit boring. I looked for a nice friendly chatty font and found Comic Sans MS. However, not every one would have Comic Sans MS installed, so I coded the html to use Times Roman and Arial as back up fonts. I also wanted a nice bold simple page layout avoiding lots of small text, so the basic font size was set to “4”.
All pictures were taken as 35mm slides and then digitised with a slide scanner. The resolution of the scanned images was then greatly reduced and jpeg compression used to give image files of about 30 kilobytes.
Pictures could take a long time to download. One solution would be to have thumbnail images that viewers could click to download a picture, but my site was going to be primarily about the pictures so I decided to put all pictures within the text pages. To keep download time reasonable I settled on a maximum of 3 pictures to a page. I also used picture size attributes in the html to stabilise the page layout while pictures were downloading.
The background was created using Photoshop. I started by selecting a blue tone and rendering it with a paper texture. I then selected a shark from one of my photographs and tiled it across the page to create a repeatable pattern. To create the overall effect I overlaid the whole image with a layer of white and played with the opacity. Finally the image was exported to a gif file.
There are a lot of html design tools out there. I tried a few of them, but they all coded an incredible amount of excess baggage into the html. I settled for hand coding the html with a browser window open for preview. When I wanted to do something a bit more complex I would sometimes see how a design tool would code it then re-write it by hand to strip out the unnecessary code.
If you are a programmer, the analogy is between programming in a high level language and in an assembly language. It is easier to do complex things in a high level language, but at the cost of slower and more bulky code.