Step 08: Prospective Client (Part Three)
From PikaDocs
Revenge of the Tables!
Regrettably, we must admit to posturing a lot about tables (http://www.w3.org/TR/REC-html40/struct/tables.html). Long ago we had a conversion experience and bought into the web evangelism about avoiding tables (http://www.davespicks.com/essays/notables.html) for layout and positioning. And, yeah baby, believe it: position is everything (http://www.positioniseverything.net/)!
| Table of contents |
Tables: In Perspective
But, of course, that's not true. Not really. Position don't mean squat when you need to display data. Yes, it's time to bring on the tables (http://www.456bereastreet.com/archive/200410/bring_on_the_tables/)!
And that's just what we're going to do here in Step 08. In Step 07 we got the search forms in order on the Prospective Client page and built out the "side-form" content using divs. But now we need to display the search results. Can you say tabular data (http://www.htmldog.com/reference/htmltags/table/)? We're talking tables and making sure we use semantically correct XHTML table markup (http://www.communitymx.com/content/article.cfm?cid=0BEA6). Here's we where we're going with it all, with a screenshot of search results taken from within a Firefox viewport:
As detailed in Step 06, the underlying structure of the original Pika intake_contact_list.html template is one big table with three nested tables used both to position the page elements and contain the search results. Here, we remove all presentation attributes from that template structure and limit use of tables solely for the purpose of holding data.
To better see the structural difference, compare this screenshot (http://pikasoftware.net/docs/index.php/Image:Contact_results.jpg) of the original template built using four tables that, one way or another contain everything in the content area of the page, and the Claire version of the same template with two tables (outlined below with dashed red lines) that do nothing structurally except contain data results, i.e., the first table showing results of a "Browse Contacts" search and a second, smaller table containing numbered page links for moving through the Contacts data:
Everything else on the page is contained within divs or p (paragraph) elements and the layout and positioning is controlled 100% with the external stylesheet, even the positioning and presentational characteristics of the table. In Step 07 we explained how the "side-content" form elements were built and styled. In this step we focus on the "main-content" area of the page, i.e., the "Search Results," which structurally includes a few h2 and p elements but, for the most part, is made up of one or two non-nested tables, depending on the type of data search results that are generated.
The New Table Markup
The new table markup is but one (albeit the most important) of several structural elements within the "main-content" wrapper div. The updated version of the intake_contact_list.html template as a whole reveals all these structural elements. Let's walk through them in their source order.
The "main-content" div functions as a "wrapper" for everything in the larger content area of the page. The wrapper is a critical structural element because it sets the basic positioning of the larger content area for all Pika pages:
<!-- Main-content DIV -->
<div class="main-content"> <!-- "Wrapper" for "main content" area -->
<h2>Search Results</h2>
...
</div> <!-- Main-content closing DIV -->
In the Claire design, the "main-content" div is positioned using external CSS code:
.main-content {
float: left;
position: relative;
width: 566px;
margin-left: 10px;
padding: 10px 10px 20px 0;
}
These styles define the width (566px) of the "main-content" div, float it left against the "side-content" div, while maintaining a 10px left margin to provide visual space between the two divs. Thus, the wrapper provides a defined, positioned element against which all the structural elements embedded within it know their boundaries.
The initial elements within this wrapper are straightforward: an h2 "Search Results" heading, followed by a custom p (paragraph) ("The following is a list of...."). The other elements are embedded Pika field codes, including the search_list phonetic match list and the ab_list address book/contacts match list:
<h2>Search Results</h2>
%%[begin:intake_text]%%
<p class="following">
The following is a list of existing names in the Pika system. If <strong>%%[last_name]%%</strong> appears on this list, click the button below the name to view the <strong>Contact</strong>, begin a <strong>New Intake</strong> or create a <strong>New Case</strong> record.
</p>
%%[end:intake_text]%%
%%[search_list]%% <!-- Generates content for first TABLE with phonetic matches -->
%%[ab_list]%% <!-- Generates content for second TABLE with address book matches -->
%%[begin:flex_header]%%
The "Search Results" Table
And, finally, there is the table element. Again, with the goal being to move all presentational characteristics to the external stylesheet, let's first look at the table opening tag in the original template, which relies on tag-embedded attributes to control the table's cellpadding, cellspacing and width:
<table cellpadding="3" cellspacing="0" summary="" width="100%">
True, these are valid table attributes but, still, they are purely presentational and so CSS should be used (http://www.htmldog.com/reference/htmltags/table/) instead. With the advent of current Firefox 1.x and IE 6.x browsers viewing a web page with a well-stated DOCTYPE, it is no longer necessary to embed these table attributes, which are in reality just presentational characteristics and should be moved to the stylesheet. Here's the Claire table opening tag:
<table class="intake-search-results" summary="Prospective client search results">
In the Claire design, the table width and the "zero'd out" cellspacing, among other characteristics, are now controlled as a styled CSS selector (http://css.maxdesign.com.au/selectutorial/), including the border-collapse (http://www.htmldog.com/reference/cssproperties/border-collapse/) property which invokes the "collapsing borders" model, such that cells share adjacent borders - essentially the same function served by the cellspacing="0" attribute:
.intake-search-results {
width: 100%;
border-collapse: collapse;
}
The width: 100% property here assures that the table expands to the full width of the "main-content" div wrapper that surrounds it. No further positioning of the table is required. We have also removed all other embedded presentational attributes, such as the occasional valign="top" attribute embedded in various tr and td tags. Here's the table-specific markup, with added comments, and semantically named (http://www.informit.com/articles/printerfriendly.asp?p=170514) id and class selectors (i.e., named to describe function rather than presentation, e.g., "intake-search-results") to control the styles of the corresponding elements externally:
<!-- "Search-results" TABLE structure for "search_list" and "ab_list" -->
<table class="intake-search-results" summary="Prospective client search results">
<tr> <!-- First "row" = headings -->
<th> </th>
<th>Name</th>
<th>Phone</th>
<th>Birth Date</th>
<th>SSN</th>
<th class="last">City</th>
</tr>
%%[end:flex_header]%%
%%[begin:flex_row]%%
<tr class="row%%[row_class]%%"> <!-- Second "row" = "zebra" rows of returned results -->
<td>
<img class="marker" src="%%[base_url]%%/images/square_point_large.gif" width="%%[arrow_img]%%" height="%%[arrow_img]%%" alt="Search marker" />
</td>
<td>
<a href="%%[base_url]%%/contact.php?contact_id=%%[contact_id]%%">%%[client_name]%%</a>
</td>
<td>
%%[client_phone]%% %%[phone_notes]%%
</td>
<td>
%%[birth_date]%%
</td>
<td>
%%[ssn]%%
</td>
<td class="last">
%%[city]%%
</td>
</tr>
<tr class="row%%[row_class]%%"> <!-- Third "row" = view options + [role] -->
<td class="row-bottom"> </td> <!-- "Empty" first cell in each row -->
<td class="row-bottom" colspan="4"> <!-- Options for viewing records + Help -->
<a class="options first-option" href='%%[base_url]%%/contacts.php/%%[contact_id]%%/'>View Contact</a>
<a class="options" href='%%[base_url]%%/ops/new_intake.php?thiscon=%%[contact_id]%%'>New Intake</a>
<a class="options" href='%%[base_url]%%/ops/new_case.php?thiscon=%%[contact_id]%%'>New Case</a>
<a class="options" href="javascript:popUp('%%[base_url]%%/helpdocs/pika_help.html')" title="Click for Help about these options">?</a>
</td>
<td class="row-bottom last">
%%[role]%%
</td>
</tr>
%%[end:flex_row]%%
%%[begin:flex_footer]%%
</table> <!-- "Search-results" closing TABLE -->
In addition to the changes made in the underlying structural elements, there are several custom elements worth noting here. We've substituted a different image (square_point_large.gif) for the "pointer" used in the original template. We've also added a set of "option" buttons as a usability feature, made at the request of our intake paralegals, to provide a direct way to invoke either the selected contacts record, create a new intake using that same person's information, or directly create a new record using that same person's information. To the right of those three options is a "?" button link that pops up a help window, to help newbies understand these options:
Tweaking the pikaMisc.php code
There are two lines of code in the pikaMisc.php that need to be ever so slightly edited to change how the h3 "Phonetic matches" and "Contact matches" headings appear on the redesigned page:
No biggie. At lines 951 of the pikaMisc.php file, we edited the reference "Phonetic Matches" to read ":: Phonetic matches" -
$content_t['search_list'] .= "<h3>:: Phonetic matches</h3>\n" . $phonetic_table->draw();
A comparable change was made at line 956:
$content_t['search_list'] .= "<h3>:: Phonetic matches</h3>\n<p><em>No matches found.</em></p>\n";
In the original template, when doing a "Browse Names"-only search of the contact records, this same h3 heading is called "Address Book Matches." We made similar changes to this code as well, to simplify and standardize the references to ":: Contact matches." This was done at line 1050 ...
$content_t['ab_list'] .= "<h3>:: Contact matches</h3>\n" . $contacts_table->draw();
... and at line 1055:
$content_t['ab_list'] .= "<h3>:: Contact matches</h3>\n<p><em>No matches found.</em></p>\n";
Styling the Search Results Table
As always, the updated Claire CSS code page contains all the style changes made up to this point in these tutorials. Here are the CSS changes specific to the newly redesigned table and other elements in the "main-content" area:
/* Intake Search Results TABLE */
p.following {
margin: 8px 10px 0 0;
font-size: 85%;
}
/* Heading for "Phonetic" and "Contact" matches */
h3 {
margin: 10px 0;
font-size: 130%;
font-family: georgia, serif;
}
.intake-search-results {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
font-size: 85%;
}
.intake-search-results th {
padding: 1px 0 3px 0;
color: white;
background-color: #B5C6A5;
border: 1px solid #CAA8B6;
border-right: 1px solid #B5C6A5;
border-bottom: 1px solid #7F786A;
}
th.last {
border-right: 1px solid #7F786A;
}
.intake-search-results td {
padding: 4px 0 6px 0;
}
img.marker {
margin: 3px 0 0 3px;
}
.row1 {
background-color: transparent;
}
.row2 {
background-color: #F7F2EA;
}
.row2 td {
border: 1px solid silver;
border-right: 1px solid #F7F2EA;
border-bottom: 1px solid #F7F2EA;
}
.row2 td.last {
border-right: 1px solid #848982;
}
.row2 td.row-bottom {
border-bottom: 1px solid #848982;
}
.row1 a:link.options,
.row1 a:visited.options {
border: 1px solid silver;
background-color: white;
color: black;
padding: 1px 3px 2px 3px;
text-decoration: none;
font-size: 75%;
font-weight: bold;
}
.row1 a:hover.options,
.row1 a:active.options {
background-color: #F7F7F7;
color: blue;
}
.row2 a:link.options,
.row2 a:visited.options {
border: 1px solid silver;
background-color: #F0E7D7;
color: black;
padding: 1px 3px 2px 3px;
text-decoration: none;
font-size: 75%;
font-weight: bold;
}
.row2 a:hover.options,
.row2 a:active.options {
background-color: #F7F7F7;
color: blue;
}
.first-option {
margin-left: 12em;
}
h2#create {
margin-top: 20px;
}
input#continue {
float: left;
}
You can view a 100% Firefox screenshot (http://www.openpika.org/beta_gallery/beta_prospective_search_results.html) of the finished page at the Project Claire Design Gallery (http://www.openpika.org/gallery.html).
Next: Step 09: Prospective Client (Part Four), where we add the final touches to the page with added JavaScript code to validate the form fields and trick out our "Help" pop-up window.
Related articles and files:
- Project Claire: intake contact list.html
- Project Claire: CSS Code
- Project Claire: Image Files (http://www.openpika.org/images_claire/claire_images.zip)
