A Peek Into Shane’s Site Design Process Part II – Design Decisions
- A Peek Into Shane’s Design Process Part I
- A Peek Into Shane’s Design Process Part III – Lessons Learned
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.
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.
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.