Learning Web Design Third Edition- P6 pptx

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.