Step 04: Home.html Template Makeover (Part Two)
From PikaDocs
| Table of contents |
Redesigning the Vertical Menu List
In this step we take a moment to catch our breath and focus on the Home Page vertical menu list. Here are two screenshots of what we're talking about: On the left is the Pika orginal, labeled as "Frequent Tasks" and on the right is the Claire design, labeled as "Core Tasks" ...
As discussed in Step 03, at the "macro" level, the redesign logic for the Home Page as a whole was to replace table elements with divs to control page layout and positioning. At the "micro" level, however, there was a more specific design logic to further simplify the markup within the "side-content" div (the first actual content div in the Claire home.html template), and make the XHTML structure more semantically (http://www.govis.org.nz/conference2005/presentations/joseph-lindsay-html/semantichtml.html) correct. To illustrate the difference, let's take a look at how the left-hand, vertical menu is structured in the original Pika template. Here is an excerpt, showing the structure for the "My Case List ... All Open Cases ... All Pending Cases" links illustrated above:
<p>
<img src="%%[base_url]%%/images/point.gif" alt="Arrow"/>
<a href="%%[base_url]%%/cases.php/">My Case List</a>
<br/>
<img src="%%[base_url]%%/images/point.gif" alt="Arrow"/>
<a href="%%[base_url]%%/cases.php/?closed_on_after=NULL&status=2">All Open Cases</a>
<br/>
<img src="%%[base_url]%%/images/point.gif" alt="Arrow"/>
<a href="%%[base_url]%%/cases.php/?status=1">All Pending Cases</a>
<br/>
</p>
And here's the simplified Claire version of the same set of menu links:
<ul> <li><a href="%%[base_url]%%/cases.php/">My Case List</a></li> <li><a href="%%[base_url]%%/cases.php/?closed_on_after=NULL&status=2">My Open Cases</a></li> <li><a href="%%[base_url]%%/cases.php/?status=1">My Pending Cases</a></li> </ul>
The difference here is that the same thing is accomplished in both, but in the Claire design the structural markup is semantically correct because it relies on an unordered list (ul (http://www.htmldog.com/reference/htmltags/ul/)) with multiple list items (li (http://www.htmldog.com/reference/htmltags/li/)) to create what is in fact a list (http://www.htmldog.com/guides/htmlbeginner/lists/), and does so without the need for using img (http://www.htmldog.com/reference/htmltags/img/) (image) tags to create the "point" effect or br (http://www.htmldog.com/reference/htmltags/br/) (line break) tags to control positioning. Instead, use of the ul tag inherently provides a list "style" that is controlled by the CSS code:
.side-content ul {
margin: 10px 0 10px 20px;
padding: 0;
list-style-type: square;
color: #00A585;
font-size: 100%;
}
.side-content ul a {
font-size: 90%;
}
Usability: Repurposing the Links
The other "micro" piece about the vertical menu design is not about structural markup at all, but rather about making the link selections more user friendly. Admittedly, the choices made in the Claire design are driven by the LSNC intake model. In any event, based on discussions with volume intake workers and our famed Sky Captain and the Start Page of Tomorrow (http://www.openpika.org/archives/2004/10/start_page_resu.html) survey of a few months ago, we concluded there was a need to cluster the links in a slightly different way, remove some of the existing links, and add a few custom links. Our "usability" logic is this:
- First cluster: "New" tasks, including the most common substantive work tasks = client intakes, MSR entries; AND time tasks = time slips, calendar entries and ticklers.
- The order of this cluster should parallel the order of the "global" counterparts on the horizontal navigation bar that appears on every Pika page.
- Second cluster: These are essentially the defaults for the same links in the original Pika, but with the title attributes (http://www.w3.org/TR/REC-html40/struct/global.html#h-7.4.3) changed to make it clearer to the user that clicking the link will generate a search result for "My" case list, etc.
- Third cluster: The new design retains the link to the "Reports" page but drops the "Preferences" and "Change Password" links because these are useful but uncommon tasks. This perception was confirmed by the Start Page survey (http://www.openpika.org/archives/2004/10/start_page_resu.html) in which little interest was expressed in having these links embedded on the Start Page.
- The Site Map link has been moved to the global horizontal navigation bar and positioned as the far-right button -- a very common and predictable web design location.
Next: Step 05: Home.html Template Makeover (Part Three), explaining how the "Message Board" content area is modified to support a blog feed and then restyled with CSS.
Related articles and files:
