This week saw the “go live” of www.goplaster.co.uk for Pro Plastering (my soon to be brother-in-law’s plastering firm), they are a plastering firm based in Bridgwater but operating allo ver the South West and the UK, he wanted to showcase some of the plastering/renovation jobs he had undertaken as well as giving potential customers an overview of what his business offered.
A screenshot of the Pro Plastering website
In order to give the site a slightly sleeker look I have added a few extra’s to the quite simplistic site layout.
Improved Font Usage
I have in the past made use of sIFR but I have found it to be not exactly user friendly, that’s not to say it’s not a brilliant tool in it’s place, but I prefered to cut out flash entirely if it’s only going to be used in very limited quantity. So I decided to give embedding the fonts a go, as I knew this would be a safe option, as it degrades gracefully where unavailable, i.e. a normal font would be shown in place and so it would not ruin the site layout.
Embedding the font into the page through CSS
Above is sample code showing the small addition required to add your font into the page, here we can see the ttf (true-type font file) would be uploaded to a folder called my_fonts within the same directory as your style sheet, it would then be used to display your <h1> tags (1st header).
Gallery / Image Styling
I have long been a fan of the jQuery javascript library and tend to at least make passing use of it within most web projects, as it tends to just add polish to an interface, in a useable and compatible manner. For this project we wanted to showcase Nev’s plastering/renovation jobs and allow these to be easily accesible to the user; the best for this seemed to be through the use of thumbnails and a lightbox plugin.
Code required to add the fancy box plugin to the page
There are several good jQuery lightbox plugins but the one I keep coming back to is Fancy Box (at time of writing on Version: 1.3.4) (mostly due to it’s amazing flexibility for content). This was going to be ideal for this project as it allows for grouping of images into galleries within the page, and is very straightforward to plugin.
Fancy Box within the page
Social Networking
Additionally we wanted to allow an additional marketing angle, the addition of Facebook, Twitter and Google+ buttons, I will discuss this area in greater detail shortly, but if you have any thoughts on this area then please leave a comment after the beep.