|
Intershame Weblog Intershame Site Design |
Going Retro
06/27/2009
I promised in my first weblog post that I would go into the design of Intershame.com. I'm actually pretty excited to write this weblog entry so I can revisit some of the stuff that was done. To sum it up - Intershame went retro.
Intershame was designed to resemble a website that might have been made back in the mid-90's. We figured it was about time that some website out there went retro. It's been over 15 years since Internet pioneers started laying the groundwork for the web that we know today. The design of Intershame is a tribute to them and the De facto style standards they collectively crafted during those early years. We wanted to incorporate as many of those styles into Intershame as we could. So, here's a list of what we threw into the site:
1) The navigation menu on the left of the page uses the standard ul/li html list tags. That stupid black dot is still the default list item indicator and we wanted to keep it. Nobody styled lists back then and we don't either.
3) The footer uses table borders, of course.
9) Our headline in the upper left hand corner is a replication of the "h1" tag. Who needs flashy web 2.0 graphics when you have h1 in your arsenal? And we couldn't just write "Intershame.com" - we're required by 1995 standards to welcome you to our site (with an exclamation point).
10) Our sub-headline, "Shaming bad behavior on the WWW since 1995!", incorporates the year 1995 in a technique we like to call "bullshit" to help date our site. The other way we date it is by using "WWW" which was very common.
14) Along those same lines, we slightly faded most of the text on the site as well.
15) We wanted to give the site a used look, so we tore the bottom of the navigation frame, tore the right edge a bit, added a corner fold in the bottom left hand corner and originally had a coffee stain in the main portion of the page, but got rid of it because it was distracting.
Like the coffee stain idea, we left some elements out:
1) Animated gif. We couldn't bring ourselves to add that much of a distraction to the site.
2) Scrolling text. Again, too much of a distraction.
3) Web browser "ad". Remember those "Netscape Now!" or "Best if viewed with Internet Explorer" images you used to see everywhere? Well, we were going to make a "Firefox Today!" or a "This page looks great in Chrome!" image, but didn't. If you want to make one, send it to us and we'll give you credit for it if we use it.
That's the gist of it. We hope you find the look of the site amusing and not too distracting. We had a blast doing it. Although we tried to work in as much classic web design elements as we could without going too overboard we very well might have left something important out. If you can think of anything, let us know - we might work it in.
Intershame was designed to resemble a website that might have been made back in the mid-90's. We figured it was about time that some website out there went retro. It's been over 15 years since Internet pioneers started laying the groundwork for the web that we know today. The design of Intershame is a tribute to them and the De facto style standards they collectively crafted during those early years. We wanted to incorporate as many of those styles into Intershame as we could. So, here's a list of what we threw into the site:
1) The navigation menu on the left of the page uses the standard ul/li html list tags. That stupid black dot is still the default list item indicator and we wanted to keep it. Nobody styled lists back then and we don't either.
Navigation - Lists and (torn) Frames
2) Top and left hand side of the site are supposed to resemble frames as the appeared in an early version of Netscape Navigator.3) The footer uses table borders, of course.
Table borders
4) On the left side of the footer you'll see a fake "web ring". Websites with similar content used to link to each other in this manner. The Shame Ring, doesn't actually link to anything. Someday it might if we think of something creative. Let us know if you have any ideas.A (fake) collection of shame sites.
5) On the right side of the footer there's a "top 5" banner. Naturally this banner is meaningless, as were most of these types of banners you saw on websites in the 90s. A friend of mine said, "Those old banners meant about much as a 'World's Greatest Dad' T-shirt". Sounds about right.Intershame is a top 5 site. Top 5 of what? We don't care.
6) Smack dab in the middle of the footer you'll notice a web counter. Nearly every site on the web back in the 90s used these to boast about how many visitors they were able to draw.Look at all those hits.
7) Below the navigation frame is a MIDI player. Most of the time websites would default the MIDI music to "on" so when you loaded the page, you'd hear a crappy pinging version of a Zepplin, Star Wars or Simpsons song. We're not mean enough to subject you to auto-music, but you're free to turn it on so you have some music to listen to while you read an Intershame (or this weblog post, for that matter). First person to correctly identify one of the songs will be recognized in this weblog.Grove out to some MIDI tunes
8) Notice this isn't a blog, it's a weblog. Technically the term hadn't been invented yet, but whatever. Weblog sounds more retro.9) Our headline in the upper left hand corner is a replication of the "h1" tag. Who needs flashy web 2.0 graphics when you have h1 in your arsenal? And we couldn't just write "Intershame.com" - we're required by 1995 standards to welcome you to our site (with an exclamation point).
10) Our sub-headline, "Shaming bad behavior on the WWW since 1995!", incorporates the year 1995 in a technique we like to call "bullshit" to help date our site. The other way we date it is by using "WWW" which was very common.
Headline and Sub-Headline
11) All our headline banners (the black, or in this case yellow, boxes at the top of the page) are all 468x60 - a size banner you saw everywhere on the early Internet.468x60 = Awesome
12) We added a guestbook, purely for our amusement. We were going to make it functional, but then thought if we left it broke we could add an "under construction" image and fire up the "blink" tag. The blink tag is recognized in some browsers, so you might see it, you might not. In order to really drive home the point that this site is old, we reference Myst in our explanation as to why the guestbook is broke. Myst was pretty cool. The comments in the guestbook are all dated appropriately too.Good luck signing this broken down piece of garbage.
13) All the links are the standard Netscape link colors, but faded a bit so the site looked more worn. And by fading the links we could add effects to highlight the links back to their original color when moused over.14) Along those same lines, we slightly faded most of the text on the site as well.
15) We wanted to give the site a used look, so we tore the bottom of the navigation frame, tore the right edge a bit, added a corner fold in the bottom left hand corner and originally had a coffee stain in the main portion of the page, but got rid of it because it was distracting.
Everyday wear and tear.
Like the coffee stain idea, we left some elements out:
1) Animated gif. We couldn't bring ourselves to add that much of a distraction to the site.
2) Scrolling text. Again, too much of a distraction.
3) Web browser "ad". Remember those "Netscape Now!" or "Best if viewed with Internet Explorer" images you used to see everywhere? Well, we were going to make a "Firefox Today!" or a "This page looks great in Chrome!" image, but didn't. If you want to make one, send it to us and we'll give you credit for it if we use it.
That's the gist of it. We hope you find the look of the site amusing and not too distracting. We had a blast doing it. Although we tried to work in as much classic web design elements as we could without going too overboard we very well might have left something important out. If you can think of anything, let us know - we might work it in.
Comments
- 1052 days agoIt'a pretty good, but you could use a crappy gif 'Email" button like this one: http://www3.sympatico.ca/annmce/CFUW%20Etobicoke%20Website/email%20button51.gif ! Also, perhaps a little blurb at the bottom that says "Best viewed in Netscape Navigator 1.0" :-)
- 1051 days agoI agree with devonanne - a crappy GIF email button - preferably in bright, highly-offensive colors is needed to polish this turd.
- 1030 days agoAlthough you write that you purposely didn't go too far overboard, to me the retro wouldn't seem complete to me without a busy background image, custom scrollbars, a message "tele-typing" in a status bar, buttons that "animate" on mouseover, and rampant color and size changes of text that have no connection to content. Even better if it appeared to be on geocities. Ah, maybe I'll just pop on over to myspace.
- 1030 days agoI have used the web since 1995, so I just got started when they started caring about the "design". One thing that is clearly missing are "buttons" on your left side menu. "Home", "Nominate" etc. must be replaced by images, preferably with 3D effects. No serious retro site will use text for menus
Add a Comment