Guide Index

Quick Links

Legacy HTML Tutorial

Created on April 6, 2021

Contents

Required Materials
Introduction
Archaic Considerations

Contrast Consistency
Screen Resolution
Image Size and Formats
Color Schemes

Ready to Get Started?

By the looks of this website, it has to be something from the late 90's... sure enough, it's designed to stretch the capabilties of browsers from 1995 to 1999. Due to Razorback's versatility, lightweight design, and allowance for both HTTP and HTTPS connections, it's become kind of an informal benchmark for these kinds of browsers. While this site's techniques make the W3C validator flip out, it manages to render fairly consistently across a multitude of browsers save for some really early or mobile-geared ones.

So how does one create a website that can adapt to a browser as crude as Internet Explorer 2 while taking advantage of newer features present in version 5? The way I've gone about this required a number of deviations, compromises, and cumbersome techniques. In this multi-part guide, I'll show you how to create a stylish website without the need for any graphic design knowledge. Obviously, having some Photoshop wit will help spice up your site, as long as you don't abuse images too much like something from GeoCities.

Note: This guide does not attempt to go by W3C's standards even as it tries to take major browsers into account, and so any work resulting from this guide may not validate. If this is of concern to you, either do not use this guide, or be sure to run W3C's validation service when you're ready. I cannot make any guarantees that using the validation service will preserve compatibility with ancient browsers, either.

Required Materials

You really don't need all that much to put together a good website beyond the following things:

Plain text editor (Notepad, Notepad++, Vim, etc.)
A web browser, preferrably an old one
A web server, either local or global (though you can also preview HTML files in your browser instead)
(Optional) Photoshop or another imaging program for creating and converting graphics (ImageMagick can also do the latter well)

Also, in order for your website to work in outdated browsers, it needs to support plain, unencrypted HTTP. This can be used alongside HTTPS in your web server. It's not advisable to use any encryption level below TLS 1.2, especially if at least part of your site requires high security such as login forms. Web server configuration will not be covered here, nor will any client-side or server-side scripts be used. Please do not implement client-side scripts in your website, as they create unnecessary overhead for the user.

Introduction

When you go to a website like Razorback, your browser retrieves hypertext from a remote server and interprets the text for rendering a page's contents like the way you see it now - the black background and white text, the sidebar on the left, the bulleted list above, and even the images such as those seen at the site header.

There's no need to compile a new program or have any sort of special development environment handy. While many web browsers can differ from one another in a number of ways, they all agree upon a single interpreted language to render the same web page in a (mostly) consistent manner, allowing it to be accessed the same way from nearly any device. The language web browsers use is HTML, which stands for Hypertext Markup Language.

In the early days of the World Wide Web, HTML standards were minimal, and browsers were left to add their own custom features to help websites stand out from one another. HTML would undergo two major revisions in the span of a few years to adapt to the necessity for stylization and advanced layouts. So, if you're only targeting IE5 or later, you'll be all good with a combination of HTML4 exclusively for content structure and CSS for stylization, and you'll pretty much have full control over the color scheme you wish to use for each part of every web page.

Archaic Considerations

But say you want to create something that's fully usable in web browsers from 1995... if you want to pull this off, there are some considerations you'll have to make upfront.

Contrast Consistency

First and foremost, if you want a page to be dark, the whole page must be dark. Razorback didn't always look that way in its first week; the content used to have a white background with black text, but as more users began showing how it looked on old browsers, I knew I had to do something about that, being someone who uses Windows 95 so often.

In the process, I had to forfeit the paper-esque background and go full "dark mode" to compensate for Internet Explorer 1, which does not support background colors in table cells and ultimately causes the black text to blend in with a black background. IE1 is painfully crude compared to its immediate successor, as it seems to be bad at handling tables in general. Don't worry about it too much; although IE1 is bundled with Microsoft Plus and some Windows 95 CDs, it's an undesirable version either way. Just remember this point to take as many browsers into account as possible: always use a consistent text-on-background contrast across the entire page. You can vary the coloring in different sections, but if you want black text, always use light backgrounds. If you want white text, always use dark backgrounds. Don't alienate those who at least want to try such an archaic thing like IE1.

Screen Resolution

While Razorback does not compensate for mobile devices, it is designed to be flexible with common desktop screen resolutions from 640x480 to 1600x1200. To account for such a small starting resolution means one has to think with very little real estate in mind. Tables and images cannot be too large, and having a sidebar further penalizes the space you'll have to work with. You may not think it is necessary, but if you truly want users to come to your website from old browsers, expect that they will be using 640x480, as plenty of displays exist which cannot exceed even that resolution.

Sidebars can have smaller font sizes if need be, but going too small will almost certainly make text too difficult to read, so keep it reasonable. Also make sure that your headings are not too long.

Image Size and Formats

The only two formats you should rely on for inline image display are JPEG and GIF. It is perfectly acceptable to link to PNGs, but do know that many browsers prior to late 1997 are not capable of displaying them inline. You should create a separate "preview" image in either a JPG or GIF format depending on how many different colors the image has and/or if it has transparency.

Also, if you want to host large images, you should create downscaled previews of them alongside the originals either way. Inline preview images should be sized no larger than 425 pixels of either dimension, and more often 320 pixels or smaller. Preview images can be linked to the original counterparts in your web pages.

Color Schemes

Most of the time, web browsers will automatically adapt high color images to fit within low color depths like 256 colors, 16 colors, and even monochrome if one is to go through the trouble of that for a while. You shouldn't have to worry about it too much unless having plenty of colors in an image is critical to its function.

As for plain background and text colors, it would be a good idea to take low-color video modes into account. Try to match colors with those usually found in a 16 or 256 color scheme. In 256 color mode, an operating system may try to dynamically adjust the palette for the contents of a page (this works best when the browser is maximized), but it'll be less strenuous on the client to use commonly available colors rather than very specific ones. Make sure to test whatever low color depths you plan to account for on a separate machine, and tweak styling as needed. Accounting for black and white displays on laptops and some CRTs is also worth considering. (In other words, I need such a thing myself...)

I strongly advise against using a background image for your site even if it will be overlapped by colored table cells. The last thing you want to end up doing is butchering readability anywhere, and the lower the color depth is, the harder it can be for the background to contrast the foreground nicely.

Ready to Get Started?

Those are some of the design principles of Razorback that should be effective when applied in more legacy websites. Surely they oughta be much better than anything Google would advise! While I will not bring up "flat" design at all here, it is actually a valid aesthetic for old school websites given the defunct retail chain Ames pulled off something like that all the way back in 1996. Of course it is not something you should try yourself; you'd want something easier on the eyes.

So, let's get you off of that Twitter and onto your very own website construction zone! Click the Next button down below so we can go over the basics of a web page.

1 2 3 4 5 6 7

Next: The Very Basics