the original design

Back in August of 2004, I created the following design (click thumbnail for larger picture in new window--wow, I haven't typed that phrase in a long time, LOL!!). This was for my first website, a Yu-Gi-Oh! fansite called Transcendence, hosted on curiouslittlebird.tripod.com for about a year, and then later on this very domain till 2008.

the design that sparked this whole site

Layout Features

  • Top left alignment on screen (very 2003-2004 aesthetic)
  • Small size (640 x 480 background image)
  • Iframe layout (prevented having to copy layout code onto every content page, hallelujah)
  • Transparent iframe (involving arcane-looking "filter: chroma" CSS, and only for Internet Explorer)
  • Custom colored scrollbars with transparent tracks, both for the page and the iframe (which doesn't even work now...ugh, IE, you had one job!)

This design reflected what was trending in my little neck of the Internet woods in 2002 and 2003, when I first got into webdesign. At that time, I was in the Yu-Gi-Oh! fandom online, which was the first online fandom I ever joined; seeing everyone else's designs and writings had motivated me enough to try making my own website in the fall of 2003. Incidentally, that was also when I went off to college and had access to blazing fast internet for the first time in my life. (I was coming from rural-area dialup that had 48.8 KBPS if we were LUCKY, so my college's connection of 50 MBPS was AMAZING.) Suddenly I was able to see everyone else's work and marvel at what they'd done...and also start formulating my own ideas and researching them much faster than dialup had ever allowed.

All of my role models in the fandom were making these lovely boxy "iframe-floating-on-image" layouts that looked SO seamless and pretty, especially with their transparent scrollbars specifically styled for each layout. Because I was worried about using actual images in webdesign due to copyright rules, I took it upon myself to make a lot of my early designs in Microsoft Paint, imitating the aesthetic I wanted to go for. Unfortunately, when I created this, I had only been hand-coding and designing websites off and on for a little under a year, and only had access to Microsoft Paint and Photoshop Elements 2.0, a much more stripped down version of Photoshop even for the time period. I also had very minimal skills and even less patience when it came to image editing, LOL! Thus I kinda sorta blended colors together until I got something that worked and that I could code.

For the actual HTML and CSS, I largely used CuteHTML, a forerunner of Notepad++ and Sublime. However, CuteHTML didn't do much in the way of WYSIWYG layout editing, so most of the trickery in this layout came from talking with the good friends I had made in the Yu-Gi-Oh! fandom, who were also absolute wizards when it came to the actual code behind those pretty layouts. After several emails back and forth over the course of a few days, I finally learned how to create the effect of transparent images from a fellow Seto Kaiba fan who went by the username of Setine; through more emails I also learned more tricks about HTML and the esoteric weirdness of something called PHP from my friends Huma and Annie. (By the way, Setine, Huma, if y'all are reading this, definitely message me sometime--I'd love to catch up!!)

Overall, this design was the best I could do at the time, but I knew that for this nostalgic project, I wanted to revisit it and make it better...

2004 Design vs. 2019 Design »»