CROWDCTRL

I set out to design CROWDCTRL with little regard to technology or feasibility. I have found that without technology’s constraint, you can often get into true innovation and do things a bit differently.

But once I was pleased enough with the design to start thinking about HTML, I had a huge “oh crap” moment. How the heck do I build this!?

The CSS positioning was going to kill me, and I was already dreading optimizing my images down to a browse-able size.

We all are not so far from the days of a 30k limit for your home page. Jakob Nielsen is one main cause of this, having explained on useit.com that he doesn’t use graphics due to usability (and a lack of graphic design ability):

Download times rule the Web, and since most users have access speeds on the order of 28.8 kbps, Web pages can be no more than 3KB if they are to download in one second which is the required response time for hypertext navigation. Usrs do not keep their attention on the page if downloading exceeds 10 seconds, corresponding to 30 KB at modem speed. Keeping below these size limits rules out most graphics.

In an undated interview with webreference.com (I’m thinking ‘98ish), he explains that “since all sites are painful these days, I think that you can go up to 20-30 KB and be among the best sites on the Web in terms of response time.”

Of course, later in the interview, he quips, “I predict that Internet Explorer version 8.0 will be the first good Web browser that actually helps users navigate.”

And that’s one reason we all stopped listening to him. He kindof the old fart of a grandfather who’s stuck in the 50’s and still thinks $5 for your birthday is too much to spend in one place.

How big is too big?

My Photoshop source file for CROWD was 23MB. Just one of the 300+ layers would break the rule, so I started to investigate how big is too big.

I recently moved over to Comcast for the home internet, so I’m enjoying 6mb downstream speed. My less passionate comrades are in DSL land, putting along at 1.2mb or less. And Wikipedia claims the average speed of internet users is 768k, but still advocates very low page sizes:

Since the ideal loading time of a webpage is 0.3 seconds or less, a connection of 768 kbps (DSL/Cable) would mean a size of 32 KB or less.

According to a recent Bivings Report, the world-wide penetration of broadband is 14%. I wonder what the penetration (yes, I said it again) of broadband is for web designers and music enthusiasts is around the world? 50%? 60%?

So let’s say my target audience has an average speed of 1mb. How long is an astutely savvy web designer willing to wait for a good page? 10 seconds? 30? I actually never experience this. In a land of a million distractions and tabbed browsing, when am I stuck waiting with nothing else to do?

What about 10 seconds? That allows you about 1MB of files. 5 seconds? 500K. One second would allow 100K.

Is one second a reasonable aim? What are we used to? What are we willing to put up with?

What is everyone else doing?

I checked it out with the handy Web Developer toolbar for Firefox. Here are some of my favorite sites, organized by largest total file size:

Check out those sizes! (Aw, HappyCog is all at the bottom with their nothingness.) 37s/svn has some large images they’ve posted this week, and aren’t part of their site’s core design. Still, anyone with a modem would wait over 300 seconds for SVN.

The result

After a roundup of current designer trends, a handle on target audiences and world-wide internet broadband usage, we can make a conclusion.

I’d love my target audience to not wait more than 3-5 seconds to load the site. Therefore, 300-500K is a reasonable limitation to place for content-heavy, graphically compelling sites. That allows us to up our graphic detail while not totally alienating those unfortunately on modems (making them wait 60-90 seconds), providing the best experience possible for our core audience.

And after some slicing, dicing and plenty of spot optimization of the CROWDCTRL source, I’ve reduced the total file size to 374K, with 261K in images. Around 4 second download for my target audience. Not bad.

Thanks to Aaron for some k/K help. See wikipedia for more info.

(digg it homie)