Home » Design » Web » The Mad Trivia Party 2001
The Mad Trivia Party 2001
In 2001 I was learning CSS and was excited about DIVs and absolute positioning. However, I was nowhere near comprehending how to do that on a full-viewport scale, so when it came time to revamp the largely boring Mad Trivia website in the summer of 2001, I compromised - I confined my CSS experiments in a fixed-size browser window popped with JavaScript when the visitor landed at the URL. (The actual landing page says "Please use the pop-up window that has now loaded.") While not necessarily the most elegant thing on the planet, it worked well.
Because we were a college radio-based show, and had literally no budget, the photos were taken with an incredibly awful digital camera from the period - I think it was made by HP and the resolution of the photos was, like, 800x600. As a designer it's hard not to look back on this and wonder how much better it could've looked if we knew someone with a Nikon D3 or something. But we went ahead with it.
The entire size was built to fit into a fixed 700x500 window, making it fairly easy to make a progressive-looking site with just absolutely-positioned DIVs. I took the opportunity for little things in the background - for example, the background picture in the menu of one of our panelists grabbing a microphone. If an inside page (like the "About") page needed to scroll, I Photoshopped the trans-black section under the text into the background picture, and adjusted the margin of the page to keep the text in that section. The scrollbar was automatically applied by the browser, helping achieve the "overflow: hidden" DIV technique I enjoy using now, but in a way that, for the time, was much more compatible.
In addition to photo-based information pages, each member of the show had a bio page with a full-height photo (even though the photo quality is fairly cringe-worthy now), and a history page which attempted to capture the show's then-21-year history.