Retro Web Building Resource Center

★ Mae's Retro Web Resource Center ★
A guide to building like it’s 1997–1999 again.

BEST VIEWED IN

800x600

What was the late-90s web like?

Personal sites were hand-built, slow-grown projects—more like sketchbooks than products. People:

Used free hosts (Geocities, Angelfire, Tripod) and carved out “neighborhoods.”
Linked to each other with webrings, link pages, and “neighbors” lists.
Experimented with layouts, colors, and GIFs just for fun.
Treated their sites as diaries, shrines to fandoms, art galleries, or just “whatever I feel like.”

The web felt like a patchwork quilt—personally run, imperfect, and full of personality.

Common Components of a Late-90s Personal Site

1. Splash Page
A front door with:

“Enter” link or image.
Browser/Resolution badges.
Sometimes a password or age warning for certain content.

2. Frames or Table Layout
Many sites used <frameset> or big tables to keep navigation on one side and content on the other.

3. Navigation Menus
Often simple text links or image buttons:

“About Me”
“Photos” or “Gallery”
“Links” / “Webrings”
“Awards”
“Updates” / “News”
“Guestbook”

4. Guestbooks
Instead of comments, people signed guestbooks hosted by third-party services. It was a big deal to get a new entry.

5. Webrings & Directories
Webrings were small networks of sites on a theme. A ring code box usually had:

“Previous | Next | Random | List” links.
Ring title and owner credit.

Directories were curated lists of sites—friends, fandoms, or topic-based collections.

6. Awards & Buttons
Site owners gave each other awards—little 88x31 or 120x60 images saying “Cool Site Award.”
People also traded buttons (88x31 GIFs) to link to each other’s sites.

Etiquette, Culture, and How Things Worked

Linking & Credit

Always credit where you got graphics, backgrounds, or scripts.
“Link back” buttons were common—people asked you to use a specific image to link to them.
Stealing bandwidth (hotlinking) was frowned upon; you were supposed to save images to your own host.

Directories & Rings

People joined topic-based directories (e.g., “Witchy Sites,” “Anime Fans,” “Skateboarding Pages”).
Webrings connected similar sites in a loop, encouraging exploration.
Ring owners manually approved sites and updated ring code.

Updates & “Under Construction”

Sites were always changing; “Under Construction” GIFs were everywhere.
Update logs showed what changed and when.
It was normal for pages to be half-finished or broken—experimentation was part of the charm.

Personal Expression
People used their sites for:

Online diaries and journals.
Fan shrines to bands, shows, games, or characters.
Original art, poetry, and stories.
Collections of links, resources, and tutorials.

The web felt like a slow, ongoing craft project—built over months or years, not launched all at once.

Common Layout Styles

1. Centered Single Column (“Center Flow”)
A fixed-width table or <div> centered on the page, with content stacked vertically.

2. Sidebar Layout
A table with two columns:

Left column: navigation menu, buttons, webring code.
Right column: main content.

3. Three-Column Layout
A table with three columns:

Left: navigation.
Center: main content.
Right: extra stuff—buttons, quotes, updates, or a “tagboard.”

4. “Broken” / Freeform Layout
Elements placed “everywhere” using nested tables, spacer GIFs, and sometimes absolute positioning:

Floating images and stickers.
Text blocks at odd angles or positions.
Backgrounds that didn’t line up perfectly.

Imperfection was part of the aesthetic—pages felt collage-like and handmade.

Design Methods: GIFs, Blinkies, Navigation, and More

Animated GIFs & Blinkies

Small looping animations: stars, flames, spinning “NEW!” icons.
Blinkies: tiny rectangular GIFs with flashing text.
“Under Construction” signs, traffic cones, digging men.

Stickers & Decorations

Random clipart: hearts, skulls, flowers, pixel art.
“Stickers” placed in corners or margins of the layout.
Repeating tiled backgrounds for the whole page or specific tables.

Navigation Styles

Text links separated by pipes: Home | About | Links | Guestbook
Image buttons (often 88x31 or 120x60).
Sidebars with vertical lists of links.

Marquees & Scrolling Text
The <marquee> tag scrolled text horizontally or vertically:

News tickers.
Welcome messages.
Scrolling credits or quotes.

Color Choices

High contrast: neon text on black, or bright backgrounds with dark text.
Lots of pure web-safe colors: #FF0000, #00FF00, #0000FF, etc.
Gradients and tiled background images were popular.

Fonts, Colors, and Technical Limitations

Common Fonts
Most users only had a few fonts installed, so authors stuck to:

Arial
Verdana
Times New Roman
Courier New
Comic Sans MS (for playful sites)

Fonts were set with the <font face="..."> tag, often with fallbacks:
<font face="Verdana, Arial, Helvetica">Text</font>

Colors
Many designers used the 216 “web-safe” colors to avoid dithering on 256-color displays.

Bright primaries: #FF0000, #00FF00, #0000FF
Neon accents: #00FFFF, #FF00FF, #FFFF00
Dark backgrounds: #000000, #000033, #330000

Screen Resolutions

Common: 640x480, 800x600, 1024x768.
Many sites were designed for 800x600 and centered in the browser.

Bandwidth & File Sizes

Dial-up connections (28.8k, 33.6k, 56k) were slow.
Images were kept small (88x31, 120x60, 200x200, etc.).
Heavy pages took a long time to load, so optimization mattered.

HTML & CSS Limitations

CSS support was limited and inconsistent.
Most layout was done with tables and spacer GIFs.
JavaScript existed but was often used sparingly (rollovers, alerts, simple effects).

Code Resource: Building Blocks & Common Practices (Late 90s Style)

Below are basic snippets you can copy-paste to build your own retro-style site.

1. Basic Page Template

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>My Retro Site</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#000000" text="#FFFFFF" link="#00FFCC" vlink="#FF99FF" alink="#FFFF00">
<center>
  <h1><font face="Verdana, Arial" color="#00FFCC">Welcome to My Site</font></h1>
</center>
</body>
</html>

2. Centered Table Layout

<center>
<table border="0" cellpadding="8" cellspacing="0" width="760" bgcolor="#000022">
  <tr><td>
    <font face="Verdana, Arial" size="2">
    Your content goes here...
    </font>
  </td></tr>
</table>
</center>

3. Sidebar Layout (Two Columns)

<table border="0" cellpadding="5" cellspacing="0" width="760">
  <tr>
    <td width="150" valign="top" bgcolor="#000033">
      <font face="Verdana, Arial" size="2">
      <b>Navigation</b><br>
      <a href="index.html">Home</a><br>
      <a href="about.html">About</a><br>
      <a href="links.html">Links</a><br>
      <a href="guestbook.html">Guestbook</a><br>
      </font>
    </td>
    <td valign="top" bgcolor="#000011">
      <font face="Verdana, Arial" size="2">
      Main content goes here...
      </font>
    </td>
    </tr>
</table>

4. Marquee (Scrolling Text)

<marquee behavior="scroll" direction="left" scrollamount="3">
  <font face="Verdana, Arial" size="2" color="#00FFCC">
  Welcome to my retro site! Check out the links below!
  </font>
</marquee>

5. 88x31 Button (Link to a Friend)

<a href="http://example.com" target="_blank">
  <img src="friendbutton.gif" width="88" height="31" border="0" alt="Friend's Site">
</a>

6. Generic Webring Box

<table border="1" cellpadding="4" cellspacing="0" bgcolor="#000000">
  <tr><td align="center">
    <font face="Verdana, Arial" size="1" color="#FFFFFF">
    This site is a member of the <b>Cool Retro Webring</b>.<br>
    <a href="ring-prev.html">Previous</a> |
    <a href="ring-next.html">Next</a> |
    <a href="ring-random.html">Random</a> |
    <a href="ring-list.html">List</a>
    </font>
  </td></tr>
</table>

7. Award Badge

<table border="1" cellpadding="4" cellspacing="0" bgcolor="#000000">
  <tr><td align="center">
    <img src="myaward.gif" width="120" height="60" border="0" alt="My Cool Site Award"><br>
    <font face="Verdana, Arial" size="1" color="#FFFF00">
    Awarded to sites I really like!<br>
    Email me to apply.<br>
    </font>
  </td></tr>
</table>

8. Guestbook Link

<font face="Verdana, Arial" size="2">
  <a href="http://guestbook-service.example.com/myguestbook" target="_blank">
  Sign my guestbook!
  </a>
   |
  <a href="http://guestbook-service.example.com/myguestbook?view" target="_blank">
  View my guestbook</a>
</font>

9. Table with Tiled Background

<table border="0" cellpadding="8" cellspacing="0" width="100%" background="stars-bg.gif">
  <tr><td>
    <font face="Verdana, Arial" size="2">
    Starry content here...
    </font>
  </td></tr>
</table>

10. Simple JavaScript Alert (Optional)

<script type="text/javascript">
  alert("Welcome to my retro site!");
</script>

Mix and match these building blocks, keep your layouts table-based, and don’t be afraid of bright colors, GIFs, and a little chaos. That’s the spirit of the late-90s personal web.