Deco: Minimal imagery, maximum impact

Marc Trudel, Designer

www.csszengarden.com/094

WHEN SETTING OUT TO WORK on a design, Mark Trudel follows a ritual. Beginning with a visit to sites that visually inspire him, he spends about an hour looking at the work of others and collecting content: photographs, illustrations, text. Next, it's off to Adobe Photoshop, where he works on thumbnails. Unlike many graphic artists, he avoids sketching ideas on paper, finding that doing so lacks the level of detail that working in Photoshop allows.

In the early winter of 2004, Trudel broke with his ritual a bit as he spent time wandering around Miami, Florida. Finding the art deco buildings in South Beach excellent for abstract close-up photography, Trudel took a lot of pictures, one of which became the inspiration for the clean, fresh lines of his CSS Zen Garden submission, Deco.

A New Way of Thinking

When it comes to working with images and CSS, a whole new way of thinking is required of those "old-school" designers who spent time using the slice-anddice method for Web-page layout. This method (for those readers who are fortunate enough not to have had to use it) typically found the designer creating layouts in Photoshop, then slicing graphics where necessary and placing them into HTML tables.

These tables formed a grid system, and of course this method dominated Web design for most of the '90s (FIGURE 1). Unfortunately, the practice continues today, to the detriment of progress as well as accessibility and better functionality.

Figure 1. The restrictive grid system of table-based design.

One encumbrance resulting from the slice-and-dice system that's rarely discussed is how limiting it isespecially in terms of imagery. You have to make sure every image fits into that grid system, which is a series of rectangles. To say this inhibited creativity in Web design is an understatement. Too many designers fell into the habit of creating very boxy, contained looks.

The use of CSS as a tool for layout sets us free from such constraints. Sure, there's still the reality that everything in CSS is based on the box model, but there's also a difference. With CSS, you can think in terms of a gridor not. Through clever design and placement of imagery, a designer can find him- or herself transcending the grid and thinking in more fluid, open ways (FIGURE 2).

Figure 2. Deco is airy and open right from the get-go. Though not impossible to achieve, it's a design that likely would not have come to be in the days of table-based layout.

Without the restriction of tables, designers can come to the canvas without restrained thinking. One of the greatest benefits from this shift is that images are being used much differently, and with better results, than in the past.

Rigidly enforced grids that impede the design process are a thing of the past. CSS allows you to add images to any background element, which in turn effectively provides the ability to layer images, overlay imagesand, in the right browser environment, even tap into PNG transparency to create a range of image-related effects.

CSS has freed the designer not only to be more creative, but also to use techniques that can serve to reduce overall page weight, resulting in happier visitors.

Intelligent Approaches to Imagery

One of the things that the clean, open lines of Deco can teach us is how to intelligently approach the use of imagery when working with CSS. Whether you examine the size, the weight, or the placement and related image options, you'll find significant differences in the ways that images are both created and applied in a CSS environment.

Image Weight and Size

Images should weigh as little as possible yet still maintain visual integrity. The slicing method used in the days of table-intensive designs came about in part to reduce overall page weight.

However, CSS allows you to home in on exactly what you need to apply and where, and only use images that meet those specific needs. In some cases, this means using a large graphic; in other cases it means using a small oneor a series of tiny ones that will tile to fill a larger area.

Consider Deco's primary photographic background image, which contains the clouds and the deco curves of the building in the shot that Trudel took. This is the portion of the design that feels so light and airy, yet when we examine the background image, we find that its size is surprising (FIGURE 3).

Figure 3. The primary background image in Deco.

The image is 788 pixels wide and 497 pixels high. In old-school technique, it would have been chopped up into several pieces, if a designer had even considered such a look in the first place.

The image also weighs 45.02 KBytes, which likely would have been thought to be too weighty for a table-based layout. Remember, though, that CSS provides the ability to be far more specific in our use of imagery, so a primary background of that weight is not extreme if the remaining images are especially small and few in number. The next image down in terms of weight and size is the title image, which weighs in at only 3.28 KBytes and a more typical size of 266 pixels wide by 103 pixels high (FIGURE 4).

Figure 4. The transparent GIF used for the title image.

Number of Images

In CSS design, the number of images isn't necessarily going to be lower than in conventional table-based design, but you can do much more with much less. TABLE 1 describes each image used in Deco and shows its respective size and weight.

Table 1. Use of Images in Deco

Image	Dimensions (in Pixels)	Weight	Use
bg.jpg	788 by 497	45.02 KBytes	Primary photographic background
bg_blue1.gif	2000 by 1	0.14 KBytes	Background
csszengarden.gif	266 by 1033	28 KBytes	Page header
thebeauty.gif	263 by 13	1.69 KBytes	Page header subtitle
h1.gif	537 by 39	3.02 KBytes	Header level 1
h2.gif	537 by 50	2.83 KBytes	Header level 2
h3.gif	537 by 50	2.46 KBytes	Header level 3
h4.gif	537 by 50	2.20 KBytes	Header level 4
h5.gif	537 by 50	2.52 KBytes	Header level 5
lightblue.gif	125 by 3	0.06 KBytes	Link list background
selectdesign.gif	95 by 7	0.37 KBytes	Select design header
archives.gif	95 by 7	0.28 KBytes	Archives header
resources.gif	95 by 7	0.31 KBytes	Resources header

Note

Certainly today's excellent utilities for graphic compression have improved our ability to get smaller file sizes. In Deco, the weight of the main image could conceivably have been reduced considerably further without the introduction of too many compression artifacts. However, because the photograph is the centerpiece of the design, and the image dominates so much of the visual space, it's a fair balance for a designer to choose a greater weight in favor of very crisp results.

So how can you reduce the number of images in use, and reduce the page weight as a result? Part of the point of this chapter is to encourage you to think in broader terms when it comes to imagery, which is a good place to start. There are some more specific things you can do to reduce image use as well, including the following:

• Use styled text instead of images wherever possible. In Deco, you can see this in action in the page header and subtitle. Graphics are used to get the typographic effects there, but the text immediately beneath, in the quickSummary section, is non-graphical. Striking this kind of balance can be extremely helpful.

• Use only the portion of the image necessary to achieve the desired effect. This is most obvious in the use of the primary photographic background and in the headers, which lend a great deal of visual interest to the look.

• Make use of very thin images to fill out backgrounds. The bg_blue1.gif fleshes out the background of the rest of the document below the primary photograph, but it's only 1 pixel high and weighs in at a paltry 140 bytes.

• Reuse images wherever possible. With clever CSS, you can apply a given image to numerous elements. In Deco, lightblue.gif is used as a background for three distinct elements, but the rule is written only once, using a descendant selector so that all ul elements within the linkList will pick up the image:

   #linkList ul {     margin: 0px;     padding: 0px;     background-image: url(lightblue.gif);           background-repeat: repeat-y;     } 

  
  

• Balance images with browser color. Wherever you can use a color or background-color value instead of an image to achieve the effect you're after, do so.

Finally, if it's not necessary, leave it out. One of the greatest temptations in graphic design is to overuse unnecessary images. Ask yourself if every image on the page is serving a real purpose, functional or aesthetic. If the answer is questionable, consider removing the image.

Layers of Images

Another issue rarely thought about prior to broader support for CSS is the layering of images to create certain effects. Nowadays it seems second nature to do this, but in the past the ability to place an image on top of another was restricted.

Where we did see this in action was whenever a transparent GIF was used inline over a body or table background image or color. In this case, the background image or color for the entire page would be marked up in the body tag, like this:

 <body bgcolor="#3366CC" background="images/bg.jpg"> 

Then, the transparent image would be placed somewhere in the bodymost likely in a table cell:

 <td><img src="/books/3/82/1/html/2/images/csszengarden.gif" width="266 " height="103" alt="CSS Zen Garden"></td> 

The results would be similar to what you see in the current design (FIGURE 5).

Figure 5. Layering a transparent image over a background, old-school style.

In the case of Deco, Trudel placed the main photographic image into the background of the #container element:

 #container {   background: url(bg.jpg) no-repeat scroll left top;          } 

And he placed the transparent header image in the #pageHeader h1 selector:

 #pageHeader h1 {   background: url(csszengarden.gif) no-repeat left top;         width: 620px;   height: 103px; } 

This results in the attractive header. While it looks the same as the combination of a graphic and background color in Figure 5, the process is considerably different.

Maximum Impact

That Deco uses fewer images to achieve a fresh look is admirable. Add to that the savvy placement of images, careful balance between graphic-based type and text-based type, and a simple but evenhanded use of images and text to address color, and you wind up with a design that is technically intelligent as well as visually impressive and freely creative.