Kevin Dolan: Pioneer of Lo-fi Web Design
Some time ago, after eating a couple sandwiches late one night, I had come to a web-design epiphany. I was feeling nostalgic about 90′s web design. I remembered a time when 60% of the internet’s websites were hosted by either Geocities or Angelfire. I remembered a time when animated gifs were king. But most of all, I remembered a time of youthful enthusiasm for the digital revolution, the dot-com boom. So I set out to capture the spirit of 90′s web design, without abandoning the contemporary principles of good web design practices. Thus, the official WeggaloStar.com was born…
This epiphany was over a month ago. A couple different web design projects distracted me. Ultimately though, I was just scared. With the design of this website, I had considered implementing some of the ideas I had, but in the end decided against it. You’ll find very few animated gifs on this site!
So when I finally completed the traceability project, I was heading to the bank to cash my check, when I remembered that Weggalo Star, the rock band formed from 5 of my friends in Ithaca, had purchased the domain name WeggaloStar.com, but were yet to develop it in any way. So I decided that I would make Weggalo Star the flagship for what I am now calling Lo-fi Web Design. (Lo-fi is also sometimes used to mean a low-bandwidth version of a site, but I think my definition is more relevant to low fidelity, see wikipedia).
So I was sitting at my computer desk, checking the Wayback Machine and reading an article or two. I took a look at the first website I ever made… I tried to recall some of the hallmarks of 90′s web design, and see if I could separate what made those Geocities sites so terribly unusable from what made them fun.
My goal for this website was to capture the essence of 90′s web design in a fun way, while keeping the site usable and modern. I wanted to make sure that if a designer saw the site, he would know it was not made by a rookie, but at the same time, maybe get a kick out of the cheesy animated gifs. I wanted it to be both fun and usable to a non-designer as well; after all, this site was going to be used by a band I actually like.
So I started with something to impress. I wanted to make an impressive graphical logo that basically captured the idea of Lo-fi design as best as possible. I browsed some photoshop forums and found an interesting idea of blending white letters with splattering milk. I spent about 5 hours designing the word ‘Weggalo’ used on the site.
I experimented with a couple different ways of writing ‘Star’, but in the end was disappointed with the results. It was then that I recalled how Weggalo Star finally found their name after weeks of searching. Dave had discoverred the word ‘Weggalo’ written in white stickers on the white wall above his door. They had considered using Weggalo as their band name, but added ‘Star’ because their was a star symbol next to the name. So it was only natural to use an actual star, and I had found the perfect animated GIF. This was the perfect outlet to begin working with the 90′s web design elements.
For the actual site layout, I wanted something fun. One of my favorite parts of 90′s web design was the flagrant use of Flash in websites. Flash is still used today, and I have used it to design websites as well. Now that Google can crawl Flash websites, they are becoming more and more appealing. But in the 90′s, accessibility and SEO were not on any designers’ minds. Rather, people just giddily used whatever technology they could get their hands on.
For the layout, I wanted to make it remind people of a flash website, without actually being made in Flash. I’ve been on a quasi-standards kick as of late, so I wanted to use straight up HTML/CSS with a little Javascript to boot. So I got the idea of setting the whole thing within the screen of a television… and to give it a nice retro feel, I found an awesome stock photograph of this old-timey orange TV. I fell in love and started working with it right away.
Another 90′s personal website hallmark was busy, sometimes even animated backgrounds. I remember a time when websites featured full-color photographs of people’s families. Reading text with a background like this was almost impossible, and usability was something I wanted to preserve with this site, so I decided that I would only make he background behind the television busy, and what could be more busy than an animated GIF!
Sticking with the TV theme, I wanted to use some white noise TV-static. I searched the internet and found several gifs, eventually settling on a really intense blue static image. The image didnt tesselate very well, so I spent an hour or two making it into a seemless texture. I later found this image to be fundamentally too busy, however, when I saw that firefox was using 62% of my CPU to render the background. Not to mention the fact that it really hurt my eyes. Towards the very end of the proejct, I switched to the static image I use now, which was made by the Add Noise filter in photoshop! This image is easier on both the computer and the eyes.
Once I got that all squared away, I went to go put it all together. I put a scrollable div behind the TV image and found out that even though a png is transparent, doesn’t mean you can click an element underneath… so I had to slice the TV. The scrollbar would be unclickable unless I moved it in several pixels from the edge, so I had to put the color-bar spacing on the right-hand side, which after I saw it I thought was actually a nice touch.
Adding the content was pretty much just a copy-paste job from the band’s MySpace. I used basically the same navigation that I used on this site, for another Web 2.0 touch to show people that it is indeed a modern site. Initially I had tried to put a scrolling marquee navigation below the television set, but this proved so unusable that I decided to scrap it. Again, I didn’t want to sacrifice usability for nostalgia.
For the About page, I found animated gifs that I thought represented all the people in the band pretty well. According to my friend Alix, the GIFs on this page seem to justify all the other animated GIFs everywhere else. All the content on this website exists in a single HTML file, and the site uses an AJAX-type navigation (though there are no AJAX requests, so not really), so the whole thing actually takes a serious load time. I didn’t like how the page loaded on its own, so I added the splash page.
If you don’t remember splash pages, it was a time when people first learned how to use Flash, and they just wanted to use it everywhere they could, even though they really shouldn’t have. To quote the article I linked to above,
Flash “splash pages,” as these opening animations were called, became the internet’s version of vacation pictures. Everyone loved to display Flash on their site, and everyone hated to have to sit through someone else’s Flash presentation.
Of course, I didn’t want to have an annoying Flash page, so the loading cover is actually fairly modest. Just a bigger version of the milk logo that I made, with the words ‘Website Weggaloading’ (man, am I clever!) Also, there is one of those AJAX-loading bars to give it another modern touch.
I even added an animated GIF of a letter flying into a mailbox on the contacts page; I really had fun with GIFs on this site!
The rest of the site was essentially functionality-based. I wanted to put some of their videos on the site, but I didn’t want to just embed some YouTube players. I then realized that the whole site was in the screen of a television, so it only made sense to blow up the players and fill the entire screen. The YouTube player resizes very well, so this was incredibly easy. Weggalovision was born!
One thing I noticed though, was that as the video played, it was incredibly choppy! It turns out, that rendering animated gifs at the same time as a YouTube video was too much to handle. This was the epiphany that made me change the static image to what it is now, but even that wasn’t enough to get it just right. So whenever Weggalovision is launched, the background image is switched out for a static (no pun intended) one. I had some troubles with the code for that for some reason, I’m not really happy about the brief white background while the new one loads, but that was a problem to which I could find a solution for the moment.
I used one of those silly sticker images for the Weggalovision exit button, which was a bit of fun. At this point, the site was almost done. All I needed to work on now was the audio player, to play the band’s songs, because after all– this is a band website. Now normally, a Flash website would accomplish this rather easily, but since I wasn’t using Flash, I had a bit of difficulty.
While searching for the JavaScript library I used for Power Hower, I happened upon this library, which was far more developed and more extensive. The library actually uses Flash to play the songs (go figure) but it allows for streaming access to mp3 files and full javascript control, so it was perfect. I built the controls of the media player into the TV controls, and did some silly photoshop work to make it look like something was actually happening.
I added some animated GIFs of tiny band members to the TV to indicate in some way that the music controls were there, but to take it even a step further, when you pause the music, the musicians stop playing. This is actually accomplished by an image replacement, since there is no Image.stop() command to my knowledge, but you can hardly tell.
There were some other usability touches I won’t bore you with. I signed my work with a link at the bottom of the site that reads “This site is brought to you in Weggalow-fidelity by DesignByDolan.” I thought that was minorly clever, and you should too. The site was basically done now, and ready for the internet.
We had a hell of a time finding Ariyan’s GoDaddy login information, and the DNS stuff just now got populated, so the site will be up shortly after writing this post. Overall, it was two days of hard work, but at the same time, the most fun I’ve ever had designing a website. I am particularly proud of it, and I can’t wait to see how the design community responds to it. I’m not really expecting a positive response, but I like it– and that’s all that matters.
If you haven’t already, check it out: WeggaloStar.com!