Northland College Front Page Redesign

Filed Under: CSS Related, Journal.

These are the technical notes behind the effort to redesign Northland College’s front page. The new front page is the first step towards a wider initiative to bring the College’s web site up to the latest web and accessibility standards.

For a demonstration of the front page, please visit the following location. When the design is implemented, I will specify the new location.

• The Northland Front Page Redesign Mockup

Design

My challenge for the new design was to reproduce the familiar look and feel of the preceding front page. The original front page was designed earlier this year by Stamats Inc.

By studying the use of horizontal and vertical lines, whitespace, and arcs in the original design, I saw a great deal of potential. The graphics were very well done - I especially appreciated how the maple leaf laid on top of the graphic’s constraints.

Unfortunately, I felt that the overall design lacked a sense of strength and focus. These are very important adjectives to use when describing a college campus. Because of this, I felt that strength in the design would help to emphasize the College’s environmental focus and role of leadership in that area of study.

In addition, the public relations staff at Northland had an idea of where the front page should focus attention. They gave me a rough sketch of the elements they wanted added. The sketched layout was not much different than the final product.

• First, a glance at the front page needed to give the reader a sense of what goes on at Northland College. In the original page, much of this information was provided, but it was unordered and vertically stacked.
• Second, the front page needed to point the reader (if they might be a prospective student) towards information about how to apply to Northland.
• In the original layout, the application button was an image (the word “Apply,” anti-aliased) floating beside the search box in the top right corner. While the button is in a visible location, there is no context for the button to denote what it is (is it a button?). It also does not suggest there is more information about the application process if you click on it.

I tried to tie these priorities into a composition first created in Photoshop.



Cascading Style Sheets

The design was created using a combination of structural markup and cascading style sheets. The final page will validate as XHTML 1.0 Strict, CSS and Priorities 1, 2 and 3 of the Web Accessibility Guidelines.

The CSS methodology by which I produced the layout relies upon floated divs. An example of this sort of layout is found at Message Design’s site.

I divided the composition into three rows. Each row is a div with a set width and a float specified to the “left.”

• The first contains three columns for the primary content, the title, and navigational elements. Each column is an additional div with a static width and a float specified to the “left.” The row itself has a width of 724 pixels.
• The second row contains four columns for secondary content that outlines news and events at Northland college. Each column is also a div with a set width and a float specified to the “left.” This row has a width of 691 pixels with a left margin of 33pixels.
• The third is very simplistic, only containing the contact information.

CSS Problems and Workarounds

In order to hide elements in the structural markup, I used the following method.

	
position: absolute;
top: 0px;
left: -999px;
margin-right: 555px;

I specified the right margin as 555px so that horizontal rules (and similar elements) would remain hidden.

I found that elements nested within other elements, when rendered by the Tasman Engine, inherited the “clear” property. To remedy this, I had to add an empty div to the markup. Unfortunately, this method will bring many designers back to the days of spacer gifs. Indeed, little tricks like these are our modern day spacer gifs. For all the technology that we now have at our fingertips, the separation of design and content remains challenging.

div.break {
clear: both;
	
margin: 0;
padding: 0;
	
visibility: hidden;
}

Adding one of these empty divs between each of the rows ensured that the columns inside of those rows would render as intended in Tasman.

Lastly, I found that Internet Explorer for windows (all variants I tested) would double the specified left margin for floated elements. To remedy this problem, I set the display of those elements to “inline.”

.example {
display: inline;
}

Browser Compatibility

The site should render properly in the following browsers.

• Internet Explorer 6 (windows)
• Internet Explorer 5.x (windows)
• Internet Explorer 5.x (macintosh)
• Konqueror 2 (linux)
• Safari 1.0 (macintosh)
• Omniweb 4.5 (macintosh)
• Mozilla (windows, linux and mac)
• Firebird (windows, linux)
• Camino (macintosh)
• Netscape 6.x, 7 (windows and mac)
• Opera 7 (windows)
• Opera 6 (windows and mac)

Conclusion

Redesigning Northland College’s front page has been a greater challenge than I have expected. For the future, I hope to ensure greater compatibility with mobile devices. In addition, I hope to contact the local independent living center to see if anyone would like to engage in a discourse on the site’s accessibility.

As always, I appreciate constructive criticism. I would be especially interested in how the design could be improved upon.

Published: 4 years, 8 months ago