how to make a retro looking website straight from the 90’s!
February 25, 2022
written by
Forrest Darabian
Do you ever miss the feel of a good old webpage? No ads, no pop-ups for 10% off your next purchase, just Comic-Sans and quirkiness?! I for one get a nostalgia-kick every once in a while and decided to take it upon myself to make a website that celebrates all that bizarre 90’s awesomeness and I’m going to show you how to do the same.
why would somebody make an outdated site?
There are plenty of reasons for creating a bad website. For starters, if you are just learning the principles of web-design, it can be a perfect example of what your modern day site SHOULDN’T look like! It can also serve as a portfolio piece or you could even implement a “90’s mode” toggle on your modern site that overrides all the CSS to show gloriously basic styles upon clicking it.
I just really love the aesthetic of it all. The site I made for this example can be found here. I created the site in React, however, it is clearly something that can just be made with Vanilla-JS, HTML and CSS. Note that basic Front End Web-Development experience is required but let’s get into it!
some places i took inspiration from
- The SpaceJam website that up until the new sequel, had not been updated since 1996
- This archive of what popular brands websites’ looked like in the late 90’s (Pepsi, Adobe, Best Buy, Lego, etc.)
- Wowser the Lazy Dog’s Official Website
what’s the most important thing i need?
Gifs. Lot’s of them. I got mine from this amazing website called gifcities.org
Another big thing I think is important for a website like this is… well, something to do. Sure it’s cool to browse a site and read around for maybe 30 seconds or so, but to keep my visitors engaged, I implemented a tic-tac-toe game they could play on the site. I just followed a simple Youtube tutorial on how to code a tic-tac-toe game in Javascript. You can do the same, or maybe try one of these game suggestions:
the tutorial
If you really want the ultimate 90’s experience, no need for semantic HTML or responsiveness at all. But since nowadays “Mobile accounts for approximately half of web traffic worldwide.” according to Statista.com, it would be smart to at least use some media queries to ensure the site is viewable on a mobile phone.
You’ll also want to make sure you set a background image for each page. This will add that crowded and obnoxious look across the site. Make sure to go with a very basic color scheme that includes lots of dark reds, dark blues, or light yellows so the visibility is also a nightmare. Like I mentioned before, fonts like Comic-Sans, Helvetica, and Times New Roman will also ensure your site has that 90’s feel.
Something fun I included while playing the tic-tac-toe game is an embedded Youtube video that plays an album of 8-bit songs to accompany your gameplay. I chose an 8-bit Slipknot album to add to the intensity, however, you can add whatever kind of music you like! Just be sure to include this code in the embedded Youtube video to ensure it stays small and doesn’t interrupt the gameplay:
<iframe src="your youtube video here" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
Other than that, just be creative! No one will judge you if you’re purposely trying to make a site fun and carefree. As for hosting, I chose Netlify as a free and simple hosting solution, but it is entirely up to you where you choose to host your site.
The key takeaway is to be as simple and basic as possible when it comes to structuring your code in HTML, the bizarreness is all in the CSS. Get some inspiration from outdated websites that haven’t been updated in ages and just go to town!