Taking Your Talent to the Web- P4 pps

Complicating the issue, many of today’s web standards were yesterday’s proprietary innovations: things that worked only in one browser or another. You can’t blame Wendy’s for not offering McDonald’s secret sauce, and you can’t fault browser companies for failing to implement technology invented by their competitors. When Netscape unveiled <FRAMES> (the ability to place one web page inside another), the technology was widely adopted by designers and developers. Refer back to Figure 2.3, Assembler.org, for an example of the way frames work. The bottom frame contains a menu; the top frame con- tains the content. Clicking the menu changes the content by loading a new content frame. Both frames are controlled by yet a third document, called the <FRAMESET>, which links to the frames, establishes their size and posi- tioning relative to one another, and determines such niceties as whether or not the user can resize a given frame. Eventually Netscape brought its invention to the W3C. Much later, it ended up as part of a temporary standard: the HTML 4 Transitional Recommen- dation. It took Microsoft a while to support frames, because Microsoft’s browser developers had to reverse-engineer Netscape’s invention to figure out how it worked. Ironically enough, Microsoft’s 4.0 browser eventually supported frames better than Netscape’s. In 1995, Netscape came up with a programming language initially called LiveScript and eventually renamed JavaScript. Besides being easy to learn (at least, as far as programming languages go), JavaScript made web pages far more dynamic. And it did this without straining the computers used to serve web pages (servers), because the technology worked in the user’s browser instead of having to be processed by the server itself—the way Perl scripts and other traditional programming languages had been. With less strain on the server, more web pages could be served faster. Thus, JavaScript was bandwidth-friendly. JavaScript eventually became a standard, but not before putting Microsoft at a competitive disadvantage for several years. The latest, “standard” ver- sion of JavaScript is referred to as ECMAScript, which sounds like the noise our Uncle Carl used to make in the morning. Don’t worry—’most everybody still calls it JavaScript, which isn’t exactly Yeatsian poetry either, come to 26 WHY: Designing for the Medium: Web Agnosticism 04 0732 CH02 4/24/01 11:15 AM Page 26 think of it. (ECMAScript is so named because the European Computer Man- ufacturers Association [ECMA] supervised the standardization process.) While Netscape and Microsoft invented competitive new technologies, the W3C worked to develop recommendations that looked beyond the “Browser Wars.” At times, the W3C seemed to be out of touch with what was actually taking place in the market. Back then, the browser companies seemed to be ignoring the W3C. (The irony is that both AOL/Netscape and Microsoft participate in the W3C and play a vital role in developing the web standards they have sometimes gone on to ignore.) Today it appears that the W3C is ahead of what browser companies can realistically deliver in the next year or two. Indeed, even hardened web designers with years of experience can feel their innards turn to jelly when reading about upcom- ing standards proposed by the W3C. (XML Namespaces, anybody?) The important thing is that there is now a road map for browser compa- nies, developers, and designers. If you took your talent to the Web in the 1990s, you had no way of knowing what new technologies might come down the pike, what new skills you would have to learn, and how quickly what you learned (and designed) would become obsolete. Today we know which standards have been fully or partially implemented in browsers and which ones we can expect to work with in the next year or two. As opposed to the past when Netscape could surprise us by inventing JavaScript and frames or Microsoft could spring VBScript and ActiveX on us and expect us to quickly learn and use those technologies, today we know what to antic- ipate and what to learn to prepare for the future. OPEN STANDARDS—THEY’RE NOT JUST FOR GEEKS ANYMORE We’ll bore you with the details in Part III of this book. For now, it is enough that you understand three fundamentals of web agnosticism. Point #1: The Web Is Platform-Agnostic The Web owes no special fealty to any particular operating system. It is designed to work in Windows, Mac OS, Linux, UNIX, BeOS, FreeBSD, OS2, DOS, and any other platform that comes along. This presents web 27 Taking Your Talent to the Web 04 0732 CH02 4/24/01 11:15 AM Page 27 designers with special challenges in terms of gamma, screen resolution, color palettes, and typography—all of which we’ll explore a bit later in this chapter. This is one heck of a chapter—we hope you realize that. If you get tired and want to take breaks, we’ll understand. At first blush, the programmers on your team would seem to have a tougher job than you do. How on earth are they supposed to accommodate all those different operating systems? The answer is, they don’t have to. Browser companies are stuck with the tough job of supporting all those platforms (or a limited subset thereof). Web standards do the rest. JavaScript is JavaScript whether it’s running in Linux or Mac OS. Style sheets are style sheets whether they’re running on Windows 2000 or BeOS. The more web standards the browsers support and the more completely they support those standards, the fewer migraines programmers (and web users) will have to endure. You, on the other hand, will continually test your designs for cross- platform feasibility. You will have to cope with the fact that your favorite Mac system font is not available on the PC (or vice versa). That those tawny PC colors look pale as Christina Ricci on the Mac. That the large, bold sans serif headline that looks so dapper on systems with scalable type and built- in anti-aliasing (such as Mac OS and Windows 98) may look hillbilly- homely on platforms lacking those niceties (such as Linux). What You See Is What You Get (WYSIWYG) programs, such as Macrome- dia Dreamweaver and Adobe GoLive, attempt to give designers the sensa- tion of retaining complete visual control over web layouts. It is an illusion. A vast majority of professional web designers still hand-code their pages. At the very least, they hand-tweak Dreamweaver- or GoLive-generated code to accommodate the reality of browser and platform differences. Browser and platform differences mean that the precise control you’ve come to expect from publishing programs such as Quark XPress and Adobe InDesign simply does not exist on the Web. You can bemoan this fact or learn to create beautiful work that exploits the medium’s changeable nature and facilitates the needs of millions—perhaps even entertaining them in the process. Not such a bad trade-off, when you come right down to it. 28 WHY: Designing for the Medium: Open Standards 04 0732 CH02 4/24/01 11:15 AM Page 28 Point #2: The Web Is Device-Independent Your work not only has to remain usable on a terrifying variety of computer desktops, it also may be accessed via Palm Pilots, web phones, and other instruments of Satan. A year ago it appeared that web designers and pro- grammers would have to continually learn new and incompatible markup languages to accommodate this plethora of web-enabled devices. Instead, the W3C is guiding us toward using Extensible Hypertext Markup Language (XHTML) and CSS to get the job done. (Don’t panic! XHTML is, more or less, simply a newer and cleaner version of HTML.) From www.w3.org/Mobile/Activity: "Mobile devices are unlikely to be able to use exactly the same markup as a normal page for a PC. Instead they will use a subset of HTML tags. The expectation is that different devices will make use of different mod- ules of XHTML; similarly they will support different modules of style sheets. For example, one mobile device might use the basic XHTML text module and the style sheet voice module. Another device with a large screen might also allow the XHTML tables module." The W3C website is visually lackluster, unmanageably immense, and writ- ten in language only a Stanford professor could love. Nevertheless, the W3C is frequently the voice of sanity in the chaos and frenzy of an ever- changing, commerce-driven Web. Learn to overlook the site’s lack of visual panache, and the W3C will be your best friend as the Web and your career move forward. Which brings us to Point #3. Point #3: The Web Is Held Together by Standards To design websites, you will have to learn technologies such as HTML, JavaScript, and CSS, which really isn’t that hard. As you grow more adept, you will become aware of wonderful features offered in only one browser or another. We advise you to avoid these nonstandard technologies and stick, as much as possible, to what is supported in all browsers. You might find yourself working for companies or clients who demand spe- cial features that only work in one browser. Just say no. On an intranet site (see Chapter 5), it might be feasible to design a site that only works in IE5, 29 Taking Your Talent to the Web 04 0732 CH02 4/24/01 11:15 AM Page 29 Netscape 4, or what have you, because those who commission the site con- trol the browsers used to access it. But we’ve heard of plenty of companies that decided to go public with part of their intranet site—only to discover that its nonstandard features locked out millions of web users. We also know an agency that designed an intranet site to take advantage of Netscape 4’s proprietary DHTML Layers technology. When Netscape aban- doned this technology in favor of web standards, the company’s IT depart- ment was unable to upgrade its users to the latest version of Netscape’s browser, which would have made the site nonfunctional. Who took the blame for this fiasco: the client who had insisted on using proprietary, non- standard technology or the web agency that had argued against it? If you’ve had any real experience as a designer, you’ll understand that the question is rhetorical. You can often get away with taking the moral high ground simply by explaining to your clients that delivering what they request will cost them 25% or more of their potential audience. The disabled are almost always among the first to be locked out of a site that relies on proprietary tech- nology. Excluding millions of people from a public site is not exactly a bril- liant business decision, and ethically speaking, it stinks. Excluding the disabled is also illegal in many instances, at least in the United States. Court cases have been fought over it, and the client usually loses. The Aus- tralian Olympics website was one legal casualty; the cost to the site’s own- ers would have wiped out poverty in three small South American nations. If legal and ethical arguments don’t work with your clients, show them the money. Technologies such as HTML, JavaScript, and CSS are the building blocks of web design. In theory, all browsers fully support these standards, deliver- ing on the promise of browser and platform-agnosticism and offering us a Web where we can “write once, publish everywhere.” Theory and reality often diverge. In fact, the divergence between them is more or less the story of the Web. The good news is that built-in browser incompatibilities are gradually going the way of the Dodo bird as more standards-compliant browsers become available. 30 WHY: Designing for the Medium: Open Standards 04 0732 CH02 4/24/01 11:15 AM Page 30 THE 18-MONTH PREGNANCY In early 2000, Microsoft released IE5 Macintosh edition, a browser that delivers top-notch support for HTML 4, CSS, and JavaScript, three immensely important web standards. Soon afterward, Opera Software released its 4.0 browser, whose principal purpose is to deliver superior sup- port for web standards. And a month before Christmas 2000, Netscape delivered Navigator 6, the most standards-compliant browser yet. To read the preceding three sentences not only induces coma, it also sug- gests that designers are now free to use nothing but W3C standards in the sites they and their colleagues create. Alas, this is not the case. IE5 for Windows currently offers excellent but incomplete support for standards. IE4, currently the most-used browser on the Web, has good but still less complete support for standards, and Netscape 4, still used by millions, offers even less. Sure, users can upgrade, and eventually they will—but at their own pace. We call this upgrade period the 18-month pregnancy, based on the time it usually takes before web users feel compelled to switch to an updated browser. Web designers and enthusiasts download new browsers immedi- ately—not so your Uncle Nigel. While you beta-test next year’s browser, your client sticks with AOL 3. Clients and other normal human beings tend to use the browser that came preinstalled on their computers. They upgrade when they buy a new PC. Computer manufacturers tend to install 3.0 browsers (considered stable) when 4.0 models are newly available; they offer 4.0 browsers when 5.0 models first come out; and so on. IT depart- ments are equally conservative, tending to view new browsers the way cats regard changes to their litter. Those who use the Web primarily to shop, send email, or view pornography may not be aware for months that a new browser is available, and when they do find out they often don’t care. The browser upgrade path is slow, thus the transition to a Web built purely with standards could take 18 months or longer. Some say we will not see a fully standards-compliant Web before 2003. For the near future, you will likely find it necessary to employ nonstandard workarounds to address spe- cific deficiencies in these older browsers. We’ll explain these workarounds in the relevant chapters on HTML, CSS, and JavaScript. 31 Taking Your Talent to the Web 04 0732 CH02 4/24/01 11:15 AM Page 31 Five years ago, the entire Web was a hack, held together with carpet tacks and lasagna. We are better off now than we were then. And soon the night- mare of browser incompatibilities will be a story we tell to bore our grand- children. CHOCOLATEY WEB GOODNESS Having accepted that the Web varies from user to user and browser to browser, and that this will be true even when common standards enjoy uni- versal support, let’s move on to consider the medium’s many unique strengths. If you already consider the Web the greatest thing since gender differentiation, feel free to skip ahead. ’Tis a Gift to Be Simple Developing effective web architecture takes great skill. Setting type, designing images and elements, and laying out pages requires consistent vision and intelligence. Programming sites that will serve sophisticated and novice users alike is an art of the highest caliber. But anyone can make a website. A child of six can learn HTML and begin self-publishing in a mat- ter of days. No other medium is as easy to learn and produce. Millions of personal sites prove this point. Many are of interest mainly to their creator’s immediate family and friends—and that’s okay. But a sur- prising number offer valuable content and/or sophisticated design. You can view the vast outpouring of personal pages as proof that HTML is easy to learn. You also might see in it the unshakable human urge to reach out and connect with others. You can even view it as an extended experiment in democracy. Democracy, What a Concept Every medium in human history has presented a barrier to access. Writers have had to convince publishers that their books were worth distributing (or else build their own printing press, like poet William Blake). Screen- writers must convince studios to invest millions in their visions (and the writer is usually barred from the set once the script has been sold). Movie directors must argue with producers and bankers. Painters need galleries; musicians need concert halls and record deals. 32 WHY: Designing for the Medium: Chocolatey Web Goodness 04 0732 CH02 4/24/01 11:15 AM Page 32 But the Web presents few such barriers. Buy a computer and a modem, find a hosting provider, learn HTML and some UNIX filing conventions, and voila—you are a worldwide publisher! If you can’t afford a computer and modem, most public libraries, universities, and schools offer free Internet access. If hosting fees are beyond your means, companies such as Geoci- ties (www.geocities.com) provide free hosting in exchange for the privilege of running ad banners on your site. The Web places the virtual means of production in the hands of virtually every worker. What would Karl Marx think? 33 Taking Your Talent to the Web Figure 2.5 The Stinky Meat Project. On the Web, anyone can publish anything they like. Baby, that’s democracy! (www.thespark.com/ health/stinkymeat/) Speaking of low access barriers, remember the days when you had to expensively laminate print proofs of your best work, slip them into a costly portfolio, and toss them out every six months as your new work made the old stuff obsolete? Well, forget all that. With a free or inexpensive Inter- net account, you can mount a web portfolio that’s viewable anywhere in the world. Nothing to replace; nothing to bang into the knees of a Nean- derthal seated across from you on the subway; nothing for your boss to see you lugging around when you look for a new job on your lunch hour. 04 0732 CH02 4/24/01 11:15 AM Page 33 INSTANT KARMA If the invention of the printing press brought humanity out of the Dark Ages, the building of the Internet and the growth of the Web have ushered in a new information age. It’s an era where every voice can be heard and where truth can win out over lies—even when the liars have million dollar budgets. Say Detroit spews out a bad car (it happens) and decides to dump millions on advertising in the hope of selling it anyway. Message boards on the Web will quickly spread the word that the lemon gets five miles per gallon and spends more time in the shop than on the road. Angry owners may even start a protest site, garnering coverage in the traditional news media. The Web has changed the rules of the market. (See www.cluetrain.org for more on this.) It also has changed publishing. Some of the Web’s best-loved authors have never written a traditional book. Others have gotten traditional book deals based on the popularity of their online publications. The Web has launched careers, CDs, and movies and brought together the globally scattered members of countless unnamed tribes. You might be the only Sufi in Piggott, Arkansas, but you can find thousands of fellow believ- ers online. If the other kids attending Fredericksburg High don’t share your passion for the music of Bernard Herrmann, you’ll find folks more in tune with your interests online. Social commentators sometimes worry that the Web is making us more iso- lated. In the picture these pundits paint, tortured introverts peck out des- perate messages in dark, lonely chat rooms. We take a different view. In ordinary life, extraordinary people often feel terribly isolated because no one around them can understand them other than superficially. The Net and the Web offer real hope and true companionship for those willing to express themselves and seek out like-minded souls. This, we think, is a good thing. 34 WHY: Designing for the Medium: Instant Karma 04 0732 CH02 4/24/01 11:15 AM Page 34 THE WHOLE WORLD IN YOUR HANDS They don’t call it the World Wide Web for nothing. As individuals, we can not only email pen pals in Istanbul and Amsterdam, we can find out what people in those countries think by reading their personal sites or talking with them in online communities. People living in nondemocratic nations can publish their protests anony- mously without fear of government retaliation. In lands where all views are tolerated, everyone from amateur gemologists to alien conspiracy freaks can broadcast their theories to a global audience. Free online services, such as Alta Vista’s Babelfish (babelfish.altavista.com) translate text on the Web into a variety of languages. These translations may be awkward and even hilarious—after all, translation is an art best practiced by human beings. But the gist of the text survives the transla- tion. If you publish the story of your child’s first steps on your personal site, your tale may be accessible to families in Indonesia and Zimbabwe. The Web not only reaches the world, it changes it. As a web designer, you will be an agent of change, which is a lot easier and much less dangerous than becoming an agent of the FBI. You’ll also sleep better, and you won’t have to wear a tie. JUST DO IT: THE WEB AS HUMAN ACTIVITY Unlike any other mass medium, the Web encourages human activity instead of passive consumption. This can have a transformative effect, as consumers become active participants, reinvent themselves as content producers, and launch political parties or small businesses without begging for third-party capital. Armed with nothing more than the Web, individu- als or small groups can affect the way the world does business, call global attention to a regional injustice, or bring hope to a cancer patient (http:// vanderwoning.com/living/blog.html). 35 Taking Your Talent to the Web 04 0732 CH02 4/24/01 11:15 AM Page 35 [...]... determine the visitor’s connection speed and responds with the appropriately optimized file How does the server “know” the user’s connection speed? The plug-in “tells” the server QuickTime includes a control panel, which asks the user to select her connection speed This information is then conveyed to the plug-in Ingenious 04 0732 CH02 4/24/01 11:15 AM Page 39 Taking Your Talent to the Web The server... database-driven sites, the visitor must enter this private data before accessing content The data is then stored on a cookie on the visitor’s hard drive, allowing the user to return to the site without having to undergo the tedious log-in process each time Advertisers and site owners foam at the mouth over the possibility of procuring information like this We’ve even had a client ask if there was any way to find out... that your typographic choices and other design decisions come through intact (albeit filtered by the visitor’s browser and platform) Nevertheless, educated users do have the power to filter your work through their preferences, so it is important to think of web design as a partnership with the people who read and view your sites and to accept the fact that your layouts might be transformed by visitors... have to say 2 She cannot copy and paste your text into an email message she’s sending to her family 3 Search engines will not see the text because it is embedded in a graphic image, and as a result, fewer people will discover your page 4 A near-sighted visitor might find it difficult or impossible to read your 9pt Futura “graphic text.” 04 0732 CH02 4/24/01 11:15 AM Page 37 Taking Your Talent to the Web... depending on the visitor’s access speed With QuickTime 4 and higher, for instance, the faster the connection, the larger the movie and the higher its quality This is accomplished through an ingenious scheme whereby QuickTime content is exported (saved) at a variety of quality levels and stored as a series of related files on the web server When the visitor’s browser requests the file, the server checks to determine... WHY: Designing for the Medium: The Viewer Rules Visit a web community, and you’ll see people who used to channel-surf devoting their leisure hours to arguments, flirtations, and other classic forms of human interactivity These communities can spill over from the virtual realm to the real world The members of Redcricket, for example, visit each other’s cities (www.redcricket.com) The readers and writers... users to enter personal data without first giving a clear picture of what the user would gain by doing so Many of these were sites flung together like so much moldy cheese by traditional media moguls When users failed to register, the moguls would claim that “Web content doesn’t work” (if the illconceived site was their own) or trumpet the failure far and wide (if the site belonged to a competitor) Some... (www.alistapart.com/stories/dao/) Designers can thwart the user’s power if they insist—with mixed results For instance, to force the viewer to see what you want her to see, you can deliver body text in an image instead of typing it in HTML This is a classic mistake of the novice web designer Why is it so wrong? Let us count the ways: 1 If the viewer has turned off images in her browser, she cannot read what you (or your. .. can watch the movie with a click of the mouse If she hasn’t installed the plug-in yet, she can download it and then watch the movie The QuickTime plug-in comes standard in both Netscape and Explorer’s browsers, so the issue is moot for most web users, who usually use one or both of these browsers Flash and RealPlayer also come standard with Netscape’s browsers The Server Knows The quality of the movie... these sites offered decent content, but few folks were willing to cross the privacy barrier to find out about it Though web users are understandably reluctant to reveal their salaries and sexual preferences merely to view content, the server’s tracking of less sensitive information can still be incredibly useful to the design and development team For instance, if you discover that a great many visitors . visitors with special needs or quirky preferences. 37 Taking Your Talent to the Web Figure 2.6 An embedded Quick- Time video at The Ad Store’s website. QuickTime streams the video, enabling it to. levels and stored as a series of related files on the web server. When the visitor’s browser requests the file, the server checks to determine the visitor’s connection speed and responds with the appropri- ately. before accessing content. The data is then stored on a cookie on the visitor’s hard drive, allowing the user to return to the site without having to undergo the tedious log-in process each time.