Web Design in a Nutshell | O'Reilly Media

Content preview·Buy reprint rights for this chapter

Most web authors agree that the biggest challenge (and headache!) in web design is dealing with the variety of browsers and platforms. While the majority of HTML elements are reliably rendered in most browsers, each browser has its own quirks when it comes to implementation of HTML and scripting elements.

Features and capabilities improve with each new major browser release, but that doesn't mean the older versions just go away. The general public tends not to keep up with the latest and greatest—many are content with what they are given, and others may be using the computers of a company or institution that chooses a browser for them. The varying functionality of browsers has a strong impact on how you author your site, that is, which web technologies you can safely use to make your site work.

How do you design web pages that are aesthetically and technically intriguing without alienating those in your audience with older browsers? Does a page that is designed to be functional on all browsers necessarily need to be boring? Is it possible to please everyone? And if not, where do you draw the line? How many past versions do you need to cater to with your designs?

There is no absolute rule here. While it's important to make your content accessible to the greatest number of users, experimentation and the real-world implementation of emerging technologies is equally important to keep the medium pushing forward. The key to making appropriate design decisions lies in understanding your audience and considering how your site is going to be used.

This chapter provides background information, statistics, and current wisdom from professional web designers that may help you make some of these decisions. It begins with an introduction to the most common browsers in use today, their usage statistics, and supported features. After describing the browser landscape, it discusses various design strategies for coping with browser difference and, finally, what's being done in the industry to set things straight again.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Before you can develop a strategy for addressing various browser capabilities, it is useful to have a general knowledge of the browsers that are out there. While web browsing clients are increasingly being built into small-display devices such as PDAs, telephones, and even car dashboards, this chapter focuses on the traditional graphical computer-based browsers that developers generally keep in mind. The particular needs of handheld devices are discussed further in Chapter 32.

The browser market is dominated by two major browsers: Microsoft Internet Explorer and Netscape Navigator. As of this writing, Internet Explorer is in Version 5.5 for Windows (5.0 for Macintosh) and the Navigator browser is one component of Netscape 6 (they did not release a Version 5). Together, the "Big Two," including their collective past versions, account for over 95% of browser use today.

Since 1994, these two contenders have battled it out for market dominance. Their early struggle to be cooler than the next guy has resulted in a collection of proprietary HTML tags and incompatible implementations of new technologies (JavaScript, Cascading Style Sheets, and most notoriously Dynamic HTML). On the positive side, the competition between Netscape and Microsoft has also led to the rapid advancement of the medium as a whole.

Netscape publishes information for developers at http://developer.netscape.com.Information about the Netscape 6 release can be found at http://home.netscape.com/browsers/6/index.html.

For information on designing for Internet Explorer, visit Microsoft's Internet Explorer Developer Center (part of its MSDN Online developer's network) at http://msdn.microsoft.com/ie/default.asp. Additional information is available on the Microsoft product pages at http://www.microsoft.com/windows/ie/ (for Windows) and http://www.microsoft.com/mac/products/ie/ (for Macintosh).

Although Netscape's browsing component is still officially called Navigator, Netscape seems to be downplaying "Navigator" and promoting its latest product release simply as Netscape 6. Because this is the title that has stuck with the industry, this book refers to "Netscape 6," but uses "Navigator" for previous releases.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Knowing which browsers are out there is just part of the battle. What really matters is how many people are actually using them. Browser usage is constantly shifting, so it is important to keep up with the latest trends.

Whether you use a free general statistics listing or your own server logs, knowing what browsers are most used can be helpful in deciding which technologies to adopt and where to draw the line for backwards compatibility. For instance, if you find that for some reason 45% of visitors to your site are still using Version 3 browsers, you might not want to switch your site over to style sheets just yet.

There are several methods for tracking browser usage: log analysis tools which you run on your own server, free general statistics listings, and professional statistics services.

Section 1.2.1.1: Server log analysis

The most meaningful statistics are those culled from your own site's usage. There are software tools designed just for this purpose, all of which work basically the same way.

When a browser accesses files from a server, it leaves a record of that transaction on the server, including a little data about itself: specifically, its version and the platform it is running on. This information is known as the user agent string , and it is used by analysis software to generate statistics about the browser usage for a site. A typical user agent string might look like this:

Mozilla/4.0 (compatible; MSIE 5.5; Windows 98)

There are dozens of log analysis tools available at a wide variety of costs. Many are listed in the Yahoo! Directory under Business and Economy→ Business to Business→ Communications and Networking→ Internet and World Wide Web→ Software→ World Wide Web→ Log Analysis Tools.

You may also choose to sign up with a service such as The Counter (see http://www.thecounter.com) that puts a counter on your web page and provides usage stats on the page for free (in exchange for ad placement on your page). Other companies, such as SuperStats from MyComputer.com (

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Faced with the dilemma of varying browser capabilities, web designers have developed a variety of design approaches, some more extreme than others. The "correct" way to handle a particular site, of course, depends on its use and audience, but this section should provide a peek into the different positions in the ongoing debate over where to draw the line.

One way to make sure your pages are accessible to everyone is to stick with the safest HTML standard (such as HTML 3.2) and shun any extras. That way your pages are sure to work on all browsers, including Lynx and Version 2.0 of the popular browsers.

A minority of web developers take the position that the current embellishments to HTML (Java, JavaScript, DHTML, and plug-in technologies like Flash) are unnecessary to successful communication over the Web. Designers who design for the lowest common denominator may choose not to use any of these technologies in their designs. This approach reflects the conservative extreme of the range of web design strategies.

Another minority, at the other end of the spectrum, are the web developers who design only for the most current version of popular browsers (as of this writing, Netscape 6.0 and Internet Explorer 5.5), with little concern for site performance for other users. The statement "Tell them to upgrade—it's free !" has often been used in defense of this design tactic. Beyond this, there are even designers who design for only the most current version of one particular browser or platform. This may be perfectly appropriate for intranet design in organizations that have standardized on a particular version of a single browser, but in general, it's unrealistic.

This approach has the obvious disadvantage of alienating a significant percentage of the audience. If the functionality of a site depends on a specific trick—for example, if you can't get off the front page without DHTML support—then your site has problems communicating. On the positive side, these designers tend to be the ones who forge new territories and put new technologies to the test. Creating exciting sites that depend on cutting-edge features does create an incentive for users to keep themselves up-to-date. Unfortunately, in many cases, upgrading is out of the control of the end user.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

As with most design challenges, making appropriate decisions regarding which browsers to support and which new technologies to adopt largely depends on knowing your audience. Before designing a new site, be sure to spend plenty of time up front researching the likely platforms, browsers, technical savvy, and connection speeds of the users you are targeting. If you are redesigning an existing site, spend time with the server logs to analyze past site usage.

There are no browser-support guidelines that can anticipate every design situation; however, the following scenarios should start you thinking:

If you are designing a scientific or academic site, you should probably pay extra attention to how your site functions in Lynx (or other graphics-free browsing environments), because Lynx is more commonly used on academic and scientific networks than by the Web community at large. In addition, since the academy tends to be more Unix-oriented, Netscape figures more prominently than Internet Explorer because it is better supported.
If your site is aimed at a consumer audience—for instance, a site that sells educational toys to a primarily parent audience—don't ignore your site's performance and presentation in the AOL browsers or older browser versions.
If you are designing for a controlled environment, such as a corporate intranet or, even better, a web-based kiosk, you've got it made! Knowing exactly what browser and platform your viewers are using means you can take full advantage of the bells and whistles (and even proprietary features) appropriate to that browser. If you are designing a standalone kiosk, you may even have the luxury of loading the fonts you want to use. Just be sure your design won't crash the browser since there won't be anyone there to restart it for you immediately. In these situations, the "current version design" strategy discussed earlier in this chapter is entirely appropriate (just don't get spoiled)!

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

The final word in the dilemma of designing for a variety of browsers is test ! Always test your site on as many browsers, browser versions, and platform configurations as you can get your hands on.

Professional web design firms run their sites through a vigorous quality assurance phase before going "live." They generally keep a bank of computers of varying platforms and processing powers that run as many versions of browsers (including Lynx) as possible.

If you do not have the resources to keep a similar setup on your own, make the site available on a private test site and take a look at it on your friends' computers. You might view it under corporate conditions (a fast Windows machine with a 6.0 browser and a T1 connection), then visit a friend at home to see the same site on AOL with a 28.8 modem. (If nothing else, this is a good excuse to get away from your computer and visit your friends!)

Although your pages will certainly look different in different environments, the idea is to make sure that nothing is outright broken and your content is being communicated clearly.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

The Internet was built on standards. When a need for functionality was identified (email attachments, for example) a person or group proposed a system to make it work. After a discussion phase, the proposal was made public in the form of a Request for Comments (RFC). The RFC process is overseen by the Internet Engineering Task Force (IETF), an international community of network designers, operators, vendors, and researchers concerned with the evolution of the Internet (see http://www.ietf.org for more information). Once the kinks were worked out, other developers adopted the method and a standard was born.

The Web, with its early explosion of excitement and opportunism, skipped over this traditional standards process. Although the World Wide Web Consortium (W3C), a group of industry experts and professionals who guide the evolution of the Web) began working on HTML standards in 1994, the browser software companies didn't wait for them.

Once Netscape Navigator popped up on the scene with its set of proprietary tags, they set in motion the process by which we've inherited the browser chaos outlined in this chapter. The problem only got worse as web design grew beyond simple HTML to encompass richer web technologies such as Cascading Style Sheets and DHTML. Not only does developing for a multitude of incompatible browsers cause headaches, but redundant development time also costs a lot of money.

It didn't take long for the development community to say, "Enough is enough!" and demand that the browser creators slow down and abide by the web standards set forth by the W3C. The champion of this effort is the Web Standards Project (WaSP). WaSP is a collective of web developers who are pushing hard for action.

Their first goal, of course, is to get all browsers to support the same standards for HTML and other web technologies. In an ideal world, there would be one way to code a page for a particular effect, and it would work exactly the same way on 100% of the browsers, regardless of platform. Although Netscape 6 and Internet Explorer 5 (Mac) and Internet Explorer 5.5 (Windows) boast standards compliance, there are still a few bugs to work out. It will also take some years for older browser versions to fade away. But the current trend is encouraging.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

One of the most vexing aspects of web design is knowing that your page is at the mercy of the software and hardware configuration of each individual user. A page that looks great on your machine may look radically different, or perhaps even ghastly, when viewed on another user's setup. This is partly due to the browser's functionality (as discussed in Chapter 1) and the individual user's preferences (font size, colors, etc.), but the display device itself also plays a large part in the success of the page's design.

This chapter looks at the ways in which design decisions are influenced by the wide range of displays and viewing conditions. The variation in display is a function of the monitor's size (or, more accurately, its resolution), color capabilities, and user's personal preferences. However, it is important to keep in mind that the diversity does not end there. Some users may be watching your web page on TV. Still others may be viewing it in the palm of their hand on a PDA (personal digital assistant) or cell phone. Sight-impaired users may be listening to your page, not viewing it.

Browser windows can be resized to any dimension, limited only by the maximum size of the monitor. Designing for an unknown amount of browser real estate is a challenge unique to web design and one that is particularly troublesome for designers who are accustomed to the printed page.

In discussion forums frequented by web design professionals, no topic is more often addressed (nor hotly debated) than the question of which monitor resolution to design for. As with most web design issues, there is no "right" way to design for the Web, and your decisions should always be guided by your knowledge of your target audience and the purpose of your site. Still, it is helpful to understand the environment and to know how others are maneuvering within it.

This section looks at the range of monitor resolutions and presents the current wisdom on making appropriate design decisions.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Browser windows can be resized to any dimension, limited only by the maximum size of the monitor. Designing for an unknown amount of browser real estate is a challenge unique to web design and one that is particularly troublesome for designers who are accustomed to the printed page.

In discussion forums frequented by web design professionals, no topic is more often addressed (nor hotly debated) than the question of which monitor resolution to design for. As with most web design issues, there is no "right" way to design for the Web, and your decisions should always be guided by your knowledge of your target audience and the purpose of your site. Still, it is helpful to understand the environment and to know how others are maneuvering within it.

This section looks at the range of monitor resolutions and presents the current wisdom on making appropriate design decisions.

The first step in determining the likely size of your web page is to look at the maximum amount of space provided by the computer monitor. Computer monitors come in a variety of standard sizes, typically indicated in inches. Some typical monitor sizes are 15", 17", 19", 20", and 21".

The more meaningful measurement, however, is monitor resolution—the total number of pixels available on the screen. The higher the resolution, the more detail can be rendered on the screen. When you know the available number of pixels, you can design your graphics (also measured in pixels) and page elements accordingly. Table 2-1 presents a list of some standard monitor resolutions supported by Windows and Macintosh platforms. This is not a complete listing, merely the most commonly occurring configurations.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Closely related to the issue of varying monitor resolutions is the question of whether web pages should be designed to be flexible (resizing and adapting to various window sizes) or fixed at a particular size (giving the designer more control of the page's dimensions). There are very strong opinions on both sides, and there are good reasons for and against each approach, naturally.

Figure 2-1: Browser and system measurements

You may find that you choose a fixed structure for some sites and allow others to be flexible, or you may have strong convictions that one or the other approach is the only way to go. Either way, it is useful to be familiar with the whole picture and the current opinions of professional web designers. This section attempts to present a balanced overview of the possibilities and the pitfalls.

Web pages are flexible by default. The text and elements in a straightforward HTML file flow into the browser window, filling all available space, regardless of the monitor size. When the browser window is resized, the elements reflow to adapt to the new dimensions. This is the inherent nature of the Web. Designers who are initially traumatized by the unpredictability of where page elements land usually just learn to let go of some control over the page.

Many designers make a conscious decision to construct pages so they can adapt to stretching and shrinking browser windows. This approach comes with advantages and disadvantages.

Section 2.2.1.1: Advantages

The advantages of a flexible design include the following:

The reality is that web pages

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Newspaper editors have always designed the front page with the most important elements "above the fold," that is, visible when the paper is folded and sitting in the rack.

Likewise, the first screenful of a web site's homepage is the most important real estate of the whole site, regardless of whether the page is fixed or flexible. It is here that the user makes the decision to continue exploring the site or to hit the "Back" button and move along. Web designers have adopted the term "above the fold" to apply to the contents that fit in that important first screen. My personal experience shows that users tend not to scroll beyond the first page, even when the vertical scrollbar is visible. Thus, the first screen bears the entire burden of enticing users to stay at your site.

As discussed throughout this chapter, a "screenful" can be quite different depending on the resolution of the monitor. To play it absolutely safe, consider the space available for the lowest common denominator 640 × 480 monitor—approximately 600 × 300 pixels. That's not a lot of space!

Some elements you should consider placing above the fold include:

The name of the site.
Your primary marketing message.
Some indication of what the site is about. For instance, if it is a shopping site, you might place the credit card logos or shopping cart in the top corner to instantly communicate that "shopping happens here."
Navigation to other parts of the site. If the entire navigation device (such as a list of links down the left edge of the page) doesn't fit, at least get it started in the first screen; hopefully users will scroll to see the remainder. If it is out of sight completely, it is that much more likely to be missed.
Any other information that is crucial for visitors to the site, such as a toll-free number or special promotion.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Monitors also differ in the number of colors they are able to display, if they display colors at all. This is another aspect of the final display that may influence design decisions. Monitors typically display 24-bit color (approximately 17 million colors, also known as the "true color space"), 16-bit color (approximately 65,000 colors), or 8-bit color (256 colors). When colors taken from the "true" 24-bit color space are rendered in browsers on 8-bit monitors, many of the colors have to be approximated, and a speckled pattern (called dithering ) may occur.

However, there is a set of 216 colors, made up from the cross-section of the Windows and Macintosh system palettes, that will not dither on Windows and Mac 8-bit displays. This set of colors is known as the web palette, among other names. Many designers choose to design web graphics and HTML elements using colors from this palette so the pages look the same for all users. The web palette is discussed thoroughly in Chapter 3, Chapter 15, and Chapter 22.

If you are concerned about users with grayscale or black and white displays, be sure to design graphics with good contrast. When colors are converted to grayscale values (or dithered with black and white pixels), only the brightness of the colors matters. Imagine setting purple text on a teal background; although the colors are of contrasting hues, they are close enough in overall brightness that the text will be illegible when the colors are displayed on a grayscale monitor.

Monitors also vary in the brightness of their displays, known as the gamma value. PC monitors tend to be much darker than Macintosh monitors, so colors that are deep and rich when created on a Mac may look black when displayed on a Windows machine. Likewise, graphics created in Windows may look washed out when viewed on a Mac. Gamma is discussed further in Chapter 3

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

The Web isn't just for personal computers anymore! Web browsers are increasingly making their way into our living rooms, briefcases, and cars, in the form of WebTV, handheld PDA devices, cellular phones, and dashboard devices. These extra-small displays introduce new design concerns.

WebTV, a device that turns an ordinary television and phone line into a web browser, hit the market in 1996 and is experiencing a slow but steady growth in market share. As of this writing, it is barely a blip on the radar screen of overall browser usage, but because numbers are increasing, some developers are taking its special requirements into consideration. Some sites are being developed specifically for WebTV.

WebTV uses a television rather than a monitor as a display device. The live space in the WebTV browser is a scant 544 × 378 pixels. The browser permits vertical paging down, but not horizontal scrolling, so wider graphics are partially obscured and inaccessible, or resized to fit. Principles for designing legible television graphics apply, such as the use of light text on dark backgrounds rather than vice versa and the avoidance of any elements less than 2 pixels in width. These and other guidelines are provided on WebTV's special developer site at http://developer.webtv.net.

Of particular interest is WebTV Viewer, which shows you how your web page will look on WebTV, right from the comfort of your computer. It is available for free for both Windows and Mac (although the Windows version is more up-to-date as of this writing). For information on WebTV Viewer, go to http://developer.msntv.com/Tools/WebTVVwr.asp.

The increased popularity and usefulness of the Web combined with the growing reliance on hand-held communications devices (such as palm-top computers, PDAs, and cellular telephones) has resulted in web browsers squeezing into the coziest of spaces. Typically, wireless devices are used to view applications designed especially for them (see Chapter 32), not the graphically-rich web sites that we are accustomed to on our computer browsers. Therefore, it is generally not necessary to worry about how your site will fare on a microbrowser.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

If you are accustomed to designing for print, the Web introduces a number of new concepts and new ways of doing things. Part of what makes web design unique is that the pages are displayed on a computer monitor, not paper, requiring familiarity with new color models. In addition, you need to work within the unique environment of the web browser. The HTML markup language brings its own limitations to the mix.

This chapter discusses some basic web design concepts, which may be new for print designers or for anyone who is just getting started in web design. It provides necessary background information about the web environment, including how browsers deal with color, graphics, and typography, so that you can make design decisions that are appropriate to the medium.

Designing pages for the Web is fundamentally different from designing a printed page. The single most difficult challenge in making the transition from print to web design is that on the Web, you cannot control absolutely the way your page looks to the end user. The way the page displays is a function of the browser it is viewed on and the user's preference settings, as shown in Figure 3-1. By its nature, the Web forces designers to give up control over the very things designers are traditionally responsible for controlling, such as page size, alignment, fonts, and colors. The experience is a shock until you get used to it. Becoming a good web designer requires a solid understanding of the web environment in order to anticipate and plan for these shifting variables.

Figure 3-1: The same HTML page viewed on different browsers and with different user preferences

When you design a web page, you are creating a page that will be viewed under a vast range of unknown conditions. There are a number of factors that will directly impact the design and functionality of a web page.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Designing pages for the Web is fundamentally different from designing a printed page. The single most difficult challenge in making the transition from print to web design is that on the Web, you cannot control absolutely the way your page looks to the end user. The way the page displays is a function of the browser it is viewed on and the user's preference settings, as shown in Figure 3-1. By its nature, the Web forces designers to give up control over the very things designers are traditionally responsible for controlling, such as page size, alignment, fonts, and colors. The experience is a shock until you get used to it. Becoming a good web designer requires a solid understanding of the web environment in order to anticipate and plan for these shifting variables.

Figure 3-1: The same HTML page viewed on different browsers and with different user preferences

When you design a web page, you are creating a page that will be viewed under a vast range of unknown conditions. There are a number of factors that will directly impact the design and functionality of a web page.

Unknown browsers: As discussed in Chapter 1, there are hundreds of browser versions in use today. The same page source may look and function differently depending on the browser rendering it.

Unknown platform: The user's operating system also impacts how a web page looks and functions. Some technologies are better supported on Windows than on a Macintosh or Unix system. The platform also affects basic display elements, such as fonts, colors, and form elements.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

HTML was created with the intent of putting ultimate control of the presentation in the hands of the end user. This principle makes its most resounding impact when it comes to typography. Take a look at your browser's preferences and you will find that you (and every other surfer) are able to specify the fonts and sizes that you prefer for online viewing.

For anyone accustomed to designing for other media, this loss of font control is cause for major frustration. From the time they discovered the Web, designers (and their corporate clients) have been pushing for ways to control typography in order to produce attractive and predictable web sites.

Great strides have been made in this effort since the early days of the Web and HTML 1.0; however, as of this writing, the font issue is still unfolding. This section discusses possible strategies and technologies (along with their advantages and disadvantages) for designing type in web documents.

About the only thing you can be sure of when you're designing web pages with basic HTML is that you have two fonts to work with: a proportional font and a fixed-width font. The problem is that you don't know specifically which fonts these are or at what size they will be displayed.

Section 3.2.1.1: Proportional font

A proportional font (called "Variable Width Font" in Netscape Navigator) is one that allots different amounts of space to each character, based on its design. For instance, in a proportional font, a capital "W" takes up more horizontal space on the line than a lowercase "i". Times, Helvetica, and Arial are proportional fonts.

Web browsers use a proportional font for the majority of text in the web page, including body text, headings, lists, blockquotes, etc. In general, proportional fonts are easier to read for large bodies of text.

Because the majority of users do not take the time to change the default font in their browser preferences, you can make a

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

The Web requires designers to think about color in new ways. In part, it means understanding color in a more technical manner—the appearance of a page can benefit greatly if a designer knows what's going on "under the hood." The peculiarities of working with color in web design are functions of the following simple principles:

Monitors: Web pages are displayed on computer monitors, therefore they follow the basic rules of how computers and monitors handle color.

Browsers: Because browsers have built-in resources for rendering color when running on systems with limited color display capacity, they can alter the appearance of the colors in your pages.

HTML: Colors on a web page that are not part of a graphic (for example, background and text colors) need to be properly identified in the HTML tags of the document. This topic is covered in more detail in Chapter 16.

Color on monitors is made of light, so traditional systems for specifying color for print (CMYK, Pantone swatches, etc.) do not apply. Monitors differ in the number of colors they can display at a time. On the high end, 24-bit monitors are capable of displaying nearly 17 million colors. 16-bit monitors can display over 65 thousand colors. On the low end, 8-bit monitors are able to display only 256 colors at a time.

Section 3.3.1.1: RGB color

Computer monitors display colors by combining red, green, and blue light. This color system is known as RGB color.

RGB color is a 24-bit system, with eight bits of data devoted to each of three color channels. Eight bits of data can describe 256 colors. With 256 possible colors in each of the three channels, the total possible number of colors is calculated by multiplying 256 × 256 × 256 for a total of 16,777,216. That's more than enough colors to provide stunning representations of artwork and photography. 24-bit color is often referred to as the

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Print designers need to adapt their graphics production skills for the Web to take into account the peculiarities of graphics that are distributed over a network and displayed on computer monitors.

As of this writing, nearly all the graphics that you see on the Web are in one of two formats: GIF and JPEG. A third worthy contender, the PNG file, is struggling for browser support and attention. What follows is a very brief introduction to each of these online graphic formats. More detailed descriptions are provided in the chapters dedicated to each format.

Section 3.4.1.1: The ubiquitous GIF

The GIF (Graphic Interchange Format) file format is the traditional darling of the Web. It was the first file format to be supported by web browsers, and it continues to be the format for the vast majority of graphics on the Web today.

GIFs are indexed color files with a maximum 8-bit palette capacity, which means that a GIF can contain a maximum of 256 pixel colors. Because they compress color information by rows of pixels, GIF files are most appropriate for graphics that contain areas of flat color.

See Chapter 19 for complete information on the GIF file format.

Section 3.4.1.2: The handy JPEG

The second most popular graphics format on the Web today is the JPEG ( Joint Photographic Experts Group) format. JPEGs contain 24-bit color information—that's millions of colors, as opposed to GIF's 256. They use what is called a "lossy" compression scheme, which means that some image information is thrown out in the compression process, but in most cases, the degradation of the image is not detrimental or even noticeable.

Photographic images, or any image with subtle gradations of color, are best saved as JPEG files because they offer better image quality packed into a smaller file. JPEGs, however, are not a good solution for flat, graphical images, because they tend to mottle colors, and the resulting file will generally be a lot larger than the same image saved as a GIF.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Even if you focus primarily on what's commonly referred to as "front-end" web development—HTML documents and web graphics—the server and the way it is configured may impact the way you work. In most cases, there is no way to avoid making firsthand contact with the server, even if it's just to upload files.

For this reason, all web designers should have a basic level of familiarity with servers and what they do. At the very least, this will enable you to communicate more clearly with your server administrator. If you have permission for greater access to the server, it could mean taking care of certain tasks yourself without needing to wait for assistance.

This chapter provides an introduction to server terminology and functions, pathnames, and file (MIME) types. It also discusses uploading files and setting permissions, which designers often need to do.

A server is any computer running software that enables it to answer requests for documents and other data. The programs that request and display documents (such as a browser) are called clients . The terms "server-side" and "client-side," in regard to specific functions like imagemaps, refer to which machine is doing the processing. Client-side functions happen on the user's machine; server-side functions occur on the remote machine.

Web servers answer requests from browsers (the client program), retrieve the specified file (or execute a CGI script), and return the document or script results. Web browsers and servers communicate via the Hypertext Transfer Protocol (HTTP).

Any computer can be a server as long as it is running server software. Today, there are many server packages available, but the overwhelming leaders are Apache and Microsoft Internet Information Server (IIS).

Apache: The majority of servers today (approximately 60%) run Apache. Its popularity is due to the fact that it is powerful and full-featured, and it has always been available for free. It runs primarily on the Unix platform but is being released to run on other platforms, including Windows NT/2000 and Mac OS X.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

A server is any computer running software that enables it to answer requests for documents and other data. The programs that request and display documents (such as a browser) are called clients . The terms "server-side" and "client-side," in regard to specific functions like imagemaps, refer to which machine is doing the processing. Client-side functions happen on the user's machine; server-side functions occur on the remote machine.

Web servers answer requests from browsers (the client program), retrieve the specified file (or execute a CGI script), and return the document or script results. Web browsers and servers communicate via the Hypertext Transfer Protocol (HTTP).

Any computer can be a server as long as it is running server software. Today, there are many server packages available, but the overwhelming leaders are Apache and Microsoft Internet Information Server (IIS).

Apache: The majority of servers today (approximately 60%) run Apache. Its popularity is due to the fact that it is powerful and full-featured, and it has always been available for free. It runs primarily on the Unix platform but is being released to run on other platforms, including Windows NT/2000 and Mac OS X.

The core installation of Apache has limited functionality, but it can be expanded and customized easily by the addition of modules . Apache calls on each module to perform a dedicated task, such as user authentication or database queries. You can pick up a copy of the Apache server and its documentation from the Apache home page at http://www.apache.org.

Internet Information Server (IIS): This is Microsoft's server package, which is also available without charge. IIS runs on the Windows NT platform (in fact, it comes bundled with Windows NT 4.0 and 2000). IIS has developed into a powerful and stable server option that is somewhat easier to set up and maintain than its Unix competitor. It has many advanced server features, including ASP (Active Server Pages) for server-side scripting. As of this writing, approximately 20% of sites run on IIS servers.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Because the Web was spawned from the Unix environment, it follows many of the same conventions. Directory structure and pathname syntax are prime examples. It is important for all web designers to have an understanding of how directory structures are indicated on the Unix platform since pathnames are used in hyperlinks and pointers to images and other resources.

Directories ("places" to store files) are organized into a hierarchical structure that fans out like an upside-down tree. The topmost directory is known as the root and is written as a forward slash ( / ). The root can contain several directories, each of which can contain subdirectories; each of these can contain more subdirectories, and so on. A subdirectory is said to be the "child" of the directory that holds it (its "parent"). Figure 4-1 shows a system with five directories under the root. The directory users has two subdirectories, jenand richard. Within jenare two more subdirectories, work and pers, and within pers is the file art.html.

Figure 4-1: Example of a directory hierarchy

A pathname is the notation used to point to a particular file or directory; it tells you the path of directories you must travel to get to where you want to go. There are two types of pathnames: absolute and relative.

An absolute pathname always starts from the root directory, which is indicated by a slash ( / ). So, for example, the pathname for the pers directory is/users/jen/pers, as shown in Figure 4-2 .The first slash indicates that we are starting at the root and is necessary for indicating that a pathname is absolute.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

In order for your files to traverse the network successfully, you must name them in accordance with established file naming conventions:

Avoid character spaces in filenames. Although this is perfectly acceptable for local files on a Macintosh or Windows machine, character spaces are not recognized by other systems. It is common to use an underscore character to visually separate words within filenames, such as andre_bio.html.
Avoid special characters, such as ?, %, #, /, :, etc., in filenames. It is best to limit filenames to letters, numbers, underscores (in place of character spaces), hyphens, and periods.
Use proper suffixes. HTML documents require the suffix .html (or .htm if on a Windows server). GIF graphic files take the suffix .gif, and JPEGs should be named .jpg or .jpeg. If your files do not have the correct suffix, the browser may not recognize them as web-based files. Suffixes for a large number of common file types are listed later in this chapter.
Filenames are case-sensitive. Consistently using all lowercase letters in filenames, while certainly not necessary, may make them easier to remember.
Keep filenames as short as possible. They add to the size of the file (and they can be a nuisance to remember!).

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

The most common transaction that a web designer will have with a web server is the uploading of HTML documents, graphics, and other media files. Files are transferred between computers over a network via a method called FTP (File Transfer Protocol).

If you are working in a telnet session on Unix, you can run the ftp program and transfer files with a hefty collection of command-line arguments (not covered in this book).

Fortunately, if you work on a Mac or PC, there are a number of FTP programs with graphical interfaces that spare you the experience of transferring files using the Unix command line. In fact, FTP functions are now built right into full-featured web authoring tools, such as GoLive, Dreamweaver, and FrontPage, among others. On the Mac, dedicated programs that allow "drag-and-drop" file transfer, such as Fetch and Interarchy (previously Anarchie), are quite popular. On the PC, there are numerous simple FTP programs, such as WS_FTP, AceFTP, and Transmit. These (and many others) are available for download at http://www.shareware.com (search for "ftp").

The Navigator and Internet Explorer browsers also function as FTP clients, offering the ability to both download and upload files with a drag-and-drop interface.

Regardless of the tool you use, the basic principles and processes are the same. Before you begin, you must have an account with permission to upload files to the server. Check with the server administrator to be sure you have a login name and a password.

You don't necessarily need an account to upload and download files if the server is set up as an "anonymous" FTP site. However, due to obvious security implications, be sure that your personal directories are not configured to be accessible to all anonymous users.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Servers add a header to each document that tells the browser the type of file it is sending. The browser determines how to handle the file based on that information—whether to display the contents in the window, or to launch the appropriate plug-in or helper application.

The system for communicating media types closely resembles MIME (Multipurpose Internet Mail Extension), which was originally developed for sending attachments in email. The server needs to be configured to recognize each MIME type in order to successfully communicate the media type to the browser.

If you want to deliver media beyond the standard HTML files and graphics (such as a Shockwave Flash movie or an audio file), you should contact your server administrator to be sure the server is configured to support that MIME type. Most common formats are built in to current versions of server software, but if the format isn't there already, the administrator can easily set it up if you provide the necessary information.

The exact syntax for configuring MIME types varies among server software; however, they all require the same basic information: type, subtype, and extension. Types are the most broad categories for files. They include text, image, audio, video, application, etc. Within each category are a number of subtypes. For instance, the file type image includes the subtypes gif , jpeg, etc. The extension refers to the file's suffix, which the server uses to determine the file type and subtype. Not all extensions are standardized.

Table 4-1 lists common media types by extension along with their MIME type/subtype information. The ASCII/Binary information is provided to aid in making upload decisions.

Of course, new technologies and file types are emerging every day, so keep in mind that it is the web designer's responsibility to make sure that for any new media type the appropriate information is communicated to the server administrator.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

The Web is undeniably an amazing resource for information, but it's not the most comfortable nor portable of reading environments. For this reason, many people print web pages to read away from their desks or to file for later use. The ability to print the contents of the window has been built into browsers from the beginning. Over the years, we've seen some advancement for controlling printouts, both from the browser application itself as well as in authoring languages such as Cascading Style Sheets. In addition, the Web has proven to be an effective delivery device for printed documents in the form of PDF (Portable Document Format) files.

All graphical browsers have basic print and page setup controls that interface with the printer the same as any other application. In the Page Setup dialog box, users can generally select whether the page should print in portrait (vertical) or landscape (horizontal) format and specify how many copies to print.

Internet Explorer goes beyond the simple print button by giving user more fine-tuned controls for printouts. Its Print Preview feature (introduced in Version 4.5 on the Mac and in 5.5 for Windows) shows how the web page will look when it's printed out. Within the Print Preview dialog box, users can select whether they want to add headers and footers with the URL and other page information, whether images print, and whether background and text colors should be preserved. The page shrinks to fit the print area by default, but users can opt to have it crop at the edge or print in tiles.

Internet Explorer Versions 4 and 5.0 (for Windows) use the Page Setup dialog box for setting page size, orientation, headers/footers, and margins, but there is no preview function. Background and text colors can be preserved by clicking the appropriate box under "Printing" in the advanced Internet Options dialog box.

Netscape Navigator offers similar printer controls for Windows users. Starting with Version 4.7, the Page Setup dialog box offers control over headers, footers, margins, and orientation. There is also a Print Preview option available. Unfortunately, these advanced options are not available for Navigator on the Macintosh.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

All graphical browsers have basic print and page setup controls that interface with the printer the same as any other application. In the Page Setup dialog box, users can generally select whether the page should print in portrait (vertical) or landscape (horizontal) format and specify how many copies to print.

Internet Explorer goes beyond the simple print button by giving user more fine-tuned controls for printouts. Its Print Preview feature (introduced in Version 4.5 on the Mac and in 5.5 for Windows) shows how the web page will look when it's printed out. Within the Print Preview dialog box, users can select whether they want to add headers and footers with the URL and other page information, whether images print, and whether background and text colors should be preserved. The page shrinks to fit the print area by default, but users can opt to have it crop at the edge or print in tiles.

Internet Explorer Versions 4 and 5.0 (for Windows) use the Page Setup dialog box for setting page size, orientation, headers/footers, and margins, but there is no preview function. Background and text colors can be preserved by clicking the appropriate box under "Printing" in the advanced Internet Options dialog box.

Netscape Navigator offers similar printer controls for Windows users. Starting with Version 4.7, the Page Setup dialog box offers control over headers, footers, margins, and orientation. There is also a Print Preview option available. Unfortunately, these advanced options are not available for Navigator on the Macintosh.

Although browsers offer built-in print features, you can't depend on users to use them or even to know that they are available. Fortunately, in most cases, browsers released since 1998 do a reasonably good job of printing web pages by default. They generally try to shrink the contents to fit the print area, and they may also be sophisticated enough to preserve background and text colors (for printing light text on a dark background). But if you want to be absolutely sure your pages print in a predictable way, there are a few extra measures you may choose to take.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

One way to ensure that your users can get a good copy of your content to-go is to link to a separate "printer-friendly" HTML document especially for printing. In general, printer-friendly pages are stripped-down versions containing just a single column of content with minimum HTML formatting. Figure 5-1 shows pages from two web developer resource sites and their corresponding printed pages.

Figure 5-1: Two web pages and their corresponding printer-friendly versions

The following sections detail some steps you can take to design printer-friendly pages. Of course, if you anticipate that your audience will want to do a lot of printing from your site, you may choose to design your original pages according to the same printer-friendly guidelines.

The most common problem with printing web pages is that the right edge can get cropped off. This happens when the page is fixed at a pixel width (using a table) or contains graphics such as a navigation bar that is wider than the printable area of the page.

So how wide is too wide? If you want to be absolutely sure that no content slips off the edge for anyone, keep the width of tables and graphics under 550 pixels. An even more conservative approach is to use HTML text only (with no tables fixing the page width) and only minimal graphics.

Browsers that shrink the page to fit the printable area can accommodate any page width, but you risk the contents becoming too tiny to be legible, so it's best to keep tables and images under 750 pixels wide.

Another tip for keeping web pages fit to p

Table of Contents

Section 1.2.1.1: Server log analysis

Section 2.2.1.1: Advantages

Section 3.2.1.1: Proportional font

Section 3.3.1.1: RGB color

Section 3.4.1.1: The ubiquitous GIF

Section 3.4.1.2: The handy JPEG