You're looking at all articles on The Hickensian tagged 'design'

It’s all too often the case that as soon as a project is finished, I’m on to the next one in the queue, without any time to stop. I’m sure others know this feeling – there’s no time to reflect and blog about the work you’re doing. So here starts the catch up…

Back in April, a project I was involved in was finally launched, the new Identity and website for Five Details, previously known as ExtendMac, whose “Flow”: FTP client won a Runner up prize in the prestigous Apple Design Awards in 2008. Brian Amerige, who created Flow was getting ready to release a new iOS app called Seamless to coincide with the relaunch, and Hicksdesign were bought on board to create a new identity and website.

After a few different explorations, we settled on the simple logo of the 2 ‘D’ shapes that together form a ‘5’ in the negative space:

The logo has white and orange variants, working on either a white or dark background, as well as ‘layered’ version, for use in backgrounds:

Brian and I discussed suitable type treatments, and I felt that LFT Etica was the right fit for this project. It needed to be a clean sans-serif that would work well bold, but with some individuality. I particularly loved how it looked reversed out of black. Brian and I were both keen, and the fact that it was available to use on the site via FontDeck sealed the deal.

A logo can never be designed in isolation though, so as soon as these initial ideas were approved, work on the website began. The key requirement here was the app name was the most important element of the page – the Five Details branding and navigation was secondary to this. Therefore it made sense to place this at the bottom as fixed footer.

(I didn’t work on the app icons by the way: the Seamless icon was created by Woflgang Bartleme, while Flow was created by Sebastiaan De With)

In terms of media queries, this site doesn’t feature the whole gamut of layout possibilities, but it was clear that optimised views for iPhone/iPod Touch and iPad were needed. Following the idea of 320 and up, the stylesheet starts with the narrow view, and then the ‘desktop’ version is added via media query. This prevents mobile devices from loading the larger images. The iPad is a different context though, and it gets the full css, plus a few other rules to optimise it. As Mobile Safari still doesn’t support position:fixed, the nav is placed at the top using position:absolute.

One thing I always find a bit challenging is how to arrange navigation for a smaller screen, such as maximum width of 320px. There’s not usually enough room for a horizontal navigation, and as Stu Robson points out, it pretty much takes up the whole screen when it’s vertical.

My solution was to place the navigation last in the markup, so that while the ‘normal desktop view’ fixes this to the bottom of the viewport, the iPad has it at the top, and the smaller iPhone view has it as footer.

It makes extensive use of the background-size:cover property to make background images scale to fill the background proportionally, while still filling the viewport. One thing I found with this was that Firefox and Opera didn’t like you to have a differenr shorthand ‘background’ declaration in conjuction with it. In order for it to work on those browsers, all the background properties had to laid out individually.

I also wanted to mask off the bottom the site, where it goes underneath the navigation. I tested this using webkit-image-mask initially, and then replaced this with a fixed position image. This is straightforward on the plainer colour backgrounds, but for pages such as the About section, where there is a large black and white photo, I had to create a special mask with the bottom portion of the photo, adding the same background-size:cover CSS to make it work.

Here’s the mask:

And here it is in place:

Fiddly, but worth it in the end!

To finish, I’d like to say how marvellous it was to work with Brian on this project. He had constructive insights on the design, and while we went through a number of iterations, the end result is all the better for it. Brian was also someone who listened, and it made for a very happy relationship!

I’d be the first to admit that the geekery of bike components appeals to me as much as the actual cycling. As the author Robert Penn says It’s all about the Bike. I’m currently fiddling away on a road bike project, using a 10 year old Peugeot picked up off ebay as the basis, and choosing replacement parts is great fun.

My tastes started off retro, or ‘vintage’ as the cycling crowd would call it (retro to them means the ’80s), preferring steel, honey brown leather and highly polished metal. Recently though, I’ve been getting into the look of more contemporary parts just as much. In particular, I’ve been lusting after the Cinelli Ram bars ever since I discovered them:

The unified stem and bar shape is just so pleasingly flowing, and the variety of graphics that look good on it really show it off as a piece of art as much as a functional component:

(photos © Bike Rumor)

It makes sense to me to make this much fuss of the handlebars, its the one part of the bike (other than the front wheel) that you’ll see the most. At around £500 these aren’t going to find their way onto my Peugeot Project anytime soon, but I can’t help planning in my head what custom graphics mine would have…

I’ve met quite a few designers who are colourblind, but personally it affects my ability to distinguish between green and brown, or blue and purple. Tones and colour strength I can see, but certain colours are hard to tell apart.

You might already know I originally trained as a wildlife illustrator. I knew which colours to use by the helpful names on the paint tubes, and even the more obscure names like Oxide of Chromium were memorable (it’s the best base for natural greens by the way). Then when I transitioned to print design, I used the CMYK system. Even if I couldn’t differentiate colours, I knew how to create, for example, a bright red numerically. Especially as the way the colours were built up was simliar to using watercolour. It was logical.

Screen design was the biggest challenge though. RGB made no sense numerically or logically, and while others were fine using colour pickers, they were the hardest way for me to choose colour. The tiny area of colour, and it’s proximity to other colours is too confusing. Crucially, there are no labels!

When I discovered HSL colour via Molly’s Dev.Opera article 2 years ago it was an epiphany. Finally I could use numbers to select my colours, and once I’d learned where the hues sat on the scale, I was away! Not just for CSS either, as 85% of my work time is spent in Illustrator, creating either icons, logos, or illustrations.

The single thing that’s made the most difference to how I design on-screen is when I discovered the joy that is HSL colour. So, here’s to you HSL, you’re a saviour!

Last year, I submitted my very first app to the App Store. It was rejected 3 weeks later. This is its brief story…

Wes West from Torchbox first gave me the idea to create an iPhone app for Oooh! It was a great idea, and one that would give me a learning opportunity to develop and submit my own app. It would be fun, and free! All it needed to do was to “ooooOooooh!” when shaken.

While I created all the necessary graphics, Simon Whitaker of Goo Software handled the development side, implementing the shake-to-ooh function and guiding me through the whole process from start to finish.

So, here we go. When you launch it, you’d have seen this if you were holding the device in portrait mode:

And then once in landscape mode, you’d see this:

You shook it, and the handbag was waved along with the cry of “oooOOoooh!”

Job done. It even worked on the iPad, for a much more life-sized handbag.

The rejection was on the grounds that it didn’t do very much, and that I couldn’t argue with. Yes, there are fart/light/foghorn apps on the app store with even less functionality, but these are being cracked down on now. Apple were very helpful in coming with ways of adding more functionality to help it get accepted, but so much time had already gone into what was only ever going to be a free app. In some ways, it’s done it’s job, and I’ve learned a lot about the process of developing and submitting apps. I also met a new friend because of it – I could never have done it without Simon.

I might try and implement it as a web app, using local storage – again, as much for the learning experience of making one. For now, it’s being put away in the shed.

If you’re designing anything that’ll be viewed on either the iPhone or iPad, you’re going to find LiveView a godsend. It’s been out a couple of years, but I only discovered it this week.

It comes in two parts – a Screencaster app for your Mac, and a companion app for the iPhone/iPad. As you work on the graphics, you can view it live on the device. An essential, and free tool. I shot a quick video on my iPhone to show how it works:

So far, it only seems to be lacking an option top use it in landscape mode.

I’ve never over-run on a talk. Ever. Usually I embarrasingly finish around 10 mins early, leaving plenty of time for questions.

Until last week at Future of Web Design that is. When it came down to the last 5 minutes, I realised I had a lot more to go, and had to really hurry the last couple of sections. Thankfully the feedback so far has been positive, but I promise this will be (probably) be the last time I talk on this subject.

The Principles of Icon Design was originally based on the talk I gave at @Media last year, Icons for Interaction, but soon started taking a different form. This one focused more on the process of icon design, although they both share similar examples and concepts. It features new work too however, such as some of the work I’ve been doing with Jolicloud, my first freelance project after leaving Opera.

As promised, you an grab the slides (with notes) here: Download the Principles of Icon Design PDF (17.3mb)

Finally, I must mention how much I enjoyed the conference. As well as meeting old friends, I got to meet new ones, as well as finally meeting design heroes Joshua Davis and Brendan Dawes. When I was working as a print designer at an educational publishers in Oxford, it was these chaps who inspired me to design for online. I always get a bit awestruck meeting such people. (There’s only one other hero I’ve yet to meet – Jason Arber).

A BIG thankyou to Carsonified (and Cat Clark in particular) for organising the event so well.

I’ve used iPhoto, Littlesnapper, a combination of Leap and Dropbox, but of late, I’ve reverted to using Evernote as my collection point for design scraps.

The Desktop > Web > iPhone ecosystem is lovely. I have my design collection everywhere I go (also possible with the dropbox method I used to use, but there’s no way of tagging on the iPhone). The desktop client collects images and websites (as PDFs), and the iPhone client collects snapshots of sketches, camera photos and images saved from mobile Safari. Then the two ‘collectors’ get synced together to become one big collection:

Some more reasons why Evernote has struck a chord with me are:

• I’m not restricted to single images, I can add PDFs, group images together (as a note), and add text notes.
• I love the widescreen layout (above) where I can view thumbnails, followed a large preview of the selected item on the right – no need for anymore clicks or different screens to view it
• Importing content is so easy. The context menu in Safari offers ‘Add Image to Evernote’ and ‘Add Page to Evernote as PDF’. The latter gives me a complete web page (not a print stylesheet version), and any links are still active (not so with a PNG). The former works so nicely compared to some apps that get confused by links around images (cough, Littlesnapper).
• I’ve been experimenting with using a shared notebook to show moodboards/collected reference, and collaborate with clients, and this has so far gone OK. Would be even better if it was possible to layout images in a less linear way, and resize them, but that’s pushing the remit of Evernote.
• I find that I can often remember text within an image (especially as I often save a lot of found typography). Evernote’s OCR technology means I can find these images very quickly, and is often faster than tagging:

I do tag as well, usually marking content type, dominant colours and sometimes a possible project reference and a star rating. I’ve also started using it for things like a Cheese Diary, where I take a snap of the the cheese label, to store it for later reference:

There are still some negative points about Evernote:

• My main bugbear from last year still stands: Evernote makes it really easy to get all sorts of content in, but it still makes it tricky to get it out again in it’s original form. In particular multiple images can’t be exported easily – at least not without an Evernote branded border. It’s my data Evernote, not yours, and I resent the enforced advertising, especially with premium account. The ‘best’ way to do this is to export as HTML, and then fish out the images from the various ‘resources’ folders. Or drag and drop them individually.
• You can’t select multiple items and add new tags. The only way currently is to drag them to an existing tag in the sidebar, which isn’t intuitive, or easy (depending on how many tags you have).
• I would love to be able to restrict my view on the iPhone to a particular notebook.

Still, I love and use it despite these niggles, mainly because a lot of the things that niggled me last year (like thumbnails of images with loads of whitespace) have been fixed. Evernote development is ongoing and always improving, and I feel it’s a system I can put my trust in.

I don’t want this to turn into one of those ‘product blogs’ (you know “check out this cutter for making Helvetica letters out of potatoes”) but I wanted to share these mighty fine Lacie USB Speakers. There’s something very pleasing about their boldness and stark simplicity.

These aren’t the first speakers Neil Poulton has designed for Lacie though, they’re very much the lovechild of his previous firewire speakers, shaped like an ocean liner funnel:

What was special about these was that they didn’t need a power supply, unlike the new USB ones – they took all the power they needed from the firewire connection.

Update – now that proper details have emerged these do indeed run from USB or mains power, so yay! Thanks commenters!

I didn’t start work on the Opera 10 redesign until April this year, so what was doing between November (when I started) and then?

Opera Mini 5!

My first day at Opera, was visiting the team out in Linköping, Sweden, where they showed me the work they had been doing. Up until now, Opera Mini has always been a text-based interface out of necessity. There was limit to the size the download could be (which I think was around 100k). Overstep that and some devices just fall over, but it was worth optimising in order to accommodate as many handsets as possible. Now the allowance is bigger, but not substantially, and it’s incredible how much fits into the Opera Mini download. They showed me an interface that not only used animations and visual speedial, but was touch screen compatible. A lot of the work had already been done, but I had a great time working on the interface.

I can’t take all the credit for the interface design though. Apart from the work that had already been done, my time on Opera 10 meant that the Mini team had to continue without me to do the final polish, and a superb job they’ve done too.

I’m working on separate blog post, going into more detail about the design of Opera 10 and Mini 5, but for now, go and have a play with the Mini 5 beta.

While I want to avoid filling my house with yet more video game specific peripherals, I want to get the The Beatles Rock Band just to see the gorgeous artwork. Can you get a non-interactive, just-play-as-a-movie version?

Ever feel that the web design market is over-saturated by books, both coffee-table and technical? There’s too much choice, and “What books would you recommend?” is the top (non cheese related) question I get asked. Depending on the topic required, there are various degrees of ‘hmmm well…you could try…” that’s replied.

This is where Mark Boulton’s new PDF book A Practical Guide to Designing for the Web comes in. I’ve been watching the previews on Flickr and now that I’ve actually had the chance to read the full book, I can declare it a triumph. It doesn’t feel preachy or stodgy, or conversely, too light and insubstantial. Mark’s tone strikes the right balance, and is engaging from the start.

To those who don’t know, I’m not a trained designer – my background is firmly in illustration. As part of my 5 years studying illustration, we covered some graphic design, but it was about 20% or less of the curriculum. Since leaving college, and getting my first job as a Junior Designer for Coventry City Council, I’ve been ‘picking up’ the elements of design ever since, but have never had the benefit of formal training.

For me, this book is the equivalent of ‘Zeldmans Orange book’, taking those bits and pieces I’ve learnt over the years and filling in the gaps, finally creating an overall understanding.
However, it doesn’t just cover design theory, as practical business advice is given to complete the picture. Something that I’m sure all those people who ask me for recommendations will love.

It’s left me wanting the physical book, which if I have understood correctly, is on the cards. Yippee!

Ye gads, Dell have shocked the pants off me with this tasty piece of industrial design! The diminutive Dell Hybrid PC comes with optional coloured sleeves, but in particular I rather love the bamboo sleeve version:

This kind of thing adds warmth and organic feel into something where normally only cold industrial aluminium or cheap black & grey plastic was before. Granted, there may well be cheap plastic in there, but this is a Dell that I would be proud to have on my desk. The specs also show it would make a good TV media centre – if only I could install OS X on it! More details on the Hybrid here

Maybe I’ll buy a bloody Dell after all.

Over on 37 Signals, there’s an interesting post about why they don’t use Photoshop, and prefer to go straight to HTML and CSS to create a UI. I agree with a lot of what Jason says here, especially point number 3 – you can never get text in a static comp to look the way it does on the web. (This is unless your name is Malarkey and you create your comp text by screenshotting text from the browser!)

I would also add a couple more points in favour of going straight to HTML/CSS:

• You can’t demonstrate a fluid design with a static comp, and show how it reflows with window sizes. This is a biggie.
• Why spend time recreating form widgets in Photoshop, when you can have the real thing by just typing the html tag? Also whoever looks at the design, sees these widgets in the style of their OS, rather than one fixed style in a static comp.

This is the approach that I’ve been taking over the last year, and it felt right at the time. It felt like removing the middle man, and being more efficient.

The one drawback was the designs were often dull, dull, dull.

This is not an approach that encourages visual richness. That’s not to say you can’t create a good design this way, or that a design needs ‘superflous eye candy’, but my thought processes were definitely being constrained by the tool I was using. As Jeff Croft points out in the comments on , this is an approach that works well for a 37 Signals style application, but not necessarily for everything else.

I’ve been trying to think through why this is the case, and the only thing I can come up with, is that it’s easier and quicker to move stuff around in a graphics editor. Also, I find Photoshop the wrong tool for mockups. Fireworks, rules my roost, and here’s a few reasons why:

• I can keep all the page designs of a site in just one file – with shared layers for common elements like navigation. When it’s time to export, Fireworks can create an individual file from each page with one click.
• The ’9-slice tool’, in combination with it’s Symbols Library, means I can have a pre-made set of form widgets and other interface elements that I can drop in to the page, and resize without losing the integrity of the image. Mocking up is fast.
• The vector tools are superb. Create a pixel-constrained layout in Illustrator is a pain, and Photoshop was never meant to be a vector creator. Any Photo collage work is done in Photoshop though.
• The Fireworks colour picker can sample from anywhere on the screen, not just the open document. (Apparently Photoshop can now do this by clicking and holding!)

Yes I still have to create it in HTML and CSS at the end of it, but by that point I know exactly what I need to do.

Fireworks still isn’t the absolute ideal tool though. The ideal tool hasn’t been created yet, and would be a mixture of the two, but that’s for another post I think!

Last week, I put out a plea on Twitter:

This was something I needed at that moment. To be able to toggle the grid on and off quickly, without having to comment/uncomment a line of code each time. In particular, I was working in Coda, and was looking for something that didn’t require a bookmarklet to toggle.

I’m absolutely gobsmacked by the response! Stephen Hallgren jumped to the challenge first, and has set up Grid Layouts.com where you grab the javascript. I used the script earlier today, and it worked exactly as I hoped it would! No more making background grid images, no more fiddling with css to toggle it on/off. The way the variables are set up mean that I can easily experiment with different grids on the fly,

This is now one of my default tools when creating a site, thanks Stephen!

I’m just back from @media Europe where I talked about the importance of maintaining design collections and how to use them, under the banner “How to be Creative Sponge”. Having only ever resided on panels before now, and with the exception of a 15 minute talk at Oxford Geek Night 2, it was my first ‘proper’ speaking engagement. I was concerned that what I had to say was too obvious, too common-sense, but feedback so far has been good, and I’m really appreciative of those that took time to tell me they got something from it.

As promised, here are the slides from the the talk, and all the URLs mentioned in the talk can be found via the sponge tag on my delicious account: http://del.icio.us/jonhicks/sponge.

As for the conference itself, I had a whale of time. I meet new, lovely, interesting people every time, and always come away with new ideas and motivations. In particular though, I absolutely loved being able to share it with Leigh, and I have her parents to thank for that.

My lasting image of the event will undoubtedly be Drew whipping up the crowd in chants of ‘There is no fold!’, aided by placards. Especially after receiving a Request for Proposal that week, containing the requirement “All information on the homepage must be visible above the fold”, I was tempted to take one of the placards and send it back with my proposal!

With the exception of NetDiver, I don’t go to CSS/’cool website’ showcases for ideas – I’ve discovered a raft of great design blogs that are providing me with a fresh source of inspiration.

Here are my current favourites:

• Happy Mundane -celebrating good design in the ordinary and everyday. Hits the spot everytime.
• Waterhalo – A sketchbook based journal. I wish I could find time to do something like this!
• design*sponge & MocoLoco – biased towards furnishings. Great for colour and shape ideas especially.
• notcot.org – this probably doesn’t count as a blog, more of showcase (hah!) of well designed products. Don’t bother with the bizarre RSS feed, I have this saved as my homepage to check it regularly.

Plus, from the comments, there’s another gem! A big thanks to Rachel for Prints & Pattern, and awesome supply of colour, shape/pattern ideas. Also, Dan Malls link for Daily Type. Yum!, my iPhoto scrapbook is bulging!!

This was one the questions we imposed on ourselves during the @media panel last week. My answer at the time was emphatically no, as design is as much about ‘thinking time’. In a way, it’s a hard one to answer, as it depends on the scope of the project and the size of the budget.

Since then I’ve been wondering more about this question. Is it fair to make a client pay for ‘thinking time’? Should a ‘Great Designer’ be able to produce ‘Great Design’ quickly? Or is it just possible to get ‘Good Design’ on a budget, rather than ‘great’?

Discuss!

I wasn’t quite prepared for the generally negative response to the new identity. Looks like it was a bit of a shock to most people! Comments ranged from positive to lukewarm to negative but constructive to downright condescending and rude. I think the worst were the suggestions that my colourblindness explained the logo colours, as if somehow it was a mistake (or an April Fool’s joke). That hurt! There were also those who proclaimed it ‘wasn’t me’. What the hell do you know is ‘me’? I think people have got this image of an ale-loving tree-hugging hobbit, and that such a design can only mean I’ve had too much old tovey.

Many referred to the 3 leaf logo as some peak of my career. The irony is, if ever I spent 2 minutes slapping a logo together, that was it. Seriously. Zero thought went into it at the time, and the execution was less than slick, but it’s seemed very popular with wives! I never change logos just for the hell of it though. A logo should be something that is in place for very long time, but I’ve already talked about my reasons for changing. Time to move on.

Maybe I shouldn’t have enabled comments (its not as if the logo was up for debate or anything), but people were emailing me to tell me they thought it was ugly anyway (which was nice), so it makes little difference.

So basically, stuff you. It’s staying. This is what I want.

What I wanted:

After I’d convinced myself that I needed to move on, I drew up 4 goals for myself as my own design brief:

• The key was something so completely different from previous logos, and from everything else I’d seen out there. Part of that is colour – there’s a lot of muted, conservative tones at the moment.
• A shape that could be used with different colour combinations, and still be recognisable. Thus, I could have a seasonal variation if I wanted. The current one is deliberately bright (these colours are very IN this year), but could be anything I wanted. This would allow me flexibility, which in turn, would give longevity.
• To highlight a different interest to nature.
• If it had a 70’s in feel, with a modern edge, I would be happy too!

I’d been searching for new ideas for a long time, but finally at SXSW I got inspiration. Glenda the Good Witch took a small group of us off to for a preview of the yet-unopened Blanton Museum of Art. It was there that I saw a piece of art that inspired the new logo:

Its called “Girls of Kilimanjaro III” by Kazuya Sakai, and was intended as a homage to Miles Davis. I was hooked, and not just because I like Miles Davis.

On the flight home, I did a few sketches, and knew that this was what I wanted:

Apart from achieving all my goals, I think the logo also suggests constant movement, which wasn’t intended, but I like that fact that it does. The shape is also pointing/moving/leaning forwards, which suggests direction. Others have suggested it reminds them of scalectrix, race tracks and roller discos, which is great. Its the music connotations that I particularly enjoy though – vinyl records and infinite movement.

The biggest setback was the discovery that Firewheel Design were using the same typeface – Egret. If they didn’t have the word ‘design’ in their name too I would’ve thought sod it, and left it. However, I didn’t feel comfortable with that, so I’ve switched to the other typeface I was considering during development – House Industries’ Chalet. I’m very happy with this, and it doesn’t feel like a second choice. It fits the logotype just as well, and has the added benefit of bolder weights.

Finally – I see this current site design as being a transitional phase – a clean minimal style (much like Doug Bowman did with his ‘whitespace’ phase) to give me time to evolve and develop it. While I intended the logo to be a complete departure, I wanted keep parts of the design that I felt still worked, and didn’t clash with the new identity.

Is it just me, or is there something of the late 90’s about Microsoft’s Origami site?

Somehow, this reminds me of the kind of thing I was doing when I first started designing for the web. Circles on lines, black backgrounds and ‘digitised’ type. Also check out that cool ‘rSS’ link!

Walkers Crisps are a solid British tradition (Fact Fans: Britains biggest selling brand for the last 2 years), with a branding that has been developed over the last 100 years to what was recently this:

I nearly spluttered over my sandwich today when I saw the ‘new’ Walkers branding:

What ugliness is this? Shiny gold effect gradients on blocky italic text? And what has happened to the Walkers typeface? What was once a bold, contemporary, yet with a sense of its tradition, typeface has been replaced by some skinny monstrosity! The whole effect says to me “Late 80’s Sci-fi action film’, not crisps.

The cost of this reversal of good taste? £20m of course!

A recent hicksdesign enquiry, included a line that irked me rather.

And I guess you are only interested in multiple digits contracts…

I’m currently involved in The Big Project for Attap which is keeping me busy for quite a while, but busy doesn’t mean money grabbing. I have, do, and will hopefully continue to, work for charities and causes where the satisfaction comes more from the subject than the budgets. Which brings me to this:

When I was interviewed for MacUser magazine last year, I finally got the question I’d always hoped someone would ask.

What would your dream commission be?

The answer I gave them, is still the same now. I’d love it if tomorrow the phone rang, and found it was the Omnigroup wanting to know if I’d like to work on the interface for next release of Omniweb. I do tend to moan about this from time to time, but sometimes Omniweb feels like it needs some Panic or Watanabe style polish. Now, I’m probably not the right person for the job, and I don’t expect it to be a ‘multiple digits contract’, but thats what I’d most like to work on.

I’m intrigued, what would yours be?

Whether its leaf logos, logos that have similar 3 shape patterns or both, I’m starting to think its time to redesign. I’m not crying ‘copy cats’ here by the way, I’m just starting to feel run of the mill:

I think I’ve taken the leaf theme as far as I can – its time for a rethink. A rethink that I’ll do in all that spare time of course ;o)

At last, I can finally talk about what I’ve working on for the last 5 months! It’s so hard to work in stealth mode, and when everyone asks you why you’re so busy, you have to say “a thing”. Anyway, today, Riffs has gone live in ‘public alpha’ mode.

Riffs is a recommendations engine, a place to rant and rave about anything, recommend and get recommendations. My main use for it will probably be to give music recommendations, but you could use it to rate and review a gig, movie, conference or meal you’ve just had. Perhaps you want to get users opinions of a certain digital camera? While this is the early life of riffs, there are already over 10 million items in the database, and we’ve tried to make the process of adding a new item as quick and easy as possible.

There’s also the social network side of riffs. If you see someone with similar tastes you, add them to your riffrs, and keep up to date with what they’re reviewing. There’s a lot going on in there, but i wanted to give you a brief overview.

As this is an Alpha stage, yes, there are rough edges, and many changes/improvements/code cleaning still to come. Its there to try out, give feedback and help advance. Open Firefox/Camino/Flock/IE if you must, get stuck in and have a play around. (Please feedback to Attap though!). Safari support is coming very soon!

While I was worried about the scrutiny that the code is going to get, I decided sod it. I’ve worked long and hard on this site, and the Attap team much more so. I’m proud to have got to this stage, and really want to show you all what I’ve been up to for so long. I see that 37 Signals have picked up on it already (i’m glad the logo rollover tickled their fancy so much!).

Oh, about that font. Its VAG rounded, which I did use on another project. My lesson learnt is never to include it in any more design options. In the case of Riffs/Attap though, it felt the most applicable though, so I make no apologies! I’m still desperate to use Omnes on a project though.

There are lots of CSS things I want to write about, like the fact that Firefox 1.07 threw up so many problems compared to 1.5, or the odd IE fix that saved my bacon at the last hurdle. they can wait for when there’s more time.

This is the just one of the projects I’m working with Attap on, there’s more to come…

Many before me have expressed their feelings about Arial, and I’m sure you’re all sick of hearing how it’s a badly made derivative of Helvetica and Grotesque. You all know that to use Arial in print, means that you may as well go the whole hog and use Comic Sans.

However, over the last 4 years I have come across too many ‘branding guidelines’ where the company’s typeface specified has been Arial. Not by CEO’s or administration staff, but by the “creatives” that the company hired! In some cases, it’s been respected, supposedly experienced branding specialists.

There can be only one reason for this, Arial’s ubiquity is seen as an advantage. Why pay for a new typeface, when everyone has got a copy?! No need to install either! It amazes me that designers make such decisions, but it has happened more time than I’d like to remember.

Aside from the usual arguments, my main reasons for not using Arial in company branding are:

1. Its ubiquity is its downfall. Its bloody everywhere. Go to the bother of creating print material using Arial, and it will look like something your dad printed out from his PC. (For some charities, this is a positive boon though. If it looks as if you’re spending too much money on the magazine, regular givers will take their money elsewhere! Seriously.)
2. With no proper italics, the oblique version of the font has to be slanted. Not a a true italic, as this article shows. Even uglier!
3. As a web font is where Arial works best, not in print, and certainly not as the chuffin’ branding.

So how do we turn this around? For some clients (Charities spring to mind immediately) cost is the major factor. We need a well designed typeface family, containing the 4 basics – Roman to Bold Oblique, thats very economical to buy in either small or large quantities. Do you have any suggestions that fit the bill?

With all the hoo-hah over the launch of the new ALA, I read with interest the interview with Jason Santa Maria over at Malarkeys place. What strikes me about this redesign is that it has been so focussed on typography. Jason has spent a long time on the details, as well as the overall, and by god it shows.

Now, I’m going to have to be careful here, because Jason is a friend, but there was one thing in the interview that just didn’t sit right with me:

We don’t support 800 × 600 anymore, nor do we 640 × 480. Do you? People flipped when sites stopped supporting 640 × 480… now no one says a word. Things change. Trust me, you are going to see more sites stretching out their legs and putting their feet up.

As a designer (coming from a print design background) I’m with Jason. I would LOVE to think ‘to hell with 800×600’, and get that bigger canvas to work on. However, I also know that not everyone maximizes their window. They may have 1024, or much higher, but thats not to say that they don’t keep their browser windows at only 800px wide. For the record I have mine in a widescreen letterboxy format- full width, but leaving room so that I can see my Stattoo dock. Thats what its all about – everyone has their own preference.

What about future proofing? The ideal that’s touted when using web standards. Its always amusing to come across a site from the 90’s that was rigidly designed for 640×480. This tiny site sits up in the top left corner of the screen, with a large repeating background image (surely no ones going to see that?!) throughout the rest of the window. A fluid layout would mean that sites that we build have more chance of fitting the screens of tomorrow.

Now, I’m one of those people who’s gone for a ‘fixed 760px horizontally centred’ boring layout thats so common these days, but I’m Increasingly of the opinion that fluid – or at least fluid up to a point, is the way to go. I’ve been working on a fluid redesign for a while now – I just wish I had time to finish it!

This isn’t a post about fluid vs fixed though. Nor is it criticising Jason or anyone who decides to design for larger resolutions. Its about a dilemma I have – designer sensibilities vs user preference. Some may not see the two in opposition, and a lot of times they aren’t. However, I’d love to say ta-ta to 800×600, but a little nagging voice is telling me it isn’t that straightforward. Believe me, I’m not so far up my web-standards-arse that I wouldn’t just put up one big gif image for the page if I thought no one was looking.

Maybe I need to lighten up and not worry quite so much about pissing off ‘users’? ;o)

A get a lot of people asking me what its like to be colourblind. It usually takes the form of “Can you see this colour? Can you see this one ? Is everything black and white??? ”.

This is the best explanation I’ve come across yet:

Courtesy of David Shrigley

Thanks to web archives and old dusty zip disks, I’ve managed to find all but one of the previous versions of Hicksdesign. I’ve not been a good archivist, and tended to dump old versions along the way, but I’ve found enough to give you a slideshow. Its been interesting for me to see how the logo has changed, and how my skills have slowly matured.

So like some nostalgic curmudgeonly grandfather, I’d like to take you through a wee history of the site, from the first embarrassing baby photos to present day…

Version 1: Dec 1999 – May 00

My very first website – ever. Only the about page still existed, which is a relief quite frankly. Created with a free demo of Adobe Pagemill (!) and hosted on tripod. This was before I found out that you could use tables to create more than one column.

Version 3: Jan 01 – Oct 01

Found on the web archive, there are a couple of missing images, but enough there to get the idea. The rounded squares were all animated gifs.

I’m now using Dreamweaver 2, and targeting sites for Netscape 4/IE 4 and above! The cheek! Frames a plently too. This is the first time I started using ‘hicksdesign’ (a year before going freelance) with the chemistry symbols logo. I’d just bought my first domain name, so ‘hicksdesign’ sort of stuck from then on. Its highly unimaginative, and sometimes I wish I’d spent more time over it, but I can’t go back now. I still like the logotype, and may bring it back someday.

Version 4 Oct 01 – June 02

The ‘now I’m going freelance proper’ version. Everything is laid out using Dreamweaver layers – hated using tables, I could never get the hang of the whole spacer gif thing. Layers were more like the text and picture boxes I was used to in DTP apps like Quark. However, very little plain text, most type is set as images. This was also the first appearance of the flower logo, and no more black backgrounds.

Version 5: June 02 – Nov 03

This was my first and only Flash site, and can still be seen here. Cobbled together with guidance from Flashkit.com

When I first tried using Flash, it was at v5, and I was enthralled. I wondered why all sites weren’t created in Flash (I know now). I still haven’t given up on Flash, but I really need the time to learn actionscript.

Version 6: May 03 – Oct 04

Finally discovered web standards, learnt what CSS is all about, and created my ‘personal site’ exp.hicksdesign.co.uk with Movable Type. People started to come to the site for the first time via Zeldman and the CSS Zen Garden. By November 03, I had scrapped the Flash portfolio site, and bought everything in together under one roof.

I still really like this design, but by October 04 I really felt the need for a change.

Version 7: Oct 04 – Dec 04

The vertical tree one – it didn’t last long. I couldn’t do the layout I wanted in my head, because of a certain browser that the majority use. It went after a few months, although it seems as if it was better ‘received ‘ than the current design.

So, any skeletons in your closet? Early versions of your site, created when you were still learning? Its time to share them! Post them on your blog, and leave a link here – it’ll do you good!

When I mentioned that ABC News used the ‘older version of the logo’, there were a few people wondering just what was so old about it.

After the initial rush to get the Firefox logo out for v8, it was soon enlarged for use in the situations such as the windows installer graphics, and its many flaws were enlarged too. I recreated the logo in Illustrator, this time paying much more attention to detail. This was going to be a version that would hold up to being printed large (like this!).

So here, side by side, are the old and revised logos. The differences should hopefully be a little more obvious:

People tend to notice the glossier globe, and the furrier top of the head, but in particular, more attention was paid to the face.

So there you go!

OK, I promise, this really is it now. No more fiddling around.

Ever since I changed the layout of this site back in October, I’ve not been happy with it. It just hasn’t sat comfortably with me, and its an odd feeling – like my teeth being on edge.

The whole reason for the tree/landscape image was to do something in the ‘dead area’ on the right. It wasn’t intended to be seen by all, more a filler for those with larger screen resolutions. However, looking at the site on 800×600 brings the horrible realisation that it looks very dull indeed, and the landscape has become the focus.

So, the design will evolve again soon. Don’t expect anything radical, but the landscape’s days are numbered. In fact, if anything it will end up looking very unoriginal. But hey, I’m getting older, I want a pipe and slippers site, a comfy chair with the indentation of my rear in it. My attempt at making a slightly quirky chair is something I just don’t want to use.

OK, time for some survey results. The scores are fairly accurate – give or take the odd distraction from Little Britain. Thanks to everyone for particpating!

App for comps:

( yeah, yeah, yeah, you all use paper and pencil first! ;o) )

With 1 vote, Powerpoint , Quark Express 1 and MS Paint 1 (nice one John!)

Text Editor:

( Or ‘Code Editor’ – pedants! ;o) )

With 2 votes were: Notepad, Smultron, Zend Studio, Scite, Crimson Editor, TextEdit , Editplus, Context.

With one vote were: TideText, HyperEdit, Syn, CSSEdit, EditPad Lite, SlickEdit, TSW Web Coder, Arachnophilia, Ultraedit, Notetab, Quanta, Omniweb, Code-Genie, Phase5, GoLive, KATE.

BTW: I’ve lots of suggestions for future surveys. I’m loathe to do them, as it would just get too tiresome, and these were the 2 subjects I wanted to know about. I feel I have to earn the right to do another lazy post, er, I mean survey.

When making comps for website designs, I usually use Fireworks. There are many advantages to this, such as setting up each page of site on a separate frame, and having constant elements (like navigation) on a shared layer. Underlining text is a cinch too. The only downside I’ve found is that it can run quite slow, especially when editing text. Sometimes, it’s slow to the point of wanting to throw myself on a fork.

So what do you use? I know that Illustrator and Photoshop are the popular choices. Is there an ideal, but unheard of, app out there that I’m missing out on? Or an everyday “who would’ve thought it could be used for that’ type app? Only one condition – must work on OS X.

Clearing out my ‘dev’ folder on the new site, I came across some of the site comps (created in Fireworks) that didn’t make it. They’re just the initial ideas, but here they are if you’re interested…

I quite liked this one, but The Missus felt that the whole retro/worn look is getting quite common, and others do it better. I’ve got a thing about 1940’s-1960’s car magazines, and I’ve been desperately wanting to use that MG illustration somewhere

This one was trying to get away from everything. I’d found an illustration of a boy holding a prism up to the light, and again, really wanted to use it. This wasn’t it though.

This is the one I created in July, that parts were taken from for the new design. Too bland, odd hierachies of headings. You can see some of the elements that made it into this new design though.

This was the next attempt. A refresh of the previous design – rounded corners, more colours. I still like this one, and who knows, it may appear again. There’s that boy illustration again…

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.

To say that I’m fuming right now would really be an understatement.
Its bad enough having a live but unfinished site, and not getting time to work on it, but this took the biscuit, the teacup, and whole sweet trolley.

Earlier today, I had an email warning that I was currently 7gb over my 25gb a month bandwidth limit. WTF*?! In a panic, I added a new .htaccess file to redirect all pages to a basic holding page to try and slow it down a bit (please note: this was me, not SegPub. I didn’t get ‘cut off’). I later removed this after I’d calmed down a bit, but the fact remained, something fishy was going on.

Jeremy at Segpub tracked down the cause to a single IP address requesting the landscape image on the right, every second for the last 2 days! Thats over 700,000 times!

*Please note, thats the closest I’ve ever come to swearing on my blog.

Update: The admin of the network concerned contacted me to (sort of) explain what had happened – “I’m told he had found your page in a google search about BBedit, and had left a browser open at that page. I have no idea why the browser continued to download your image. I am convinced that it was an unfortunate accident,
though, and not done to cause you any harm.”. It also appears to be have been over 16 hours, rather than 2 days, and that it was someone who went home, leaving the page reloading.

This still leaves the issue of the reloading page. I’d seen this happening in IE only at the weekend. If anyone else can confirm that this is still happening, I’d be grateful. The image will probably reload on resize though.

But it’s not far off. Sometimes, even though you’re not finished, it has to happen. The old has to go. The thing is, a site is never finished, so its either take the plunge, or it’ll never happen.

There are rough edges, IE bugs, and not-thought-about-yet-bits aplenty. Give it time, think of this as the starting point, and like the last design, it will evolve over time. Oh, and you’ll probably have to delete stored ‘style’ cookies again – sorry about that. In the meantime, 2 changes of note are the (sort of) fluid layout and relative font sizing rather than the old pixels. More on all that later.

Issue 2 of the excellent PDF magazine Design in Flight is now out, including my article on creating the interface icons for NetNewsWire 2. This is my first ‘proper’ article, and I found the process rather daunting, especially after reading the first issue, where the quality of the articles was so high.
The question I get asked the most is ‘How do you create icons?’, so hopefully the walk-through will be useful.

At $10 for a year’s subscription Design in Flight its a snip, and Issue 2 contains articles by Eric Meyer, Keith Robinson, Eris Free and many others.

The public beta of NetNewsWire 2 is finally available. Go and get yourself a copy, and enjoy new features like (amongst many others) the in-built tabbed browser, with rendering powered by the Safari webcore. Version 2 is also a free upgrade if you’re already a registered user.

With this release, NNW’s welog editor becomes a separate application called MarsEdit. While this doesn’t have the large feature set of Ecto, I prefer the way the interface is laid out and find it much more intuitive. In my last month or so of using Movable Type (before switching to Textpattern), I was using this to write to my journal. One important feature of Ecto’s it does have is the ability to assign your own stylesheet to the preview, to get a better idea of how the article will look. Textpattern is going to include MetaWeblog support soon, so I hope to be back using this when that happens.

For this version of NetNewsWire, Brent Simmons had asked me to redesign the interface icons. A new set was created, although later on in the beta cycle these were redrawn by Bryan Bell to keep them in a family feel with MarsEdit (which had already been finished by that point). So that my icons didn’t go to waste, Brent has added a way of swapping themes via Terminal:

1. Quit NetNewsWire if it’s running.
2. In the Terminal, type: defaults write com.ranchero.NetNewsWire toolbarTheme JonHicks (Hit return.)
3. Launch NetNewsWire.
4. To get back to the default set, step 2 should be: defaults write com.ranchero.NetNewsWire toolbarTheme default

Here are those icons:

I’ve had a lot of requests for a write up on how I go about creating icons, so I’ve written an article, using the process from designing the NNW icons from sketches to finals as the basis. This will hopefully be published soon, more on that later.

With the release of BBEdit 8.0, has come the most inexplicable new feature. The application icon has been updated with the most grotesque typography, looking like a Comic Sans derivative. For a serious, professional, mac-only application this is so inappropriate:

I was never a fan of the previous logo, but this took the biscuit. So, to avoid looking having to look at this, I whipped up a quick replacement over lunch:

It’s by no means perfect, or intended as a serious replacement proposal to BareBones Software. It ‘is what it is’ – what I would prefer to look at instead. If you also happen to prefer it, you can download the icon from here. There are 2 options for changing the icon. Either ctrl-click BBEdit to ‘show package contents’, and replace the ‘BBEditApplication.icns’ file in the resources folder, or, copy and paste the folder icon in the get info window.

Since November, I’ve been attempting to refresh the design of this site, particularly the journal section, but each time I keep coming back to the same design.

Each of my redesign attempts has resulted in just a little tweak here, or image added there – nothing on the scale I was intending. The leaf illustration on the left is one such result of the one of these attempts.

Looking at sites like JustwatchtheSky, Jason Santa Maria and Airbag with their attention to detail and originality makes me lust after some of what they’ve got. They’ve thought their sites through, and it shows in the execution.

Why bother redesigning? Redesigning is the new staying in, its where its at. Its two turntables and a microphone. Dave Shea(twice), Doug Bowman, Ryan Sims, Ethan Marcotte, Adam Polselli, Zeldman and Nathan Borror have all unleashed excellent redesigns so far this year. Doug Bowman even released a ‘limbo’ redesign, a plain white minimal space inbetween designs. In a strange sort of reversal-of-the-universe, Scrivs has conversely kept the same design for at least a couple of months!

Seriously though, its nothing to do with any of that. As a designer, I like to keep things fresh. When I look at sites I’ve designed for clients, after a while I wish that I could improve this, redo that, introduce X feature. I can’t, but I can do that to my own site! You just feel the urge to change sometimes. I also look at my site a lot (usually when responding to comments) and I get a bit sick of the sight of it. Problem is, no new design I do looks good enough!

A few weeks ago I announced I had a new design almost ready to go. Then after taking advice from Leigh and a mysterious one-eyed sock monkey, I dumped it. There were many things wrong with it, but basically it came down to this. Why replace a design with something not so good, just for the sake of keeping things fresh? I still like what I’ve got here, whereas all my new ideas just looked like a copy of someone else’s site.

So this is the plan. There’ll be no radical change at hicksdesign, I’m going for a Simplebits approach now. Keep the general look and layout, but freshen it up. Not reinventing the wheel, but polishing it certainly. A print css file here, new images there.

Thats all I’m going to say on the matter. I don’t want this to become a blog about a blog!

François Briatte has wondered this, which led him to conduct a survey of 10 CSS designers web sites and their similarities. The results are really interesting reading. Eric Meyer made the suggestion that we explain our reasons for our choices, and there a few points where I feel I’m a bit lacking.

Here are the ones I wanted to briefly comment on:

Are links underlined?

No – I still uhm and ahh about this one. There are good basic usability reasons for underlining links, but I haven’t yet brought myself to do it. I don’t like seeing links underlined, it breaks up the text too much for me. I know precious visual sensibilities should take second place, and I might reconsider this one.

Are hovered links underlined?

No – although they could be. Add to the ‘to do list’.

Do visited links differentiate?

No – but this will be sorted in the new design (if it ever sees the light of day)

Is the main text on white background?

Yes – This is mainly because:

1. I like white. White is crisp, clean and looks good. There’s not enough white in the world if you ask me.
2. What doesn’t work on white? Just white (oh, and maybe pale yellow).
3. My colorblindness can make me a bit unadventurous with colour.

Is the main text sans-serif?

Yes – I believe its easier to read body copy on-screen in sans-serif. Strangely, this is the opposite of print design.

Is the DOCTYPE Strict?

Yes – this was a exercise in smugness, dressed up as ‘learning about W3C specs’.

Do they use accesskeys?

No – I did originally have oodles of accesskeys, but recent thinking has made me shun them. Basically, there just aren’t enough spare keys around.

Do they use ‘Steal these’ buttons?

No Рbut as Fran̤ois pointed out, I did until recently. These little things are everywhere. I felt the time was right to make my own.

Is there a print style sheet?

No – Something else I haven’t got around to doing. Silly really, it wouldn’t take long to knock up a basic print stylesheet. Another one for the list.

Is there a 404 page?

No – although I did have one until recently. My move to Textpattern has meant that I needed to rethink how I made my 404 page. Another one for the list.

That concludes the case for the defense m’lud. One issue I’m particularly keen to know your opinions on, is whether links should be underlined? What do you expect when you see to denote a link? Let me know your thoughts…

Kenichi Design believe in recycling CSS. I love the copyright line in the code:

- All site contents, HTML, XHTML, CSS, XML, images, code, and text are copyright © 2004, kenichidesign. All Rights Reserved Forever.->

Forever! Final word! Zip! Apart from the bits I nicked from Hicksdesign…

Updated: Kenichi design have now removed their style sheets. The guy didn’t discuss it with me (I was perfectly happy as long he removed the copyright line), but I guess there’s a language barrier that would make discussion hard. Shame.

Following on from the branding of Firefox, comes the new logo for Mozilla’s email client, Thunderbird. When Stephen Desroches sketched out the orginal idea for Firefox back in December, he had in mind how this affects the other applications, and Thunderbird was sketched out too:

After Firefox 0.8 came out, I started work on fleshing theses sketches out, trying various bird types. Early on we decided to keep the envelope metaphor, and include a globe. At this point I couldn’t find any reference to a real Thunderbird, so I didn’t have a starting point. I tried a few approaches:

These are my working sketches – #1:Too evil! #2: Dove =
too fluffy! (although it stood for mail in many countries) #3: Too different in position to Firefox #4: Too hunched! #5:better, but still a wierd shape. Generally, the perspective on all but the first sketch looked a bit odd.

Finally I’d found a reference to a mythical Thunderbird in Native American art, which had a crest. I really liked this idea, and added it to the final sketch. Sketch #6 is a basic vectors sketch using #5 as a basis, but adding the crest and improving the posture.

Finally we had something we had something that the team were all happy with.

This time I was using Illustrator CS to create the logo. I started by creating the main colour palette – a range of tones as new swatches, I usually do about four: ‘Darkest. Dark, Mid, Light’. With each colour, I checked the option for ‘Global’. All gradients were then created using these swatches. This allowed me to adjust the colours for, say, “Mid tone” and it would then update all the instances of that colour – even those used in gradients.

Here are the final icons:

More importantly, Thunderbird also gets Kevin Gerich and Stephen Horlander’s brand spanking new pinstripe theme for OS X. When you compare this interface with the Windows equivalent, you can really appreciate the attention to detail. They’ve gone to huge lengths to make this look and feel as much of a native app as possible. I only converted to Apple Mail from Entourage back in January, but I’m giving Tbird a spin to see if I’m tempted over. So far I particularly love the 3 column layout option. At the time of writing, the new icon artwork has only been checked into the Windows version – OS X will come soon.

Now that Firefox and Thunderbird are both ‘done’, the task is go back over both of them, tweaking and polishing before the final release candidates.

Shortly before Christmas, I had an email from a chap called Steven Garrity, who works for Silverorange, and runs a blog called ‘Acts of Volition’, in which he publishes a radio show on regular basis. (really worth a listen BTW). He asked if I would like to join a recently created Mozilla branding team, with the immediate aim of producing a new logo identity for the Firebird browser, soon to be renamed firefox (Ben Goodger has written up the reasons and process for the name change). The branding team came into being after Steven wrote an article recommending changes to Mozilla’s existing branding. I jumped at the chance, and today Firefox 0.8 is finally released, and the work is no longer confidential.

Over Christmas (thanks Steven!) ideas and concepts were put forward. The timescales were tight (the design would chosen 2nd January), and the concept difficult to illustrate. A firefox is actually a cute red panda, but it didn’t really conjure up the right imagery. The only concept I had done that I felt happy with was this, inspired by seeing a Japanese brush painting of a fox:

The final chosen design was a concept from Daniel Burka and sketched by Stephen Desroches, which I then rendered using Fireworks MX. I’ve been using Fireworks over Illustrator or Photoshop for icon design as I love the way I can work in vectors and see the result in pixels, rather than smooth vectors. The updated gradient tools in MX make this possible too.

As with all icons, the smaller the resolution, the harder it is to create a legible icon. OS X icons start at 128×128 pixels, Windows XP uses 48×48 whereas 95-2000 only has a maximum size of 32×32. Starting with the 128×128 version in all its detail, I scaled this down to the various sizes, and began removing excess and simplifying the shapes.

As you can see, once you get down to 16×16, which is used in areas like the windows taskbar and OS X list views, its nearly impossible. I still have some work to do on this and other Mozilla branding, so the project continues.

0.8 is also the first milestone release to have the gorgeous new OS X aqua theme. If you’ve not seen this yet, Kevin Gerich has posted screenshots of all the different screens so that you have proof of all its lickability. Better still, download the 0.8 release and try it out.

Update: Forgot to mention that there is a page of promo graphics on the Mozilla Site – get linking! You can also read more about the project from Steven Garrity

I empathise with Paul Scrivens (see ‘Sometimes I get bored’). Designing your own site is very hard, especially when you work on your own, and don’t have any easy way to gauge whether something is a good idea or not.

Cut the chase: to improve the readability on the journal and articles pages, I’ve tweaked the CSS. This means no viewing long pages through a letterbox and support for your mousewheels. (There are display issues in IE 5 Win and Mac, but everyone else should be OK). So what I’d like to know is: do you find it easier and more readable, or do you prefer things the way they were?

Just recently I’ve realised how useful adding an id to the body tag of page can be. I’d always wondered why others had done it, and now I know. It gives that extra bit of flexibility to layout a page and set variations in page style depending on its id. So, I’ve just added another wee article on how to highlight the current page with CSS in your navigation.

With handy online resources such as List-o-Matic, its now easier than ever to use unordered lists to create navigation. As an extra help to users, why not highlight the current page in the navigation? A recent article on A List Apart called Keeping Navigation current, showed how to do this with PHP. Here’s an easy solution using CSS.

First we’ll set up our navigation list. I have chosen 4 sections for ease, and its best if navigation sections are kept short anyway:

<ul id="navlist">
<li><a href="index.html" >Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">contact us</a></li>
</ul>

Next we need to add a unique class or id (doesn’t really matter which) to each of the section pages:

<ul id="navlist">
<li><a href="index.html" id="homenav">Home</a></li>
<li><a href="products.html" id="prodnav">Products</a></li>
<li><a href="faq.html" id="faqnav">FAQ</a></li>
<li><a href="contact.html" id="connav">contact us</a></li>
</ul>

Before we leave the HTML, on each of the section pages we need to add a unique id to the body tag:

<body id="home">

This allows us to specify the highlighted tab. After we’ve added the CSS styling for the menu, we add the css rules to highlight the correct tab. As all of these instances use the same rules, we can just list them all, seperated by commas, and the browser will apply the rules to every instance. These overrule the previous styles wherever is on the same page as .

body#home a#homenav,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
color: #fff;
background: #930;
}

I’ve set up some basic pages so that you can see the navigation in action. This allows the navigation to be put into an external include file for ease of updating. The ‘decisions’ as to which button or tab to highlight all happens in the CSS file. This can also be used to introduce different coloured sections. Handy if the layout positioning stays similar and all you want to do is change the colour theme.

After what seems like far too long a process, my personal and portfolio sites have merged as one, and the design has evolved a wee bit. From now on everything is accessed via www.hicksdesign.co.uk, although I have spent a long time setting up redirects in a .htaccess file. Hopefully, the transition will be easy – if you’re reading this, then it has. The new location for the RSS feed is now http://www.hicksdesign.co.uk/feeds/rss/index.rdf

The personal site was a public learning space. The design of it evolved as my knowledge of XHTML/CSS methodologies improved, which meant that the CSS contained redundant styles and was larger than it needed to be. This time, I started completely from scratch.

The portfolio section has been rebuilt using Movable Type, and whenever I get a chance, I’ll write up the templates so that others can use the code. Updating it should now be easier than the old flash site.

This is sort of a ‘phase 1’, which means I’m too busy with paid work to do everything I was wanting to. There are still some rough edges, and there will be more slow evolution of the design to come. My plan is to add another style option that works better under 800×600, but not as plain as the ‘diet’ style. One thing I have been able to improve on, is the look of the search results page. Under MovableType, this is a .cgi page, and can’t contain any of my php includes that make the site easy to maintain. A few days ago, I finally found a fix on a site called MT-Stuff, and all is well.

Last weekend I came across a rather nice blog, Dunstans Blog (who also runs 1976Design), via a link at the CSS Vault. Apart from an appealing clean layout, the site has an addictive feature – a ‘live weather image’ from his house in Dorset. This takes the form of a beautiful atmospheric illustration that gets updated, depending on type of the weather and time of day.

It adds real warmth to the site – its one of those ‘good ideas, well executed’ that I wish I’d thought of first (Then again, the view from my window ain’t quite as pretty). I can’t help looking every few hours to see if the weather is any better in Dorset than Oxfordshire.

(Sorry about the weather obsession – its an British thing).

For a recent website redesign, a client wanted to use a DHTML drop down menu. Originally I’d bunged in one of the many free javascript based menus that are ten a penny on the web. As the project developed, I wanted to replace this with a more accessible menu.

My criteria were:

• I wanted to use unordered lists to list all the links, not bury them deep within a javascript file. This would also make it easy to mantain and be database driven in the future
• I’d prefer to not have javascript event handlers in the markup, but this wasn’t essential
• It had to show all links ‘flat’ if the user had javascript disabled
• Good cross browser/platform compatibility, no ‘IE Win only’ disclaimers.
• I’m using it within a centered layer, and want to avoid the need for absolute positioning if possible
• I wanted to control the look completely with CSS
• And the moon on a stick please

Gazingus.org’s menu’s would’ve fitted the bill perfectly, but the site doesn’t seem to have been around for a while (does anyone what happened to this? I hope its not gone for good). Time was running out, and I was doing a late night/early morning to find something quick to make the deadline the next day.

Hooray for Netscape DevEdge, where I finally found their Hybrid-CSS JS menus which fulfilled all my needs. Also, through this article I came across another alternative at Brainjar’s. This uses event handlers, but is more flexible with its css and javascript.

2 new microsites have just been launched for Adfam, the UK charity supporting familes facing drugs/alchohol problems. One site is to support parents, and the other for partners. Hicksdesign designed the site templates using XHTML and CSS, and London-based company Clarity provided the content management system using asp.net.

This is important for me as this is the first commercial site that I’ve built completely web standards and no tables. My personal site was the first time I had used (and got to grips with) the methodologies of XHTML and CSS, and I was keen to use them on future sites that I created. This was project was ideal.

The sites were designed in a bit of a hurry – just over a week from flat jpeg mock-ups to final site templates with images and CSS. First, flat mock-ups were created in Fireworks. As well as an easy place to fiddle and experiment, this allowed me to use a frame for each page I was designing, and have all common navigation/logo elements on a shared layer. If I modified the nav on one page, it updated throughout. Each frame was labelled (e.g ‘homepage’) and when the layouts were all ready I exported with the option of ‘frames to files’. The frame label becomes the filename, and Fireworks will automatically replace any spaces you’ve used with an underscore, ready for the web. This is often how I create images for elements like titles, and makes updates and changes easier to find and execute.

Once the design was agreed, these layouts were then converted into XHTML and CSS. The Fireworks slice tool was used to isolate areas on the designs that needed to be images – titles, special bullets etc. I keep a basic site template which has a folder structure, an index XHTML page with doctype, blank meta tags etc. It also has commonly used snippets of css, javascripts and php. This gives me a good basis to start working on, and saves trying to find the same old bits of code.

The 2 microsites are almost identical. Using CSS to control the design meant that resources could be shared and easily updated. Elements such as the option of ‘hiding the logo’, enabling users to be less conspicuous. This is just a stylesheet switcher, and re-uses all the css already used in the site, and just adds a line over-riding the background-image attribute of the logo DIV, removing the logo. It also uses a lot of CSS Image-replacement, including rollovers with pixys no-preload method. Why use such new techniques on a commercial site? Well they work, they allow the page to be more accessible, and they cut down on code. I’m currently writing an article on how to use css image rollovers on horizontal menus, as I’ve been getting a lot of questions about that.

The coding side was all done in BBEdit, but my recent discovery of skEdit means I’ll be using that in future.

Inevitably, when these templates are handed over, the content of the site isn’t final. At the very last minute, elements are changed or removed, occasionally to the detriment of the design or the code. Please – no ‘this page doesn’t validate’ reports on this one – little things like uppercase tags will creep in. This isn’t ideal, but it is the real world. Unlike my personal site, I don’t have the luxury of making adjustments ‘mid-flight’.

What I didn’t foresee were the problems this caused with the content management system. It contains its own rendering engine, which hasn’t got the rendering capabilities of a modern browser. Therefore anyone using the CMS couldn’t see the styles when they were applied to new text. It required a leap of faith on the part of the client that everything would look OK in the browser. Fortunately, both Clarity and Adfam were pleased with the benefits of a css driven site.

I’ve been busy improving the way this site looks in smaller screen resolutions and windows. The technique I was using achieves vertical and horizontal centering by using absolute positioning and negative margins. If the window was too small for the content, it cut it off without giving you the option of scrolling to see it all.

So instead of using absolute positioning to center horizontally, I’ve now used the auto margin method. This is the best way, as it stops trying to centre the content when the window is too small. Originally when I’d tested this, it was still cutting of the the left side in Mozilla/Camino/Firebird, so I’d left it out as an option. I eventually discovered that all it needs is a ‘min-width’ value adding to the containing

#horizon {

background-color: transparent;

position: absolute;

top: 50%;

left: 0px;

width: 100%;

margin-top: -200px;

text-align: center;

min-width: 900px; 

}
#wrapper {

margin: 0px auto;

background-color: #fff;

position: relative;

text-align: left;

width: 900px;

height: 380px;

}

A friend of mine, Jonathan Williams, has just set up an online portfolio so now you lucky folks can see just how good he is. He uses a mixture of natural and digital media to achieve his unique style – I love it, it’s so fresh and attractive. (His company name ‘Blazing Fruit’ comes from a poem by Roger McGough)

I am on holiday – honest. Its great, finally getting plenty of quality time with my family, and not thinking about work. I do like to keep in touch with the blogosphere though, and this week I’m able to use my in-laws broadband connection.

After all my excitement at working out how to do pure image based CSS rollovers, here’s a far better way that doesn’t need images to be preloaded! If you’re prepared to create your images in slightly unusual way, it looks like the way to go! (found on stopdesign).

Also, NetNewsWire 1.04 is out, and //hicksdesign is one of the ‘latest additions’ in the sites drawer. Thanks Brent!

Dave Shea recently mentioned some alternatives to Doug Bowmans Image Replacement Trick. Having tried one of these methods, I realised that it would really suit rollovers without the need for javascript. Whereas previously I’d only thought it was possible by A List Apart’s method, this way doesn’t limit you to using only using bitmap fonts. Its purely image based. Apparently, Dave already uses this for the rollovers on Mezzoblue (so I’m not claiming any originality here!)

So to test this out, I’ve added a rollover & homepage link on this sites logo, and an article on how to do image rollovers with CSS. As with all my ‘articles’, please let me know if you have anything add, dispute or change. I don’t pretend to be a CSS expert, but hopefully someone will find it useful.

Here's how a plain text link can be converted into a pure image rollover using only CSS. You can see the result on the site's logo.

If you're not already familiar with 'Fahrner Image Replacement', read Doug Bowman's article on Using Background-Image to Replace Text. This presented a guilt-free way of using images for titles, although it relied on a superfluous <span> tag to hide the actual text. Not really a concern unless you were an absolute XHTML purist. The bigger problem was with JAWS screen readers, that treated text styled with 'display:none' as invisible and skips it.

The Gilder-Pixy Method

The following combines 2 techniques - Tom Gilders text-transform and Pixy's no-preload rollovers. The former uses 'text-indent: -10000em;' to hide the text from view, while the latter changes the position of the background image, rather than loading a seperate image. This means that you have to create an image containing both states, like this. These methods avoid the need to use the Box Model hack, display:none or some convoluted route to preload the rollover state. Its small code, and the rollover is faster. Combining the 2 methods also allows you to use pure images, rather than the text link/background combination (such as A List Apart)

Here's the code that went into the HTML:

<div id="logo">
<a href="/index.php" title="click to go back home">// hicksdesign</a>
</div>

No presentational markup, its just a plain ol' text link. Here's the CSS to go with it:

#logo a {
	text-indent: -1000em;
	background: url(images/logo.png) no-repeat left top;
	width: 64px;
	height: 369px;
	display: block;
	overflow: hidden; /* For nested divs in Safari */
	}

/*  IE 5 hack \*/
#logo a {overflow: hidden;}
/* end hack */ 
	
#logo a:hover {
	background-position: -64px 0px;
}	

There are 2 changes to the original code. The addition of the display: block, as the <a> tag will be treated as an inline element rather than a block and nothing will show up. Also, if the rollover is placed inside an absolutely-positioned nested div, Safari throws up a huge horizontal scroll bar (presumably 1000em wide). The overflow:hidden stops this, but needs to be hidden from IE 5 Mac or else the image won't visible.

Pros and Cons

This method allows you to create image based rollovers, without any need for javascript. Not that javascript is evil, but there are several advantages to using this method:

• Substantially less code.
• Works in IE 5-6 Win/Mac, Opera 7, Mozilla/Firebird/Camino and Safari.
• Users without CSS, or those using a different stylesheet will see the just plain text link.
• Search engines place little importance on <alt> tags, but plain text links are good. I've been told that text styled with display:none doesn't count either, but I can't confirm this.
• Javascript rollovers need an 'onMouseOver' and 'onMouseOut' event adding to the <a> tag. Accessibility validators pick up on this and request that you supply an alternative with <noscript>. A bit of a faff quite frankly.

• If the user has CSS on, but images turned off to improve browsing speed, they'll see nothing. Ooops! Tom has a solution for this which requires an extra span tag.
• One other problem is a bug in Safari, where if you place the rollover in an absolutely positioned DIV the image doesn't revert back when rolling out. Fortunately, I was able to position the logo DIV with margins instead (and decrease the amount of code needed in the process! Sweet!)

Thanks to Tom Gilder and Pixy for creating these methods!

Further Reading:

Dave Shea has written an article on Fahrner Replacement for Digital Web Magazine.

More good news! I’m very happy, because my first submission for the CSS Zen Garden has been accepted and now up on the Zen Garden Site. Its called ‘entomology’, for reasons that will become obvious. If you use Camino/Mozilla, you’ll get to see everything, as there a few pseudo CSS elements that aren’t essential, but just add a little something.

The Zen Garden is a good challenge for CSS designers – you can only change the stylesheet (although the HTML page is well marked up) so it really hones your skills. I’ve learnt more about CSS selectors by doing this, and how they can really cut down on coding.

This is the website job that I would’ve sold vital organs to have worked on! The British Library now has a virtual tour of the Lindisfarne Gospels. With the wonder of shockwave, you can turn the pages of the 1000 year old illuminated manuscript by clicking and dragging (if you don’t turn the page far enough – it falls back).

The quality of the scanning is amazing, and the level of detail you can see with the magnify option is breathtaking. I won’t go on about how this was such an important work – go see for yourself!