New look and feel
by Rob Mason ~ March 28th, 2008 Filed under: Design, Financial advisers, Work.
The keener eyed will have noticed some changes around here recently. No not the technical hitches (damn htaccess files!). The new look and feel for Sponge Project!
Why did I do it?
Basically I was getting bored with the old, rather tired look of the site. What had also bugged me was nowhere did I tie-in the name of the site with any imagery, leaving the name somewhat disjointed and orphaned.
The other reason for a better identity tie-in is that I want to focus more on promoting my service to financial advisers. I am very aware that many website offerings to financial advisers are bloated, badly designed and technically deficient so I want to make a difference here. But more on that in another post 
The design is not fully finished, so there will be extra tweaks over the next few day (the home page needs more work for example) and some outstanding bugs, so bear with me while this happens.
Update: Internet Explorer is rubbish. Why does it insist on not displaying the website the way I want it? Firefox, Opera and Safari all behave themselves. GAH!
What changed?
Well apart from the look and feel overhaul I’ve re-done all of the copy on the site and rationalised the pages. My homepage now gives more focus on the name and my emphasis on supporting web standards and why they are an important thing.
The header and font
The header image is new and now much closer aligned to the name. My sister-in-law very kindly helped me out with the sponge imagery, so thanks to Jane for that! The font used is Big Fish, so kudos to the guys at Floodfonts for that one. At some point over the next few weeks I intend to use sIFR for the headings within the body text and blog to make it more consistent.
The navigation and portfolio
The navigation is a hand-coded variations of numerous ones I’ve seen around (see inspiration below). But what each one does is use an image for the individual navigation items. I’m not a fan of that, mainly because if I want to change it I would prefer to do so via code and also it doesn’t scale.
So the navigation item is a link held within a list item as you should do, but then what I’ve done is add a br after the main link title, wrapped a span round it and styled it accordingly, thereby offering me the same effect, but with text. The upside is that users changing the font size of their browser get a better experience.
Again is this semantically correct? i think so. Mike Cherim had a debate about the correct use of the br (break) element. At the time I struggled to find a suitable use, but having explored this site design some more felt this is a correct use.
The portfolio has been re-done, to make less use of divs and greater use of lists. So essentially each portfolio item is it’s own li, within the portfolio ul and just feels better semantically. I’ve seen it done on other websites to great effect, so thought I’d try the same approach.
The blog
The blog is completely new and uses a heavily modified version of Refueled’s blank Wordpress them. This gave me the basic framework, which I’ve now worked up and improved upon with my own needs. Things like new styles, improved font sizing and some cleaner code. I also added print and handheld stylesheets for completeness.
Where did I get the inspiration from?
The obvious reference point was Refueled’s website, which I think is a classically clean and crisp design. The navigation was originally inspired by Evan Eckard’s website, which again is an astonishing beautiful website. So thanks to both of those people for inspiring me.
Contact Rob for details on website design and build services in Tewkesbury, Gloucestershire.