Slashdot Mirror
Design a Web Page in Under 5k
jhines sent us a nifty bit over at Wired about a Web design contest.. . the catch is the 5k maximum. The prize? 5120 cents ;) I won't enter: the best I could do was Slashdot's
Light Mode.
← Back to Stories (view on slashdot.org)
Here it is. thank you
Aaaah, I remember the days: NCSA Mosaic. We'd spend hours in XV, trying to reduce the colour depth to 4 bits, or 3...
And the hours we spent finding the perfect Mosaic Grey (in the absence of transparent GIFs) (192R,192G,192B, in case you're interested: but not on Macs)
--
I put together a fully functional 2-page site, with two small images. The total weight of all 4 files is 2045 bytes, 3 bytes short 2K. Total downloadable weight (how much transfer you use to pull both pages of the site, assuming you load each of the images twice) is 2523 bytes (2.46K)
Technically it's not fully compliant due to it's lack of the DTD statement in the HTML tag. But I've tested the site with every browser I have access to:
Chas - The one, the only.
THANK GOD!!!
Chas - The one, the only.
THANK GOD!!!
It would be nice if there were a contest like this that permitted server-specific entries. I can appreciate the value of this contest as it exists, but I'd have a lot more fun (see my business partner's page -- yes, it's supposed to look like that) if I could enjoy the wonders of PHP and MySQL.
:)
Anybody wanna start a contest?
This will be interesting to watch...
Ken
Anonymous FraidyCat
Here comes the plug:
try { do() || do_not(); } catch (JediException err) { yoda(err); }
My whole site is only 18k, with each page weighing in at around 2-3k. I don't think you need any graphics to make a useful website. Of course I'm not a designer so my pages are just plain and simple--but I like that.
www.semiotek.com: just plain text with some tables and some fonts and colours.
Try designing for the the 1397-byte buffer on the
Nokia 7110. Now that's fun.
K.
-
-- Proud descendant of semi-nomadic cattle-herders.
If I just had a 1-font web page, wouldn't I only need one tag at the beginning and end? Looking at some of my other pages, they have font tags within font tags. Wonder how much I can slim down.
If you do, be warned: your document isn't valid HTML.
According to the Transitional HTML 4.0 DTD, FONT is an inline tag, and must be contained in a block-level element. (That is, if I'm reading the DTD right...)
If you want to set the base font for your page, use the BASEFONT tag. It's an empty tag that you can use to set the base size, face, etc. for your document.
Or, as countless others have said, move over to cascading style sheets.
Jay (=
I find it ironic to hear you say that, and then to follow your homepage link here on slashdot (in order to see an example of the lean html formatting of which you speak) only to find that you are using not only frames, but JavaScript on your home page... generated by Netscape under Windows 95!
(c:
Your Brain + EEG + LEGO Robots = Brainstorms
Actually, by default it was less than 6k, as the first graphics page started at 8192 ($2000) (and took up 8k), and the beginning of memory for a BASIC program started at 2048 ($800). That was for both the tokenized program store and the variable space, which was put by default immediately following the end of the code. What you were probably seeing on your graphics screen was your variables.
If you wanted to write big programs that used graphics or if you wanted to write programs that used lots of variables and graphics, you either had to use the second hires page (which started at 16384 ($4000), but didn't allow split screen text/graphics), or you had to do some twiddling with memory mapping to relocate either the variables and/or program storage above the graphics buffers.
Back in those days you really had to be a lot more careful about memory usage than you do today.
try 28k :P
Word 2000 uses XML for everything, and I constantly get file in MS-HTML that I have to strip down and redo.
Pope
It doesn't mean much now, it's built for the future.
another use of REM'd cursor controls was to prevent anyone from stealing you code when they LISTed it, or even better, tagging your files! Lotsa CLEAR/HOME or DOWN statements... ah them's were the days.
Pope
It doesn't mean much now, it's built for the future.
There were 2 different pre-announcement Transmeta pages. For about a month or so before the Jan 19th (?) launch, they had one with a couple of nice graphics and so on.
But for years before that one came out (early Dec 99), they had a very very simple page. It basically ran something along the lines of:
<HTML>
This page is not here yet.
<!-- There are no hidden messages in this webpage.-->
<!-- There are no tyops in this webpage.-->
</HTML>
The original poster seems to be a bit confused as to which was which. The second was -- as you can see -- definitely under 5k. The former (with the images) would have been a lot closer to that limit. I'm not sure which generated more discussion.
It's a fine line between trolling and karma-whoring... and I think you just crossed it.
--
- Sean
It's a fine line between trolling and karma-whoring... and I think I just crossed it.
- Sean
I don't know anyone who has ADSL or a cable modem. They all use 28.8 or 56K modems with 14-17" monitors.
The old rule of thumb used to be a one second response time to user input. That is 3600 bytes at 28.8 kbps.
I feel like slapping the web designer every time I see another insanely bloated web page that takes a minute to load.
First of all, you should investigate using Cascading Style Sheets instead of tag for modern browsers. They are one simple tag and also degenerate gracefully for older browsers (which ignore them).
E.g., if I remember right, you'd use
BODY: { font-family: Arial,Helvetica,sans-serif }
And that overrides the body tag with the font you picked.
There are lots of cross-browser problems with using these unfortunately, but check out some decent sites like WebReference for info on them.
Incidentally, you often have to use lots of font tags if you use tables. A font tag will apply to multiple paragraphs, but not to the cell contents inside tables! You need extra font tags in there for that.
HTH
Well, Netscape 3 will render pages based on CSS just fine. It just won't get all of the fancy formatting. Which is just fine. That is what they mean when they say that CSS enabled pages degrade well. If you use the standard HTML tags, all browsers should be able to render your page. Just that the more advanced browsers will look better.
The time for CSS is here (and passing).
I kinda wonder that also.
But what I want to know more is why the pngs they provide don't use transparency? Is it my browser?
Maybe they are waiting on a stable version of Mozilla?
192R, 192G, 192B also matches the default grey in Windows.
:)
In hex, it translates to C0C0C0. "#C0C0C0" if you're trying to set the color in HTML.
I only mention it because, at one point, I also had to figure it out. Of course, being a young-un, I just sampled it into one of them fancy newfangled graphics programs. Didn't have to walk 5 miles uphill to code on a 50-pound keyboard missing a few keycaps or any of that stuff. Yep, we sure have it easy these days.
Save the whales. Feed the hungry. Free the mallocs.
> 5k is not a lot of space to do anything useful in....for any amount of text,
/why/ one should design pages that would be viewable in any browser. He proposed something to go onto a page that we both work on, I vetoed it because it relied solely on color changes to convey content, thus excluding Lynx users. His response -- and it floored me -- was 'Well, who uses that old sort of stuff these days anyway?'
/. to load.
/just/ be attacking bloat; it should also be attacking broswer-specific, non-standards-compliant HTML.
> it usually comes out more than that.
That's my thought exactly. I'm pondering entering this contest, but they're judging on content as well (as well they should be!) and I'm having a hard time coming up with something that will still ring in at under 5K with text and images and still be interesting.
It's interesting that this happens to come along now. I spent a good half an hour last night trying (mostly) patiently to educate a cow-orker of mine as to just, precisely,
Uh. Me. And everyone else who, like me, is still stuck on a dialup POTS line, lucky to even get 28.8 with a 56K modem due to the quality of said POS phone lines, browsing on a six-year-old slow-as-shit computer, and who doesn't want to sit around and wait 30 minutes for
I don't really know when this turned into a browser accessability rant. *grin* It's certainly possible to design a page in less than 5K that looks like shit in, say, lynx. It's also possible to design a page that looks beautiful in any browser you view it in, but happens to take six years to load. I think what my point is, is that this contest -- while pretty awesome, and definately something that I'm going to be pondering my entry for -- misses the point to some extent. It shouldn't
While some combinations of colours are unambigious, eg blue/white, some are terrible, eg red/green.
Hmmm... all I could come up with in a moment's notice was this. A Unit converter that can do about 50 units or so in 5 different categories...
:-).
(OK, so I had this to work from, but it was too big at 20k
engineers never lie; we just approximate the truth.
This from the Gnu web site should be a candidate. You'd need to take a few links out to get it under the limit, but it shows what can be done in limited space.
Share and Enjoy.
I think the point of the contest is that if you were to view this from your home, you would *ONLY* download 5K - no more. So meta reloads, java scripts, etc. that pull from elsewhere, the content that is elsewhere would be considered part of your submission - hence you'd be over.
On a side note - the formula allows you to have up to 20K and still be in the positive, if it's a *REALLY* good page - but personally i won't be going over 5K.
cyn, free software and *nix operating systems enthusiast.
I do many of my web pages in just the Arial font. Looking at what NEtscape Composer and FrontPage 2000 do, they put font tags for EVERY line and paragraph/cell seperation,etc. Is this really needed?
If I just had a 1-font web page, wouldn't I only need one tag at the beginning and end? Looking at some of my other pages, they have font tags within font tags. Wonder how much I can slim down.
I've never programmed in JavaScript, so I wouldn't know, but... would it be possible to have JavaScript generate the content too? Like those sites that generate nonsense words or rock band names or something...
--
Win dain a lotica, en vai tu ri silota
One of the first machines I ever programmed on was a 4k TRS-80.
The first machine I did substantial programming (an Apple ][+) had only about 16k for BASIC programs before you ran into the video buffer. I still remember hitting that limit and getting all sorts of gibberish (my code) as graphics on the screen.
The cake is a pie
Whomever you are, it's you and those like you who give me reason to browse at -1. Thank you.
25% Funny, 25% Insightful, 25% Informative, 25% Troll
1) Site design matches the product (black boxes).
2) An animated opening splash screen.
3) Informative product information.
4) Animated menu navigation bar.
5) Product ordering means a complete e-comerce solution.
6) Not one line of script.
7) {blink} tags added for your nestalgic pleasure.
8) Only 4.73k (27 bytes to spare!)
here it is
_________________________
Netscape 3 handles CSS better than IE 3-5 or Netscape 4 -- it ignores it. This is a 100% perfectly valid way of interpreting CSS. It's better for browsers to ignore what they don't understand than to try to do something that ends up being wrong.
I haven't used FONT tags on a page I've written in two years, since I discovered style sheets. Except stuff at work, where I cut-and-paste other people's templates, but that doesn't count.
Constitutionally Correct
This is what the internet is all about: making people dizzy, so dizzy that they fall off of their high pedestals and fall into the muck of the real world, the real world portrayed by the internet, the internet that is a big revolutionary revolution that's revolving so quickly that people get dizzy. And the internet revoluiton, led by revolting geeks, is a geekfest among revolutions. That's what I meme.
Now that is fucking excellent. A truly marvellous parody of Jon Katz :)
This could be a really interesting scenerio(sp?). They could pick, say, the top 30 people and announce their names. Then, say some company is looking for a web designer. So, they say "hey, these people know what they are doing and can save us bandwidth money! hire 'em!" Imagine how wonderful the web would be if there weren't so much useless crap being sent around.
On a slightly related note (in that BBSs were really cool-looking despite the constraints) I wish BBSs would come back. Sometimes, the web just seems too big for me. I know they won't. (At least, not like they were when I was in to them (right before they all started to die ): ))
Welcome to Slashdot. Please do not feed the trolls.
Withdrawal before climax is very ineffective and those who try this are usually called "parents."
Oh, I realise that. Fundamentally though, HTML is similar to BASIC in that it's an interpreted language (whether markup or programming), and thus your source code is your executable. (Note to the pedants: I know this isn't strictly true, but for byte-counting, it's a fair approximation)
And the idea is the same in both cases: Write tightly. Write elegantly. Write concisely. Do what you have to do with a minimum of fluff. It's a Good Thing.
"People who do stupid things with hazardous materials often die." -- Jim Davidson on alt.folklore.urban
No offense here, but so what?
Anyone can write a blank, ugly (sorry but it's true), useless page in under 5kB. The point, and the unwritten intent of such a contest is to do the _best_ possible in the limit.
I mean honestly, what's the point of writing a web page in under 5kB that no one is going to want to read? I'm not just looking at yours here--there are a LOT of (serious) suggestions in this discussion about ways to get around the rules, or the easiest (but most useless) way to achieve the stated goal. Why bother?
As an aside, 5093 bytes is 4.97kB. 4.73kB gives you 276 bytes to play with.
"People who do stupid things with hazardous materials often die." -- Jim Davidson on alt.folklore.urban
no, use fp . . . 2k
no, use notepad . . . 1k
submission. . .
<html>
<body>
I win!!
</body>
</html>
* "Uncle this droid is malfunctioning" -- Luke Skywalker
But as you say they are "IT professionals" which would surely increase the chances they have it. In my mind the fact that they are "IT professionals" will only decrease the chance that whatever they decide to test it with will actually have Flash installed. I know I wouldn't have it in there to judge this contest. This contest should be about simplicity and elegance to a given solution. Assuming Flash is present has NO elegance.
From what I remember the winner was a Mandlebrot generator which stunned me totally.
No program could ever suppass the elegance of that line.
Working for the (other) man
A month or two before the January annuncement, the Transmeta page switched to the Crusoe image with the real message about the January announcement in the HTML source.
Prior to that the page was the minimal one that the post above refers to. It too had HTML comments that said, in effect, there aren't any secrets in the comments either.
Anomalous: inconsistent with or deviating from what is usual, normal, or expected
Anomalous: deviating from what is usual, normal, or expected
Canard: a false or unfounded repor
Because implicit in the contest is the idea that you are to create something visually appealing (ie: artistic). A well written recipe for a bundt cake ain't gonna cut it.
CSS allows you to specify all of the font styles for the elements of the document in ONE place. Want your H1s to be in "BastardWeird"?
... this once, at the top of the file (the HTML comments are optional -- just there to prevent the CSS code from showing up in non-CSS browsers), instead of having:
... around every single H1 in the document. That's a savings of about 39 bytes PER H1, after an initial cost of about 70 bytes. Maybe H1 is a bad example (it doesn't get used more than once or twice in a document usually), but this extends to other tags too, and not just to fonts. CSS also replaces FONT COLOR and a lot of other things that before needed to be coded multiple times into the same HTML document.
This is an even bigger win when you use a single, central css file (referenced via LINK REL=stylesheet), rather than coding CSS into every document. Maintainence also magically becomes easier. Want to change your whole site's look? Edit one file.
DNA just wants to be free...
Couldn't you just use a small bit of JavaScript to pull the whole page from somewhere else?
Alternatively, you could use PerlScript and write the whole page in obfuscated Perl.
Now all we need is a web browser in under 5Kbyte.
-- Ed Avis ed@membled.com
Friend and I had a contest on an IBM 1620 Mod I, who could get the fanciest program on one card. I overlapped instructions and data. 120 or so digits (decimal machine), self loading of course. It typed "THIMK" over and over again. The M was because that was the halt instuction; N was useless. One sense switch made it go faster, one made it stop.
--
Infuriate left and right
Heh, why not try to use one of the HTML compression tools which have a short javascript header which unpacks html on the fly? Problem is finding a small enough bit of "header JS", but it might be a cool way to get around the 5k limit while sticking to it.
:)
Look at this freshmeat entry for AlgART HTML Picker to see what I mean
Most HTML can be compressed pretty well by removing comments, unneeded meta tags, and spaces/new lines that have no contribution to the final page. This program will automatically compress html files for you. When I ran it on /. I can sometimes get a 50% compresssion ratio (not including graphics).
-- Virtual Windows Project
My favourite bite-sized (haha) challenge would have to be the "chip tune" competitions. The idea was simple - create a ".mod" (.s3m, .it, etc..) song under 4k, including samples, pattern lists, etc..
:)
Perhaps even more amazing, from a technical standpoint, were the 4k "demo" competitions. Apparently, these are still reasonably popular. The idea here is to create a graphically pleasing demo in 4k or less (go asm!).
The 64k limit was (is) a popular barrier for graphical demos too, with an absolutly incredible amount of power crammed into each and every byte.
For fun, check out the following URLs:
The Hornet Archive - While no longer "active", there are still a lot of resources available. Search for "64k" (while you still can!).
Future Crew's "Second Reality" - One of the definitive demos of all time.
Distance'99 - a recent competition covering many types of demos. Both amiga and PC 4k and 64k bundles of joy are available.
.------------ - - -
| big bad mr. frosty
`------------ - - -
I remember how people used to write really small, really fast assembly code because, quite frankly, the hardware didn't allow for you to be wasteful. Memory and processing power was a precious resource. Programmers tried to squeeze every last ounce of memory and processing power out of a computer. And we *liked* it, damn it! ;-)
Obviously, in the days of cheap memory, processing power, and Microsoft, bloatware is the norm instead of the exception.
I pretty much stay away from just about every advancement that has taken place in HTML and it's bretheren since the IMG tag and tables. The reason: I want the most number of people to be able to make use of my web pages. Just by leaving out a lot of the advanced features, you can reduce the web page to little more than the actual text. Okay, it's not "pretty," but it loads really fast even over a modem connection (actual text compresses on modem connections).
I may have "big" pages but that's because they are heavy on actual content and light on fluff.
-- PhoneBoy
The views expressed herein are not necessarily those of anyone, including the poster.
The 'pre-announcement' (date 1/19/00) Transmeta site.
It attracted a HUGE amount of attention, and weighed in at what??? 100 bytes?
Just how big is "This page is not here yet." wrapped in the minimal obligatory HTML tags?
-- What you do today will cost you a day of your life.
5k is not a lot of space to do anything useful in....for any amount of text, it usually comes out more than that.
But....it can be done. My home page weighs in at 3199 bytes, and that's with graphics! The only thing is, they propose that most web pages should be small, similar to this, but most useful pages that have more than two or three paragraphs on them will swell to 10 or 20k, and that's without using any kinds of graphics.
50k for a web page is great, and having alternate slimmed-down versions for new wireless and lo-bandwidth devices is a good thing, but not all web pages should be 10-20k. You'd never get any useful information(above all--you would NEVER get to read Slashdot--the lite page was 40+kb!).
But in any case, looks like a good thing to try, similar to the 4096kb democompos that I think they still have at the demo parties in Europe.
-Julius X
-Julius X
remove "-whatkindofspamdoyoutakemefor-" from email to send
If people want see tight code in action, I'd recommend a 4k PC intro called mesha. It really is excatly 4096 bytes, but is has something like two minutes of 3D graphics, textures and everything. I'm not a big follower of the demoscene, so there might be stuff that is better than this one, but this really blew me away when I saw it. It runs in DOS. The 10KB zip actually has two versions of the same program!
So if I don't get the $50 bucks, why do I consider this a win? Well, once a person catches on to some of the better techniques, it's relatively easy to write complex, data driven sites -- you develop a good site plan, work with folks until all of the pieces have been agreed on, test the functionality, then make it pretty.
Of course, if you work develop high end web sites like I used to, we're talking about billing $100K+ to the client for the whole process, at a bare minimum.
But it's not pushing my skills much any more -- I can do roughly the same things in Perl, PHP, Python, TCL, SSJS, etc., the same things and a few more fun by throwing in Java and Javascript. Flash is cool, but not web-wide, so it's not gonna pay my rent for a while yet.
But proving that 5K is enough to do something useful/pretty, etc. -- that's a challenge. See ya there!!
...Open Source isn't the only answer -- but it's almost always a better value than the alternatives...
Give the prize to: 404 File Not Found The requested URL (foobar.htm) is not found. Possibly the most popular web page in the world
Sounds like the demo scene of years ago. With the availability of higher bandwidth connections web designers have often have forgotten about the people with the 14" monitors and the slower modems. I personally (due to a move) have stepped back from a cable modem to a 56k connection and the multimedia rich enviorment is a beast and a burden because of it. I have actually had to change my surfing habits. I hope to be out of the land of the 'bandwidth impaired' very soon though. The outcome of the contest should prove to be interestig
Show me a page under 5k that validates, and I'll be impressed. Of course, I won't make any outward indication that I'm impressed, probably a contemptious "but it's supposed to validate ANYWAY" snort, but that's the way I am.
--
Does narcissism count as a hobby? --Shawn Latimer
Here's a link to the actual contest rules and so forth.
http://www.sylloge.com/5k/---
- Give a man a fire and he's warm for a day, but set him on fire and he's warm for the rest of his life.
.. is any article by one Jon Katz. :)
BilldaCat
from their FAQ:
How about client-side processing? Can I use JavaScript? What if the page shows up as larger than 5k in the browser as a result of the scripting?
Client-side scripting, including the use of scripts which write out additional HTML (i.e., by using JavaScript's "document.write()" function) are permitted. The size component of the judging will be done by examining the files which sit on the server, not the browser's rendering of those files. The normal caveats apply however (see the next question); make sure you are confident about your scripts running in the judges' browsers. Also, please note that gratuituous exploitation of this provision may cause low marks by some judges in the concept & originality category.
The server side question is answered elsewhere in the FAQ--clearly not allowed. What's interesting is that client side scripting could be used to generate much more than 5k worth of HTML, as long as the original page on the server is less than 5k. Of course, you'll want to read the entire FAQ for any caveats.
FAQ available at http://www.sylloge.com/5k/faq.html.
numb
Ah, this sort of thing takes me back.
I remember the days of Byte (when it was a real magazine), Compute!, et al. The magazines were full of code back then, pages and pages and pages of typing that you'd laboriously enter by hand, and then debug. A few of 'em had 1k programming contests monthly, which (along with typing in the loooong programs) really gave you an appreciation for style, efficiency, and elegance in coding. Atari Basic (this was on the 400/800 machines) also allowed you to enter more than one statement on a logical line (which was something like 107 or 112 characters), so they also had 'one liners' every month. They were usually cute little graphics demos, since easy graphics programming was Atari's forte'.
Now we're doing it in HTML instead of BASIC, and with a 5kB limit instead of 1kB. What goes around, comes around, eh?
Cool stuff.
"People who do stupid things with hazardous materials often die." -- Jim Davidson on alt.folklore.urban