Hicks

You’re reading all articles on The Hickensian tagged 'mozilla'

Cairo beats Safari?

As highlighted recently by Jeffrey Zeldman, Firefox text rendering lags behind that of Safari, or rather Gecko lags behind WebKit. This is because at present, Gecko browsers use the older Quickdraw graphics library, originally developed for OS 9, rather than Quartz, or the more recent Core Image libraries. Its been the main reason I prefer Omniweb or Safari over Camino/Firefox, text just looks SO much crisper and smoother.

Things are about to change however, as the switch to the Cairo graphics library in Gecko browsers will allow them to use Core Image on the OS X platform. There is already a developer release of Firefox 3.0, codenamed Gran Paradiso with Cairo enabled. You can also grab a latest trunk build of Camino, which also uses Cairo.

The improvements are already easy to see. My personal rendering bugbear has been the sub navigation on Amazon, which always renders roughly, particularly in Gecko. Compare these screenshots:

Comparison screenshots of Amazon navigation in Camino 1 Safari 2 and Camino 1.2+

Not only is Gecko with Cairo improved, it actually looks better than WebKit!. Looking at the example that Zeldman used, italics are MUCH improved also:

Zeldman.com in Camino 1.2+

It’s early days so there will be plenty of bugs, especially as the Mac platform is behind Windows and Linux, who’ve had Cairo enabled for about 6 months now. Testers are needed for OS X, so if you can lend hand, so please do grab a build and get reporting those bugs.

Thunderbird

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:

original sketches by Stephen Desroches

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:

my working sketches

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.

Native American Thunderbird

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.

my working sketches

Here are the final icons:


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.

branding firefox

screenshot of the new about window

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:

first idea for the firefox logo

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.

the original concept sketch and the final logo

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.

The different pixel resolutions of the firefox icon

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