“Great works are performed, not by strength, but by perseverance.”—Samuel Johnson

In its early years, the Web wasn’t exactly... more

“Great works are performed, not by strength, but by perseverance.”—Samuel Johnson

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 will be discussed, oft-abused) table element was created with one purpose in mind: the display of tabular data.

By the heyday of late-1990s’ Web design, the “L” in HTML was often ignored. Many professionals felt that the code used to build Web pages wasn’t a language per se, and, thus, wasn’t subject to the rules and restrictions of a real programming language. Besides, clients weren’t paying for “compliant,” “accessible,” or “future-proof” code. In fact, many sites were produced with the requirement that they be “backward compatible.” That 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 (W3C)—www.w3.org—you could count on a page rendering differently in Browser A than in Browser B. So, while many programmers were dimly aware of the “standards” the W3C produced, the browsers they 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. Programmers deliberately invalidated HTML with proprietary, browser-specific markup to ensure that things “looked good” in target browsers. And for a time, all was good. Programmers had narrow specifications, they had deadlines, they probably weren’t paid by the hour, and as you can see, they had excuses.

Of course, designers learned early on that by zeroing out a table’s cellpadding, spacing, and border, they could create complex grid-based layouts and bring a new level of aesthetic appeal to their sites. Granted, given browsers’ poor support for Cascading Style Sheets (CSS) in those days, they had no alternative but to weigh 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 users’ bandwidth.

Thankfully, there is a way out. Extensible Hypertext Markup Language (XHTML) and CSS are two standard technologies that will enable you to clear away the clutter in your pages, facilitating the construction of 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 go... 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 it) whipped out its 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 a mass of new customers. Since then, Blogger.com and other providers have become a large part of how many people communicate over the Internet, and the number of their customers has skyrocketed.

Bowman’s redesign of Blogger.com involved a number of subtle yet effective design touches. 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. It also touches upon issues these solutions have with Internet Explorer (IE), and provide workarounds (where possible) for this troublesome browser.

This chapter provides 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 back 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, and easily digestible Extensible Hypertext Markup Language (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 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.

It’s been a few years since the launch of this version of the PGA Championship Web site, and the PGA has launched variations of the design in years since then. However, it’s the 2004 version of the Web site that captures our attention. It is a classic, thanks to the combination of lightweight CSS/XHTML markup, solid design, and gorgeous photography of the golf courses.

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 has over 50,000 students and is the second largest university in the U.S. 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 in microcosm through the UF Web site.

In this chapter, you’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.

... less

This is the chapter where we tell you to forget all that you have learned about CSS so far, to look beyond the surface of... more

This is the chapter where we tell you to forget all that you have learned 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 four 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 your sites. In Chapter 1 you saw briefly how the cascade is written with users’ needs in mind, and that user style sheets are ultimately given precedence over the author style sheets you 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 you don as a Web designer is to honor that promise—to make sites that are at once visually compelling and with an interface that presents no barrier to entry.

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

Some designers may tell you that building an accessible site means building a boring site, yet 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 you incredible leverage in building professional, inspiring designs and simultaneously improve the accessibility of your sites for all of your users, not just a select few. In short, you can better realize the Web’s potential for universal access, and make some ultra-sexy sites to boot.

This chapter is not a manifesto on accessibility, space allotments, and our meager skills being the largest impediments. Instead, you’ll explore different techniques for democratizing your design through the use of style sheet switching. By applying a different CSS file to a markup document, you 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 your 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

CSS is a powerful tool, and in this chapter you look at how the CindyLi.com Web site was conceptualized and implemented as... more

CSS is a powerful tool, and in this chapter you look at how the CindyLi.com Web site was conceptualized and implemented as well as how it was created (and manipulated) with CSS. In this chapter you learn how to use CSS markup to design/redesign your site and/or blog.

... less

“Mail your packages early so the post office can lose them in time for Christmas.” – Johnny Carson

American Institute of Graphics... more

“Mail your packages early so the post office can lose them in time for Christmas.” – Johnny Carson

American Institute of Graphics Artists (AIGA) was founded in 1914 to promote designing as “professional craft, strategic tool and vital cultural force.” With more than 16,000 members nationwide and 56 local chapters, AIGA is one of the oldest and strongest design-related organizations in the country.

Local chapters such as AIGA Cincinnati are formed throughout the country to develop better relationships with its members, and provide job banks and discounts on products and services, as well as put on conferences and offer networking opportunities and workshops.

To help promote its activities, AIGA Cincinnati wanted to improve its email messages to its members to raise awareness of events and, in turn, increase the level of participation. To this end, they wanted to use HTML email templates. These custom-designed layouts cover most of their activities every year (happy hour events for networking, mentoring programs for design students, and design competition) but are flexible enough to be adapted for new events as they crop up.

... less

In this chapter you learn how to use Transparent PNGs while designing a Web site.

Before learning how to use Transparent PNGs... more

In this chapter you learn how to use Transparent PNGs while designing a Web site.

Before learning how to use Transparent PNGs, it’s important to discuss why Transparent PNGs can be useful when laying out a design for a Web site.

Like GIFs and JPEGs, PNG images are ideal for Web use. Like GIFs, the PNG is great for displaying small images with few colors, such as logos and icons. Also, PNGs sport a few advantages over GIF images. Most notably, they support alpha-transparency. What is alpha-transparency? GIF files are only capable of displaying a pixel as either completely transparent or completely opaque: this is known as binary transparency. When an image contains alpha layers, however, parts of an image can be partially transparent. You can specify a level of transparency from 0 to 255.

When working with most images and graphic files, you will find that a PNG is able to achieve greater compression than a GIF. PNGs provide for a much greater range of transparency options than GIFs. Alpha-channel transparency is the number one option available. A PNG can also provide for a much wider range of color depth in an image, far more than the standard GIF. You can use truecolor up to 48 bits instead of 8 bit (and 256 colors) with PNG. This gives you more color control, allowing you to produce smoother fades, for example. PNGs thus give you the potential to create some interesting effects on a Web page, such as translucent background images and drop shadows.

PNGs are a great choice, but don’t rule out two strengths of using GIFs: their ability to support animation, and the wide level of browser support. Despite their advantages over GIFS, PNGs aren’t nearly as popular as GIFs in Web design, primarily because of the impression that PNGs don’t enjoy wide browser support. This view of PNGs is a bit of a misconception.

... less

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

By the time 2003 began in earnest, a rather sizable 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, 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 them squarely and confidently in the realm of mainstream.

... 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 properly 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 to 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 from 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 by other elements. The far-right column indicates the applicable media group.

... less

Even after staring at the monitor for what seems like hours, does everything appear fine in the code, but not when you press... more

Even after staring at the monitor for what seems like hours, does everything appear fine in the code, but not when you press the Refresh button?

Relax.

CSS beginners and gurus alike have all been through this. Use this troubleshooting guide to save you from Refresh frustrations.

... less