Step 14: Site Map
From PikaDocs
| Table of contents |
In earlier articles we have deconstructed the Site Map page, and explained how to change the original Pika markup, and add a splash of CSS to create multiple-column lists of Site Map links. We won't repeat those lessons here, other than to refer you to the Claire beta version of the contents_form.html subtemplate with our latest iteration of that same multi-column list markup:
Full-size screen shots of the Site Map page within a Firefox (http://www.openpika.org/beta_gallery/beta_site_map_firefox.html) and Internet Explorer (http://www.openpika.org/beta_gallery/beta_site_map_ie.html) viewport can be viewed at the Project Claire Design Gallery (http://www.openpika.org/gallery.html).
In this step, we will instead focus on a few select details about the redesign of the Site Map page not addressed in those earlier articles, with considerable emphasis on how the CSS code is used to tweak the page display.
Site Map Structural Markup
Structurally, the contents_form.html subtemplate differs from most of the templates we have used so far in Project Claire because, well, it is so relatively simple. To this point, our redesign of Pika subtemplates has had to wrestle with various combinations of floated divs and/or table elements, form fields, validation scripts, and so on. All workable, yes, but most definitely a lot of work to re-engineer, so to speak. In contrast, the Site Map is simplicity itself: a single h2 (heading) element and three divs, each containing a set of ul (unordered list) and li (list item) elements.
It's a beautiful thing!
We have not really made any markup changes to the structural design we used in our earlier multiple-column lists article. But we have made several tweaks to the corresponding CSS code.
Tweaking the h2 Heading
A "full-width" class has been assigned to the single h2 ("Site Map") element, to reflect the need for particular set of margin and padding settings for those few h2 elements, like the one at this page, that extend across the full width of the #page-container div. In contrast to the {background-color: #F7F2EA;} scheme we had been using for h2 elements in earlier Claire templates -- e.g., take a look the h2 element in this screenshot (http://www.openpika.org/beta_gallery/beta_intake_step1_firefox.html) containing the heading "Step1: Citizenship Screening" -- we are now experimenting with a "bleached" {background-color: white;} background for h2 elements.
The rationale for doing this? As we build out more pages, it is becoming apparent that the headings definitely enhance usability, but with a darker background they unnecessarily distract from page "content." They look good, but what seems to be happening is that one's eye is drawn to the heading, not the content. With a bleached background the eye more readily jumps to the various page content elements, the better outcome for page scanning, especially for users familiar with the system. Here's the CSS code for the heading element on the Site Map page:
h2.full-width {
margin: 10px 14px -4px 10px;
padding-bottom: 2px;
border: 1px solid #B5C6A5;
background-color: white;
color: #7F7C6A;
font-size: 110%;
text-align: center;
}
Repositioning the List Items
Setting the position for the .list-column div is easy enough in this design because both Firefox and IE handle most div default settings the same way:
.listcolumn {
float: left;
width: 240px;
font-size: 90%;
}
Great, we've got our three floated divs in place. But there are inherent problems with the ul and li "list" elements embedded within the three divs. The most common CSS differences one encounters between use of current versions of Firefox and Internet Explorer are the defaults for setting margins and padding for various elements including, you guessed it, "list" elements.
First, using the star html (http://www.info.com.ph/~etan/w3pantheon/style/starhtmlbug.html) hack, we need to tweak the margin-top so that the lists will position correctly in IE:
* html .listcolumn {
margin-top: 15px;
}
Next, to make the lists a touch more distinctive, we reset the list-style to present "squares" and "circles" for the first and second level of each list, and then added margin-left tweaks to make the second-level list items indent the same way in both Firefox and IE:
.listcolumn ul {
list-style: square;
}
.listcolumn ul ul {
list-style: circle;
margin-left: -10px;
}
* html .listcolumn ul ul {
margin-left: 30px;
}
Modifying the Line-Height
Finally, to make the lists easier to scan, we modified the line-height to create more "breathing space" between each list item:
.listcolumn li {
line-height: 1.70em;
}
Although we haven't drawn attention to it in earlier steps, there are several other places within the Claire design where we have used line-height to enlarge the vertical space between text and other page elements to improve web readability (http://kalsey.com/2003/10/online_readability/), i.e., using what typographers call leading (http://www.fontsite.com/Pages/RulesOfType/ROT1-08.html) to make it easier, more comfortable for the user to "scan" or "read" the page display. For example, as part of the Home Page makeover, a setting of {line-height: 140%;} is used to make the webfeed easier to read.
Next: Step 15: Case Screen "Shell"
Related articles and files:
