Core Skills Activity #5: Page Layout

Mark Newhouse

The particular page given to us to redesign was interesting because it presents two possibilities for the main content. The title of the page is Contact Information, implying that the various means of contacting the (mock) university would be the emphasized content. However the list of links overwhelms the aforementioned content, and itself could be the real content on the page: a list of links to the various departments, which would have their own, more specific contact information.

So I made a page for each scenario.

The first layout emphasizes the general contact info by packaging the 50 or so links into a pop-up menu (FORM select list). This list comes at the end of the markup, so there is no need to skip over the links, as they comprise the last bits of content (structurally) on the page. This page displays all the content in an 800x600 browser window, but the links are essentially hidden from sighted users.

The second layout does the opposite, relegating the general contact information to the right side of the screen. I then used CSS to redefine what an Unordered List looks like, and broke the links into smaller groupings. The result is that CSS enabled browsers see the lists as groups of links separated by vertical lines, and non-CSS browsers (and voice browsers) display them as regular UL lists. While this solution does not keep everything "above the fold," It does show all of the content on the page, and compresses that information rather nicely for those visual browsers that can handle it. Since the long list of links comes midway between the introductory text and the general contact information I have provided a link to that information that skips over the 50 or so links.

I prefer the second version due to its elegant (IMNSHO :) solution to compressing the list of links, while still displaying all the information on the page, while still appearing balanced.

Home