Tags: hicks



Monday, October 15th, 2018

We are Oxvik

Ooh, this is an exciting collaboration! Jon and Brian have teamed up to form a lovely little cooperative.

Tuesday, March 3rd, 2015

Troika - a new music podcast | The Hickensian

Jon has started a new little music podcast—and he’s using Huffduffer to generate the RSS feed—three thematically-linked pieces of music.

Have a listen to the first episode.

Tuesday, June 22nd, 2010

Finally ° a fluid Hicksdesign ° The Hickensian ° Hicksdesign

Jon gets flexible. This is the mark of a true web designer.

Thursday, April 17th, 2008

From Design to Deployment

Jon begins by apologising if what he is about to say is old hat to everyone. No, Jon, never apologise!

He moves on to a much better subject: cheese. He loves cheese (no! really?) but there are no good cheese sites out there on the Web. Jon has bought the domain Cheesophile.com — what a friend we have in cheeses! He makes an excellent dig at the crappy Silverlight demo: there is no giant interactive cheese for you to spin around. That gets a round of applause.

Jon bears his file system to us and shows how he sets up his folder. Then he sets up a local server on Apache using MAMP or Headdress.

Jon takes the design and the content and in Fireworks he overlays what elements are the best semantic fit. Which pieces of content are headers? What should be in a list? Now he begins to create the markup but he begins without structural divs: just paragraphs, list items, headings and meaty elements.

Starting at the top of the document, choose a DOCTYPE—whatever floats your boat. Then think about the content of your TITLE element. For navigation, do you need a “skip navigation” link?

Now let’s look at that document with the default browser styles.

Uh-oh. Here comes a flame war: fluid vs. fixed, ems vs. picels, HTML vs. Flash. It all depends on the content.

Now what browsers will you support? What would Yahoo do? Graded Browser Support FTW! But for a personal site like the Rissington Podcast, Jon didn’t think it was worth bending over for IE6.

For CSS, Jon begins with a basic file that tidies up fonts and spacing but doesn’t do any layout. Now he @imports a reset stylesheet and a typography stylesheet and a layout stylesheet. Using conditional comments, an IE-only stylesheet is called in for everyone’s favourite browser.

For the reset stylesheet, use what Eric has done.

For the typography stylesheet, stop and think about the typeface choice. Jon thinks we should scrap the idea of web-safe fonts in the same way we scrapped web-safe colours. It’s like specifying “Roquefort, Stilton, Cheddar, any generic cheese.” Instead we should specify “A very specific Roquefort, any Roquefort, Stilton, any blue cheese.” So substitute specific fonts but not generic fonts. Use the metadata in your font management software to figure out the right order. Jon recommends stealing sheep by using negative letter-spacing on headers.

On to backgrounds. Wooden backgrounds are passé. Cheese backgrounds are the next big thing. For a large background image, you can afford to bring down the quality. Fireworks kicks Photoshop’s ass when it comes to small file sizes when saving images.

Hide your skip navigation link but make it visible on :focus.

Have a cup of tea.

Time to figure out your grid (Jon is taking the easy way out and using a fixed width layout—he is forgiven because of the lovely liquidy goodness he has given us in the past). A JavaScript bookmarklet helps toggle a grid overlay on and off.

Frameworks. Do what you want but Jon prefers to use his own framework: tried and tested bits of CSS.

Once the grid sizes are set, you can start resizing images. Play around with sharpening in Photoshop after resizing.

Now the site is looking good. It’s bughunting time! Firebug is your friend. Then comes the horrible moment when we look at the site in IE6. It’s probably the fault of hasLayout. Father Ted explains it best. Sister Asumpta is the div. Father Dougal is IE6. How do we get Dougal to recognise Sister Asumpta? We use the “blue jumper” of hasLayout which can be zoom: 1. You might be tempted to apply this with the universal selector but it’s better to understand the problem and then fix it.

Finally, around midnight, the site gets deployed. Bravo! hicksdesign.co.uk/journal/design-to-deployment

Cheesophile : What a friend we have in Cheeses!

Jon's demo site for his talk at The Future of Web Design. It's all about cheese. I wish it were real.

Thursday, December 27th, 2007


Epic is a lovely looking new typeface from Neil Summerour.

Friday, November 30th, 2007

The Rissington Podcast | Like Gardeners Question Time, but for geeks

Check out the redesigned site for the podcast from Jon and John. Acknowledge the divinity in its gloriously liquid splendour. Smashing work, chaps!

Friday, October 5th, 2007

Download : Happy Webbies

I'm a cartoon, which feels kinda weird. Brits... collect 'em all: Budd, Hicks, Malarkey and me.

Friday, September 14th, 2007

Making The "Perfect" Cup of Tea » SlideShare

John Sutherland's excellent presentation from BarCamp Brighton.

Thursday, November 16th, 2006

hicksdesign: design for print and new media Ο°

Jon redesigns too. It's lovely, but a bit wide for my taste.

Tuesday, June 14th, 2005

Authentic socks worn by Jon Hicks

Andy is selling Jon's socks for charity. Bid early, bid often.