26/10/04
46The Redesign has landed
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.
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.
Tags: design, hicksdesign, updates
Previous
Download our vCard
Donald G Maclennan said 1445 days ago:
Jon – what became of the Devon Hedgerow idea?And still no ‘this is me photo’!
Randy Peterman said 1445 days ago:
You might consider adjusting the ‘skip to comments’ link for Internet Explorer 6.0. Other than that it looks OK in IE. Other browsers look OK to me, but I don’t know what you were after since you probably designed on Mac and I haven’t got one :)Looks good though!
Sean said 1445 days ago:
I usually use a 800×600 sized browser window (or close). I had no idea there was a tree over there! Cool.Hans said 1445 days ago:
My one gripe is still in existance. Could you please fix that repeating image so that htere isn’t an ugly seam where that little tree somhow looks like it has two trunks? It’s annoying me a lot.I like the rest of the design. I guess I’ve grown into it. (urm, bad pun..)
Jon Hicks said 1445 days ago:
Donald – Thats still to come! Sssh! Also, there’s been a photo of me on the colophon page for a few months now!Randy – care to tell me why I might consider adjusting it? Whats actually wrong?
Hans- That tree does have 2 trunks! Its 2 trees!
Paul D said 1445 days ago:
Well done on the new design.A note on font-sizes: what I like to do, personally, is set the body font in pixels for pixel-perfect control, and other font sizes in percentages.
Then, I set as much as the design allows – header margins, div padding, column width, etc. – in ems or exes, so that if the user adjusts the font size, interface elements and proportions will scale similarly.
If browser pixel-smoothing was better, one could even set image sizes in ems.
Joseph Lindsay said 1445 days ago:
When I have my screen maxed out at 1280px wide (once the whole tree and sky are visible) my brain keeps trying to tip my head sideways. I really like it.Martin said 1445 days ago:
Hi Jon,This would seem at the moment to be a small thing, but just to let you know that, for me, hovering over the links that immediately follow your grey code box in the content area causes the text in the code box to jump up a few lines in a brief ‘flicker’. That’s all – it jumps but returns to its original position on hovering, and does the same thing when the focus is taken off the link.
I guess it could be that a float (a throat, maybe!) needs clearing. Ahem.
I’m using Firefox 1.0 PR on Windows. It happens at both 800×600 and 1024×768.
Thanks for the low-down. Selfishly I just wish you had the time and inclination to be even more detailed.
RIP Peelie.
Scott said 1445 days ago:
I’m not a designer so feel free to shoot me down but …..I find that the colours of the background image (the tree on the right) are so vivid that it is hard to maintain my focus on the white-backgrounded text on the left when I am reading it. Does anyone else have this problem? A possible solution maybe to whitewash the background image to reduce it’s intensity?
Other than that I love the new look. Cheers!
Dan Rubin said 1445 days ago:
Damn you Jon, another excellent peice of work—just as we are getting the Webgraph site ready to launch, you make me reevaluate the single-page portfolio concept, and I’m about ready to chuck the entire site design and start over again! :)I need to stop reading promotional sites for other designers, I’ll never get my own corporate site completed…
Terrific job Jon, as usual!
Joshua Heyer said 1445 days ago:
Looks Great! One thing is the photo on the right keeps making me want to tilt my head. It makes me feel like i’m laying on my side while typing this. Weird feeling.Love the logo and the menu! :)
Brandon said 1445 days ago:
I think I found a huge bug. When you put the style up lats week, you put it on the wrong domain. My domain is not hickdesign.co,uk. :)Totally kidding—great job, I can only hope to one day be as awesome at CSS as you are. I’m constantly amazed at the work that comes out of hicksdesign.
Jeff Wheeler said 1445 days ago:
Looks great! I’m constantly amazed at your work. The only thing I notice is the mountains in the background don’t seem to be aliased with the white (or should I say anti-aliased? I always get those mixed). I also just noticed that in firefox, sometimes when you’re typing, you’ll notice a small horizontal scrollbar in the comments box, which seems like it would appear there on other sites, yet I’ve never noticed this before.I’ve also never found the joy of watching yourself type inside the comment preview box instead of the textarea itself. This can do wonders of fun, especially when creating new paragraphs…
Jason Santa Maria said 1445 days ago:
...sniff… goodbye for now fixed width :DRollo and I both love what you’ve done with the place.
Kevin Navia said 1445 days ago:
I love it! I just noticed the blue sky, nice touch… along with the others, you want me to break my neck! ;D Great job overall!And thanks for the CSS snippet on the html and body tags… really helpful.
Fernando Dunn II said 1445 days ago:
Tech meets the outdoors. This is an awesome concept. Only thing that bugs me is that the left side feels a bit naked. Excellent work though.Nathan Fast said 1445 days ago:
I really dig the new design. Well done, Jon.Philippe said 1445 days ago:
Nice job, Jon. Some nitpicking: others have mentioned it already, but the background image is a bit overwhelming. One other point: the body text is pretty small for me, and unconfortable to read. You could add an ID to the html tag, used site wide (html#hicksdesign-co-uk). I then can use that as hook to resize your text in my user stylesheet. Seehttp://archivist.incutio.com/viewlist/css-discuss/13291
Adam Roben said 1445 days ago:
Nice design!Small Paul said 1445 days ago:
Just one thing: I’m guessing comments are disabled on the John Peel entry? If so, it’d be super if it didn’t have the “skip to comments” link, and the comments preview box.If not, uh, where’s the comments form gone?
Daveeee said 1445 days ago:
Love the site.Live preview works much better now on the comments. I still find the two/’split tree’ slightly odd, but have bumped it up in my chrom css for your site.
Also, in IE6win, as noted before, the skip to comments goes awry a little.
Congrats on the new design!
Dustin said 1444 days ago:
I stumbled upon this site while downloading the .eps for the firefox logo off the mozilla website. It just happened that my head was turned sideways (leaning on my hand, one of those late nights) when you page loaded. Much to my surprise everything looked fine and I went “whoa” Such a nice design, I’ve never been to you site before, so i have nothing to compare it to, but this instantly got bookmarked. I absolutely love your work on the firefox icon and love the overall feel of this site. Truly inspiring for a young artist.timfm said 1444 days ago:
Jon—what was your reasoning/criteria for finally deciding on an FIR method for h1s as opposed ti siFR/sIFR?steve said 1444 days ago:
John…Sweet Redesign. I love the side images and in Firexox on Win 98, 1024×768 everything looks amazing.
If I could add just a slight suggestion regarding the display of your amazing portfolio… Add some space in between each project. Your work is so stunning and it almost looks cluttered, taking away from the beauty of each piece. I would also add a ‘return to top’ link at the bottom, or even mid-way.
Again, A stunnign redesign. Great Nav, wonderful functionality.
Best Regards,
Steve
Jeff Croft said 1444 days ago:
Jon-Great job. I said it with the “unfinished” version went live, but I’ll say it again. I really like it. I’m on 1600px wide right now, and the right side is a bit bare, but those of us who surf at this kind of resolution are used to this sort of thing (in fact, I usually don’t browser with my window maximized). Other than that, I love it.
timfim-
I believe Jon has stated (both above and elsewhere) that the reason he chose FRI over sIFR is for typographic control. That is to say, with sIFR (or regular CSS-based text), you are limited on the details. You can’t individually kern your letters as you can in Photoshop or Illustrator. This is a definite advantage to regular image-based replacement if you’re only doing a handful of headers.
YuppY said 1444 days ago:
Now comment preview doesn’t work. I’ve got these errors in Firefox (IE breaks in same places):Error: DivElement has no properties
Source File: http://www.hicksdesign.co.uk/js/global.js
Line: 126
Error: document.getElementById(“TextDisplay”) has no properties
Source File: http://www.hicksdesign.co.uk/js/global.js
Line: 118
Also top-level navigation links (“About”, “Work”, etc.) are not clickable in IE6.
Allan R. said 1444 days ago:
John,This final release is just impressive… in fact, your site serves as inspiration for many self-trained designers out there, me included… I love the hover buttons for XHTML and CSS validation at the bottom…
I’m using FireFox 1.0PR and the site looks perfect… I congratulate you for that, since that’s the only browser that matters to me… I hope the site looks horrible in other browsers, so that only those of pure souls (read FF-users) can see this masterpiece…
Just one question: the white space in the top, between the search bar and the header… is it intentional?
Best Regards!
Jon Hicks said 1444 days ago:
Jeff – thanks for expaining for me, thats saved me a lot of time!John – yes the whitespace is intentional
Joel said 1444 days ago:
Thanks for putting the comment numbers back, fixing the live preview, and tweaking the navigation at the top. It’s all perfect.I also only recently realised how much I like the logo image. Very simple and very elegant.
YuppY said 1444 days ago:
background-attachment: fixeddoesn’t work on body in IE6. Here is a fix:* html body {
background-position: expression(‘941px ’ + this.parentNode.scrollTop + ‘px’)
}
Nathan Logan said 1444 days ago:
Did I ever tell you you’re my hero?This new design (along with your ‘old’ one) blows my mind. Truly incredible.
Jon Hicks said 1444 days ago:
YuppY – thanks for the fix, just more proof that IE is a pile of shit. Does it do anything right?!Jon Hicks said 1444 days ago:
Joel said “Thanks for putting the comment numbers back, fixing the live preview”– odd, I haven’t touched those!
Stuart Maynard-Keene said 1444 days ago:
Jon,You could have given me a quick mention ;-)
Andrew said 1444 days ago:
A colored image on hover for the arrow by the search box would be a nice effectI cant see any other bugs (Firefox, Linux)
Love the rest of the site, well done..
John Serris said 1444 days ago:
I noticed that the navigation menu mouse overs make the numbers green and the text a darker grey…. except for 05 Contact which has the colours reversed. Is this intentional?The nav also has some major problems in IE6 here. The images are constantly being pulled from the server so you get several seconds of white flashes while the image loads. IE is a major pain in the arse! Just mentioning this so you dont get your bandwidth eaten up again., not because I care about IE ;)
Looks and works great in Firefox though mate! Well done.
Paul said 1444 days ago:
Jon,Nice new design. But, the images all load first then they all load once more again. Just though I’d let you know that the refreshing is still happening.
Zorglub said 1444 days ago:
Can’t add much to all the positive comments you have already received, can I ?The only other problem I have found is with what happens to the menu if you increase your fonts in Firefox 1.0 PR: with two Ctrl++ the rollover trick gets unvealed. Not a big issue, but I thought you might want to know…
Christopher Wilkie [pac] said 1444 days ago:
Hey Jon, I have to agree with all of the above raving comments, the new site design is brilliant! The picture down the side and the expanse of white space I think really complement each other and make the site in balance. I do miss the old site, it was a big inspiration for some of my own sites, and now you have come and released the totally new and clean hickdesign, I want to follow in your footsteps with this site layout and design too!!All the best Jon, and great work *thumbs up*
michel said 1444 days ago:
Just a quick bug report of sorts: when styling is turned off, in Safari and Firefox on OSX at least, the comment form’s textarea is ridiculously small.Here comment preview helps wonders, I’m pretty much typing without looking at the form, proofreading on the preview. But isn’t there a way to give the textarea a usable size when unstyled?
Jon Hicks said 1444 days ago:
Sorry Michel, It was bigger, but I’d managed to overwrite with an older file, and it had gone back to being small again. Should be fine now.Tom Carwardine said 1443 days ago:
Great refresh, love the white, I found the grey on the previous version somewhat oppressive. Well done for the fixed side image as well, been wanting to try that out for a while now, looks like you beat me to it.Just a quick question, your geo. metadata, where did you get it, I’ve always wondered about it, is there a service to find out these things?
Daniel said 1443 days ago:
Hmm. Your XHTML didn’t validate when I clicked the button at the bottom…and to add to that, the CSS doesn’t validate either:Target: http://www.hicksdesign.co.uk/css/hicks.css
Please, validate your XML document first!
Line 154
Column 25
XML document structures must start and end within the same entity.
Is it complaining about the Windows PNG hack at the bottom of the page? Not that I think it matters that much…very beautiful site!
Seth Messer said 1436 days ago:
Jon,Like everyone else, the new design is incredible. I didn’t notice the tree at first either because is usually don’t work in a maximized browser window. I did notice the messed up trunk as well, but it looks like you made it stationary now. Keep iup the good work as always. :)
Chris said 1434 days ago:
Is it me, or is there now only very limited styling on the Journal : Latest and Archive pages? I see the normal site design (which I love, btw) on all of the other pages, but on the Journal pages I see a very plain, white design with only basic font size, font family and margins.Chris said 1434 days ago:
Aah, it seems (with the thanks of the Firefox Dev Toolbar) that FF is loading your basic stylesheet, and not your layout.css sheet. That’s very strange, as it works perfectly everywhere else.