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.

shockwave image 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


september banner banner



September - December, 1995


october banner



January - July, 1996


january banner



July 1996 - present

CNN logo
navagation bar
august banner

  • 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.



Anniversary Main Page | CNN Main Page |

The Big Stories | The Newsroom Exposed | Visions of the Future | Best of Feedback | The Flashback Machine | TV Guy Goes Interactive | Sites We Relate To | Win Prizes Here!



Back to the top

© 1996 Cable News Network, Inc.
All Rights Reserved.

Terms under which this service is provided to you.