42 WHY: Designing for the Medium: Web Pages Have No Secrets
As you might expect, the format that compresses best uses the least bandwidth and is therefore the most popular. The RealPlayer (www.real.com) is the “best-selling” free video player on the market because it compresses video and audio down to sizes that work well even over dialup modems (though 56K modems are strongly recommended). QuickTime files tend to be larger than Real files and have higher quality; again, as common sense would lead you to expect, QuickTime is not quite as popular as RealVideo. Windows Media Player is currently the third most popular streaming format. Though it’s native to the Windows Operating System, an oddly named
“Windows Media Player for Macintosh” is available also, and seems to work well enough.
When appropriate, these players and plug-ins enable designers to bring rich multimedia (and in the case of Flash, interactivity) to the Web. And of course, when used unwisely, they make the medium a virtual hell of ugly spinning logos, unwanted soundtracks, and other detritus that adds insult to injury by taking forever to download.
WEB PAGES HAVE NO SECRETS
Web pages are immodest. You can see what’s under their clothes. You can’t learn the design secrets of a print layout by looking, touching, or clicking; but you can easily do this on the Web.
To begin with, every browser since Mosaic, released in 1993, has a menu item called View Source. As you’d expect, this allows you to view the source code of any web page. How the heck did the designer pull off that intricate web layout? View the source and find out. How did they make the image change when you dragged your mouse across it? Click View Source and study their JavaScript code. It is, of course, possible to obfuscate JavaScript source code, making it difficult for source snoops to understand what is going on. It’s also possible to write extremely ugly code, but that’s usually not intentional. For an example of the former, use View Source and compare: http://dhtml-guis.com/game/poetry.opt.html versus http:// dhtml-guis.com/game/poetry.html.
Taking Your Talent to the Web |
43 |
Naturally, you need to know enough about HTML or scripting languages to understand the code you’re looking at. Conversely, the more source code you view, the more you’ll learn about the code that makes web pages work. Most web designers learn their trade this way. In fact it’s fair to say that for every HTML book sold, there are a thousand web pages whose source code has been studied for free. Well, perhaps it’s not fair to say, but we’ve gone ahead and said it anyway, and since we get paid by the word, we’re adding yet another irrelevant clause to the mess.
The ability to view source code is there for a reason: to teach HTML and other markup and scripting languages by example. Even sharp operators who know all the angles are constantly learning new tricks and techniques by studying their peers’ sources.
Make a mental note never to steal someone else’s source code outright. All you want to do is learn from it. This is an ethical and professional issue, not a legal one. Unlike text, artwork, and photography, HTML markup is not protected by copyright, even though some web designers claim otherwise.
Unscrupulous designers do steal each other’s code, but this is a bad practice. If the moral issues do not concern you, imagine your embarrassment— and possible business difficulties—should your client receive an angry letter from a designer whose code you swiped. It’s not worth the risk.
In Chapter 8, “HTML, the Building Blocks of Life Itself,” we’ll teach you how to View Source in your HTML editor of choice rather than inside the browser. Because many designers won’t bother reading that chapter, we’ll pad it out with poignant childhood reminiscences and jokes involving creamed corn.
In addition to View Source, Netscape Navigator’s menu bar offers an option to View Document (or Page) Info. Choose it, and the entire page will be deconstructed for you in a new window, image by image. Beside each image’s name you’ll find its complete URL (its address on the Web), its file size, how many colors it contains, and whether or not it uses transparency. Click the link beside each image, and the image will load in the bottom of the window. By viewing page info, you may discover that a large image is
44 WHY: Designing for the Medium: Web Pages Have No Secrets
actually composed of smaller pieces stuck together with a borderless HTML table or that what looks like one image is actually two: a transparent foreground GIF image file floating atop a separate background image. Or you’ll discover invisible (transparent) images, used to control the spacing of elements on old-fashioned web pages. (Today, designers use CSS to accomplish the same thing without subverting the structural purpose of HTML. Throw out those old web design books. The tricks they teach are outdated and considered harmful to the future of the Web.)
Microsoft’s Internet Explorer does not let you view page info the way Netscape’s browser does. But both browsers are free, and as a designer you will be using both anyway. In fact, you’ll regularly be checking your work in at least two generations of Netscape and Microsoft’s browsers and then double-checking it in WebTV, Opera, iCab, and Lynx.
In all likelihood, even when all browsers fully support common standards, you will still have to check your work in multiple browsers to avoid browser bugs—and of course you will have to view your work on multiple platforms. Or at least ask people on web design mailing lists to check it for you.
The Web Is for Everyone!
The last version of HTML—HTML 4—goes out of its way to make sure that everyone can use the Web, from Palm Pilot owners to the blind and from English speakers to, uh, nonEnglish speakers. HTML 4 contains improved accessibility features that enable web designers to accommodate all potential users, thus better fulfilling the medium’s mandate. Throughout this book we’ll be talking about ways to make your content accessible to everyone.
Web design is different because websites must be compatible with many browsers, operating systems, and access speeds. The following sections discuss some of the challenges that make all the difference between designing and designing for the medium.
It’s Still the Bandwidth, Stupid
In the preceding section on multimedia, we defined bandwidth in terms of bits and bytes per second. The key to bandwidth is realizing that there is never enough of it. Design with a few small files, and you remove the band-
Taking Your Talent to the Web |
45 |
width obstacle for most of your potential audience. Design with large files, and your audience shrinks to a chosen few who enjoy fast access at all times. Design with many large files per page, and your audience shrinks to you and you alone.
Bandwidth issues are complicated by the amount of traffic clogging the network. A corporate T1 line is very fast—until 500 employees log on over their lunch hour. Then it can be as dreary as the slowest home dialup modem.
Similarly, 10 early adopters share a super-fast cable modem line. They brag to their friends who quickly subscribe to the service and tell their buddies about it. Soon 1,000 people are connected to the same cable modem line, and it is no longer reliably fast because the available upstream bandwidth has shrunk. The cable modem is still offering the same peppy connectivity, but the bandwidth is now shared across multiple users.
Likewise, an Internet Service Provider (ISP) brags in its advertising that it offers multiple, redundant T3 connectivity (very, very fast). The advertising campaign is so successful that a million new users subscribe to the service, and suddenly the bandwidth available to any given subscriber is low. ISPs are like airlines. Airlines overbook flights, causing you to miss connections. ISPs underestimate needed capacity, slowing down connections. Bandwidth never exceeds the speed of the weakest link. Your corporate T1 line does you little good if the site is being served from a home machine connected to the Internet via the owner’s Integrated Digital Services Network (IDSN) line. Or the server may be fast and powerful, but if a connecting router goes down in Chicago, bandwidth will slow to a trickle.
Differences in national phone service contribute to the problem. Sites served from Japan, Australia, and France are almost always slow to reach the U.S. no matter how powerful the server and no matter how fast the connection on your end.
Bandwidth also may be negatively impacted if the server is overloaded due to temporary traffic at one of the sites it serves. In 1999, when Internet Channel (www.inch.com) in New York City hosted a live webcast by Steve Jobs of Apple Computer, demand for Jobs’s address ran so high that all sites on that server ran slower than normal—even though those other sites were unaffiliated with the Apple broadcast.