A Peek Into Shane’s Site Design Process Part II – Design Decisions

See also:

• A Peek Into Shane’s Design Process Part I
• A Peek Into Shane’s Design Process Part III – Lessons Learned

Design Decisions

Technical Design

In keeping with the technical constraints outlined earlier, site was built entirely out of hand-coded, fully compliant XHTML with CSS2 for styling. The 960 Grid System CSS  framework was used for layout purposes in order to provide a uniform visual experience across as many modern web browsers as possible. Scripting languages such as JavaScript were avoided as not all users will have JavaScript turned on by default.

Typography Design

As a fledgling web designer I am faced with an ever-growing range of fonts to choose from when determining typography for a site. However, the more exotic or unique a font is (or even the more I like the font), the lower the chance that particular font will be installed in a standard user’s machine.

The main body text fonts for the site were selected so that they would degrade gracefully to similar fonts across three operating systems – Windows, Apple OS X and Linux. This ensured that the typography would be as close as possible across the different operating systems. The header font in particular is a Microsoft specific font that may or may not be installed on all Windows machines, yet alone OS X and Linux computers. Therefore, the header text was included as a series of graphic images which guarantees that it will display the same across all browsers and operating systems.

Colour Design

The purple colours in the site were selected to form a monochromatic colour scheme.  The two purples share a very similar hue and help provide a thematic coherence to the site. The text is in white in order to provide an appropriate level of contrast to assist in readability. Images are in black and white to ensure that they complement the chosen colour scheme rather than distract from it.

Navigation Design

Users use different methods and have different motivations when navigating any website. It can be a valuable exercise to provide different complementary methods of navigating a website to cover the different user mindsets.

The site navigation conforms to several informal design standards including:

• the site logo doubles as a hyperlink to the home page; and
• a vertical navigation bar is available in the top left of the site on the main content pages.

The navigation design also includes a form of “breadcrumb” navigation for sectional content. The breadcrumb trail provides users with an immediate link back to the home page as well as a clear display of where they are on the site.

Care was taken to remove, wherever practicable, links that return the user to the page that they were already on.  Thiswas a conscious effort to minimise confusion when navigating the site.  When a user clicks on a link, it should be obvious that a new page is being loaded.

Technical Limitations and Issues

The biggest technical limitation faced when designing the site was the differences between the major browsers in how they implement and render Cascading Style Sheets standards, particularly the differences between Internet Explorer (6 and 7) compared to its main competitors Firefox 2 and 3, Safari 3 and Opera 9.

Internet Explorer 7 was the only one of the four ‘modern’ browsers  (IE7, Firefox, Opera and Safari) that had significant difficulty in rendering the CSS-based rollover navigation bar on the left hand side.  Correct rendering across all four browsers required substantial fiddling with border settings which reduced the effectiveness of the thin’wireframe’ minimalist look in the other browsers.  While the desired effect was achieved, it did not display as originallyintended.

Internet Explorer 6 had even greater difficulties with the left side navigation as well as other spacing issues.  The difficulties were so great that there was no way to render the navigation and the rest of the page correctly without the use of JavaScript to work correctly (which would contravene the design decision to keep the code of the site as simple as possible).  In the end, a basic top-level list was used in place of more elaborate navigation for Internet Explorer 6. Conditional Comments are used to display the list rather than the CSS-driven menu.