Another interesting aspect of the Wired News site is that it provides its news to PDAs. In the interest of standards adherence, the markup and styles used to deliver Wired News to PDAs uses HTML 3.2 and CSS. There are two CSS files, one for use with monochromatic PDA screens, and one for use with color screens.

Figures 9.25 and 9.26 show samples from the monochromatic PDA styles. Figures 9.27 and 9.28 show samples from the color styles.

Figure 9.25: PDA style, home page
Figure 9.26: PDA style, business page
Figure 9.27: Color style, home page
Figure 9.28: Color style, business page

Pulling It All Together

Throughout this book, you've learned concepts critical to working with structured markup, CSS, and related concerns such as accessibility. You've learned theory and application, and have seen examples of working websites that use CSS as a means to push web design to new heights.

As the future unfolds and CSS becomes more familiar to you and other designers, there is no doubt that new and exciting ways of managing design will emerge. I hope you are as hopeful as I am that CSS will bring a new means of inspiring designers and make our responsibilities significantly more manageable and flexible.

Early in Wired's online history, changing the color scheme every day was part of its appeal. Of course, this had to be achieved in a much more rudimentary way back then. With CSS, simply pointing to a different style sheet can change the scheme.

There are five preset color schemes available to use on a daily basis, as well as a sixth for weekend use. In addition, there is a base grayscale scheme, and two additional schemes for specialty use, such as holidays or special news events.

Here's a tour through Bowman's color work, with his original palettes and a working sample of each. The palettes show the RGB values of the individual colors for each style in use.

Grayscale base The grayscale base scheme is what the site colors will default to if no other style sheet is called. Figure 9.7 shows the palette, and Figure 9.8 shows the palette in use.

Figure 9.7: Grayscale palette

Figure 9.8: Viewing the grayscale sample

Monday scheme The Monday scheme uses blue, turquoise, black, and white as its main colors (see Figure 9.9 ). Figure 9.10 shows the Monday scheme in use.

Figure 9.9: Monday color palette

Figure 9.10: Monday color schemes

Tuesday Scheme Tuesday's scheme (see Figure 9.11 ) uses orange and hot pink. Figure 9.12 shows the results.

Figure 9.11: Tuesday color palette

Figure 9.12: Tuesday color scheme

Wednesday Scheme Wired News' Wednesday scheme is a combination of bright and darker green (see Figure 9.13 ). Figure 9.14 demonstrates the complete look.

Figure 9.13: Wednesday color palette

Figure 9.14: Wednesday color scheme

Thursday Scheme Orange and red color up Thursdays at Wired News. Figure 9.15 shows the palette, Figure 9.16 the results.

Figure 9.15: Thursday color palette

Figure 9.16: Thursday color scheme

Friday Scheme Blue and bright green are the TGIF colors at Wired News. Figure 9.17 shows the palette, Figure 9.18 the results.

Figure 9.17: Friday color palette

Figure 9.18: Friday color scheme

Weekend Scheme Turquoise and orange are the colors of a Wired News weekend. The palette can be seen in Figure 9.19 , and the full template in Figure 9.20 .

Figure 9.19: Weekend color palette

Figure 9.20: Weekend color scheme

Additional Schemes Two additional schemes for special purposes are available. Figure 9.21 shows the palette for the first of these, and Figure 9.22 shows the results.

Figure 9.21: Alternate color palette #1

Figure 9.22: Alternate scheme #1:

The second additional scheme can be seen via the palette (see Figure 9.23 ) and the template with the scheme added (see Figure 9.24 ).

Figure 9.23: Alternate color palette #2

Figure 9.24: Alternate scheme #2

As mentioned throughout this book, making documents more accessible to people with disabilities as well as a range of user agents is a prime directive of the W3C. It's also mostly achieved via the way a designer approaches their design project, and the use of CSS can play an enormous role in addressing that concern.

To accommodate these concerns, a range of accessibility initiatives were developed for the Wired News site, as follows.

Use of style sheets CSS is used exclusively to control layout and presentation. This helps makes the site content accessible to a range of special devices and user agents.

Content is logical and useful without style Every page is organized and marked up so that it can be read logically even without the style sheets. Appearance of nonstyled content has been ordered so that the main column content (usually the most important) always comes first in the document (see Figure 9.2 ).

Figure 9.2: Nonstyled pages are still readable and useful (A).

Use of relative text sizing Throughout the site, relative text sizes are used, so that the text can be resized using browser controls. A means of sizing the text up or down within the interface is also provided ( 9.2 A), which is persistent from page to page through the use of browser cookies (see Figures 9.3 , 9.4 , and 9.5 ).

Figure 9.3: Text sizing option

Figure 9.4: Normal text size

Figure 9.5: Large text size

Removal of tables for page layout Bowman removed all layout tables from the site. This removes problems for screen readers, older browsers, specialized browsers, and other user agents, helping to facilitate accessibility. While Wired News still makes use of tables, they are only used for organizing columnar, tabular data, or contact forms.

Text equivalents for all images The alt attribute is used properly in all images:

Skip links ¡°Skip¡± links have been provided at the start of all documents, providing quick access to areas like search, navigation, and start of content. These links are invisible to sighted users, but can be used within text-to-speech readers as a way of skipping over redundant header elements straight to a portion of the page the user desires.

Color contrast and readability Wired News's site uses color extensively and makes use of changeable color schemes. Bowman carefully designed the schemes to ensure that contrast combinations of foreground and background were appropriately readable for anyone with color blindness or other vision issues. See the ¡°Alive with Color¡± section later this chapter to learn more about the various color schemes used for Wired News.

Valid XHTML and CSS Pages within the new design are supposed to all validate to W3C XHTML and CSS standards. All deprecated, proprietary, or obsolete markup is avoided.

Logical structure in markup By using logical structure, such as the use of header elements, the structure of the document and hierarchy of content is defined.

While Wired News is continuing to implement these initiatives, Bowman does note that it will be an ongoing process to bring the site up to W3C WAI Initiatives.

The leader has to be practical and a realist, yet must talk the language of the visionary and the idealist.
¡ªEric Hoffer

So, what does it take to make structured markup and CSS work in the real world of web design? While there's very good support for modern web browsers these days, there are definitely legacy browser issues that many people designing websites must deal with, as well as a whole host of problems arising out of other technologists and designers still using old-school presentational markup without CSS. So, undertaking a large-scale, CSS-oriented site is a complex project indeed.

What's more, there's also the fact that we've used CSS in a limited way, and now we're really just getting our big toes in the water¡ªgetting our skills wet a bit at a time. But each time we go deeper, we find new things to explore, and new ways to design using our growing collection of skills.

At this writing, there is perhaps no more daring a working website in terms of visual design, markup, and CSS than Wired News. The project was headed up by designer Douglas Bowman, whom you met in Chapter 8 while enjoying his personal website, and the site is a fascinating study in contemporary, cutting-edge design in the real world.

In this chapter, you'll explore the process that Bowman took to create the Wired News site, including:

• Motivation to move toward standards

• Accessibility initiatives

• CSS methodologies

• Color schemes and use of color

Wired News: Why Standards and CSS?

While I've made a strong case for standards-based design in this book, it certainly helps to take a look at how true change occurs. Wired News has consistently been ahead of the design game in both its print and web manifestations. Known for wild color schemes and interesting content for today's tech-culture savvy individual, Wired News has always stood out from the more conventional publishers by creating a persona that is edgy and contemporary (see Figure 9.1 ).

Figure 9.1: Wired News: Home Page

For that quality alone it stands to reason that Wired News would take the lead in the progressive choice of designing the Web the way web leaders believe the Web should be designed.

In Bowman's documentation of the process of redesigning Wired News to standards, he makes another important point: That other designers and developers should be 'encouraged to follow as we help push the Web to a higher ground.'

But make no mistake-Bowman's challenge was particularly difficult, despite the many advantages and impressive design that emerged as a result. Wired News isn't a home page, nor is it even a medium-sized business site. It is a large-scale, content-heavy, database-driven, highly trafficked, and ad-supported site. This means that it's the most complicated type of site to get up to speed with standards, because there are so many details to address.

What's more, anyone else working on the site, whether designer, markup and CSS person, programmer, or database designer, needs to have some modicum of standards education to make sure the end results are valid.

Bowman points out that despite these challenges, there are significant advantages to using XHTML and CSS. Some of the advantages Bowman describes include:

• Adherence to W3C recommendations 'represents a broader participation in pushing the Web to a higher ground.'

• The power of XML makes markup 'cleaner, leaner, and more logical.'

• Use of CSS for layout removes 'complex nested tables.'

• More support for more browsers.

• Portability and interoperability, because cleaner documents can easily be used for other platforms, such as wireless.

• Accessibility.

• Longer lasting documents and document structure-no need to create 'hacks' for each new browser version.

• Error reduction due to valid documents.

• Speed of cleaner files is increased, file sizes are often decreased (see Chapter 7 , 'Reconstructing a Table-Based Site' ).

• Future redesigns can be managed efficiently.

While each of these points are conceivably entire topics of study, combined they make a powerful case for Wired News' redesign, and the use of XHTML and CSS in general.

In this section, I'm going to show you a number of my favorite visual effects created by Eric A. Meyer for CSS Edge, which is a portion of Meyer's website dedicated to using CSS to create unusual designs that use web standards, no scripting, and no proprietary extensions.

For that reason, not all the effects will be available on all browsers, but each of these effects are impressive in what they allow a designer to do.

The idea here is to inspire. As the CSS Edge site itself says: 'Steal these ideas and use them yourself, or better yet, build on these ideas and do something better!'

Complex Spiral

The complex spiral page, www.meyerweb.com/eric/css/edge/
complexspiral/demo.html ,(see Figure 8.14 ) shows off several nice CSS effects, including an opaque look that creates a nicely enhanced navigation system ( 8.14 A), as well as an attractive content area ( 8.14 B).

Figure 8.14: A portion of the complex spiral page

As the mouse passes over a navigation item ( Figure 8.15 ), the background of the item changes, making the graphic background of the page appear as though it is coming to the forefront ( Figure 8.16 ).

Figure 8.15: Kat's navigation link, normal state

Figure 8.16: Kat's navigation link, mouseover state

The effect is subtle, but the visual results create movement and clarity. What's more, the simple navigation and layout make the page an attractive and dynamic design.

CSS Pop-Ups

This is an effect that can be employed using text or images, and CSS Edge shows both in action. In the past, these types of pop-ups could only be achieved using technologies such as JavaScript or Java. But being able to create these effects with CSS makes the entire process not only easier to manage, but also to style in a variety of ways.

In the normal state, the navigation options appear as they do in Figure 8.17 . Figure 8.18 shows what happens as the mouse passes over a navigation link ( 8.18 A)-the associated text pops up at the bottom of the navigation ( 8.18 B).

Figure 8.17: Navigation links, normal state

Figure 8.18: Navigation links, mouseover, with text based pop-ups

In Figure 8.19 , the same navigation options are seen, but in this case, mousing over the option causes an image to pop-up at the bottom of the navigation.

Figure 8.19: Navigation links, mouseover, with image-based pop-ups

CSS Menus

Another impressive effect that performs functions (as with all three of these samples from CSS Edge) without relying on scripting is the CSS drop-down menus that have been created by applying the :hover pseudo selector to an element rather than only the anchor element.

Figure 8.20 is the page without any of the menus activated.

Figure 8.20: The menus on this page look normal and innocent.

But, when you view the page in a supporting browser (in this case, Mozilla), the :hover selector is applied to the list item. That, with positioning, creates a hierarchical, linked navigation menu ( Figure 8.21 ).

Figure 8.21: CSS-driven hierarchical menus

The WOW Learning Center design makes the most of content and doesn't emphasize graphic presentation The colors are important to navigation and section identity, and the organization is overall quite clear. However, the design lacks a certain panache that a less information-oriented site, one that is geared to impress or promote, requires.

Real graphic design with CSS is still in its infancy. Typically, CSS-based designs appear clean and simple ( Figure 8.6 ) even if the site designers make use of graphics.

Figure 8.6: The BlueRobot home page is a simple but attractive CSS design.

Simplicity is a wonderful thing, but it's only one of many design options. There is no question that visual designers who take hold of CSS can do some impressive and sometimes surprising work when it comes to presenting more graphical or market-oriented sites. In this section, I showcase two visual designers who have used structured markup and CSS layout to make their sites work visually for their needs.

Douglas Bowman: stop|design

Artist and graphic designer Douglas Bowman shows off his interest in philosophy, design, and web standards on his site, stop|design, http:// www.stopdesign.com/ . What's impressive about Bowman's work is that he integrates not just the basic concepts of structured markup and CSS, but also more complex design that includes a variety of graphic images and type.

Figure 8.7 shows Bowman's home page. Note the use of a graphic background (8.7 A) and the graphic images to emphasize navigation and separate it from the main content sections ( 8.7 B). Bowman uses graphic type for headers ( 8.7 C and 8.7 D) but leaves links text-based ( 8.7 E and 8.7 F), which is a nice approach when you consider the diverse ways you can create link effects with CSS.

Figure 8.7: Bowman uses graphics effectively to produce a slick page appropriate for a visual designer

As with the color identifiers within sections in the WOW Learning Center site, Bowman uses color for each of his internal pages. He's a bit more experimental though, relying on the strength of his graphic headers and layout to carry the design as it goes from subtle to more dramatic colors.

Figures 8.8 - 8.10 show off Bowman's design.

Figure 8.8: Bowman uses lighter colors for the article page

Figure 8.9: For the portfolio section, an artsy black is used

Figure 8.10: A combination of subtle grays and blues enhance the informatioin page

Raymond Pirouz: Your Guide to Modern Living

Many times, a promotions-oriented site requires a sophisticated look. Designer Raymond Pirouz set out to make a site that promoted him, his design group, and his interests effectively. As with many progressive web designers, he was motivated to accomplish his design using web standards in the form of structured markup and CSS, and so he did.

As with all of the sites you've enjoyed in this chapter, consistency is a critical element of interface design and usability. Pirouz accomplishes this admirably yet proves himself flexible in terms of layout.

Figure 8.11 shows Pirouz's home page, which sets the look for the entire site.

In this case, the upper section ( 8.11 A) of the Pirouz site maintains consistency across the entire site. The top navigation also remains consistent ( 8.11 B). The lower navigation ( 8.11 C) changes depending upon which section of the site you are in, as does the lower content area ( 8.11 D).

Figure 8.11: Pirouz opts for a sophisticated and consistent look.

Sometimes there are layouts, such as in Figure 8.11 , making visible use of three columns, sometimes there are two columns ( Figure 8.12 ), and sometimes only one ( Figure 8.13 ).

Figure 8.12: Here, only two columns within the content area are used.

Figure 8.13: Only one central column in use

Yet the constancy of Pirouz's figure and logo at the top left of the page keep you grounded, and there is never any question of where you are or how to get back from where you came.

It's interesting to note that both Bowman's and Pirouz's sites look similar to sites that were developed using tables and graphics. Only an experienced web designer or developer could tell at first glance that they are not. This is the epitome of the possibilities of CSS design and suggests strongly how it can even be more effective in the future. By combining what you know of visual design with sensible use of technology, you can begin to approach a new and innovative means of achieving your website goals.

Hide not your talents, they for use were made. What's a sundial in the shade?
-Benjamin Franklin

One of the most important concerns at this point in the history of web design is figuring out how to use CSS in ways that produce the variety of sites we need.

This means that we must use CSS in practical as well as visionary ways. The true ability of designers working with CSS at this writing is largely yet to be revealed, but many interesting designs have come to fruition in the past several years.

To inspire and drive your design ideas, I've chosen what I feel are good CSS examples that address the range of visual design that you might need to accomplish your goals.

In this chapter you'll explore sites that show off:

• Information-rich design

• Visual design and promotions

• Tricks and effects using CSS

Designing for Information and Readability

One of the most difficult issues when managing websites-especially those that are content heavy-is ensuring the structure of that site, as well as ensuring readability.

Content has to do with how you organize your informational materials. Content-heavy sites tend to have a lot of, well, content! And content that is so vast tends to be deep in nature, meaning that it should be made as easy as possible to get to and to read.

If you're trying to ensure that your site is easy to read and that the information held within it is clearly organized for site visitors, keep these design concerns in mind:

Contrast Perhaps one of the most important aspects of readability, high contrast between the foreground and background is necessary when creating information- rich sites.

Chunking paragraphs The concept of 'chunking' came about as web content creators began to realize that people want short sentences. There are several known reasons for this. First, reading onscreen is still not as easy as reading on the page, so keeping items short is more comfortable. Another issue is that shorter paragraphs help create more white space, which rests and guides the eye.

Width of text With the change in computer screen resolutions and the desire to keep websites fluid in design, sometimes you'll run across situations where body text runs very long. Using CSS to contain text and ensure that there are margins around it can go a long way to making your site visitors happy readers.

Page length Ever come across a page that scrolls and scrolls and scrolls, yet offers no means of going up or down the length of the page? Terribly inconvenient for site visitors, indeed. Try keeping page length to about 3-5 screens maximum, and if you do run long, use intra-page linking to allow for navigation along the length of the page.

Type size and font face Selecting the proper font face and size is a critical issue in web design. Type size has to be small enough to look good onscreen, yet large enough to be read by a person with average sight with ease. Font faces should be of normal weight for body text, and typically common sans-serif faces, such as Arial, are considered to be excellent for onscreen body text. (See Chapter 4 , 'CSS Typography,' for more detail.)

Case Study: World Organization of Webmasters Learning Center

The World Organization of Webmasters (WOW) is a nonprofit, member-driven organization that provides support to individuals and organizations that design and develop websites. This support ranges from the creation of local chapters for networking to the provision of high-end education and certification for a range of professional web topics.

Typically, WOW's members are from education, government, and industrial sectors worldwide. Their needs for information are broad, spanning a range of design and technology specialties. They tend to be busy people who need information fast, but do appreciate well-written, well-organized, and easily accessed resources.

In an effort to provide educational services to both WOW members and the public at large, an online Learning Center has been developed. WOW, as with many organizations looking to the future, has understood for some time that it must promote important professional and best-practice trends, including standards.

To that end, the Learning Center uses structured XHTML documents, CSS layouts, and CSS for all design. There is no presentation in any of the site's markup, and the pages are geared to comply with accessibility concerns.

Listing 8.1 shows the structured markup used to manage the site's general content.In this listing, look at how using the structural markup can help organize your informa- tion effectively.

Listing 8.2 is the global layout style sheet for the site. Here, you'll see layout styles primarily. Fonts, borders, colors and so forth are different for each site section, as you'll see in an example a bit later.

Managing Information within the Site

In addition to logistical and informational pages at the top level of the site, the Learning Center covers 14 specific topic areas, which is a significant amount of information.

Figure 8.1 shows the home page of WOW's Learning Center.

Figure 8.1: The home page of WOW's Learning Center

Several items are important to point out. First, notice the logo (8.1A). You'll see that this is consistently placed throughout the entire site. The same is true of the top navigation (8.1B) as well as the side navigation (8.1C), leading to the individual site sections.

Within the page itself, headers denote the topic of the page at hand (8.1D) as well as any subtopics (8.1E).

You'll also note a subtle background image that provides shape and movement without intruding on the visual design of the site.

Figure 8.2 shows an internal section page that is an excellent example of addressing readability concerns.

Figure 8.2: The Career Center at WOW's Learning Center

The font color for all body text throughout the site is black and it has a sans-serif face, Arial specifically (8.2A). Line length is variable depending upon browser sizing and resolution, but sufficient margins (8.2B) and white space make it appealing. Note also the use of small paragraphs (8.2C) and bullet points (8.2D) to keep information 'chunky.'

Finally, while navigation has been kept simple, each section is color-coded with global color design in mind. This has been achieved by using section-specific style sheets. Listing 8.3 shows the style sheet for the Business and Law section of the site.

Figure 8.3 shows the Business and Law page, complete with layout and style.

Figure 8.3: The Business and Law section, with an appropriately austere color scheme

You'll see that color coding sections in information-rich sites is a popular way to keep the site looking interesting without degrading the integrity of the design.

Figures 8.4 and 8.5 provide a look at two of the other internal pages.

Figure 8.4: The Design and Usability page uses a bright, lively color scheme

Figure 8.5: The Programming section, with colors reflecting technology (silver) and progress (red)

In many ways, this was one of the most difficult projects I've created for the book. Why? Because I wasn't able to touch the markup and because I was working toward a very specific visual goal. The combination of these two constraints made the process very, very interesting.

The perfect example is the sidebar positioning. Sure, it's cool that we can use top and margin-top in combination to place the link list, but it turned out to be a fragile solution. Suppose the user bumps the text size up to 120% of normal. The quick summary text immediately flows to four lines, but there's no way for the top value to change as a result (short of using JavaScript, but that's outside the scope of the book). To keep everything aligned, it would need to change to 10.6em . Instead, the sidebar content ends up overlapping the quick summary area.

As I say, this is the case because the document markup was off limits. If it had been changeable, I would have reworked things so that all of the main column content was in one div so that I could just give it a single border. I also would have moved the link list into that div and then used it as the containing block for the link list. That way, the user could change text size all he wanted, and the sidebar would still line up with the content column. There would be no more danger of overlap.

This illuminates an issue that is very important but often overlooked: Presentation is dependent on structure . You may have heard the phrase "complete separation of structure and presentation." That's impossible with current technology and may always be impossible, although I'm no prophet and can't guess what might be possible in 5, 10, or 30 years. I can say that, as of now, a document with no structure¡ªthat is to say, no elements, just an undifferentiated sea of text¡ªcannot be styled in any meaningful way. Without paragraphs and headings and div s and anchor elements to mark your hyperlinks, there's no hope of making things look good.

Similarly, if the structure of a document doesn't relate very well to the visual result you want (as was the case in this project), you end up either getting very creative or else having to change something. Usually, designers will just change the structure to better meet their layout needs. That's okay; in fact, it's often a good idea. The other possibility is to change the visual layout from what you wanted to what the document's structure can support. That's fine too, although it's generally not as satisfying.

So always remember that your design will depend on the document's structure. Sometimes that means grafting in an occasional div or span for presentational purposes. As long as you're doing that only when necessary, don't worry about it. If you find yourself frequently nesting span s inside (or around) links, though, you might want to rethink how you're doing whatever you're doing. It's important to keep things as simple and structurally appropriate as possible while still meeting your design needs.

One last note: My respect for the designers who have created Zen Garden layouts increased substantially by undertaking this project. Adapting a known design to the markup was a challenge; to create a completely new and original design on top of that markup bespeaks incredible skill and talent. To each and every one of the Zen Garden designers, I bow in reverence and humility. Thank you, one and all.

Branching Out

This time around, I really only have one suggestion for taking the concepts in this chapter further.

1. Create your own Zen Garden design! It doesn't have to be the most beautiful design ever, nor does it have to be submitted, although you're certainly encouraged to do so if you like. All you need to do is create one or more style sheets that present the Zen Garden base file in a new and interesting way. Try different layouts with the markup, making them more and more complex as you learn. Remember: The markup is not to be touched. All you can do is write CSS. When you hit a limitation, see if you can find a creative way around it. Try things that don't seem like they have a chance in Hades of working. When you make a mistake, stop before you undo it. Was the result interesting in a way you didn't expect? If so, try following that path instead of the one you meant to follow. You never know what interesting technique or effect you might find just by working in the Zen Garden.

You may recall that fairly early in the project, we added the image of the big flower to the design. That image file is a GIF89a with a transparent area (skip back to Figure 10.5 if you don't remember clearly how it looks). At the time, there was a brief mention that a PNG image would be a much prettier solution, and that we'd talk about it at the end of the project.

Well, here we are at the end of the project, so let's talk about using a PNG instead of a GIF.

From a visual design perspective, the primary advantage of PNG is that a PNG file can contain gamma-correction information (so you don't have to worry about your images becoming lighter or darker in different operating systems) and it can include up to a full 16-bit alpha channel. This allows for translucency and transparency that's far more sophisticated than the simple on/off transparency of GIF files. In a GIF, a pixel is either opaque or transparent; there's no in-between. In a PNG image, every pixel can be semi-opaque to whatever degree is desired. So, creating a PNG that fades smoothly from black at the top to totally transparent at the bottom of the image is a snap.

Let's take a look at Figure 10.23 , which shows the PNG we'll be using as well as the channels in the file.

Figure 10.23. The PNG image and the RGBA channels it contains.

The red, green, and blue (RGB) channels are straightforward enough. The Alpha (A) channel, the one at the bottom, shows the transparency mask for the image. Any area of the channel that's fully black is fully transparent, and the fully white areas are opaque. Any shade of gray represents a semi-opaque area. The image itself is shown composited over a white background.

Given the alpha channel mask, the shadow will be translucent, and the area around the flower will be totally transparent. We can't just replace the GIF with this PNG, though, because the background of the page header stops right at the edge of the flower (refer to Figure 10.4 ). We'll need a new masthead background that stretches all the way across the top of the design, one like that shown in Figure 10.24 .

Figure 10.24. The new, extended masthead background.

If we wanted to really be thorough, we'd fill in the rest of that white area with pictures, but since the flower will be placed over that section of the background, we can skip it. Let's replace the old images with the new background ( pageHeader2.jpg ) and PNG ( ph-flower2.png ) images.

At this point, the PNG will work its magic in most current browsers. There is a glaring exception: Internet Explorer for Windows. (Even IE5/Mac will handle the PNG correctly.) It will display the PNG, but it won't do anything with the alpha channel. That sort of defeats the purpose. Fortunately, we can hack IE/Win to recognize and handle the alpha channel with an HTC file, otherwise known as a behavior file. By using a PNG-opacity behavior file (there are several available on the Web, although most concentrate on fixing inline PNGs instead of background PNGs) and hooking it into our style sheet, we can get the result shown in Figure 10.25 in IE/Win as well as Opera, Mozilla, Firefox, IE/Mac, Safari, and such.

Figure 10.25. The design with a PNG added for extra visual tastiness.

As we discussed in Project 6 , behavior is not part of CSS, but is instead a CSS-like statement that's proprietary to Internet Explorer for Windows. Thus, using a behavior declaration will prevent your CSS from validating. There's really no way around that.

There is another potential drawback to using a PNG. Because the image contains not only color information but the alpha channel, it tends to be larger than other image file formats. If the PNG uses 32-bit color, which it's perfectly capable of doing, that will drive up the file size even further; the advantage is that the image can have a colorspace of millions of colors instead of just 256 colors or 32,768 colors. PNGs also use lossless compression, which can mean larger files. JPEG, by contrast, uses a lossy compression, which is why you get "wrinkles" in JPEGs that have been highly compressed.

What does that mean in real terms? Well, the GIF version of the flower is a 32KB file. The PNG saved out by Photoshop was a 152KB file. That's a whole lot of extra file size just to get a translucent shadow!

It is possible to lower the PNG's file size with utilities; Porter Glendinning, one of the book's technical reviewers, was able to get the flower PNG down to 60KB or so using various utilities. That's still twice the size of the GIF. Is it worth it? Perhaps, and perhaps not. But then Porter ran the image through the utility pngquant and got it down to 28KB¡ªabout 4KB smaller than the original GIF, and looking much, much better to boot.

So why aren't PNGs used all the time? There are two reasons. The first is the lack of convenient support by IE/Win; most authors wouldn't think that a behavior file called in via a style sheet would be able to fix an image format's support. (It certainly wouldn't have occurred to me.)

The second is that most commercial tools, such as Photoshop, do a very poor job of dealing with PNGs in an intelligent way. Typically, you get extreme choices like being able to save your PNG as an 8-bit color file with on/off transparency (basically, GIF in another format), which means a small file size; or else a full 24-bit color with an 8-bit alpha channel, which leads to really big files (the number 152KB comes to mind). This is very likely why PNGs have a reputation for being pretty but incredibly bloated. The fault, it would seem, lies not with the format but with the tools.

If authors were able to pick in-between possibilities, like an 8-bit color image with a full alpha channel, then we'd be getting somewhere. As it stands, authors could start using PNGs in their designs in three easy steps:

• Create PNGs with full alpha channels for use on the Web.

• Run the resulting PNGs through freely available optimization utilities like pngquant .

• Hook in an HTC file to get IE/Win to play nice.

The lack of widespread support for PNGs in IE/Win and commonly used programs has undoubtedly hampered their adoption, and so there isn't the same breadth of knowledge that GIFs and JPEGs enjoy. It may be that all it will take to correct that situation is for authors to decide to use PNGs on a more frequent basis, and to share what they learn with one another.

This is actually one of the easiest parts of the project because all we have to do is put the list of links where we want it and style its contents. Thanks to the work we've already put in, we don't have to worry about the background or any of that other stuff. It's already been done for us.

So let's position the link list. To start with, we'll position it in the top-right corner of its containing block and define its width to be 216 pixels (the same width as the sidebar pattern).

As always, an absolutely positioned element's containing block is the closest ancestor element that's been absolutely or relatively positioned. For the link list, that's the container itself, so at the moment the link list is overlapping the flower in a pretty serious way. We need to get it down into the sidebar where it belongs.

Here's where it gets a little challenging, but not much. A quick measurement shows that the distance from the top of the container to the top of the quick summary is 157 pixels. No problem there. But what about the height of the quick summary? It wasn't set in pixels, so instead it's dependent on the height of its content. If we add up the top and bottom padding and line heights inside the quick summary, we get a result of 8.5em. We'll add just a bit to that and get 8.6em. To add the two together, we'll set the link list's top to be 157px and its margin-top to be 8.6em , with the result shown in Figure 10.17 .

Figure 10.17. The link list is positioned and is ready for styling.

Okay, the links are where we want them, but they don't look much like what was in the original design. As an example, these lists have bullets, which the design does not. So we'll just remove them from the list items.

We don't want to lose the indentation of the lists since that was a feature of the design, but we don't really want to leave the indentation up to chance, either. So we'll explicitly set some margins for the unordered lists within the link list div and make sure they have no padding.

The links themselves could use a little help since they need to be italicized, green, and slightly larger than normal text. They are also, in the design, all lowercase. A quick set of declarations gives us all that, as Figure 10.18 shows.

Figure 10.18. Basic styling is applied to the lists within the sidebar.

It's progress, but it's also a little crowded in the sidebar all of a sudden. We need to spread the entries apart, and so we shall, but first let's consider the three h3 s ("Design List" and so on).

In Figure 10.1 , they're each in a lovely script font and have some unique underlining effects. That's obviously well beyond the capabilities of regular text, so we'll have to use the three images shown in Figure 10.19 .

Figure 10.19. The three images used to replace the heading text in the sidebar.

As you can see, the images are all GIFs with transparent parts, which will enable them to blend nicely with the sidebar background.

To place them, we'll actually style all three h3 elements in the sidebar at once. This will let us set not only common margins but also the same width and height for each one. We'll also give them all the "Resources" image for a background, prevent it from repeating, and place it 10 pixels to the right of the element's left edge and centered vertically.

Having done this, we can now leave it in place and just change the images used in the background of the "Design List" and "Archives" headings.

By taking this approach, it becomes much easier to rework the heading styles as a group. If we ever decide to change the placement of the images within their headings, we just have to edit the background-position keywords in the #linkList h3 rule.

The last thing we need to do to the headings is remove the text from the foregrounds, with the end result shown in Figure 10.20 .

Figure 10.20. The headings are replaced with images.

Now for those links¡ªthey've been scrunched together for far too long. Since the "Design List" links are styled differently than those in the other two sidebar sections, we'll take them each in turn.

If you look closely at the entries in the "Design List" in the visual design, you'll see that the second line of each entry (the author line) is a little smaller than normal. The name of each design, though, is about as big as regular text. If we just set the list items in this list to be about 85% of normal size, we'll be close to getting this exact effect. That's because we already wrote a rule ( #linkList a ) that sets the links in the sidebar to be 1.15 times the size of their parent's font-size . If we reduce the size of the list items to 0.85 times normal, the links will be 0.9775 times normal size¡ªclose enough to 1.0 to satisfy our needs.

So we'll do that and add a bottom margin to the list items at the same time.

Okay, now for the links themselves. Each design name needs to be on its own line and boldfaced. The name should also be all lowercase and the letters spread out a bit. We can easily make this the case for all links in the "Design List" section.

Oops¡ªwe just applied these styles to all of the links in the "Design List," including the links containing the author names, which aren't supposed to look anything like that. In fact, they're just supposed to be boldfaced text¡ªthe same size and appearance as the word "by" that sits next to each name. And, for that matter, the author names have to sit next to the word "by," which means that they can't be block-level. In other words, we need to undo all the styles we just applied to them.

Fortunately, the author-name links share one thing in common: a class of c . With that class to guide our selector, we can fix the link appearance in just four declarations, with the result shown in Figure 10.21 .

Figure 10.21. Spreading out the "Design List" links and formatting them as desired.

We are very, very close to being done. Really, all we have to do now is get the links in the "Archives" and "Resources" sections to look like they do in the original design. Although they are spread out a bit, it isn't as much as the links in the "Design List" section. So we'll go with a half em.

The other difference is that the links in this section are a much lighter weight than those in the "Design List" section. Ideally, we'd set them to be incredibly light using something like font-weight: 100; , but that isn't really very well supported. Instead, we'll blend the color of the links into the background a little more than the dark green of the "Design List" links, using a lighter green to lessen the visual weight.

With that small little color change, which has the result shown in Figure 10.22 , we've reached the end of our style sheet, which is given in Listing 10.4 .

Listing 10.4. The Complete Style Sheet

Figure 10.22. The "Archive" and "Resources" links are styled to have a little less visual weight.