CSS Liberation

My new website has finally gone live, and the experience of building it has pushed my knowledge once again and challenged me to expand my design skills. It is not my first experience in designing for web using cascading style sheets, but it threw up additional learning opportunities nevertheless.

From my experience of browsing portfolio websites, there are several issues that I wanted to avoid. First on my list was the home page 'dare to be original' large underlined passage about how the student loves typography and clean layout, are exceptionally hard workers that; live design, were born for design! You get the idea.. we've all seen them before. It is not the copy itself that I refuse to endorse; it is the reality that the concept of this passage has been regurgitated by countless aspiring designers who contradict their claimed originality by the mere presence of this device. In recognition of this, I have parodied the appearance of the large underlined introduction and delivered the message as a pastiche. Should the quality of work on show not speak for the designer's interest and dedication?

Secondly, I have always looked more favorably upon vertical scrolling images of work that complete a section of the portfolio. While the single image with 'next' and 'last' arrows are fine, I personally find them less accessible than a straight list that portrays the work as once piece on one page. Having chosen this method of layout, I needed to find a solution to the problem of the work description. One perfectly logical location for the description could be the right hand column next to the images, which is exactly where I intended to put my copy text. From my experience however, I felt that by scrolling down and browsing the work, the description is no longer on screen if the viewer wishes to read again or clarify the rationale while they are lower down the page. This is an issue that I discovered first hand, and wanted to avoid.

My solution resided in the mysteries of java-script. I could create a div-tag with a fixed position when scrolling that never went out of frame. There are known to be compatibility difficulties with internet explorer version 5, but my target audience of designers and professionals are almost certainly going to run more sophisticated browsers, therefore I am aware that more commercial websites would need to use this technology sparingly.

The process of creating this website was an exercise in education, and a rewarding struggle. I feel that I have leaned considerably more about CSS, particularly through the 'special' task of acquiring a valid CSS certificate. Please visit and see what you think! link