Seven hottest web 1.0 techniques to trick out your webpage
Today the web is full of poorly written scripts with a low level of attention to detail. In this article I’m going to share with you some of the hottest development techniques of our time that will no doubt streamline your development and impress you friends. So without further ado: The seven hottest web 1.0 techniques to trick out your webpage.
7) Spacing
There are a few ways you can manipulate the spacing between elements on a webpage. By far, the most popular - is the spacer gif. If you haven’t got one of these around, download one from akamai servers. It’s already edge-cached and optimized for speed. However there are a few things you might not know about the historical spacer gif. For example, to minimize byte-size, if the image is only 1×1, you need not add the src attribute. And if you’re developing in quirks mode, you also need not quote your attributes. This means you can simply get away with the following:
spacer.gif optimized
<img width=1 height=1>For anything larger, you may not have even heard of it before, but you can use the infamous <spacer> tag where by which you can lose the extra http request to download the spacer.gif image, thereby reducing the load time of your page! Feel free to use any size!
the spacer tag
<spacer type=block width=20 height=4>See the example demonstration page.
6) Columnar layouts
Believe it or not, this is easier than you might think. With the use of a <table>, this is a mundane task! For example, to make a three column layout, just do the following:
a three column layout
<table>
<tr>
<td>column one </td>
<td>column two </td>
<td>column three </td>
</tr>
</table>To increase the amount of rows, simply add another <td> element subsequent to the last one. It’s easy! See the example demonstration page.
5) Remove those nasty underlines on links
If you want your webpage to look slick and professionally done, show your users that you know how to hack away those nasty underlines below each of your links with the following piece of code. Simply add this between the head tags of your document.
underline removal
<head>
...
<style>
a { text-decoration: none; }
</style>
...
</head>Your users will definitely be impressed! See the example demonstration page.
4) Rollovers!
Only the truly advanced will want to dig in this deep. This is why the internet was invented. Really. However this involves getting your hands dirty with “the JavaScript.” We’ll start off by adding a function to the window’s onload event handler, and then begin adding the magic on top of it.
Rollover magic
<script>
window.onload = function() {
var example = document.images[0]; // change this number appropriately
example.onmouseover = function() {
// the keyword 'this' is an OO concept, you wouldn't understand
this.src = 'over.jpg';
};
example.onmouseout = function() {
this.src = 'out.jpg';
};
};
// be sure to name your images appropriately to match the script.
// which means you'll need to put an image called over.jpg and out.jpg
// in the same directory as this script
</script>
<table>
<tr>
<td><img width=100 height=100></td>
</tr>
</table>Voila! Image rollover magic! Your webpage is now teh awesome. See the example demonstration page.
3) (Font) Size Matters
Are <font> tags not cutting it for you? Frustrated that you can’t make anything larger than size 6? Look no further than the <big> tag! With the ability to nest this puppy as many times as you like, you can go as large as your heart desires.
bigger font makes a huge impression
<big>big</big>
<big><big>bigger</big></big>
<big><big><big>biggest</big></big></big>
<big><big><big><big>Freaking' Huge!</big></big></big></big>See the example demonstration page.
2) Animation without JavaScript
Believe it! It’s true. Drop those old scripts that made your website scroll and blink because why bother programming JavaScript when plain ‘ol HTML can do it for you! These are the ever-so-beloved <blink> and <marquee> tags.
blink and marquee
<blink>Sale! Sale! Sale! Buy now and save big!</blink>
<marquee>Welcome welcome welcome! Today is the beginning of the end, buy now!</marquee>See the example demonstration page.
1) Open a new window
Despite thousands of articles written on unobtrusive JavaScript (probably some library framework of some sort) to add “progressive enhancement” behavior to your webpages, one of the most common behaviors on websites these days is to let your users open links in new windows (you wouldn’t want them to leave, right?). Believe it or not, this is also possible without JavaScript thanks to a little attribute called target.
target new windows
<a href="http://google.com" target="_blank">visit my work</a>See the example demonstration page.
Note to the reader
Thanks for reading my website. I hope you enjoyed these tips. And to my loyal readers who make this place so popular. Check out my current hits just today!
November 21st, 2007 at 4:59 pm
NO WAI!!!
November 21st, 2007 at 5:03 pm
Brilliant! :)
November 21st, 2007 at 5:09 pm
I’d have used
function MM_swapImage()for the 4th one ;)it’s good to be remembered the fundamental techniques of webdesign :D
November 21st, 2007 at 5:16 pm
@Tim:
That is only to be preceded with
MM_preloadImages. My my, such good times :)November 21st, 2007 at 5:55 pm
dont forget to add width and height, and size attributes to all of you’re tags, how else could you add that 1.0 style that everyone likes so much?
November 21st, 2007 at 6:08 pm
How to make a perfect Web 1.0 beta website : multiple tables (you don’t have to close all of them) with spacers (with a rollover with pink images), texts with different sizes and colors (it’s better if it blinks) and links which open in a new window. And don’t forget the uppercase tags.
November 21st, 2007 at 6:37 pm
Hot diggity, that’s suh-wheat! Want to do a link exchange with my Geocities page? Kthx.
November 21st, 2007 at 6:59 pm
too much fun! hahahaha
November 21st, 2007 at 7:25 pm
Hmmm… what is this web thing you’re talking about?
November 21st, 2007 at 8:01 pm
Don’t forget about the rainbow divider!
November 21st, 2007 at 9:21 pm
Wow! You even provided the demonstration pages. :-D
November 21st, 2007 at 10:08 pm
What about iframes???
November 21st, 2007 at 10:54 pm
This article disappoints me greatly, and I fear that it’s humorous tone is going to be taken seriously by some overeager young graduate of technical school. Really Dustin, someone in your position of influence should know better. How you could publish an article like this and omit the most important technique, The Spinning Mailbox Animated Gif Contact Link, is beyond me.
Quite frankly, I thought you were smarter than this.
November 22nd, 2007 at 1:18 am
Next week, can we get a tutorial on how to create animated gifs? Or better still, which are the best free sites for downloading animated gifs!?
Pimp my geocities!
November 22nd, 2007 at 1:57 am
you can test your web 1.0 wisdom here:
http://www.justsayhi.com/bb/html_quiz
i got only 41 of’em.
November 22nd, 2007 at 2:22 am
This is so much easier than CSS! :)
November 22nd, 2007 at 2:32 am
Funny reading, Dustin, nice laugh :)
However I disagree about 4. It should be:
Now it’s really 1.0′ish :)
November 22nd, 2007 at 2:40 am
<big> is valid in XHTML 1.0 Strict.
:)
November 22nd, 2007 at 2:47 am
Great post Dustin, gotta love the nineties.
November 22nd, 2007 at 3:07 am
Oh, wow, at last this is an article I can understand!
I am starting to build my new site right now! Thanks!
November 22nd, 2007 at 3:40 am
[…] Dustin Diaz has posted on his blogs (what’s a blog? there were no blogs in good old web 1.0) “7 hottest web 1.0 techniques”. While those are nice and highly recommended, let me in on a few little secrets. […]
November 22nd, 2007 at 3:49 am
Another thing not to be missed:
Create a page for every possible thing you want to put on your website in the near or far future, indicating a huuuge “under construction” with a nice animated worker digging like hell…
http://www.animatedgif.net/underconstruction/5consbar2_e0.gif
November 22nd, 2007 at 4:05 am
nice stuff!!
but look at this: http://meiert.com/en/blog/20071113/choke/
it’s from a german webdesign guru….
November 22nd, 2007 at 6:52 am
Вы все дыбили, один я красивый и на коне
November 22nd, 2007 at 6:56 am
kill yourself. It’s real oldschool shirt
November 22nd, 2007 at 7:48 am
I love sarcasm :)
November 22nd, 2007 at 8:02 am
Is this sarcastic or what?
:D
November 22nd, 2007 at 8:50 am
?!?!?
I never expected to see in this pages this old-style-cool-but-creepy techniques! :)
I mean, you’re a developer not a playing kid, right? :D
Just joking, Dustin!
November 22nd, 2007 at 9:09 am
Dustin, You forgot about
:)
November 22nd, 2007 at 10:01 am
Thank you very much Dustin! Finally i can tell my clients that their site work on IE.
November 22nd, 2007 at 10:58 am
I’m the 10000th visitor today, do I get a prize?
November 22nd, 2007 at 11:21 am
Nice one :) For place #8 I add the colored scrollbars, for the lucky IE-users.
November 22nd, 2007 at 11:22 am
@Nathan:
I’ll have to take you up on that link exchange. Do you have your HTML code readily available?
@Binny: of course, it wouldn’t prove the point without the demonstrations :)
@Nikola: I completely forgot about adding the onload handler to the body, pardon my memory, but yours is correct ;)
@Scotty: I think one article every 100 posts deserves to be humorous. The last one ‘this’ humorous came almost two years ago with Totally Compliant Markup. Not to mention, once anyone finishes the article they’ll hit the flurry of comments that clearly indicate that this post was in the spirit of humor.
@Sarven: I’ll add you to my link exchange list ;)
November 22nd, 2007 at 12:49 pm
Mmm… Nostalgia :) From the time before the Internet.
November 22nd, 2007 at 1:34 pm
Hahaha, I am unfortunately guilty of number 5 :P
November 22nd, 2007 at 4:41 pm
I love this article, Dustin, but think that you could save so much time by writing a JS function to automate the wrapping of text inside an arbitrary number of
bigtags, thendocument.write-ing it onto the page.On a more serious note: I wish you’d respond to some of the comments made in your last post, Brendan’s especially. This has to be a back-and-forth discussion or else there will be no resolution. I’d encourage you to air your technical and/or logistical concerns on the ES4 mailing list.
November 22nd, 2007 at 8:32 pm
[…] Seven hottest web 1.0 techniques to trick out your webpage Um super-divertido artigo do Dustin Dias sobre os “boms tempos” da web 1.0 (tags: development fun web webdesign) […]
November 23rd, 2007 at 1:09 am
(Font) Size Matters not worked in Opera. Font size have limit :( But I can use css-property ‘font-size’ and make any font size ;)
November 23rd, 2007 at 5:46 am
you must use CSS instead of spacer ! and font size also !! even for rollovers…
don’t understand the interest of this article..
November 23rd, 2007 at 10:54 am
WOW!!
FINALY I FOUDN WHAT IM LOOOKING FOR!!!
thank you Dustin!!!
November 23rd, 2007 at 9:30 pm
I feel sick.
November 24th, 2007 at 9:56 am
This page works perfectly with Internet Explorer 5.0 :) (and don’t forget a animated IE icon, of course)
November 25th, 2007 at 9:15 pm
What about comments?
Gotta love:
<!– Instance Begin Editable –>
November 26th, 2007 at 10:01 am
Don’t forget the little badge that says “Optimized for Netscape Navigator 2.0″
November 26th, 2007 at 10:38 am
Hey Dustin,
Can you fill us in on these web logs I’ve been hearing all about?
November 26th, 2007 at 12:59 pm
[…] Techniques for the modern day web designer. And for the yester-day web designer… […]
November 26th, 2007 at 4:31 pm
What!? No Java applet navigation example? [>.
November 26th, 2007 at 7:49 pm
[…] So I’m heeding Dustin’s advice and going with the Web 1.0 pimped out retro technique. Hey, I think I’ll even use the <big> tag; I hadn’t heard of that one before. […]
November 26th, 2007 at 10:37 pm
OMG - this was amazing. But you didn’t cover what the optimal distance a drop shadow should be from the item it’s shadowing in order to maximize sales.
November 27th, 2007 at 3:13 am
@developer
“kill yourself. It’s real oldschool shirt”
Dude :-s
November 27th, 2007 at 3:19 am
Oh wow! Some really powerful tips here.<br/>People told me I should write pages with accessibility, Search engine optimasation and mobile internet in mind.<br/><br/>Clearly thats rubbish and good old fashioned fixed width tables and inline styles are the way to go!<br/><br/>Not even worthy of a 15yr old myspacer.
November 27th, 2007 at 5:45 am
hello i am new at webpages please can you help me with my webpage i am trying to put a blood logo on a black background, i have downloaded a skull (it is spinning) and also some fire (it is also animated) i am using frontpage 3 please help me this is urgent please how do I make colored dots follow the mouse pointer and also how to put a clock and a counter on my page and also please how to sell dvds thank you please
November 27th, 2007 at 6:02 am
I would just point out that while that spacer.gif may be on akamai servers you’re costing one of Akamai’s customers money if you use it with that url, which isn’t very nice, especially considering it won’t cost you anything extra to serve it off your site.
November 27th, 2007 at 7:14 am
The worst one is
blinkandmarqueein Firefox since they BOTH work … *urk* ;)I hope no-one read this article and actually got any ideas … *iik* :D
November 27th, 2007 at 7:33 am
Thank you for your efforts at sending web development back into the stone age - standards and maintainability be damned.
November 27th, 2007 at 8:58 am
Giggle giggle, har har. Do have any ghost of a clue that more than 50% of the people on the internet are using dialup?
Do you have a molecule of awareness that CSS layouts _still_ don’t work in IE, so as a practical matter, if you want your webpage to actually WORK in someone’s browser, you still have to use tables?
Are you even vaguely clueful about the fact that most of today’s JAX-laden CSS-infested PHP-overloaded webpages either break, or take so long to download on today’s dialup connection, that they’re unviewable?
Of course you don’t. Like all the rest of the jerkoff web programmers who have systematically made today’s web pages unusable and unviewable, you’ve decided to piss in the faces of more than 50% of your potential audience, and then writte snickering little snarkfests like this.
Here’s the way the world work, buckaroo: when people can’t view your pages in a reasonable amount of time, THEY LEAVE. Since more than half the U.S.l population is still on dialup, and since an awful lot of folks who surf the web are also using older comptuer and older OSs, that means that sitting around waiting for Javascript functions to slowly grind like molasses and PHP scripts to thrash and flail on overloaded servers and rollovers to pipe all their worthless eye-0candy gif and jpeg garbage over already-clogged dialup 56k connections is a non-starter unless you’re lucky enough to have a fast broadband connection and the latest-greatest dual core Pentium machine to surf the net worh.
Earth to clueless web programmer: damn few people in America have those kind of resources at their disposal to surf the web.
In fact, spit-for-brains, the IDEAL web page today actually WOULD be something like a Web 1.0 page. No goddamn PHP crap forcing the server to flail and thrash endlessly, no fancy-ass AJAX ad junk that makes every page take 5 minutes to paint on my screen, no craplicious javascript code for worthless poinltess rollovers and other eye-candy junk that adds nothing to the content.
Maybe that’s why I mostly surf the net on my dialup 56k connection with graphics turned OFF and with a small browser like OFF BY ONE that has Javascript disabled by default. Oh, and no Macromedia Flash installed either. That makes the web usable..after you jerkoffs have clogged it up with useless rollovers and eye-bandy shaded-background PHP garbage and worthless CSS that takes forever to load a page and adds not one whit, not one scintilla, not one jot or tittle or iota to the actual goddamn content of the page.
Oh, and when you vomit out the stnadard response of all clueless web progrmmers that any critic “doesnt’ know a thing about web programming” and is “clueless about CSS” and “uninformed about [fill inte h blank[,” here’s a piece of advice — improve your lying technique. That particular smear has gotten old. You need to tell a lie that’s credible. That old saw won’t cut it anymore.
November 27th, 2007 at 9:52 am
Some more oldies but goodies:
1) Hit counter
2) Random badges from various ratings sites
3) JavaScript resize browser window to make it pixel-perfect
4) Close window on navigate away
5) Legal warning transition page between your page and any externally linked sites
6) Lots of <HR> tags.
7) Something, anything, implemented with an applet. Maybe a clock.
8) Terms and conditions written in the style of “by reading this sentence, you agree to them.”
9) Black text on a gray background.
November 27th, 2007 at 11:48 am
I’m so very guilty of these crimes. I’ve recently begun my journey to this thing they call Web 2.0
But I’ve found
to come in handy from time to time… And I personally like the “none” decoration, with a hover to add the underline…
I come from the age of Mosaic, and I have used animated email gifs.
No defence, I’m guilty.
November 27th, 2007 at 12:47 pm
Don’t forget your tiled, animated background GIF.
November 27th, 2007 at 12:59 pm
We’ve all used transparent spacers, we’ve also used tables to hold non-tabular data, we’ve all forgotten to use img alt tags.
I think most people are edging towards writing good XHTML and ok CSS; the hardest part is getting your head around the reason WHY we’re using it.
Anyone who thinks tables are still a good way to design a website needs to pay a visit to a blind web-surfer and see how they benefit from XHTML/CSS and how confusing tables are to their screen-readers.
November 27th, 2007 at 2:38 pm
Hilarious! Good to remember the past since I’m guilty of some of those, heh.
Anyone else find it ironic that @mclaren posted that rant on a really simple blog that is not bloated or “flailing” in any of the ways described? And CSS slows rendering so much more than tables, apparently? Odd.
November 28th, 2007 at 1:14 am
@mclaren: Well done, your comment is actually more humorous than the article itself. If there’s one thing the internet needs more of, it’s trolls :) Again, well said.
My PHP/JavaScript/CSS bloated website must have really got to you.
November 28th, 2007 at 9:31 am
Ha ha ha! These secret techniques are already used by Super Design Studio! :)))
November 28th, 2007 at 11:37 am
i’m really not trying to troll here, but i find this code for 3 col layout is way shorter and more compatible than using technique using DIV’s w/CSS.
<table>
<tr>
<td>column one </td>
<td>column two </td>
<td>column three </td>
</tr>
</table>
aside from semantics and screen readers, someone please tell me why tables for column layout is bad.
November 28th, 2007 at 12:10 pm
Hi Diz, Don’t worry. You’re not trolling. Your question raises a valid point and it’s something that many people have asked before, and unlike Mclaren, you have fair intentions.
As for me, I personally don’t use table-based layouts. But for those that do, it’s not as evil as it is said. Lightly used, and you’re ok. It was a core reason for xhtml transitional. On another note, I’ve found that
<div>elements have given me more flexibility and are easier to maintain. See my homepage for example. Columns are very simple to make without tables :)December 1st, 2007 at 2:37 am
Nice… the first page I ever created was 1996 - it was for a “Brewing” Company and we coded everyline with a plain text-editor and yep we used a lot of spacer gifs… It was a great time.
Our Baseball-Homepage went live 1997 and there was nearly no one who could visit it, so I always printed it out and showed to the team….
December 4th, 2007 at 3:59 am
Great tips! ;-)
Think I’d better get to work on redesigning my site with these cool tricks asap!
December 6th, 2007 at 9:02 am
[…] Seven hottest web 1.0 techniques to trick out your webpage […]
December 6th, 2007 at 10:28 am
[…] parody on what the hottest web techniques were like before webstandards and css were invented. Seven hottest web 1.0 techniques to trick out your webpage. 2) Animation without […]
December 6th, 2007 at 12:19 pm
This really brought back some memories. Oh, and I got 72 caillou. =)
-tm
December 6th, 2007 at 11:52 pm
LOL, spacer, never heard of that one before;)
December 9th, 2007 at 2:36 pm
Don’t people on MySpace still do this? I had a great time making a parody page with pink animated playboy bunnies and horrible stupid stuff on it and nobody understood that it was a joke (which is the sad part of it).
And I didn’t know about the spacer tag either, while I was always using the double table borders and the colour yellow back in ‘00. These pages you’ve shown as examples are simply not ugly enough.
Is Super Design Studio a joke? Or is it for serious?
As for what mclaren said: I was on dial-up until January this year and the things I had problems with were badly coded pages with too much Flash and complex things such as VH1’s video player, Flickr’s Organizr and so on. But normal pages? No. They were loading a bit slower, but rarely anyhing was broken.
December 20th, 2007 at 2:27 am
mclaren is an arse!
January 23rd, 2008 at 12:30 pm
nostalgia? : )
February 15th, 2008 at 2:00 pm
The innovative part here seems, that the demo page contains a namespace attribute.
Now, here is a slightly more modern version , using Frames, from a company that I have been in touch with. Note, that the Pages exist still until tomorrow.
(We all know of course, with which Editor this stuff has been reverse-breakfast-engineered)
Company name
This page is using Frames. Please Update your browser and visit again.Company Name S.A.
The innovative part here is, that a noframe attribute has been included to address accessibility Issues.
The Managing Director and Founder of this Company refuses until this day, to have a suitable Webpresence.
The Argument?: There is no money on the Web to be made! This time is over.
March 17th, 2008 at 8:21 am
#2 is cool. I link the “blink” tag. I’m going to give it a try right now. Thanks.
George