Our New Blog Design

As many of you have probably noticed, Nuance Labs’ blog has a brand new design. Over the past few weeks, we have worked closely with [Jon Hicks](http://hicksdesign.co.uk/) (who also designed our logo) to create a new look and feel that would represent us well online. We are very happy with the results and hope you are too!

At our request, Jon just did the mock-up of the design, leaving the actual HTML and CSS work to us. There were some interesting challenges in implementing the design delivered to us by Jon:

* The layout makes interesting use of columns and horizontal rules, which made creating the master layout a little more challenging.
* There are many rounded corners in Jon’s design, which is always a challenge to do well.
* Some of the fonts used in the design are not “standard” web fonts.
* As with most public-facing web designs, the solutions we choose for these problems must work across all of the popular browsers, including Internet Explorer 6.0.

The first three challenges listed are the “special sauce” of the design and we weren’t ready to compromise them to simplify the work. So, we used the following solutions to achieve the above across the range of browsers our readers use:

* The core layout is mostly implemented using the [YUI Grids](http://developer.yahoo.com/yui/grids/) code from Yahoo!.
* The site’s standard typography is “normalized” across most browsers with the [YUI Fonts](http://developer.yahoo.com/yui/fonts/) code, also from Yahoo!.
* The “special” fonts used in Jon’s design for headings and a few other elements are implemented using [sIFR](http://novemberborn.net/sifr3). Basically, a script hides the actual heading text by overlaying it with a Macromedia Flash version of the heading using the font we embedded. This allows us to keep the text dynamic while still using the font of our choosing without requiring it to be installed on your computer.
* The rounded corners are implemented using the “[Mountaintop Corners](http://www.alistapart.com/articles/mountaintop/)” method, as described by [Dan Cederholm](http://www.simplebits.com/).

Using the above tools and techniques, we were able to implement the design in a way that (mostly) works in Firefox, Mozilla, Internet Explorer, Opera, and a few other browsers. I say mostly because we still have a few kinks to work out in some browsers. Overall, though, we’re pretty happy with what we achieved.

We’d love to hear what you think of our new template! Also, if you see something that looks “wrong” in your browser, let us know and we’ll add it to our list of gremlins.