It is with great pleasure I introduce the new website for Far Heath Studios. Far Heath is a recording studio set in the lush surroundings of the Northamptonshire countryside, and has played host to numerous bands such as the Prodigy, Spiritualized and the Fall. I’ve enjoyed working before with Angus Wallace, chief engineer and owner of Far Heath, so I was most pleased when he asked me back.
My role was production and build (XHTML Strict and accessible, meaningful mark-up of course). Photography was by the supremely talented Andrew Robert Fox and design was by Steve Edwards – designer-without-portfolio – and a joy to work with. We went with bold photography and a simple layout brought to life with some little touches like translucent navigation (using CSS opacity) and accessible DOM scripted photo pop-ups.
Mark Cadman wrote:
Site is superb, amongst other things it really gives a natural vibe and the execution of the image popups are very elegant. My only thought was that the strong tags don’t seem to contrast enough from the background, but it might be the tilt on this Powerbook.
I take it clear:left – http://clearleft.com/ – will be the home of your freelance work? Lots of lipsum at the moment unless you’ve been doing some latin sites..
Rich wrote:
Thanks for the kind words Mark – the ‘natural vibe’ was just what we were hoping to achieve for Far Heath.
And yes, you’re right about clear:left, although I’ve removed the lipsum now to avoid confusion.
Jonathan M. Hollin wrote:
I really like the crisp, clean design of Far Heath – nice work. Also, that photography should be congratulated, I love how he’s caught the light.
Very impressive, I’m humbled.
Mark Cadman wrote:
Loving the clear:left logo as well :)
I’m just wondering what a “normal” client would think it (‘clear:left’) meant? (Hopefully not Politcal, ha.) Not that it’s important as long as it’s memorable and ‘spellable’ usually anyway.
Stuart wrote:
Nice work Richard – that landscape pic on the home page kept me gazing longingly at the screen for ages!
Those photo pop-ups are very natty, and I do like the semi-transp menu… ;o)
One thing about the menu, though, is it tends to ‘flash’ on mouse over in Firefox (v1PR).
Great stuff!
darren wrote:
I just think it’s a shame you haven’t taken the opportunity to make it validate to w3c standards.
tsk.. you guys!
http://validator.w3.org/check?uri=http%3A%2F%2Ffarheath.com%2Flocation
Rich wrote:
Oooooh! Hark at her :-) The offending entity has now been encoded. Oh, and Darren, you may wish to check the spelling of your tagline ;-)
Rob Mientjes wrote:
Nice! This is a smart layout, with the menu in the large header. It’s easily recognizable if you’ve visited it before. So the job’s a good’ne.
Mark Tranchant wrote:
Firefox 1.0PR – your masthead h1 is clipped such that I only see “rding Studios”;. Same problem on Location page – I see “ntact Details”.
I think it’d be better either centred, or without a body margin.
“eMail”?! Surely “email”?
Equipment page: should be Brüel & Kjær.
Clients page: it’s Volkswagen, not Volkswagon.
All these comments aside, well done – that’s a great site! Where do I send my assessment invoice?
Mark Tranchant wrote:
Sorry to follow up on my own comment, but I’ve solved the masthead title thingy. You set the masthead text size to 1px, then set it 100px left of the content. However, I (and many others) have a minimum font size set in our browsers. If I turn that setting off, all is well – but that’s your problem, not mine! ;-)
Rich wrote:
Mark – thanks for your comments and corrections. While I provide advice on suitability, I can’t honestly say I’m one for proof-reading clients’ copy :-) I’ve fixed the Firefox problem by changing the text-indent to ems instead of pixels.
Mark Tranchant wrote:
That was unadulterated copy straight from the client?! Wow – I’m impressed with them! Most people’s grasp of English isn’t anywhere near that good!
I’m curious: why not use display:none for the h1 rather than shifting it off screen?
Rich wrote:
Because then a screen reader (or similar, such as JAWS) would not read out the heading. See Mezzoblue for more info on image replacement techniques. For some reason I’ve decided to combine the classic FIR technique with Phark.
Hanni wrote:
I love the clean feel!
John Nick wrote:
Really lovely. Kudos to all.
Any chance you’ll share that accessible DOM script you’re using for popups?
Thanks (I hope) in advance.
Rich wrote:
John – I’ll put something together regarding the accessible popups script. It’s a combination of other people’s work, as is so often the case. Essentially I’ve combined functionality from Jeremy Keith’s JavaScript Image Gallery and Cameron Adams’s Onclick JavaScript parameters. I’ll explain more at a later date.
Robin Riordan wrote:
Just want to say cheers for your hard work while working with the mighty fallen, thanks for giving us the freedom in making the music that we want to make. Robin