User:Bartlett/21
./ ADD NAME=CH21.HTML
Hour 21. Web Design with CSS
What You'll Learn in This Hour:
The web developer's role is more than just that of a programmer or code author. In addition to understanding properties, values, selectors, and the cascade order, a CSS developer needs to be conversant in the art of design and the craft of usability. |
./ ADD NAME=CH21LEV1SEC1.HTML
Basic Principles of Web Design
In previous hours, you've learned the "what" of using Cascading Style Sheets. You can write your own rules, set your own fonts, choose your colors, and lay out a page.
In this hour, you'll look at the question of "when," which is what design principles are all about. It's not enough to know the method of doing something; you also need to know the right times to do it and when it's best to not do it.
Web development is a complex field, even if some of the component parts seem simple at first. Designing a website is all about balance; it's a complicated balancing act between the desires of the site operator and the needs of the audience. Even basic issues such as how much content to place on each page require finding the right balance between too much and too little. Web developers spend a lot of time making compromises, often choosing an alternative that isn't necessarily the absolute best but that works for the greatest amount of people.
Designs that reflect an understanding of the audience and put their needs first are referred to as user-centric designs. Some site designs are designer-centric, meaning that the web developer's need for artistic expression comes first; for some sites, such as a personal website, this may make sense. More common are content-centric designs, which are focused on the site information and functionality. Content-centric sites are usually more effective than designer-centric sites, but their designs sometimes fail to fully understand how their content is used in practice. An effective designer utilizes all these techniques to create web designs.
Color, Fonts, and Layout
Presentation isn't everything, but it's a whole lot of something. In an information-intensive medium such as the Webaccessed visually by most usersit's important to have an effective presentation that supports the purpose of the site. Rather than being mere window dressing, style sheets can be an integral part of a website, crucial to understanding and using the site.
Some people think that because the Web is a completely new medium, the old rules of offline design don't apply. Although the Web does introduce new challenges because of the nature of the medium, it's not so revolutionary that everything can be discarded. The disciplines of graphic design and user-interface design have a lot to teach, but few web developers learn it. For example, graphic design can tell you much about the effective use of color and whitespace, and user-interface design informs you how computer users make choices.
On the other hand, some designers make the opposite mistake of assuming they can just put the same design on the Web as on paper, and this often leads to disastrous results. "Brochure" websites gained a bad reputation early, and in most cases it was deserved, based on sites that were barely more than a scanned pamphlet posted on the Internet. The flexible nature of web design, where the user's choices can influence the final presentation as much as the author's, can prove frustrating and incomprehensible to graphic artists who are used to working in a fixed, printed medium.
As noted in previous hours, font and color rules should be used sparingly; don't go nuts simply because you can. A restrained presentation usually looks better than an overly complex one that is awash in every hue under the sun and set with dozens of fonts.
CSS rules can be used for a number of effects in combination, including simulating buttons and logos with styles. This is generally a good idea, although in some cases you'll be unable to get the exact effect you want. For example, if you need a rare font with a drop shadow, you're in trouble because the user may not have the same font on her browser, and text shadow effects are tricky in CSS. In those cases, you should use a GIF or JPEG with text to gain the desired effects.
Usability
Not all attractive web pages are created equal. Some great-looking sites are hard to use, whereas others are elegantly straightforward and a joy to use. The difference isn't found in the appearance alonealthough the visible look can affect ease of usebut instead in a somewhat nebulous quality called the usability. The usability of a website is a measure of how easy it is for people to use that site. Usability is also the name of a field of study concerned with understanding and improving how people use computers, websites, and other technologies.
Cascading Style Sheets can be used to enhance usability by producing web presentations that are simple and distinct. Your styles should reflect how the information is used, highlighting information that is most essential to the site's purpose and the user's needs while still allowing access to all the content.
For example, you can make your site's navigation system stand out by giving a distinct appearance to that part of the pagevisible enough that it can be found, but not so intrusive that the design overwhelms the rest of the content.
Many popular conventions observed on the Web are so widespread that they are second nature to use, making your site easier for visitors. As an example, placing a row of links with distinct styles on the left or top of your page lets users instantly recognize those as navigation links. Don't be afraid to reuse existing web design elements in this manner; often a site that is too creative can inadvertently become amazingly difficult to use.
Knowing Your Audience
To create user-centric designs, you need to be aware of who your audience is. In some cases, you may be in luck, as you may know everything there is to know about your users. For example, if you are working on an intranet site for your employer, and the company has standardized on Firefox, your task suddenly becomes a lot easier. You can use advanced features found only in Firefox and you don't have to worry about quirks in Internet Explorer, Opera, or other browsers.
If you don't know exactly who your audience is, you can still make some educated guesses. Web servers dutifully record all accesses, and the information they save includes the browser type (name, version, and platform) of each person who downloads a file. These are stored in a web server log, a long listing of all connections to the server; you can then run a log analysis program, such as Analog (http://www.analog.cx/), to collate and summarize this information. If your ISP or web host doesn't provide you with this information, ask for it; it's important data for anyone running a website.
The information you're looking for is not only the type of browser, but also which pages are being used. By looking at site usage patterns you can discern which pages are most popular and also measure the effectiveness of your navigation systems. You can also learn other useful information such as screen resolution from your browser statistics. This is useful for knowing how to design your page layouts and font sizes.
Another useful tactic for getting information on your users is to simply ask for it. Put up a survey on your site to gather responses from your current users so you can serve their needs better. In addition to gathering technical browser information, you should consider other demographics that can also affect the way you design the site. For example, generational differences among audiences can influence whether you build your site for younger or older users. Users with disabilities may have specific needs; in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch22.html#ch22 Hour 22], "Accessibility and Print Media," you'll find out more about how to satisfy those needs.
Organization and Planning
Before you write one line of HTML or CSS code, you need to spend some time planning out your site and organizing the information contained on it. A carefully planned site is much easier to maintain and update than one that grows organically, out of control. Websites have a natural tendency to evolve, and this is a good thing, but planned growth is always better than accidental growth.
You may want to draw your site out on paper; you might want to create a diagram with software that creates flow charts. The exact way in which you plan your site will depend on your own preferences. Building a chart of your web content and the links between pages will help you visualize the information and group it into natural sections. The better you organize the page, the easier it will be for users to find your content.
Testing Your Website
After you've got the site up and running, it's time for testing. The first testing will be your own browser tests, using your suite of browsers. In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch03.html#ch03 Hour 3], "Browser Support for CSS," I recommended building up a standard set of browsers, ideally on different platforms if you can manage it, which represent a broad spectrum of web users. After you start using a browser with decent CSS support, such as Opera, Netscape 6, or Internet Explorer, you may not want to use older or broken browsers regularly. However, it's still important to test on those because, for whatever reason, people are still out there using them!
After you've given your pages a once-over, you're not really finished. For the same reason that writers can't edit their own work, you can't be the only one to test your web pages. A writer will often miss mistakes she's generated, because she knows how something's supposed to be written, and her mind fills in the correct version instead of what's really on the page. For the same reason, you'll want to have others test your site.
One thing you can do is to ask some fellow web developers for a critique. Because they understand the code behind the designs, they can often point out not only mistakes, but also how to fix them. If you don't know any other web developers, consider joining a local group or a mailing list.
Another way to test your site is by doing user testing, one of the core techniques employed by usability experts. In a formal usability test, you get a number of people and have them attempt to use specific site features, filming them and taking notes from behind a one-way mirror. As explained by Jakob Nielsen, a formal usability test may be overkill; a small sample of around five representative users should be enough, and you can get by without the camera and the mirror.
Here's how you do it:
- Find your test subjects. Ask them politely, and if possible, offer them compensation or a latte. As much as possible, choose representative users, but don't get obsessed about making sure they're "really" representative. For example, I wouldn't choose my mom for a test of the book's site because she's not a web developer and won't be using CSS, but I might ask my dad, who has done web design himself. If you work for a large company, find some users outside your workgroup who can spare a few minutes.
- Invite each user to access the website and have them attempt the list of tasks you've created. Stress to your users that you're testing the site, not them; if they get something wrong, that's great because it points out a weakness in your design. Watch the users and take notes as they move around your site. No matter how strong the temptation, don't jump in and help them; if they can't figure something out, write that down.
- When the test is over, thank your test subject and buy that latte. Then sit down with the results and make sure your ego is safely locked away; every site can be made better. Look at all the comments and notes you made and look for patterns across your users. If a certain function is hidden or confusing for several of them, it's likely a good candidate for redesign.
As you can see, this kind of easy user testing isn't a formal science, but it can still produce very useful results. It's certainly better than doing no user testing at all, which is sadly the case for many websites.
./ ADD NAME=CH21LEV1SEC2.HTML The Role of CSS in Web Design
As a web developer, skilled in HTML, Cascading Style Sheets, and possibly other web languages and technologies, you have a web development process. Even if you haven't planned it out formally, you've got a method that works for you, whether it's as simple as sitting down and designing whatever strikes your fancy or as complex as working in a multi-developer corporate development system for a large employer.
Adding CSS to your repertoire has made you an even better web developer than before; your skill set has expanded and the types of designs you can create are nearly limitless. The next step is to integrate your CSS skills into your web development process. I'm not going to tell you exactly how you'll do thatpeople have their own methodsbut I'll help you think about how you can go about using CSS in your web designs.
In a few cases you may be able to develop your style sheets completely separately from your HTML pages. More commonly you'll employ an iterative process, where you make changes to the style sheet, then changes to the HTML page, and then go back to the style sheet for a few more tweaks until you're satisfied with the results. The adaptive nature of style sheets makes it easy to create these kinds of changes, and you may find yourself continuing to perfect your styles even after you post your content on the Web.
As mentioned at the start of this hour, CSS design involves balancing a number of factors to arrive at the best compromise for your site and its users. Questions will arise as you work with CSS on any site, and you'll need to answer them before you go on. I've listed several of these key questions here to help you plan your site:
- Will you use Cascading Style Sheets, and if so, to what effect? You certainly aren't required to use CSS, even after reading this entire book. You can create websites that are usable, accessible, attractive, and effective without a single CSS property anywhere in evidence. However, using CSS will make your site more flexible and easier to maintain and will give you access to presentation effects you couldn't get through HTML alone.
- What "flavor" of HTML will you use? As you may recall from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch04.html#ch04 Hour 4], "Using CSS with HTML," there are three varieties of HTML: Strict, Transitional, and Frameset. The Strict variety relies upon CSS for all styling effects, whereas Transitional (and Frameset) HTML can mix CSS rules with presentational markup. If you're concerned about older browsers that don't understand CSS, you may want to choose Transitional.
- Which browsers will you support? By "support," I mean investing the effort to work around the quirks of certain browsers. (By "certain browsers," I mostly mean Internet Explorer 6 and earlier.) This book has a number of workarounds, plus ways to exclude certain browsers from viewing styles. If you are designing just for CSS-enabled browsers, such as recent Firefox, Safari, or Opera versions, those workarounds become less important.
- Are you using positioning CSS for layout? It's relatively easy to use CSS for formatting text, controlling fonts, and setting colors. Using it for layout is trickier, especially with inconsistent browser support among some of the older versions. Don't assume that you must use positioning CSS; even in 2006, many sites are still using tables extensively for page layout. Using CSS for positioning is still more tricky for some developers than misusing the tag.
- Will you use embedded or linked style sheets? Here, I'll give you advice: Use linked style sheets whenever you can. Many of the examples in this book use embedded style sheets, but that's mainly because it's easier to give you one listing than two.
The preceding list isn't exhaustive; you'll encounter more choices to make when designing and using CSS, but you should have learned enough by now to answer them.
Style Sheet Organization
The way you organize your style sheet can affect how easy it is for you to use and maintain your CSS, even if the effects are not evident in the presentation. This becomes even more critical if you're in a situation where someone else may have to use your styles in the future. You may work with an organization where multiple people will be working on the same site, or perhaps when you move on to another job your successor will inherit your style sheets.
To make a great style sheet, be organized and clear in what you're doing, and above all, use comments. Web developers often overlook comments in CSS, but if you have to come back later and try to figure out why you did something, they're invaluable. Comments can also be used to group related styles together into sections.
Reasonable names for class and id attributes can make your style sheet easier to read; choose names for these important selectors that reflect the functions of the elements. If you can, avoid selectors based solely on appearance characteristics, such as the boldtext or redbox classes; instead try something descriptive of why you've chosen those styles, such as definition or sidebar. That way, if you change your page styles later, you won't have to rewrite your HTML; there are few things as confusing as a rule like the following:
.redbox { color: blue; background-color: white; }In what way is that box red? Well, it probably was red in some prior incarnation of the style rules, but not now.
When you list your rules in your style sheet, do them in a sensible order. Generally speaking, it's best to start with the body rules first and then proceed down from there, but because the cascade order matters only in case of conflict, it's not strictly necessary to mirror the page hierarchy. What's more important is that you are able to locate the rules that apply to a given selector and to discern which styles should be applied.
An example of bad style sheet organization is shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch21ex01 Listing 21.1]. This is part of the style sheet from the author's personal website, but with the rules in a scrambled order. How hard is it for you to figure out what is going on here?
Listing 21.1. A Randomly Organized Style Sheet
#sidebar0 .section, #sidebar1 .section { font-size: smaller;<br />border: 0px solid lime; text-transform: lowercase;<br />margin-bottom: 1em; }<br />gnav a:link, #nav a:visited, #footer a:link, #footer<br />a:visited { text-decoration: none; color: #CCCCCC; }<br />#nav .section, #nav .shead, #nav .sitem, #nav h1 { display:<br />inline; }<br />#sidebar1 { position: absolute; right: 2em; top: 3em;<br />width: 9em; } a:link { color: #DD8800; text-decoration: none; }<br />#main { } a:hover { color: lime; }<br />#nav .shead, #nav .sitem { padding-left: 1em; padding-right:<br />1em; }<br />#nav { position: fixed; top: 0px; left: 0px; padding-top:<br />3px; padding-bottom: 3px; background-color: #333333; color:<br />white; width: 100%; text-align: center; text-transform:<br />lowercase; }<br />#nav .section { font-size: 90%; } #layout { padding: 1em; }<br />body { background-color: white; color: #333333; font-family:<br />Verdana, sans-serif; margin: 0; padding: 0; }<br />#nav h1 { font-size: 1em; background-color: #333333; color:<br />white; } a:visited { color: #CC8866; text-decoration: none; }<br />#nav { border-bottom: 1px solid lime; } #main { margin-left:<br />11.5em; margin-right: 11.5em; border: 0px solid lime;<br />margin-bottom: 1.5em; margin-top: 1.5em; }<br />#nav a:hover, #footer a:hover { color: lime; }<br />#sidebar0 { position: absolute; left: 2em; top: 3em;<br />width: 9em; text-align: right; }<br />
If that was hard to follow, don't feel bad; the difficulty was intentional. CSS rules are very easily obfuscated if you're not careful. Most style sheets grow organically as piecemeal additions are made; discipline is necessary to keep the style sheet readable.
The style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch21ex02 Listing 21.2] is really the same style sheet as in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch21ex01 Listing 21.1]. Both are valid style sheets and both produce the same results when applied to the web page, but the second one is easier to understand. Comments make clearer what each section of the style sheet does, indentation and whitespace are used effectively, and the order is much easier to follow.
Listing 21.2. A Better-Organized Style Sheet
/* default styles for the page */<br />body { background-color: white;<br />color: #333333;<br />font-family: Verdana, sans-serif;<br />margin: 0;<br />padding: 0; }<br /><br />a:link { color: #DD8800; text-decoration: none; }<br />a:visited { color: #CC8866; text-decoration: none; }<br />a:hover { color: lime; }<br /><br />/* layout superstructure */<br />#layout { padding: 1em; }<br /><br />/* top navigation bar */<br />#nav { position: fixed;<br />top: 0px; left: 0px;<br />color: white; width: 100%;<br />padding-top: 3px; padding-bottom: 3px;<br />background-color: #333333;<br />text-align: center;<br />text-transform: lowercase; }<br />border-bottom: 1px solid lime; }<br />#nav .section, #nav .shead, #nav .sitem, #nav h1<br />{ display: inline; }<br />#nav .section<br />{ font-size: 90%; }<br />#nav .shead, #nav .sitem<br />{ padding-left: 1em; padding-right: 1em; }<br />#nav h1 { font-size: 1em;<br />background-color: #333333; color: white; }<br />#nav a:hover, #footer a:hover<br />{ color: lime; }<br />#nav a:link, #nav a:visited,<br />#footer a:link, #footer a:visited<br />{ text-decoration: none; color: #CCCCCC; }<br /><br />/* main content section */<br />#main { margin-left: 11.5em; margin-right: 11.5em;<br />margin-bottom: 1.5em; margin-top: 1.5em;<br />border: 0px solid lime; }<br /><br />/* two sidebars, absolutely positioned */<br />#sidebar1 { position: absolute;<br />right: 2em; top: 3em; width: 9em; }<br />#sidebar0 { position: absolute;<br />left: 2em; top: 3em; width: 9em;<br />text-align: right; }<br />#sidebar0 .section, #sidebar1 .section<br />{ font-size: smaller;<br />border: 0px solid lime;<br />text-transform: lowercase;<br />margin-bottom: 1em; }<br />
Site-wide Style Sheets
The style sheet given in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch21ex02 Listing 21.2] was created to be used on the entire site, not just on one page. Linking to an external style sheet is an easy way for you to apply style sheets over your entire set. You simply use the <link> tag on every page, with the href attribute set to the location of your site-wide style sheet.
A site-wide style sheet can be used to enforce a consistent appearance on the website, even if you have multiple web developers working on different parts of the same site. Additional styles can be added in embedded style sheets or in additional linked CSS files that are created for each department or business unit. For example, each department at a school may use the school's global style sheet for design elements common to the entire site, and individual departmental style sheets for that department's unique color, layout, and font choices.
./ ADD NAME=CH21LEV1SEC3.HTML Alternate Style Sheets
Not all style sheets are going to appeal to everyone. Some users might prefer a smaller font, letting more fit on the screen, whereas other visitors to your site might require large print with high contrast.
The CSS specification allows you to create alternate style sheets that can be switched out by the user upon request. This allows you to create sites which offer a variety of "skins" that are selectable in browsers that support alternate style sheets.
There are actually three types of linked style sheetspersistent style sheets, preferred style sheets, and alternate style sheets. A persistent style sheet is one that can't be switched for another style sheet through use of the browser's mechanism for alternate style sheets; it is always on. The style sheets you have created so far have all been persistent.
A preferred style sheet is loaded automatically by the browser, but if an alternate style sheet is selected, the preferred sheet switches off, and the alternate style sheet is used instead. You can have multiple alternate style sheets, but only one preferred style sheet.
To designate an alternate style sheet that can be swapped out for the main style sheet, you change the attributes of the <link> property. A name must be assigned to a preferred or alternate style sheet and must be set as the title attribute on the link, as shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch21table01 Table 21.1].
Style Sheet Type rel Attribute title Attribute Persistent "stylesheet" Unset Preferred "stylesheet" "Name of the style sheet" Alternate "alternate stylesheet" "Name of the style sheet" For example, imagine that you have basic rules that should always be used in base.css, the preferred styles in default.css, and an older version of your style sheet in old-2005.css. You would write the following HTML to allow users to switch between these style sheets:
<link type="text/css" rel="stylesheet" href="base.css"> <link type="text/css" rel="stylesheet" href="default.css" title="Current Site Style"> <link type="text/css" rel="alternate stylesheet" href="old-2005.css" title="Last Year's Style">
These attributes establish base.css as a persistent style sheet, default.css as the preferred style sheet, and old-2005.css as an alternate style sheet.
Browser Support for Alternate Style Sheets
You know how to designate alternate style sheets with the <link> tag, but what browsers will use them? Not all web browsers fully implement the CSS specification, and alternate style sheets are one example of this.
On a browser that supports alternate style sheets, the user can select which style sheets to use from a menu option. In Firefox, this is found on the View menu, under Page Style. As shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch21fig01 Figure 21.1], the title properties from the <link> tag are used as menu choices; the user can also view the page without any style sheets.
Figure 21.1. Firefox allows selection of alternate style sheets. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/21fig01_alt.jpg [View full size image]]File:21fig01.jpgAs of early 2006, only Firefox and Opera support selection of alternate style sheets from the browser interface. Other browsers apply persistent and preferred style sheets, but don't allow switching out the preferred style sheet for an alternate style sheet.
Creating an Alternate Style Sheet
Why would you want to create an alternate style sheet? There are a number of valid reasons, including showing off your ability to use CSS to reformat and restyle a website easily. A better reason might be to meet specific user needs. Web accessibility proponent Joe Clark has promoted the use of "zoom" layouts to accommodate users with visual disabilities; see http://joeclark.org/access/webaccess/zoom/ for a full explanation.
By the Way You'll learn more about CSS and web accessibility in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch22.html#ch22 Hour 22].A zoom layout is simply a style sheet that has been designed to show a page in a single column, with high contrast, scalable large fonts, and simple navigation controls. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch21ex03 Listing 21.3] is an example of a zoom style sheet, written for the Dunbar Project website, which was introduced in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch20.html#ch20 Hour 20], "Page Layout in CSS." The colors yellow, violet, and lime are used as brighter versions of the colors in the original design of the site.
Listing 21.3. A "Zoom" Style Sheet
/* dunbar-zoom-21.3.css */<br /><br />body { background-color: black; color: white;<br />font-size: 125%; line-height: 1.25;<br />font-family: Verdana, sans-serif;<br />letter-spacing: 1px; /* one pixel extra */<br />word-spacing: 1px;<br />margin: 0; padding: 0; }<br /><br />a:link { color: violet; }<br />a:visited { color: lime; }<br />a:link:hover { color: black; background-color: violet; }<br />a:visited:hover<br />{ color: black; background-color: lime; }<br /><br />#header, #content, #sidebar, #footer<br />{ padding: 1em; margin: 1em;<br />border: 0.15em solid white; }<br />#header { border-color: lime; }<br />#sidebar { border-color: lime; }<br />#footer { border-color: violet; }<br />#header h1 { color: yellow; }<br /><br />#sitenav ol { padding: 0; margin: 0;<br />display: inline; }<br />#sitenav li { display: inline; padding-left: 1em; }<br />#sidebar li { display: block; }<br />table { border-collapse: collapse;<br />border: 0.15em solid yellow;<br />margin: 1em; } table th, table td<br />{ vertical-align: top; text-align: left;<br />padding: 0.2em 1em 0.2em 0.2em;<br />font-size: 125%; line-height: 1.25;<br />border-bottom: 0.15em solid yellow; }<br />th { color: lime; }<br />.mailingaddress<br />{ margin: 0 2em; color: lime; }<br />
As you can see, this does not use any CSS for layout, and it makes for a larger, bolder presentation with bright colors against a dark background. Such a style sheet is useful for certain users with specific visual impairments. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch21fig02 Figure 21.2] shows this style sheet displayed in a web browser; compare with the figures from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch20.html#ch20 Hour 20] to see the difference that an alternate style sheet can make.
Figure 21.2. A zoomed version of a website. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/21fig02_alt.jpg [View full size image]]File:21fig02.jpgMaking Alternate Style Sheets Stick
There's one problem with alternate style sheetsthey don't last. You can choose an alternate style sheet in your browser, but the minute you go to another page, or even reload the current page, you're back to the preferred style sheet.
One way to get around this limitation is to use HTML cookies, and server-side or client-side programming. A cookie is small bit of information stored by a web browser, associated with a specific website. Programming languages on both the server side and client side can access these cookies. JavaScript is an example of a client-side programming language that can manipulate cookies; for more about JavaScript, see Bonus Web [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch01.html#ch01 Hour 1], "CSS and JavaScript."
Try it Yourself: Create a Zoom Style Sheet Creating an alternate style sheet for users who need high contrast is a good exercise in minimalism. Learn how to do it by following these steps:
1.Start with a website you've created, perhaps in the course of reading this book.2.Keep your original style sheet handy for reference, but start over with an empty style sheet to begin creating your zoom style sheet.3.Set a dark background and light text with a body rule. Add some extra line spacing, letter spacing, and word spacing, as these can help make the page more readable.> > 4.Add additional styles, but keeping within the general philosophy of simple, bold design without columns. Which elements such as colors and fonts can you preserve from the original design? Try to work those in so that the zoom version seems like a sibling of the original, rather than an unrelated design.5.Link the style sheet with <link type="alternate stylesheet"> and be sure to add a title attribute as well. When choosing a title, web designer jargon like "zoom" may confuse users. How about simply "High Contrast"?6.View your creation in Firefox or Opera, and use the browser's style sheet switcher to test your new creation!./ ADD NAME=CH21LEV1SEC4.HTML
Summary
When creating any web pages, whether using CSS or not, it's important to keep the needs of your users in mind. Providing them with an attractive website is not in conflict with giving them an easy-to-use site. In fact, the two approaches are both complementary and necessary for making a truly great site.
Testing plays a major role in any CSS design, and you can't rely on your own judgment when catching possible mistakes. Three important resources are other web developers who can give advice about your design efforts, users in informal tests who point out unexpected errors, and CSS validation services that check your syntax and warn of omissions.
Web development using CSS is a balancing act, and the factors you'll have to weigh include using CSS for layout, supporting older browsers, and accounting for browser quirks. Because each site is unique, there's no universal answer; you need to use your own judgment to figure out what works for you.
Organizing your style sheets in a sensible manner will make life easier for you and anyone else who has to read your style sheet. Use comments whenever you think of it, and group your styles together in natural groupings. You'll thank yourself later, when you need to maintain the style sheet.
Alternate style sheets can give your users a choice of appearance, enhancing the site's overall usability and meeting specific needs, such as zoom text. Cookies can be used with PHP, JavaScript, or other programming languages to make these choices persistent.
./ ADD NAME=CH21LEV1SEC5.HTML Workshop
The workshop contains a Q&A section, quiz questions, and activities to help reinforce what you've learned in this hour. If you get stuck, the answers to the quiz can be found after the questions.
Q&A
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch21qa1q1a1 Q.] I've created a design that is 1024 pixels wide but my web stats tell me that 35% of my audience is still using 800x640 resolution. What should I do? [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch21qa1q1 A.] You have several options here. The first is to simply give up the idea of fixed-width designs and redesign a more fluid site. Site designs that are fluid can expand or shrink to fit the user's screen, but they offer you less control over the end result. You could redesign the same look to fit in an 800-pixel-wide window. Fixed-width resolution designs look best when they're around 700 pixels or so across. You could also make your page adaptable with minimum and maximum widths so that the content scales down better on smaller resolutions.
Finally, you could use server-side or client-side programming, such as PHP or JavaScript, respectively, to provide alternative style sheets based on the browser's resolution. One style sheet could take advantage of the full-width displays and offer your original 1024-pixel design, whereas the fallback would be designed simply, with fluid layout.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch21qa1q2a2 Q.] How can I learn more about web programming? [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch21qa1q2 A.] Client-side and server-side programming practices are beyond the scope of this introductory book on CSS, but the Sams Teach Yourself catalog offers a wide range of books on web programming topics, such as Sams Teach Yourself JavaScript in 24 Hours, 4th Edition and Sams Teach Yourself PHP in 24 Hours, 3rd Edition. Quiz
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch21qa2q1a1 1.] Which of these is not a benefit of a well-organized style sheet? #It's easier to make changes later on, after the design goes live.- The download time is quicker if your style sheet is nicely formatted.
- You can spot problems such as unexpected cascading or inheritance consequences more easily when you've grouped your style rules sensibly.
- If you hand the website off to someone else, it's easier for them to understand how the site's style rules function.
> > [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch21qa2q2a2 2.] What do you need for effective user testing? #Nothing. Just follow your own instincts because you're a user too. You'll find out after the site goes live whether it's working or not.- Five people, five tasks, and five lattes; have your volunteers attempt to accomplish specific goals at the site, and thank them with a bribe of an appropriate beverage.
- A usability lab with one-way mirrors, video cameras, and a million-dollar budget; if you have less than that, don't bother.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch21qa2q3a3 3.] Why would you want to use cookies and server-side or client-side programming with alternate style sheets? Answers
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch21qa2q1 1.] All the listed benefits are the result of having a well organized style sheet, with the exception of (b). A style sheet that compresses together all your CSS rules on one line or otherwise lacks white space may actually load fractionally quicker because it is a few bytes shorter in size than one with more readable formattingbut this benefit is very small compared to the advantages of using indentation in readability and maintenance. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch21qa2q2 2.] The answer is (b), but the lattes are optional. I prefer a nice cold cherry cola myself. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch21qa2q3 3.] When a browser lets you pick an alternate style sheet, it doesn't save that choice, which means the next time you view the page, or another page on the site, you're back to the original. Using cookies lets the designer code client-side or server-side solutions that save a user's style sheet choice. Exercises
Here's a list of projects you can undertake to reinforce what you've learned this hour:
- Look at a website you've worked on, or one that you've used before, and design a hypothetical usability test. Create at least five questions that could be answered by using the site, in the form of tasks that would be performed by an average user to the site. Some should be difficult, and some can be easy.
- In fact, if you've got the time and the inclination, do an informal user test as described earlier this hour. The results are always educational, even if they just tell you that you're on the right track.
- Look at some of the style sheets you've worked on, and see whether you can reorganize them to be easier to understand. Comments, comments, comments!
./ ADD NAME=CH22.HTML
