The Object: Create the best-looking dolly you can for under 40K. Read Form vs. Function below to see how CNN Interactive solved a similar problem.

Instructions: Select one body part from each of the departments in our store. Drag it from the store into the cutout area for the doll on the right. Switch departments by clicking on each respective button. When your dolly is complete, hit "done" to check the file size. Remember, keep it under 40K or you'll have to try again.

You'll need Shockwave to play this game! [Start]

---

Form vs. Function

Perhaps one of the toughest paradoxes presented by the Web is form vs. function. Many beautifully designed home pages out there take an exhausting 10 minutes to download on a 14.4 kbps modem. That's the last thing a news organization known for breaking news needs to slow down the dissemination of information. So from the beginning, download time has always been an integral part of CNN's web design, increasing in priority over the past year.

The number of bytes in any given image, movie, sound or text translates directly to download time for the user. For example, a recent analysis of the CNN home page found it contained a total of 76.4K (76,000 bytes), which takes approximately 43.5 seconds to download on a 14.4 modem. CNN currently aims to keep the total file size of each STORY page below 50K. The meat of our page is the story text and images that support it. Rather than sacrifice picture quantity or quality, we can reduce the size of the logo, navigation and section ID to achieve a quicker download time. The real trick is reaching this goal without sacrificing aesthetic quality.

Over the past year, we've taken several stabs at reducing file size while maintaining elements of design. Here's a brief look at what we changed and how it affected download time:

---

August - September, 1995

• 470X147 pixels
• 25.5K = 14.17 seconds to download/14.4 kbps modem
• Sample full story page = 101K, 56.4 seconds to download
• It looks nice, but all of those colors and the 147 pixel height drive this first effort well over the line. Half of the allotted 50K has been stolen by the 25.5K banner. That means less story pictures to compliment the text. Of course, when we launched a year ago, we knew file size was a concern, but didn't realize how important it really was to our users. Initially, we failed to recognize how the timeliness of a story was tightly woven to the download time of the page. An expeditious story is worthless if a user refuses to wait for the mammoth download.

---

September - December, 1995

• 470X66 pixels
• 12.2K = 6.8 seconds to download/14.4 kbps modem
• Sample full story page = 86K, 48.9 seconds to download
• After nearly a month of requests from readers to speed up our download time, we attempted to better optimize the file size of our Showbiz banner. We started by simply cutting down the height of the banner by 81 pixels, more than half its original size. Accordingly, the file size was also cut by more than half to 12K. Not a bad effort, but still a rather unwieldy volume for a mere banner with navigation.

---

January - July, 1996

• 250X100 pixels
• 5.5K = 2.8 seconds to download/14.4 kbps modem
• Sample full story page = 67.7K, 38.5 seconds to download
• Another method for reducing file size is to limit the number of colors in the graphic. In this offering, we confined the colors to two shades of teal, black, white and red. This process reduced the file size to 5.5K, but the aesthetic quality begins to suffer because of the color restrictions. No smooth transitions, no fading, no shadows, no depth and definitely no rainbows. But functionally, the result is far superior. Navigation has been stacked below the section ID to allow room for advertising.

---

July 1996 - present

177x97 pixels 1.2K = .67 seconds to download/14.4 kbps modem Sample full page story = 49.4K, 28.1 seconds to download The logical progression takes one more step. The colors have been reduced further and an additional 25 pixels have been chopped off to whittle down the graphic to a measly 1.2K. But this banner lacks the CNN logo and navigation. Adding those elements increases the size to 9.2K. However, the improved and expanded navigation allows a user to navigate anywhere within the site from any page without having to return to the CNN home page, thereby saving the user from downloading a second page before moving within the site. Functionally, the trade-off is worth it.

So there's a lot to take into consideration when you're designing elements and pages for a web site. Here's your chance to give it a shot. Play the "My Downloadable Dolly" Shockwave game to get a feel for file size and how it relates to download time.