The Making Of

Multiple Background Layers:
The first hurdle I needed to over come was that I had three layers for the background. Viget Inspire is a really good example of a site that uses many background layers which are placed on several overlapping divs. For my site I realised that I needed to use the repeating paper pattern on the lowest layer (the body layer) then add background images to header and footer divs. The header also had another div for the logo badge that allows you to click on it to return to the home page.

@font-face:
One way to add a unique typeface to a site is to use a font-face kit. FontSquirrel provides a large collection of free font-face kits (as well as a font-face kit maker). This Youtube video by NetTuts is a very clear tutorial on how to add the font onto a site.

The Dreaded Twitter Widget:
Twitter kindly provides a free widget that allows you to display twitter feeds from publicly available accounts.
While it allows for some customisation, the base model did not fit all that well into my website. So I needed to figure out how to tweak it (mainly the header, the footer and try and get a transparent background).
The transparent background was the easy part apparently: Simply type none instead of a colour number in to the twitter widget. Instant transparent background.After a lot of searching I found that removing the header and footer were equally simple enough, you just need to find the right tags: twtr-hd and twtr-ft and using CSS set display:none
A more detailed explanation can be found here.

The only thing I couldn’t find out was how to adjust the colour of the horizontal rules between each twitter post. Also, for some reason however, IE demands that you download an ActiveX control. I’m not quite sure how to fix this, so I apologise in advance if you are viewing the site with IE.

The search bar:
Again tutorials came as a great help here. The placement of the search box was the most fiddly part of the process.

Two other resources proved invaluable. The first was Html Dog which goes through the dos and do-nots of coding.The other was Jennifer Niederst Robbins’ “Learning Web Design” which carefully explains the ins and outs of web design from coding to publishing. Could not have done with out it.

Other than that, most of it was coded using what I had learnt in the class tutorials and adapting where I could.

Web Design Project quick links:
Post 1: Country and/or Western - Project Choice
Post 2: Inspirational Bits and Bobs - Research and Inspiration
Post 3: Initial Layout - Website Flat Graphic
Post 4: Now Showing - Website Link
Post 5: The Making Of - The Making of the Site