Step 07: Prospective Client (Part Two)
From PikaDocs
| Table of contents |
Redesigning the Form Elements
In the prior step we broke down the functional and structural elements of the intake_contact_list.html template. In this and following steps, we retain all the basic functionality of the page but build out with a different structural markup, and move all the presentational elements out of the markup to the external stylesheet.
Again, as detailed in Step 06, the original template structure is essentially a large "wrapper" table containing three nested tables. Here we abandon table structures for the wrapper, side-content containers or otherwise to control page layout or positioning. In the Claire version of the new intake contact list.html template, much like the rebuilt home.html template, we rely on divs to provide the "content-container" wrapper for the page elements and to "contain" the side-content elements, which here consist of the form input fields and submit buttons on the left.
Using the new markup, here's where we're going with the makeover of the left-side content area of the Prospective Client page:
To more easily visualize the page structure in the new intake_contact_list.html template, here is the same page with the content-container "wrapper" div marked with a 2px dashed blue line:
Within that wrapper, in source order within the template, there are three divs: the side-content div, the side-form div and the side-form-submit div, each similarly outlined here with 1px dashed blue line:
Explaining the New Submit Buttons
Although minor changes have otherwise been made to the code for the various form elements on this page, including how they are each "labeled," the form fields pretty much mirror the corresponding code in the original Pika template.
The one significant modification you're likely to notice is the presence of not one but two submit buttons, labeled here as "Search Records" and "Browse Contacts." This is a code modification Pika Software made at the request of LSNC, to conform to search options requested by intake paralegals in the program, who expressed the need to more efficiently search in two different ways. Hover the mouse over each button for a tooltip offering a general description of what it does:
The "Search Records" submit button triggers a search of all contact records for a set of phonetic and literal last name matches, as well as a set of Social Security number matches, if any. This search returns only records that match the relevant criteria. For example, if searching for our good buddy Dave "Kuchler," this submit button will only return matches on that name or the Social Security number, if provided. If no matching records exist in the contacts or address book, nothing is returned.
In contrast, the "Browse Contacts" search functions differently. Once a search is submitted, it flips open the contacts or address book to the page that contains a match of the last name. If the name is not found, it jumps to the point where the name would be in alphabetical order.
Thus, a "Browse Contacts" search here will always give a result of some kind, while the "Search Records" search may or may not, depending on whether a phonetic or literal match exist in the database. Again, using "Kuchler" as our search example, if there is no "Kuchler" in the contacts or address book, "Search Records" returns nothing. But using "Browse Contacts" will open the contacts or address book to the closest matching page record, so you may see "Kilmartin", "Kruse", "Kuhn" and so on, even if there is no "Kuchler" in the database.
New Style Code
One specific example of how one separates presentation from structure is how external style selectors are used to control the "presentation" of input fields. For example, in the original Pika template, the input field for the telephone number relies on an embedded style attribute to declare its width:
<input type="text" name="phone" ... style="width:8em;" />
In contrast, the Claire design moves this type of element presentation over to the external stylesheet, to control not only the width property of different input fields but also specific font and margin properties:
#side-form input {
display: block;
width: 140px;
margin-bottom: 4px;
font-size: 130%;
}
input#suffix,
input#dob,
input#ssn {
width: 91px;
}
input#area-code {
display: inline;
width: 24px;
}
input#phone {
display: inline;
width: 58px;
margin-left: 2px;
}
All presentational elements in the original template have now been moved to the Claire CSS code. There you can view the entire style sheet which now includes the presentational elements specific to this new template, as follows:
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* INTAKE_CONTACT_LIST.HTML template */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#side-intake {
margin-top: 10px;
padding-left: 4px;
font-weight: bold;
font-size: 85%;
color: gray;
}
* html #side-intake {
margin-top: -10px;
}
#side-intake input {
display: block;
width: 140px;
margin-bottom: 4px;
font-size: 130%;
}
input#suffix,
input#dob,
input#ssn {
width: 91px;
}
input#area-code {
display: inline;
width: 24px;
}
input#phone {
display: inline;
width: 58px;
margin-left: 2px;
}
#side-intake-submit {
margin-top: 10px;
}
#side-intake-submit input.initial-intake,
#side-intake-submit input.button-hover {
display: block;
width: 70%;
margin-left: 4px;
margin-bottom: 6px;
}
You can view a 100% screenshot (http://www.openpika.org/beta_gallery/beta_prospective_initial_screen.html) of the rebuilt and restyled Prospective Client initial screen at the Project Claire Design Gallery (http://www.openpika.org/gallery.html).
Next: Step 08: Prospective Client (Part Three), where we take on the biggest redesign challenge so far: Rebuilding the table elements to contain the search results.
Related articles and files:
