In the past few years, the design community has seen an explosion of sites powered by cascading style sheets... more

In the past few years, the design community has seen an explosion of sites powered by cascading style sheets (CSS). Highly visible brands such as Fast Company, ESPN.com, PGA, and Blogger have all adopted CSS for the layout of their sites, delivering their compelling content through this excellent Web technology. Their pages have become lighter and more accessible, while a few style sheet files provide them with global control over the user interface of their entire site. The potential of CSS has been well established by these mainstream sites, and the technology (which languished since its introduction in 1996) is quickly becoming the de facto means by which a site’s design is built.

However, while CSS has been elevated to near-buzzword status, it’s important to remember that style sheets are simply a tool to be used in the overall design and development of your Web site. Granted, that tool is an incredibly powerful one, but it can only facilitate high-powered, professional-looking Web sites. Although using style sheets can afford you an unprecedented level of control over your site’s design, no technology is a silver bullet. Despite what technology evangelists might tell you, adopting CSS won’t inherently make your site more usable, your design more compelling, or your breath more wintergreen-fresh.

So, if we put aside the buzz for a moment, we can see that although CSS is an incredibly important aspect of a Web site’s development, it should be viewed in the context of that site’s entire lifecycle. In this chapter, we’ll discuss the following topics:

• Understanding your project’s scope

• Establishing the goals for your project

• The fundamentals of information architecture

• How to begin your site’s design

... less

In its early years, the Web wasn’t exactly the most attractive thing on the planet. Created by and for nuclear physicists... more

In its early years, the Web wasn’t exactly the most attractive thing on the planet. Created by and for nuclear physicists, hypertext was simply a means by which content-heavy documents could be shared over an open, distributed network. Needless to say, high-caliber design wasn’t a top priority for the Web’s earliest authors. In fact, HTML’s much-used (and, as we’ll discuss, oft-abused) table element was created with one purpose in mind: the display of tabular data.

By the time we reached the heyday of late-1990s Web design, the “L” in HTML was often ignored. Many professionals felt that the code we used to build our Web pages wasn’t a language per se, and, as such, wasn’t beholden to the rules and restrictions of a real programming language. Besides, our clients weren’t paying us for “compliant,” “accessible,” or “future-proof” code. In fact, many sites were produced with the requirement that they be “backward compatible.” This was a misnomer if ever there was one because it simply required a consistent display in version 4.0 browsers or higher.

Browsers of that time were temperamental, to say the least. With poor support for the specifications written by the World Wide Web Consortium (www.w3.org/), or W3C, you could count on a page rendering differently in Browser A than in Browser B. So, while many of us were dimly aware of the “standards” the W3C produced, the browsers we had to support were less than tolerant of standards-compliant markup. In this sense, the divide between the science and the reality of the Web was far too great. We would deliberately invalidate our HTML with proprietary, browser-specific markup to ensure that things “looked good” in our target browsers. And for a time, all was good. We had narrow specifications, we had deadlines, we weren’t paid by the hour, and as you can see, we had excuses.

Of course, designers learned early on that by zeroing out a table’s cellpadding, spacing, and border, we could create complex grid-based layouts, and bring a new level of aesthetic appeal to our sites. Granted, given browsers’ poor support for CSS in those days, we had no alternative but to weigh our pages down with presentational cruft. The result was a Web that is bogged down by the weight of its own markup, saturated with kilobyte-heavy pages that are hard to maintain, costly to redesign, and unkind to our users’ bandwidth.

Thankfully, there is a way out. XHTML and CSS are two standard technologies that will enable you to clear away the clutter in your pages, facilitating pages that are significantly lighter, more accessible, and easier to maintain. Of course, these two tools are only as effective as your ability to wield them. This chapter examines the need for XHTML and CSS, and introduces some practical strategies for applying them intelligently to your design.

... less

In August 1999, a small company known as Pyra Labs released a new product called “Blogger” to the Web. Not only would it... more

In August 1999, a small company known as Pyra Labs released a new product called “Blogger” to the Web. Not only would it go on to earn that team fame and fortune, it would also kick-start the blogging revolution.

Blogger lets people such as you, your friends, and really anyone publish a Web site, or more specifically, a blog. It makes this process simple, fast, and really very friendly indeed. It’s also free, which is a bit of a bonus on the Web, where no one wants to pay for anything.

In February 2003, a company called Google (you might have heard of them) whipped out their checkbook and acquired Pyra Labs, bringing Blogger into the Google fold. Along with the contracts and funding came something rather nice as far as the Blogger Team was concerned: the appearance of a BlogThis! button on the Google Toolbar. The overwhelming number of people using the Google Toolbar each day has enabled blogger.com to experience a huge surge in traffic. Sign-ups should have gone through the roof. But they didn’t. What was going on?

A few phone calls later and user experience experts Adaptive Path were on the case. With them came designer and CSS maestro Douglas Bowman of Stopdesign. Together they would examine the behavior of visitors to blogger.com and realize that something fundamental was stopping the conversion of these new visitors into new customers: the design of the site itself.

Plans were drawn up, ideas bandied about, and eventually, after 6 months of development, a new design was released. Blogger.com had a new face, and with it would come (one hoped) a mass of new customers.

Bowman’s redesign of blogger.com involved a number of subtle (yet effective) design touches: rounded corners, rollovers on links, graphical buttons, boxes whose borders faded to nothing, and a delightfully simple method of style-switching put in place not to help visitors, but to aid the Blogger Team in the production of the site.

This chapter discusses some of these design touches and looks at how to re-create them using the cleanest XHTML and the cleverest CSS around today. We also touch upon issues these solutions have with Internet Explorer (IE), and provide workarounds (where possible) for this troublesome browser.

This chapter should provide some understanding of what is possible if your first thought is not, “Does this work in Internet Explorer?” but rather “What is the cleanest, most forward-looking way I can build this?”

The solutions provided here might not be suitable for you to push into production today (that decision is up to you), but they provide a starting point in the whole development process. Kick off with an ideal solution, and then work your way backward until you reach a practical solution. For many developers, those two points may be one and the same, in which case the techniques described here can be slotted in to the next site they build. For others, there may be some distance between those two points, with more weight being given to ensuring a design works 100 percent on IE and less weight being given to the cleanliness of the solution.

So, read the chapter, take in the lessons, and decide, project by project, Web site by Web site, to what extent you compromise your ideal solution.

... less

The PGA Championship is one of the world’s premier sporting events. Presented in the late summer each year by the PGA of... more

The PGA Championship is one of the world’s premier sporting events. Presented in the late summer each year by the PGA of America, the tournament is the final major event of the golf season, features the best players in professional golf, and is followed by millions of fans around the world.

Turner Sports Interactive, a division of Time Warner, was responsible for the site development and editorial content during the event. The technological goal was to create a dynamic, rich, standards-compliant site using CSS for all layout and presentation, easily digestible XHTML markup, and Flash for special features. The creative goal was for a Web presence that was visually unique, sophisticated, and most of all, without any of the typical golf design clichés. A palette of desaturated, warm neutral tones was chosen, plus white and black to emphasize original photography and place as much attention on the textual content as possible.

Soon after its launch in July 2004, the PGA Championship site received overwhelmingly positive feedback from both golf fans and the Web-development community for its unique presentation, adherence to Web standards, and overall design. Traffic exploded on the first day of competition, as the PGA.com editorial team delivered a steady stream of news, scores, and multimedia content to millions of users per hour. Thanks to the lightweight CSS/XHTML markup, there was plenty of bandwidth to spread around.

This chapter provides detailed walkthroughs of some of the techniques used for a few of the site’s original features. Included in this discussion are general CSS/XHTML tips and tricks, as well as real-world caveats to watch out for in your own projects. The topics discussed in this chapter include the following:

• How to create the layered, drop-shadow effect using CSS and Photoshop

• A powerful, ultra-light method for adding CSS-powered drop-down menus

• Embedding Flash content without breaking standards compliance

... less

The University of Florida (UF) is among the world’s most academically diverse public universities with fields of study across... more

The University of Florida (UF) is among the world’s most academically diverse public universities with fields of study across 16 colleges. UF, which traces its roots to the East Florida Seminary in 1853, has a long history of established programs in international education, research, and service, with extension offices in all 67 Florida counties.

UF’s student body, with just shy of 50,000 students, is one of the five largest among U.S. universities. UF has more than 4,000 distinguished faculty members with nearly 100 Fulbright scholars, more than 50 eminent scholars, and numerous other faculty members who are nationally and internationally recognized in their fields.

The University of Florida’s Web presence has somewhat mirrored the trends you would see when looking at the Web as a whole. Shifts in the foci of Web developers (and the developers of the browsers in which they are viewed) can be seen by microcosm through the UF Web site. In this chapter, we’ll explore some of the decisions UF made with regard to its Web presence and take a look at the techniques used to carry them out. Let’s get started.

... less

If you’re an American, or a fan of American sports, then ESPN probably needs no introduction. If you’re not familiar with... more

If you’re an American, or a fan of American sports, then ESPN probably needs no introduction. If you’re not familiar with ESPN then you need to know only five simple facts about the company to understand how large it is:

• Its Web site, ESPN.com, serves between 1 and 1.3 billion pages a month (a figure roughly equivalent to that of the BBC’s mass of Web sites).

• The site has approximately 15.3 million unique visitors a month.

• These visitors spend an average of 9 minutes a day on ESPN.com.

• ESPN.com is the largest and most popular sports Web site in the world.

• Disney owns 80 percent of ESPN.

That’s impressive stuff.

So, now that we’ve established that it’s not a Mickey Mouse outfit (well, only 80 percent Mickey Mouse), you may be wondering why its site, ESPN.com, has made it into a book on CSS. Surely sites that large don’t make the transition from controlled, table-based layouts to the more fluid, and less predictable (so to speak) world of CSS, do they?

Do they?

... less

By the time 2003 began in earnest, a rather sizeable snowball was rolling. In October of 2002, Wired News abandoned traditional... more

By the time 2003 began in earnest, a rather sizeable snowball was rolling. In October of 2002, Wired News abandoned traditional table-driven layout methods for a CSS-driven design. At that time, Wired wasn’t the first redesign of its kind, but it was certainly the most highly trafficked. The site’s chief designer, Douglas Bowman (see Chapter 3 for a discussion of his work on the Blogger.com redesign), took a highly visible and well-established brand, and delivered a compelling new design—all with standard technologies such as CSS and XHTML that would, as Bowman put it, help “lift the Web out of the dark ages” (Wired News, “A Site for Your Eyes”: www.wired.com/news/culture/0,1284,55675,00.html).

For the next few months, you could almost hear the crickets chirping. Wired News had lifted style sheets out of the realm of academics and saber-waving standards advocates, and placed it squarely and confidently in the realm of mainstream media. Until the Wired redesign, most companies had never heard of cascading style sheets, much less considered them a viable alternative to the tried-and-true methods of designing with tables. The industry (and those of us in the saber-waving section of the audience) waited to see who, if anyone, would follow suit.

As it turns out, we didn’t have to wait long.

... less

We wish we had some kung fu–esque robes handy. This is the chapter where we tell our dear readers to forget all that we have... more

We wish we had some kung fu–esque robes handy. This is the chapter where we tell our dear readers to forget all that we have taught them about CSS so far, to look beyond the surface of the pool and discover the truth within the truth . . . or something like that.

Honestly, we’re more fun at parties than we might seem.

After seven chapters, it’s worth remembering that as convenient as it is to site designers, cascading style sheets can also drastically improve the online experience for the users of our sites. In Chapter 2, you saw briefly how the cascade was written with our users’ needs in mind, that user style sheets are ultimately given precedence over the author style sheets we write. The authors of the specification didn’t do this to spite those that design for the Web, but rather to empower those who read it.

After all, the true wonder of the Web is its promise of universal access: an avenue through which a user can gain instant and complete entry to any topic, from anywhere in the world. In fact, much of the mantle we don as Web designers is to realize that promise—to make sites that are at once visually compelling and with an interface that presents no barrier to entry.

However, we’ve slowly come to realize that our understanding of our audience has been incomplete at best. While we focused on setting the type on our pages 9 pixels high in the early days of the Web, our development was focused on having sites “look right” on contemporary desktop browsers. But in recent years, our understanding of our users’ needs has matured. People with physical, hearing, visual, or cognitive disabilities have always been using our sites; it’s just taken us some time to realize it. So, it’s only in recent years that our definition of “accessibility” has flowered, and our site-building techniques have followed suit.

While some designers may tell you that building an accessible site means building a boring site, we’d fling their pooh-pooh right back at them. Accessibility isn’t about larger fonts and creating high-contrast guidelines. Some users of the Web can read only smaller texts, while others can see only yellow text on a black background. Rather, many of the design techniques explored throughout this book—semantic, well-structured markup, a separation between content and presentation—can and will afford us incredible leverage in building professional, inspiring designs and simultaneously improve the accessibility of our sites for all of our users, not just a select few. In short, we can better realize the Web’s potential for universal access, and make some ultra-sexy sites to boot.

Ultimately, this chapter is not a manifesto on accessibility, space allotments and our meager skills being the largest impediments. Instead, we will explore different techniques for democratizing our design through the use of style sheet switching. By applying a different CSS file to a markup document, we can drastically change any or all aspects of its design—the layout, typography, or color palette. This technique may hold incredible appeal to designers because it exponentially decreases the amount of overhead required to redesign a site. But, as you’ll see, this technique can wield incredible benefits to our site’s users, allowing them fine-grained control over a page’s presentation and, in turn, better access to the content therein. After all, it’s about throwing the gates as wide open as possible.

Let’s dive right in.

... less

“Good artists borrow, great artists steal.”—Picasso

The first two chapters of this book discussed planning and best practices... more

“Good artists borrow, great artists steal.”—Picasso

The first two chapters of this book discussed planning and best practices, and each subsequent chapter focused on a particular aspect of CSS-enabled design from some of today’s most popular Web destinations.

From Blogger’s use of rollovers to Stuff and Nonsense’s style switcher, the methods in this book are just as crucial to online design success as they are relevant to the sites you build—whether you are building your company’s site, a site for a client, or just building your own site.

In this chapter, the lead author, Christopher Schmitt, demonstrates the process that went into building his own home page design. He illustrates how the lessons in the previous chapters (as well as some new techniques) are helpful for your own professional projects.

... less

Before you design with CSS, the content in a Web document must be marked up with HTML elements. To efficiently make use of... more

Before you design with CSS, the content in a Web document must be marked up with HTML elements. To efficiently make use of CSS, those HTML elements must be used correctly by placing the correct HTML element around the appropriate content.

The following table provides a listing of all the HTML elements in the 4.01 specification provided by the World Wide Web Consortium (W3C), the governing body that determines Web-related standards. The far-left column shows the name of the element. The next column indicates whether the element has a start tag. The next three columns describe the element in more detail. If the column has an “O,” it means the part of the element is optional. “F” means forbidden, “E” means empty, and “D” means deprecated. The DTD column provides information on which Document Type Definition an element belongs in. If the element is found only in one kind of DTD, the key will either be “L” for Loose DTD or “F” for Frameset DTD. The final column provides a text description of the element.

... less

Hypertext Markup Language (HTML) is a simple language that led to the boom of the Web in the 1990s. However, its simplicity... more

Hypertext Markup Language (HTML) is a simple language that led to the boom of the Web in the 1990s. However, its simplicity was also a roadblock for progress. The early success of HTML attracted a larger Web developer audience and spawned a desire to push the medium. HTML outgrew its simple upbringing.

For example, while placing images in a Web page is easy to do with HTML, placing the images in a specific location on a Web page is impossible without violating the intent of the table tag. Another example is placing the multimedia content in a Web page, which usually results in the use of invalid, proprietary elements and attributes.

In addition, HTML contained a limited set of elements and attributes. Other industries such as engineering or chemical companies couldn’t mark up their formulas. Instead of writing an all-encompassing version of HTML, the W3C worked on eXtensible Markup Language (XML), which is a flexible meta-language.

XML provides the framework for other markup languages to be created. Other industries can create their own markup languages rather than face a restrictive environment such as HTML.

However, for most Web developers who are familiar primarily with HTML, the major benefits of XML (creating new elements and specifying their treatment) are not important. Instead, the elements found in HTML will be of the most use.

The W3C reformulated HTML off of the XML standard to create backward-compatibility, while making the language embrace the structure found in XML. XHTML is the essence of HTML defined in the XML syntax.

In other words, XHTML is a set of rigid guidelines written to allow Web developers familiar with HTML to write valid XML documents without being completely lost.

Yet, reworking content from HTML into XHTML creates headaches when developers move into a stricter coding environment. The XHTML syntax (or rules for coding) is less forgiving of coding mistakes than old-school HTML and browsers.

To help you achieve more solid understanding of coding XHTML correctly, this appendix serves as a guide to transition the Web developer from an old-school HTML developer to a proper XHTML user.

... less

When marking up content with HTML, you must be aware of the elements that are at your disposal. The same goes for designing... more

When marking up content with HTML, you must be aware of the elements that are at your disposal. The same goes for designing with CSS: you must be fully aware of the properties and their values to effectively design for the Web.

In this vein, the following table lists all the CSS 2.1 properties that are at your disposal. In the far-left column is the name of the CSS property. Next are the values associated with that property and then the initial value. The next column states what HTML element that CSS property applies to. The Inherited column states whether the property can be inherited to other elements. The far-right column indicates the applicable media group.

... less

Does everything appear fine in the code, but not in the page design? Relax. CSS beginners and gurus alike have all been through... more

Does everything appear fine in the code, but not in the page design? Relax. CSS beginners and gurus alike have all been through this. This troubleshooting guide will save the frustrations and help determine the cause of your CSS crisis.

... less