Unrestricted Access

Interviews

Jon Hicks

Introduction

Jon Hicks is highly regarded web and print designer based in Oxford UK. Jon is most widely known for his personal website - Hicks Design - where he regularly writes about web standards, CSS and browsers.

Interview

Q1.What made you move towards developing with Web standards? Was there a particular person or article that persuaded you most?

It might be a cliché now, but Zeldmans 'orange book' really did the trick.

When I first started learning how to design for the web, I'd been a print designer for 5 years, more used to the text and picture box system in Quark. Using the 'layers' feature in Dreamweaver was the closest thing to that. I hated using tables, I could never get the hang of all that spacer gif mullarkey. CSS layers offered me control, and over the next couple of years I began to look more at the code that it was producing. The more I understood, the more I coded by hand. Articles at A List Apart and Stopdesign inspired me to use CSS more, but it was Zeldman's DWWS that brought all the loose strands together. Suddenly it all clicked and made sense.

As Keith Robinson said "now, I don't know of any other way". I do all my CSS and HTML in skEdit, Dreamweaver is a distant memory.

Q2. Your personal site is strikingly unique as well as being standards-based. It is also a Web Standards Awards winner. Were there any issues you faced during its development?

Gosh, that's very kind of you! It actually started life as an imitation of Stopdesign, and by the time it went live, the only remainder was that the headings used Georgia. I love just being in the countryside, so the green leaf thing came out of that.

The whole business of centering the box vertically as well as horizontally was a pain at smaller screen resolutions. The technique involves finding the centre point of the screen, and shifting the box back half its length and height. This meant that the content would just disappear with no scrollbars if the window was too small. I managed to improve it horizontally, but I'm still looking for a better solution. I also changed the journal page to the ubiquitous long scrolling centered page, as this was easier to read and scroll than the 'letterbox' format.

Q3. Earlier this year you wrote " Take heart: Whenever it frustrates you that you need to add CSS hacks, and the odd surplus <span> tag, to get a page to work, remember this folder of spacer gifs". Do you think the web standards community sometimes gets too obsessed with the finer details?

I would say yes, but it's not necessarily a bad thing. While obsessing about the details can cloud our vision of how far we've come, it's still good to analyze, discuss and refine our practices. The time when it becomes a pain is when you're working through the night to finish a project with hours to go, and the guilt sets in when you add a hack, extra tag or (horrors!) a table to get something to work, just so you can get to bed.

Q4. Your 3D box model diagram is probably the best around on the subject. What gave you the idea to present it in this way?

I'd seen umpteen diagrams explaining how it all looked from above, but the hierarchy of elements was one of those things that I had to find out myself by experimentation. I started seeing this 'stack' idea in my head, and it took a while to get the diagram how I wanted it.

A clever chap called Douglas did a fantastic flash movie version where you could see it all fit together and then expand. I'd like to do more of these, showing how floats and positioning work and the difference between block and inline elements, but time, as always, prevents it.

Q5. You recently posted a solution to IE's whitespace bug. How did you go about solving this frustrating problem?

This was a particular bugbear for me, and I'd been trying various solutions for months. I don't know why I tried what I did, desperation I guess, but it worked. Once I'd posted a solution, all the other possibilities came out the woodwork of course! The best for me was the suggestion to specify a height of 1em to the <li> (for IE), and then use the first-child selector to override that with 'auto' instead, so that other browsers weren't affected.

Q6. One of your portfolio sites, Forgiveness, is very clean and simple. Did you start with flat graphic mockups and then progress to CSS based layouts?

Always. There was one project where I decided to design using the code, and leap straight into fiddling with CSS. It looked awful. Flat mockups give you time to try out and experiment with ideas, although I usually sketch ideas out first. You can't beat the speed at which you can knock out thumbnail sketches with pencil and paper. It's nice to keep using 'analogue methods' as I client of mine would say.

It's very common for sites that I design to be governed by pre-existing print materials and branding, and that was certainly the case with the Forgiveness Project. It then often becomes more of a consultancy project, advising the print designers what will and won't work on the site. It was a really interesting project to work on.

Q7. You have produced two early submissions for CSS Zen Garden including the breathtaking "Entomology". Did you find it hard to design and produce a layout for pre-existing code?

I did, but that was a good learning experience. It made me learn how to use descendant and pseudo CSS selectors, and hone my skills generally. When I did 'Entomology' I'd only been doing proper CSS design for a couple of months, but reading Doug Bowman's write up of his entry helped enormously. I really recommend anyone who hasn't done a submission to have a go, as designing for someone else's markup is a good tutor.

Q8. The logos you developed for Firefox and Thunderbird are amazing. Did you find it hard to work on logos for such a high profile brand?

I was prepared to hide myself away when Firefox came out. I was convinced that the open source community were going to gather at my door and demand my execution. The community are very passionate, and if they take against something, boy do they let you know. Fortunately, they seemed to be generally well received, which was a relief!

Apart from that, the burden was shared amongst the visual identity team. Unlike most of my projects where I'm working by myself, there was a group of people to bounce ideas with and get feedback from. The chosen design was a concept by Stephen DesRoches, and the final decision of which logo to go with was out of my hands. It all helped to relieve the pressure, but to be honest, I was unaware of how high profile they were going to be.

Q9. You have also produced a range of browser resources including custom icon sets for Safari and Camino. Do you enjoy the process of designing system-based buttons and icons?

Obsessively! It all stemmed from trying to decide on a default browser, and in a lot of cases, I liked the browser, just not the default theme. It started with Camino, which at the time had very unattractive icons, and went on from there. I'm currently working on one for Omniweb 5, which is definitely the hardest, as there are just so many icons in that app. I'm not a big fan of theming per se, but what I'm aiming for is to make them look as if Apple designed them, rather than doing something original. That's the goal anyway. I've learnt a lot by doing them, and improved my skills a lot since the early ones like the Safari theme.

Q10. Finally, what's in the pipeline. Will you be launching any exciting new projects in the near future?

Apart from client work that "I can't talk about yet", I have a cupboard full of ideas for new projects, whether any of them will see the light of day is another matter. Who knows, 'CSS Cheese™' may yet see fruition.

Without wanting to sound trite, my most exciting project is my family. Watching them learn and grow is the most amazing and exciting thing.