Visual Effects

Reconstructing the Site Using Transitional Means

At this point, the document is ready to be reconstructed in a transitional sense. Style will be created in external and embedded style sheets along the way, but I placed all styles into the external style sheet. This decision was based on organization-I didn't require more than one style sheet. However, depending upon the size and scope of a website you might be creating styles for, using just one external style sheet might not be the best way to go. These styles will address, for this section, issues pertaining to the visual presentation and behaviors of the original document.

Note 

 A good way to develop is with a single file with an embedded style sheet, so you can do quick comparisons of style to markup; once you're done, you can take the style sheet and move it to an external file.

At this point, go ahead and add the link to the external style sheet you'll be creating in this portion of the chapter:

<link rel="stylesheet" type="text/css" href="uiconf-style workspace.css" />

This will go in the head portion of the document, of course.

Visualizing Structure

To visualize the structure of the page as you work on it, you can employ style to gain borders or colored fields that define the style areas.

This technique is much akin to adding a border to a table to see how that table works. Using CSS, you can assign border values to all kinds of aspects of the document, allowing you to effectively visualize the work you are doing, and where you are doing it.

Listing 7.1 shows a CSS style sheet that you can place in your working document to assist you with visualizing document elements with borders.

Listing 7.1:  WWW.   Temporary Style Sheet for Visualizing Element Borders

/*  styles to visualize with borders  */ table  {      border: 1px solid red;       margin: 2px; } th  {      border: 1px dashed red;       padding: 2px; } td   {      border: 1px dashed purple;       padding: 2px; } div  {      border: 1px dashed #888;       padding: 2px; } div div  {      border: 1px dotted #888; } div div div  {      border: 1px dashed #BBB; } div div div div  {      border: 1px dotted #BBB; } div div div div div  {      border: 1px dashed #DDD; } 

Figure 7.9 shows the current document with these temporary styles applied. Using borders is a good approach for visualization, but it can modify your layout somewhat.

Figure 7.9: Applying temporary styles to visualize the layout effectively

As an alternative, you can try using background colors to create fields for visualizing page elements (see Listing 7.2).

Listing 7.2:  WWW.  Temporary Field Styles for Visualizing Page Elements

/*  styles to visualize with backgrounds  */ table  {      background: red;       margin: 2px; } th  {      background: #FCC;       padding: 2px; } td  {      background: #FCF;       padding: 2px; } div  {      background: #CBC;       padding: 2px; } div div  {      background: #BAB; } div div div  {      background: #A9A; } div div div div  {      background: #989; } div div div div div  {      background: #878; } div div div div div div  {      border: 1px dotted black; }

Figure 7.10 shows the effects. Backgrounds won't affect layout as borders will, but depending upon your color choices, it can be jarring.

Figure 7.10: Using backgrounds to denote areas of the page

For fun, you can use both, as shown in Figure 7.11.

Figure 7.11: Combining both temporary style sheets for border and field shading

How you use this method of visualizing layout is up to you-I find it helpful, especially when working with complex tables or pure CSS layout because it's harder for me to visualize the structure being created or modified in those instances.

Note 

 You'll notice that in these style examples, the shorthand notation for hexadecimal color values is used. This is a perfectly acceptable means of writing hex colors. Just remember that the technique is based on doubles only, so 878 is shorthand for 887788, and so on. You cannot shorthand hex values that are not represented by doubles in this way. All web-safe colors are doubles, so all web-safe colors can be written in shorthand, as can any doubled hex value outside of the safe palette. A mixed hexadecimal value, such as cc203c, cannot be shortened. See Appendix A for more details on color values.

Choosing Class and ID Names

To begin applying styles to the document, it's important to begin creating classes and IDs (see Chapter 2, 'Learning CSS Theory').

At this point in the reconstruction process, class names are created for all things that have common aspects including:

• External links

• Captioned pictures

IDs will be applied to unique elements, including:

• Navigation sidebars

• Masthead

• Footer

In general, classes are more commonly used because they were a little better supported in old browsers, but IDs are quite safe, and woefully underused.

Most of this document will use IDs because those in combination with regular element names will handle almost all the document's needs.

Table 7.1 shows the IDs created to manage main sections of the page.

Table 7.1: IDs and Document Portions

Document	Portion #ID
Top masthead	#masthead
Main table	#main
Left-side navigation	#nav
Current page link	#current
Main content	#content
Expert List	#expertlist
First	#first
Hosted	#hosted
Bottom Links	#bottomlinks
Credits	#credits

Here's a snippet showing the main, nav, and current IDs in use:

<table border="0" cellspacing="0" cellpadding="0" > <tr> <td > <ul> <li ><a href="index.html">UI7 East Home</a></li> 

Global Styling

In this section, the original document is examined, and certain aspects of the document are organized by common features, specifically:

• Document width (comparing original to newly re-engineered)

• Setting vertical alignment of table cells

• Reducing the page background

• Styling for fonts

• Styling for links

• Styling for image borders

To style the body:

body  {      background: url(body-bg.gif); margin: 0; padding: 0; }

This CSS provides the URL of the background graphic and sets the margins originally intended for the page. These margins were set using proprietary attributes. Those are long gone and are replaced here with CSS.

To set the width on the tables, which are the same width, incorporate this rule within your style sheet:

#main, #masthead  {      width: 800px; }

To regain a background of white for the main content area, style it as follows:

#main  {      background: white; }

Note 

 Note that instead of the 56KB background image used to create the white background in the original design, the background graphic was redesigned as a repeating 143-byte image, and the white background is set on the relevant table cell itself.

Finally, with one CSS rule, all table cells within the #main section will be set to a vertical alignment of top.

#main td  {      vertical-align: top; } 

This last rule alone demonstrates how efficient styling with CSS can be. Instead of 25 or more table cells containing the align="top" attribute and value, all of that markup is removed from the document and replaced with one simple rule within the CSS.

Styling the Left Navigation Bar

If you find yourself trying to recreate a page in this way, one of the decisions you will undoubtedly have to make is whether or not precise recreation of the look is really necessary. Working with style and structure does change the approach designers and developers have to take. In many instances, precision control is lost with CSS, but a richer variety of options and better means of managing documents emerges.

In this case, you can't recreate the exact original look, but you can use intelligent markup and CSS to properly structure and style the left navigation bar.

The issues to be managed include the following:

• Replace image and JavaScript link effects with regular text links

• Set a width and background color

• Boldface the links; normalize the paragraphs

• Kill off paragraph margins

• Note line height's effect on spacing

• Remember to leave some indentation room

The resulting CSS is in Listing 7.3.

Listing 7.3:  WWW.   Styling the Left Navigation Bar

#nav  {      width: 125px;       padding: 16px 1px 3px;       background: #F4D532; } #nav ul  {      margin: 0;       padding: 0 0 0 15px; } #nav li  {      margin: 22px 0 0;       text-indent: -15px;      font: bold 11px/12px Arial, Verdana, sans-serif;       list-style-type: none;  } #nav li p  {      margin: 0;       font: 11px "Times New Roman", Georgia, Garamond;      text-indent: 0; } 

If you examine the nav ID, you'll notice that an explicit width in pixels is set for the navigation bar itself. A percentage width would make more sense for flexible design-adjustments are harder if everything's in pixels. Similarly, the vertical separations are set in pixels to emulate the spacing created by the long-gone spacer GIFs.

Figure 7.12 shows the progress on the document design, with emphasis on the navigation bar.

Figure 7.12: The left navigation bar (A) is now effectively styled.

Tip 

 You'll notice that 'Times New Roman' appears with quotations, whereas single-name fonts do not (Georgia, Garamond, etc.). If there is ever a space between words in a font name, use quotation marks around the full name.

Bullet Time

While CSS makes it easy to style bullets, the bullets are turned off in this case. Instead, images will be used, but these will specifically be dropped into the link backgrounds. Using images rather than bullets, you can recreate the hover effects in the original document.

Some padding is required to accommodate the images, and the creation of a hanging indent will push the images into their proper place. Then the hover and link styles can be added to manage the rollover effects.

Listing 7.4 shows the CSS that manages these concerns.

Listing 7.4:  WWW.   Managing Bullets and Hover Effects

#nav li a  {      color: black;       padding-left: 15px;       word-spacing: -1px;      background: #F4D532 url(nav-bull.gif) 3px 50% no-       repeat; } #nav #current a, #nav a:hover  {      color: #CC203C;       background-image: url(nav-bull-cur.gif); }

Figure 7.13 shows a link within this navigation bar, and Figure 7.14 shows the link as the mouse passes over it.

Figure 7.13: A link within the navigation bar

Figure 7.14: A link as the mouse passes over it

One of the advantages to getting rid of pure images to do these rollovers is that text is easier to maintain. Let's say you wanted to later change the rollover color. Instead of having to generate more graphics, you need only change the hover color within the style sheet, and voila! The color changes. What's more, you reduce page overhead and interpretation time because there's no JavaScript involved-the style is created using CSS.

Styling the Bulleted List in the Body

There's a bulleted list in the main section. To preserve the look, images will be used for the bullets, but no link effects are required. Some of the necessary features for styling this list include the following:

• Providing a default bullet style should the image not load

• Ensuring padding and vertical space for the bullet image

• Properly styling the font within the list

Listing 7.5 shows the required style to accomplish these goals.

Listing 7.5: Styling Bulleted Lists in the Main Section of the Document

#content ul  {      list-style: square url(red-dot.gif);      margin: 0 0 1.25em; padding: 0 10px; } #content ul li  {      margin: 10px 0;      font: 11px Arial, Helvetica, Verdana, sans-serif; }

At this point, styling the rest of the content in the main area is needed.

Note 

 Because there's no way to vertically align a bullet image to the text line in the list item, a few extra pixels at the top of the image might be necessary to properly align the bullet with the text.

Styling the Content

To style the main content area, some decisions have to be made. First, the specific width of the content area can be set, although it's not entirely necessary. With a fixed pixel option, the page isn't as fluid as if the width were left unset, which helps keep more to the original look of the table-based design. Using no specified width, you also may lose some of the integrity of the page's design. As with most things in web design, compromise is necessary, so in this case I decided to fix the main content width.

Because padding is necessary to recreate the gutters originally managed by spacer GIFs, padding will be important to add to retain the general look:

#content  {      padding: 25px;       width: 460px; }

Paragraph features including font size, font faces, and paragraph margins are also set:

#content p  {      font: 12px Arial, Helvetica, Verdana, sans-serif;      margin: 1.25em 0; }

Headers level 1 and 2 are styled with font features and margins:

h1  {      font: bold 34px/33px sans-serif;       word-spacing: -2px;       letter-spacing: 0.4px;      margin: 0.1em 0 0; } h2  {      font: bold 18px sans-serif;       word-spacing: 1px;       margin: 2em 0 0; } 

And finally, you must set features for all headings, including color and font family:

h1, h2, h3, h4, h5, h6  {      color: #CC203C;      font-family: Arial, Helvetica, Verdana, sans-serif; }

Note 

 The spacer GIFs that held open the vertical space between 'columns' is recreated by applying padding to the #content ID (applied to the table cell itself). Padding, as with many aspects of CSS, is not well supported in Netscape 4. If you're creating websites using CSS for Netscape 4 and still want to use aspects of style, you may need to use workarounds. See Chapter 6, "Working with CSS Layouts."

In this portion of the style sheet, you're going to create the styles for all links. Naturally, the specialty links created earlier for the left navigation will apply to those areas, but these links will be the default for the entire document unless you specify another style.

The link colors were taken from the body element in the original document. Note that the visited and link color are the same:

a:link  {      color: #4253B2; } a:visited  {      color: #4253B2; } a:hover  {      color: #CC203C; }

These rules technically apply to every link in the entire document, even those that are linked images. The specificity of the rules for the left navigation bar is higher than for these rules, so those rules override these.

Tip 

 Remember, to work properly, link pseudo selectors must appear in a specific order: link, visited, focus, hover, active (LVFHA). While you can leave a specific pseudo selector out of the order, you should still maintain the proper order, or your links will most likely not work in the manner you expect.

Styling Specialty Areas

The original document had several classes already defined, including .subhead1, regbasetext, and regsubtext. To make things a little easier, keep these classes and style them appropriately, in this case applying the styles only within the content area.

Listing 7.6 shows the class styles created for various text within the content.

Listing 7.6:  WWW.   Class Styles for the Content Section

#content .subhead1  {      font-weight: 800;       font-style: italic;       margin-top: 2em; } #content .regbasetext  {      font: bold 22px "Times New Roman", Georgia, Garamond,          serif;      text-decoration: none;       text-align: center;       margin-bottom: 0; } #content .regsubtext  {      font-size: 11px;       text-align: center;       margin-top: 0; }

Figure 7.15 shows the content area styles, minus the styles you'll be creating for the expert speakers list. The speaker list is very long at this point because it remains unstyled.

Figure 7.15: Here, the majority of the content area has been restyled, with the primary exception of the speaker list (A).

Recreating the Expert Speakers List

Originally created using images and JavaScript, the expert speakers list will, in this case, be recreated in text with no JavaScript to manage the rollover effects.

There is one disadvantage: text on images can be better controlled in terms of anti-aliasing. Because a small font is used, some readability might be lost when converting this section to text. However, the advantages are many: reduced page weight, a page that's easier to modify, and the removal of cumbersome JavaScript within the document.

You'll recall that an ID was created earlier for this section, called #expertlist. The list is within its own table cell, but to control it more effectively and style it with ease, wrapping it in a div element sets it off as a specific division and gives you more power.

First, the division itself will be styled with a colored border, margins, and a specific border width for the bottom border, as follows:

#expertlist div  {      border: 1px solid #467CC2;       border-bottom-width: 10px;      margin: 40px 40px 0 0; }

Then, the h3 is styled to create the title for the box:

#expertlist h3  {      margin: 0;       padding: 10px 1px 4px;       background: #467CC2;      color: white;       font-size: 14px;       text-align: center; }

In this case, it's better to not style the table cell directly, as a border on the table cell could throw off the width calculations of the entire table. Using a div within the table cell is somewhat like nested tables, except with style, you don't have to nest two tables just to get a border-the border is created with CSS.

Setting Up the Links

Upon examination of the expert speaker list, it's easy to see that each link has its own paragraph. This is fine; in fact, keeping this intact makes it easier to address concerns with consistency. But there's spacing and indentation within paragraphs, and the separators between each-originally images-will now be styled using CSS.

If you examine Figure 7.16, you'll notice that the top of the list is a little funky because it has the white space around its border (7.16A).

Figure 7.16: The top of the speaker list

This can be taken care of using an ID to remove the borders from the first separator, which will make it flush:

#expertlist p#first  {      border-width: 0; } 

Now, the paragraphs themselves will be styled for fonts, margins, padding, top border, color, and letter spacing:

#expertlist p  {      font: 9px Verdana, sans-serif; margin: 0 3px;      padding: 1em 2px;       border-top: 2px solid  #467CC2;       letter-spacing: -1px;      color: #666; }

The strong element, already in the text, can be used as a selector to create more specific style:

#expertlist strong  {      font: bold 13px Times, "Times New Roman", serif;      text-decoration: underline;       color: #444;       letter-spacing: 0; }

Finally, the color for the link is set, along with the removal of underlines using the text-decoration property with a value of none:

#expertlist a  {      color: #666;       text-decoration: none; } 

The recreated expert speaker list can be seen in Figure 7.17.

Figure 7.17: The expert list is recreated with some compromise to text quality and size.

Using CSS instead of images for this section has its limitations: there's no anti-aliasing, there's unpredictable line-wrapping, and there are definite limits on how small in text size you can go. On the other hand, the text is far easier to resize now, both for you the designer, when you use the style sheet to resize the document, and for the end user, who can resize the text via their browser.

Adding the Hover Effect

Creating the hover effect is easy using the a:hover pseudo selector. First, the base color of the links was set as #666 in the previous section.

Next, add the hover style:

#expertlist a:hover  {      color: #375E8F; }

Interestingly, as you pass your mouse over the linked text (see Figure 7.18), you'll notice that the speaker names do not change color. This behavior mimics the original and is the result of the strong element not inheriting the style because it already has a color value assigned to it directly via the #expertlist strong rule.

Figure 7.18: The speaker name stays the same color during hover, despite the fact that it is part of the link.

Figure 7.19 shows the document tree for this division, showing which styles are inherited and where they are blocked at the level of strong.

Figure 7.19: The document tree for the #expertlist section

Fixing the Footer

At this point, the look of the page has really come a long way toward the original. However, the footer section is missing styles to wrap up this portion of the reconstruction (see Figure 7.20).

Figure 7.20: The footer remains unstlyed, despite the look of the rest of the document.

The following tasks need to be performed to reconstruct the footer:

• Add background colors where needed

• Add text styles for the links

• Pad the credits table cell to produce some extra space at the bottom of the design, smoothing the design out

In this case, the style will be applied to the table cell itself (rather than a division, as demonstrated with the expert speakers list). Listing 7.7 shows the CSS rules to add to the style sheet.

Listing 7.7:  WWW.   Styling the Footer

#hosted  {      background: #F4D532; } #bottomlinks  {      font: 12px Arial, Helvetica, Verdana, sans-serif;      text-align: center;       padding-top: 1em;       color: #4253B2; } #credits  {      font: 500 10px Arial, Helvetica, Verdana, sans-serif;      word-spacing: 1px;       padding: 10px 2px 50px 10px;       background: #F4D532; } 

Figure 7.21 shows the newly styled footer, which you can compare with the unstyled version in Figure 7.20.

Figure 7.21: The styled footer

Compare and Contrast

At this point, the document has been re-engineered using simple tables for layout and lots of style to recreate the visual look (Figure 7.22).

Figure 7.22: The completed, simplified table and CSS design

Here are some comparisons regarding this approach:

• With the styles, the page weight is about 13KB.

• Changes are a snap. Want to make the expert speaker links purple on gold with an orange hover effect? Just change the style sheet-there's no need to redo numerous graphics and scripting.

• The markup itself is much more simple to read and therefore to edit.

• If you view the page using a CSS-browser without style sheet support, the un-styled view is perhaps not as visually nice, but is still attractive and readable (unstyled, the page looks exactly as it does in Figure 7.7), making the content at least backward-compatible.

Altogether, the page and its dependencies have gone from its original138KB to 57KB total; even without considering the images, it went from 32KB to 13KB in markup reduction alone.

A Case for Bandwidth Savings

Assuming that this page gets 100,000 views a month, the bandwidth savings is 1.9GB for that page; on a site with 100 pages, that's a savings of 190GB per month. Even on small sites, bandwidth of this nature adds up; a page that gets 5000 visitors a month that's reduced by 10KB will save 50MB per month, and that's for that single page! If you're paying for bandwidth by volume, this can significantly affect the total cost, depending upon what you're paying and how active your site is.

Of course, benefits of doing a site this way go far beyond the savings in kilobytes, which saves you bandwidth and your site visitors load time. With the flexibility that CSS provides, elements can be quickly and conveniently changed in almost any way, using a compact notation that makes sense. When you have one style sheet (or a set of style sheets) controlling an entire website, site-wide changes become a breeze.

Note 

 The font styling in this approach was created to demonstrate each important step. Now that the styling of the page is done, it's easy to see that most pieces of the layout use the same font families, so you can reduce the number of times the font is set throughout the style sheet. For those cases where the fonts don't match the 'global' styles, just leave the styles as they are now, and those will override the inherited styles from the 'global' rule.