CSS and Visual Design

Preparing for Reconstruction

Before the reconstruction specific to CSS can begin, a few more steps can be taken to improve the design. The first step is to examine the remaining table and re-engineer it to be as simple as possible. The rationale for this is to keep a basic table for layout in order to address cross-browser concerns.

As you are already aware, layout using only CSS is going to be problematic in Netscape 4 and any other browser with no or partial CSS support. Leaving this main table in allows for the primary structure to remain intact, but the majority of presentation will be shifted to CSS. This is considered a transitional technique, useful when you must provide for a wide audience.

In this step, the following occurs:

  • You'll examine the nested tables

  • You'll redesign and optimize graphics for weight concerns as well as easier layout

  • You'll re-engineer the primary table layouts and removed nests

 WWW.  The resulting markup (available on the website) demonstrates some of the visual layout returning to the page (see Figure 7.7).

click to expand
Figure 7.7: The re-engineered layout using simple tables with no nests

Figure 7.8 shows the page with table borders turned on. Compare this figure with Figure 7.2 to see how streamlined this approach is. There are two tables, one for the masthead (7.8A), and one for the main layout (7.8B). These tables are so basic, it seems confusing in contrast to the original design. The use of two simple tables with no nests at all provide you with a structural container to which you can further add CSS to deal with presentational details. The red borders demonstrate the table, and the green borders show the table cells (7.8C). Quite a difference from the original, indeed!

click to expand
Figure 7.8: Examine the re-engineered tables in this screenshot. The layout is incredibly simplistic compared to the original.

Conversion to XHTML 1.1

Because part of the goal is to bring the document up to date and make it as strict as possible, I took the re-engineered document and converted it from HTML 4.0 to XHTML 1.1. To accomplish this, I did the following:

  • Replaced the HTML 4.0 DOCTYPE declaration with the XHTML 1.1 DOCTYPE

  • Converted all syntax to XHTML

  • Made sure all elements and attribute names appeared in lowercase

  • Checked that all attribute values are quoted

  • Checked for any minimized attributes and expanded them where necessary

Note 

 See Chapter 1 for more information on XHTML syntax.

Once completed, I validated the document as XHTML 1.1.

Added Accessibility Features

Before beginning to style the document I also wanted to ensure that some basic accessibility issues were handled. The original document was interesting in this regard: it had alt attributes only in the spacer images. Other images had no alt attributes or descriptive text. Furthermore, no other accessibility features had been added to the document.

I added the following:

  • Table summaries. These summaries assist those using screen readers or other devices to better understand the content and context of the two tables in the document:

    <table border="0" cellspacing="0" cellpadding="0"  summary="conference masthead: user interface 7 east">

    and:

    <table border="0" cellspacing="0" cellpadding="0"  summary="main layout table">
  • alt attribute descriptions to all images, as in these examples:

    <img src="/books/1/266/1/html/2/http://www.uiconf.com/uie-7/images-uie/logo-01.gif" alt="user interface conference logo" height="150" width="129" />

    and:

    <img src="/books/1/266/1/html/2/http://www.uiconf.com/uie-7/images-uie/uie-hostedby-logo.gif"  alt="hosted by user interface engineering" height="80" width="129" />

  • Titles in anchors:

      <a href="http://www.uiconf.com/uie-7/conference_program.htm" title="conference program">Conference Program</a>

While additional accessibility features could be added to this document, these features easily and quickly address the most common concerns.



Cascading Style Sheets(c) The Designer's Edge
ASP.NET 2.0 Illustrated
ISBN: 0321418344
EAN: 2147483647
Year: 2005
Pages: 86

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net