CurriculumSearch.com Interfaces Designed

January 3rd, 2008

I just finished the HTML and CSS design for the last Curriculum Search interface. Now programming can begin!

Search Results

But first, a screenshot of faked search results:

Curriculum Search Results

This page posed the only cross-browser quirk I have run into so far. I was using a table caption element for the search title (”Saxon 3rd Grade Math”). In Firefox and IE, the caption ignores CSS margin settings on its parent table element and butts up against the far left of the page. Adding a margin-left setting fixed the problem, but this overcompensated in Opera and Safari, because the caption element was properly residing inside the table on those! So I ended up using an h2 element and a caption element, and hiding the caption element for screens and hiding the h2 element when printing. Screen readers will hear the search query twice, but I think having the hidden, duplicated caption element is better than not having a caption element for screen readers at all.

Work Flow

When designing, I worked on the interfaces to search, display results, and display a listing before moving on to the Account Settings and Post a New Listing pages. Now that programming has begun, I’m going to work the other way: first the post a new listing, view a listing, and then view search results.

OK, I’m off to design database schemas!