Part I: Getting Started 36 User Preferences Simply by changing preference settings in the browser, anyone can affect the appearance and functionality of web pages (including yours) in the following ways. Change the font face and size. The text zoom feature in modern brows- ers makes it easy to make text larger or smaller on the fly. Users might also change the font face in addition to the size using font settings in the browser Preferences. I’ve seen CAD designers with super-high monitor resolution set their default type at 24 points to make text easily readable from a comfortable distance. I’ve looked over the shoulder of a kid who set his browser to render all text in a graffiti font, just because he could. You simply don’t know how your text will look on the other end. Figure 3-3 shows how the Jen’s Kitchen page might look with different user preferences. Change the background and text colors. These days, users are less likely to alter the color settings in their browsers just for fun as they did when all web pages were comprised of black text on gray backgrounds. However, some users with impaired vision may use the browser preferences to ensure that all text is dark on a light background with plenty of contrast. Ignore style sheets or apply their own. Savvy users with specific needs may create their own style sheets that apply to all the sites they view. Others may choose to simply turn style sheets off, for whatever reason. Turn images off. Users can opt to turn off the graphics completely. You’d be surprised at how many people do this to alleviate the wait for band- width-hogging graphics over slow modem connections. Make sure your pages are at least functional with the graphics turned off. Although add- ing alternative text for each image helps (and it’s required in HTML 4.01 and XHTML), it is not visible to 100% of your users. Figure 3-4 shows how a missing image with alternative text looks on several browsers with the images turned off. As you can see, if there is text in the graphic, it will be lost to Safari users because of Safari’s poor support for alternative text. Turn off Java and JavaScript. Your visitors can turn off technologies such as Java or JavaScript with the push of a button. With Java turned off, Java applets will not function. It is actually fairly common for users to turn off JavaScript due to security issues (real or perceived). Figure 3-5 shows a page that uses a Java applet for its main navigation. With Java turned off, the page is a dead end. Similarly, all of the main content on the web page at the bottom of Figure 3-5 disappears if JavaScript is not enabled. The lesson is to avoid relying on technology that can be turned on and off for critical content. Turn off pop-up windows. Because pop-up ads have become such a nuisance, some browsers make it easy to prevent pop-up windows from opening. • • • • • • Figure 3-3. A document can look very different as a result of the user’s browser settings. Figure 3-3. A document can look very different as a result of the user’s browser settings. User Preferences Chapter 3, The Nature of Web Design 37 Images on IE6-Win (alt text on) Safari (Mac OS X) Firefox (same for Win and Mac) IE6-Win (alt text off) Netscape 7 (Win) Figure 3-4. It is possible for users to turn image loading off in their browsers. Although providing alternative text helps, it is not 100% foolproof. Notice that the link labels are lost in IE 6 for Windows (when the Alt text option is turned off) and Safari on the Mac. This is another reason to be careful with the way you use images on your pages. JavaScript ON JavaScript OFF Java ON Java OFF Content disappears Navigation disappears Figure 3-5. The site on the top loses all of its navigation when Java is turned off. In the site at the bottom of the figure, the main content disappears when JavaScript is not on. Both sites serve as a lesson not to require special functionality for essential content. Part I: Getting Started 38 Different Platforms Users also have a say about which fonts and plug-ins are installed on their computers, which can affect their experience of your site as well. Even if you specify a particular font in a style sheet, that font won’t be used if it isn’t found on the user’s hard drive (we’ll talk more about fonts in Chapter 12, Formatting Text). And as mentioned earlier, some media formats are depen- dent on plug-ins that must be downloaded and installed. Coping with user preferences How do you deal with user preferences? It basically comes down to “if you can’t beat ‘em, join ‘em.” Design for flexibility. Whether for good reason or on a whim, the user has the final say on how pages look in the browser. The trend in contempo- rary web design is to build flexibility into the page. Techniques include using CSS layout techniques that specifically allow text size to change or providing multiple style sheets. We’ll look at some of those techniques in Part III. Make sure your content is accessible without images, scripts, applets, and plug-ins. Be prepared for the fact that some users opt to turn these fea- tures off in their browsers. It is a good idea to test your site under minimal conditions to make sure content is not lost and that there are no dead ends. Always provide alterative text for images and alternative means of accessing your important information or media. Different Platforms Another variable that affects how users see your pages is the platform, or operating system, of their computers. Although most web users have personal computers running some version of the Windows operating system, a sig- nificant portion view the Web from Macintosh computers and Unix/Linux systems. The user’s platform affects: Font availability and display. Operating systems come with different fonts installed, so you can’t assume that a font that comes installed on Windows will be available for everyone else. In addition, text tends to have a different look from platform to platform due to the methods used for sizing and rendering. Typography on the Web is discussed in more detail in Chapter 12. The rendering of form elements. Form elements such as scrolling lists and pull-down menus tend to take on the general appearance of the oper- ating system, and therefore appear quite differently from one platform to another. They may also be sized differently, which comes into play if you are attempting to fit form elements into a space of a specific size. • Availability of plug-in media players. Browsers use plug-ins (or ActiveX controls on Windows) to play media such as streaming video, audio, or • • exercise 3-1 | Playing with preferences See how bad you can get your favorite web pages to look. Keep in mind that some users may be doing this to you. Launch your browser. Select Edit ➝ Preferences from the menu. In Internet Explorer, select Web Content and Language/Fonts. In Firefox, select General then Fonts and Colors. Have fun setting new text and background colors. Change the size and fonts of the text. Be sure to check or uncheck boxes so that your preferences will override the document’s settings. Try turning off image display. Now have a look at some web pages. How do you like their makeover? Connection Speed Chapter 3, The Nature of Web Design 39 Flash movies that have been embedded on a web page. Fortunately, very popular players like the Flash Player are available for all platforms. Be aware, however, that some plug-in releases for Macintosh and Unix lag behind the Windows versions (the Windows Media Player, for example) or are not supported at all. Coping with different platforms These are a few strategies for dealing with the fact that your page will be viewed on different platforms. Allow some variation. You’ve heard this tip before in the previous section. As long as your content is available and functional, the small details don’t matter. You’ll get the hang of designing for flexibility to allow for changing font and form control sizes. Specify common fonts and provide alternatives. There are a handful of fonts that are available cross-platform, and you should always provide a list back-up fonts should your specified font not be found. Specifying fonts is discussed in Chapter 12. Be sure media players are available for all platforms. Before you commit to a particular media format, make sure that it will be accessible for all platforms. If the necessary plug-in isn’t available for everyone, provide an alternative format, if possible. It has become common for media sites to offer a choice between QuickTime, Windows Media, and RealMedia and let the user pick the format they prefer. Don’t mimic a particular operating system in your interface design. OK, this might just be a personal peeve of mine, but web sites (and pop-up ads) that use Windows-style menu bars and buttons just look silly on my Mac. Connection Speed Remember that a web page is published over a network, and it needs to go zipping through the lines as little bundles of data before it reaches the end user. In most cases, the speed of that connection is a mystery. On the high end, folks with T1 connections, cable modems, ISDN, and other high-speed Internet access may be viewing your pages at a rate of up to 500 KB per second. The percentage of people accessing the Web with broadband connections is steadily increasing. As of this writing, roughly 70% of Internet users in the United States access the Internet via broadband*, and it is steadily climbing. That percentage rises to 90% in the U.S. workplace. * According to Nielsen/Net Ratings (www.netratings.com) as published by WebSiteOptimization. com in August, 2006 (www.websiteoptimization.com/bw0604/). Part I: Getting Started 40 Browser Window Size and Monitor Resolution The remaining 30% are dialing in with modems whose speed can range from 56 Kbps to as slow as 14.4 Kbps. For these users, data transfer rates of 1 KB per second are common. N o t e There are other factors that affect download times, including the speed of the server, the amount of traffic it is receiving when the web page is requested, and the general congestion of the lines. Coping with unknown connection speed When you’re counting on maintaining the interest of your readers, every millisec- ond counts. For this reason, it’s wise to follow the golden rules of web design: Keep your files as small as possible. It should be fairly intuitive that larger amounts of data will require more time to arrive. One of the worst cul- prits for hogging bandwidth is graphics files, so it is especially important that you spend time optimizing them for the Web. (I discuss some strate- gies for doing this in Chapter 19, Creating Lean and Mean Web Graphics.) (X)HTML files, although generally just a few kilobytes (KB) in size, can be optimized as well by removing redundant markup and extra spaces. Audio, video, and multimedia content also consume lots of bandwidth and should be compressed appropriately. Because you know a web page is designed to travel, do your best to see that it travels light. Know your audience. In some cases, you can make assumptions as to the con- nection speeds of your typical users. For example, if you are creating a video sharing site, you can optimize the site for performance over high-bandwidth connections. Because most people have access to high-bandwidth Internet in the workplace, you may be a bit more lenient on file sizes for sites with a professional audience. However, if your site is aimed at consumers or the classroom, be especially frugal with your byte count. Browser Window Size and Monitor Resolution Although you may prefer the way your page looks when the window is just larger than the masthead you designed, the fact is users can set the window as wide or narrow as they please. You really have no idea how big your page will be: as large as the user’s monitor will allow, or smaller according to personal preference or to accommodate several open windows at once. But don’t worry. Not only will you become familiar with how your content behaves at different window sizes, there are also design techniques that can make the page layout more predictable. I’ll talk about them a bit in this sec- tion and then in detail in Chapter 16, Page Layout Templates. For global broadband statistics, see the statistics published by the Organisation for Economic Co- operation and Development at www. oecd.org. O n l I n e R e S O U R c e Browser Window Size and Monitor Resolution Chapter 3, The Nature of Web Design 41 Go with the flow Let’s take a look at what happens to text content on web pages when the window is resized. Unlike print pages, web pages are fluid. Take a look at the web page in Figure 3-6. By default, elements like headings, paragraphs, and lists stack up (sort of like blocks), and the text within them flows in to fill the available width of the window or other container space. This is what is called the normal flow of the document. Now look at what happens when the page is resized, as shown in the figure on the right. The block elements stay stacked up in order, but the lines of text in them rebreak and reflow to fill the new, narrower space, resulting in more text lines and a longer page overall. That means you can’t be sure that your intro paragraph will be exactly a cer- tain number of lines as you can in print. In addition, if the browser window is very wide, the lines of text will be very long, perhaps even too wide to be read comfortably. We’ll address some of these issues in a moment, but first, let’s look at what we do know about typical browser window dimensions. Web page dimensions Because browser windows can only be opened as large as the monitors dis- playing them, standard monitor resolution (the total number of pixels avail- able on the screen) is useful in anticipating the likely dimensions of your page. This is particularly true on Windows machines, because the browser window is typically maximized to fill the monitor. The sidebar, Common Monitor Resolutions, lists the most popular resolutions as well as how much space that leaves for your content. As of this writing, most commercial web sites are designed to fit in an 800 × 600 monitor, the smallest monitor that is still in significant use. Allowing Figure 3-6. In the normal text flow, headings and paragraphs stack up, but the text within them flows to fill the available width. If the width changes, the text reflows. Figure 3-6. In the normal text flow, headings and paragraphs stack up, but the text within them flows to fill the available width. If the width changes, the text reflows. exercise 3-2 | Get a feel for the normal flow If you have a browser and access to the Web, you can play along with Figure 3-6. Make sure your browser window is not optimized to fill the screen. Enter the following URL into your browser: www.w3.org/MarkUp Make the browser as wide as your monitor will allow. Now make it extremely narrow. How many lines of text are at the top? What happens to the headline? What happens to the pink box? Part I: Getting Started 42 Browser Window Size and Monitor Resolution for the browser chrome and operating system menus, that leaves a canvas area of approximately 775 × 425 pixels for your web content. See the sidebar, Designing “Above the Fold,” that describes some of the important content elements you may want to fit in that modest space. There is an emerging trend toward wider web pages that fill 1024 and even 1280 pixel monitor widths. This is particularly true for sites aimed at a techni- cal and creative audience where it may be assumed that the audience is view- ing from an up-to-date computer with a high-resolution monitor. Coping with browser window size How do you cope with the unknown-window-size dilemma? Two page layout approaches have developed in reaction to the need to accommodate changing browser window dimensions: Common Monitor Resolutions Table 3-3 lists the most common monitor resolutions from smallest to largest. It does not include the dimensions of widescreen laptop monitors, as there are currently no usage statistics for those resolutions. The canvas dimensions refer to the amount of space left in the browser window after all of the controls for the operating system and the buttons and scrollbars for the browser (known as chrome) are accounted for. The canvas measurements reflect the available space in Internet Explorer 6 on Windows (the most popular browser/platform configuration). On browsers on Macintosh OS X, the canvas space is approximately five pixels wider and 40 pixels taller than IE6(Win). Finally, the usage statistics reflect those gathered by TheCounter.com for the month of October, 2006. The percentage of 800 × 600 monitors is declining steadily, so it is worth taking a look at the Global Stats on TheCounter.com for updated statistics. Of course, the most meaningful resolution stats will come from your own site. Table 3-3. Common monitor resolutions Resolution Canvas Size (IE6/Win) % of Users (Oct ‘06) 640 × 480 620 × 309 < 1 % 800 × 600 780 × 429 22 % 1024 × 768 1004 × 597 56 % 1152 × 864 1132 × 793 3 % 1280 × 1024 1260 × 853 13 % 1600 × 1200 1580 × 1129 < 1% What Is a Pixel? If you look closely at an image on a computer monitor, you can see that it looks like a mosaic made up of tiny, single-colored squares. Each square is called a pixel. t e R m I n O l O G y Browser Window Size and Monitor Resolution Chapter 3, The Nature of Web Design 43 Liquid layouts Liquid layouts resize and adapt to the changing window size (Figure 3-7). When the window gets narrower, so do the columns, and the text is allowed to re-wrap as necessary. Liquid layouts are in keeping with the behavior of the normal flow and the spirit of the medium. They also don’t require choosing a target resolution for development; however, on very large monitors, the line lengths may get too long to read comfortably. Figure 3-7. An example of a liquid layout (screenshots taken from clagnut.com/ blog/269). Figure 3-7. An example of a liquid layout (screenshots taken from clagnut.com/ blog/269). Newspaper editors know the importance of putting the most important information “above the fold,” that is, visible when the paper is folded and on the rack. This principle applies to web design as well. Web designers have adopted the term “above the fold” to refer to the first screenful of a web page. It’s what users will see without scrolling, and it bears the burden of holding their attention and enticing them to click in or scroll down further. Some elements you should consider placing above the fold include: The name of the site and your logo (if you have one) Your primary message Some indication of what your site is about (e.g., shopping, directory, magazine, etc.) Navigation to key parts of the site Crucial calls to action, such as “Register Now” Any other important information, such as a toll-free number An advertising banner (your advertisers may require it) But how much is a “screenful?” Unfortunately, this varies by browser window size. Your available space could be as small as 760 × 400 pixels in a browser on an 800 × 600 monitor. In general, the level of confidence in what will be seen on the first “page” is highest in the top-left corner of the browser window and then diminishes as the pages moves down and to the right. When the browser window is made very small, the bottom and the right edge are the most likely to be cut off. One strategy for page layout is to put your most important elements and messages in that top-left corner and work out from there through hierarchies of importance. Designing “Above the Fold” Part I: Getting Started 44 Monitor Color Fixed layouts Fixed (or fixed-width) layouts keep the content at a particular width, measured in pixels, regardless of window size (Figure 3-8). While fixed layouts promise more predictable pages and line lengths, they may result in awkward empty space on large monitors. There is also a risk of users missing out on content on the right edge if their browsers are not as wide as the layout. Liquid and fixed layout techniques are discussed in greater detail in Chapter 16. N o t e There are other layout techniques, namely Elastic and Zoom layouts, that respond to font size rather than browser dimensions. They are also introduced in Chapter 16. Monitor Color As long as we’re talking about monitors, let’s look at another impact they have on your design: the display of color. I’ll never forget my first lesson in web color. I had designed a headline graphic that used a rich forest green as a background. I proudly put the page up on the server, and when I went into my boss’s office to show him my work, the graphic came up on his screen with a background of pitch black. It was then that I learned that not everyone (including my boss) was seeing my colors the way I intended them. When you’re publishing materials that will be viewed on computer monitors, you need to deal with the varying ways computers handle color. The differ- ences fall under two main categories: the brightness of the monitor and the number of colors. Figure 3-8. The design on the left (Faded Flowers by Mani Sheriar at csszengarden. com) uses a fixed-width page positioned on the left. When the browser window is resized larger, the extra space is added to the right of the page. The page on the right (Dragen by Matthew Buchanan , also at CSS Zen Garden) has the fixed-width page centered in the browser window. Extra space is split on the left and right margins. Figure 3-8. The design on the left (Faded Flowers by Mani Sheriar at csszengarden. com) uses a fixed-width page positioned on the left. When the browser window is resized larger, the extra space is added to the right of the page. The page on the right (Dragen by Matthew Buchanan , also at CSS Zen Garden) has the fixed-width page centered in the browser window. Extra space is split on the left and right margins. Monitor Color Chapter 3, The Nature of Web Design 45 Brightness That rich forest green I described earlier was a victim of varying gamma set- tings. Gamma refers to the overall brightness of a computer monitor’s display, and its default setting varies from platform to platform. Macintoshes are generally calibrated to a lighter gamma setting than Windows machines. That means that Mac-based designers may be surprised to find their graphics look much darker to users on Windows or Unix (which is what happened to me). Images created under Windows will look washed out on a Mac. Figure 3-9 shows the same page viewed at different gamma settings. Note how detail is lost in the photos at the darker gamma setting. Number of colors Monitors also differ in the number of colors they are able to display. As of this writing, over 80% of users have 24-bit monitors, capable of display- ing nearly 17 million colors. The remainder have 16-bit monitors that dis- play approximately 65,000 colors. With that color-displaying potential, any color you choose should display smoothly. In the early ’90s when the Web was young, most users used 8-bit moni- tors capable of displaying only 256 colors. Web designers were forced to choose colors from a restrictive web palette of 216 cross-platform colors (Figure 3-10) if they wanted them to display smoothly (that is, without a speckled pattern called dithering). Now that 8-bit monitors account for fewer than 1% of web traffic, it is no longer necessary to jump through those hoops. So while you may hear about the web palette and come across it in web authoring or graphics programs, know that you’re no longer restricted to it. Macintosh gamma Windows gamma Figure 3-9. Gamma refers to the overall brightness of monitors. Windows and Unix machines tend to be darker (the result of higher gamma settings) than Macs. Macintosh gamma Windows gamma Figure 3-9. Gamma refers to the overall brightness of monitors. Windows and Unix machines tend to be darker (the result of higher gamma settings) than Macs. Figure 3-10. The obsolete web palette. Now that nearly all web users have monitors with thousands or millions of colors, you no longer need to restrict yourself to web-safe colors. Figure 3-10. The obsolete web palette. Now that nearly all web users have monitors with thousands or millions of colors, you no longer need to restrict yourself to web-safe colors. . of Web Design 41 Go with the flow Let’s take a look at what happens to text content on web pages when the window is resized. Unlike print pages, web pages are fluid. Take a look at the web. on the rack. This principle applies to web design as well. Web designers have adopted the term “above the fold” to refer to the first screenful of a web page. It’s what users will see without. display. Now have a look at some web pages. How do you like their makeover? Connection Speed Chapter 3, The Nature of Web Design 39 Flash movies that have been embedded on a web page. Fortunately,