Styles
Cascading Style Sheets (CSS) are a way of seperating the content of a web page from the presentation information. Information is the primary reason for visiting any webpage, and it is clear that this information should be structured in a logical, well-formed manner. Not only does this allow for more successfull printing of the web page, it also allows accessibility tools like screen-readers and braille pads to present the user with the desired information and a way that makes sense as a normal document. See No Style Description below for more information. In order to demonstrate this, alongside my varying design ideas, I have created what is commonly called a 'style switcher'. The purpose of this switcher is to allow the user to choose which style should be applied to the content of the pages of this website. Nothing else changes but a single file that contains all the rules of presentation and applies them to each page. This idea was inspired by CSS Zen Garden.
Please Note: The style switcher will not apply different style sheets if you are using an older browser or a handheld device. Please see Simple Style Description below for more information.
Gridlight Style (default)
I have always been a fan of clean, minimalist design. I feel it is a very effective way of presenting information in a clear and engaging manner. With this in mind, I set out to create a default design for this portfolio that not only reflected my own desire to produce clean, easy to use websites, but also portray the absence of the cluttered, over-used 'boxy' feel that many websites suffer from.
Simple Style
Not all browsers are capable of utilising and applying the full range of CSS properties. These include older versions of Internet Explorer and Netscape, and the Linux browser Konqueror, among others (view full list of browsers). In order for this site to be useable, and still maintain it's visual coherancy, I have created an alternative, simple style sheet had will be applied to these browsers. By clicking on the link above or in the sidebar to the left, you can see how this site will appear if the main style sheet cannot be applied.
Also, many handheld devices such PDS's and Mobile phone cannot apply CSS properties, due to the restriction of the size of the screen, and therefore yet another style sheet is applied for these devices. The style sheet for handheld devices is based on the Simple style sheet, with only minor adjustments to allow for a smaller logo, if images are permitted or enabled, and a much narrower screen width:
However, if you are using a handheld device, or an older browser, the style switcher will not apply different styles, simply because, as mentioned above, these browsers are incapable of correctly applying the style properties, and therefore render these pages in such a way as may be unuseable.
For printing purposes, the Simple style sheet is yet again applied on place of the main style sheet, to allow for optimised usage of the page, and to minimise graphical intensity.
No Style
As mentioned above, it is clearly important to ensure that the contents of a web page be logically ordered. In order to demonstrate how this site looks without any styling information whatsoever, I have added a 'No Style' option to the style switcher. Text only browsers and accessibility aids will present this content in the order it is supposed appear, as if reading a printed page, with the option of skipping between the main content and the navigation with ease.
New visual styles to come soon.
Last Modified: January 23, 2009, 02:40 pm
You are viewing either a simplified version of the design of this website, or there is no design at all. This is because the browser you are using will not support all the CSS instructions that an up-to-date browser would. I recommend using a modern browser such as Mozilla Firefox to make the most out of the web.