What would you do with 10kB?

Windows

Windows
Sixteen years ago,
Please, Log in or Register to view URLs content!
conceived of a contest that would test the mettle of any web designer:
Please, Log in or Register to view URLs content!
. The idea was that entrants would build
Please, Log in or Register to view URLs content!
. Its aim was to force us to get creative by putting a bounding box on what we could do:

Between servers and bandwidth, clients and users, HTML and the DOM, browsers and platforms, our conscience and our ego, we’re left in a very small space to find highly optimal solutions. Since the space we have to explore is so small, we have to look harder, get more creative; and that’s what makes it all interesting.

The 5k contest ran from 2000 until 2002. In 2010,
Please, Log in or Register to view URLs content!
with an updated limit and a new name:
Please, Log in or Register to view URLs content!
. Staying true to its roots, this new incarnation, which ran for two years, continued to push designers and developers to get creative within a pretty extreme (though slightly expanded) limit while incorporating new goodies like HTML5 and responsive design.

Today we’re thrilled to announce that the
Please, Log in or Register to view URLs content!
and brings with it a handful of new challenges:

  1. Each page must be usable in 10kB or less. The 10kB limit no longer applies to the size of a ZIP archive of your entry; the 10kB limit now applies to the total initial download size of the baseline experience of each page in your project. When we say “baseline experience,” we’re talking small screen devices running older, less capable browsers. The 10kB limit will apply to every page and whatever assets it loads by default; that means images, CSS, JavaScript, and so on.
  2. Progressive enhancement is the name of the game. Your project should start with a super-basic, bare-bones-but-usable experience that will work no matter what (including without JavaScript). You can use clever CSS and JavaScript techniques to enhance that experience as it makes sense to do so. For example: You might lazy load an image using JavaScript if the screen size is above a certain threshold or when certain other conditions are met. Entries that depend entirely on JavaScript to render the front-end won’t be accepted. If you need a primer on progressive enhancement,
    Please, Log in or Register to view URLs content!
    .
  3. Back ends are in this year. In previous iterations, each entry comprised client-side code submitted via ZIP file. Over time, that limitation led to an over-reliance on JavaScript for rendering. No more. This year, you can create dynamic experiences that work without front-end JavaScript using Node, PHP, Python or .Net. You will submit your entry as public GitHub repository (so we can all learn from your awesome code) and we’ll spin up a dedicated
    Please, Log in or Register to view URLs content!
    instance running the appropriate stack.
  4. Entries should be accessible. In line with the philosophy of progressive enhancement, your entry should be usable by the broadest number of users possible.
    Please, Log in or Register to view URLs content!
    , but if you’re clueless about where to start,
    Please, Log in or Register to view URLs content!
    can offer some guidance.
  5. Nothing comes for free. In previous years, we gave a pass if you wanted to use jQuery or load some fonts from Typekit. This year we decided to change it up, not because we don’t love these products (we do), but because we wanted to force every piece of code, every asset, to fight for its place in your entry. Anything you add should be added with purpose.

As with previous editions, your entry should use web standards and work in all modern browsers. You can use HTML, CSS, and JavaScript features and APIs that don’t have across-the-board support as long as you do so in keeping with the progressive enhancement philosophy. In other words, your entry can’t depend on that technology or feature in order to be usable.

All of this may sound like a tall order, but it’s entirely possible. In fact, the site we built for the contest also abides by these rules. We’ll touch on some of the techniques we used (and concessions we made) in building the site in future posts.

If you’ve read this far, you might be wondering What’s in it for me? Well, bragging rights, of course, but we’ve got some awesome prizes too! We’re giving away $10,000 to the top three entries, plus
Please, Log in or Register to view URLs content!
, complete collections of
Please, Log in or Register to view URLs content!
, and copies of
Please, Log in or Register to view URLs content!
too.
Please, Log in or Register to view URLs content!
are over on
Please, Log in or Register to view URLs content!
.

We’ve lined up an amazing group to judge the entires this year too:
Please, Log in or Register to view URLs content!
,
Please, Log in or Register to view URLs content!
,
Please, Log in or Register to view URLs content!
,
Please, Log in or Register to view URLs content!
,
Please, Log in or Register to view URLs content!
, and
Please, Log in or Register to view URLs content!
will all be putting your entry through its paces and peering under the hood at your code. There’s also a People’s Choice award which will be based on votes you cast. Voting will open September 5th and run through October 14th.

The contest opens today and we will accept entries until 5pm Pacific Time on September 30th.
Please, Log in or Register to view URLs content!
is up on
Please, Log in or Register to view URLs content!
, but if you have additional questions,
Please, Log in or Register to view URLs content!
.

We can’t wait to see what you come up with! Happy coding!

Please, Log in or Register to view URLs content!
, Web Standards Advocate

Please, Log in or Register to view URLs content!
 

Users who are viewing this thread

Top