OK, I’m finally done around here (for now). Clear out your caches, refresh, and make sure you’re seeing the most recent version. I’m in danger of turning this into a blog about a blog, but I feel I need to give some more information about the redesign, and the changes I’ve made in the last week, so please bear with me. Let’s get this out of the way…
Why Redesign?
The previous design seemed to be well liked, and I had received death threats after I mooted the possibility of removing those sacred leaf images. However, I felt that that design was a little cramped, and after seeing Fireondesign I was struck by how much I preferred viewing the portfolio images as one page, rather than clicking back / next links. I’d also just felt it was time to move on.
At the same time, I wanted to keep the elements I was happy with, such as the journal entries style. I’d started to introduce new elements into this anyway (such as the wee icons) that stem back to a design idea I had back in July, which I then later shelved, prompting me to write this. However, a few weeks ago, I realised what needed changing to make it work, so I dug it out again, and introduced the vertical landscape image that became the dominant part of the new design. I liked it, so I set to work with a duplicate of my textpattern database, and css files wiped clean.
Fixed, then Fluid, then back to fixed again
One thing I really wanted to acheive with this was a fluid layout. The old site had a lot of grey-space that looked bad on large resolutions. Although I’m not a fan of fluid layouts normally, I realised it would avoid having a large expanse of blue to the right of the tree, but the more I fiddled, the more I realised that the layout I really wanted to acheieve wasn’t possible. Originally, I used a technique devised by Cameron Adams, dubbed Resolution dependent layout. Basically, once the window was larger than 1170px (a minimum size of 770px for the content and 400px for the side image) a new stylesheet takes over thats fluid. However, in IE this conflicted with the live comment preview, where every key typed caused the large tree to reload. Ouch! This also had a knock-on effect on my bandwidth.
Having tried every other possibility since then, I’ve still not been able to produce the flexible layout I really wanted. Solutions that looked good in most browsers broke in either IE or Opera. While it was tempting to cut out IE and just send it plain, unstyled text, you just can’t go doing that sort of thing (not if I want clients anyway). So, for now, good ol’ fixed width it’ll have to be. I’ll still keep looking for solutions…
That big background image
I also wanted to use the background image without creating unnecessary horizontal scrollbars. This was made hard by the fact that I had a background repeating image, and a single tree image to overlay that (so that there wasn’t a big repeating tree every 600px or so). To get around this, I applied the repeating image to the <html> tag, and the single tree image to the <body> tag like so:
html {
background: #fff url(tree.jpg) repeat-y 770px 0 fixed;
}
body {
background: url(solotree.jpg) no-repeat 941px 0px fixed;
}
If you’re interested, the photo was taken in Swainswick Valley, part of the Cotswolds. Unfortunately, I didn’t take it, its a stock image.
Whether I keep it is under review. Its been problematic to implement, and I may decide to remove it a later date. If I do, it does mean I’ll have to redesign again…
Relative font sizing. {#relative-font-sizing.}
I’ve been using percentages and ems on clients sites for a long time, but I’d never given up control on my own site. I still haven’t. My precious designer head just can’t cope with the inconsistencies. Again, something to work on in the future. Then again at the rate at which Firefox is being adopted, maybe it won’t be a problem using pixels in the not-so-distant future.
The new corporate font is called Monark, and its available from the Identikal foundry. They make beautiful typefaces.
The ‘nearly there’ launch
Then for some reason, late one Saturday night an hour or so before I hit the sack, I decided to just dump the current site design and replace it with the new, unfinished, barely tested, design. Too tired to have the foresight that this might be a bad idea, it wasn’t until I woke up the next morning, that the panic started.
Despite this, it still got picked up by StyleGala and the CSS Vault (137 submissions for an unfinished site - what kind of madness is that?), followed by much bug reporting their comments. In hindsight, it may have been unwise to progress the design in public, but it has given me the impetus to get it finished. Had I not taken this leap, it may never have been done.
Since then…
In the last week I’ve polished, bug fixed, changed from siFR to traditional FIR (for more control over the typography), tidied up the hierachies (so there’s only one <h1>, followed by <h2> and <h3>). There was also a lot of really useful feedback, a lot of which has been implemented.
So, there we are. Now is the time to report any annoying bugs I’ve missed. For this post, ignore the ‘please email bug reports’ message, and leave any problems you’re experiencing.