I don’t get to build EE sites that often anymore, but when I do, interesting things are bound to happen. Now that Pixel & Tonic has (finally) launched, I figured I’d take the opportunity to talk a bit about the process behind it, and show off some of the cooler parts at work. This is the first installment of a week-long series. Enjoy!

The Name

Several people have asked me how I came up with the name. I’d love to tell you that it just came to me – that it’s a way of saying “We work hard and we play hard” or some BS.

Truth is, it’s the result of spending days on GoDaddy, hunting for that one halfway-decent, available domain name. At one point I almost settled on “EngineApparel”, but the initial reaction from a few friends was less than validating. Finally the idea of “something-and-tonic” came to me while driving to work one morning. PixelAndTonic.com was my first choice, and when it turned out to be available, I swear I could hear angels singing.

The Logo

I got in touch with Rob Morris, the mastermind behind those Playa 2 ads, pleading for help with the logo. And despite my jumbled, self-contradicting attempt to describe what I wanted, I think we can all agree that what he gave me is perfect:

The Design

The only problem with a great logo is designing a site that does it justice. And unfortunately, Rob didn’t have the bandwidth. I got in touch with one of my favorite agencies, who were happy to help, but unfortunately it became apparent that my timeline and their availability weren’t matching up. So I decided to give it a go myself.

I started with an add-on overview page, since the lot of those tend to get the most traffic. My first take ended up looking pretty decent:

But then I moved onto the homepage, where I found this design to be stubbornly immalleable. I couldn’t for the life of me find a way to mold it for another layout. So I decided to pull the plug on it, and start over.

This time, I started by listing out the types of elements needed on a few different types of pages: the homepage, an add-on overview page, an add-on documentation page, etc. I then made a few rough sketches of those pages, and got to work on the homepage. A few false starts later, I came up with something not far off from the final design:

My goal for the homepage was simple: to get the message across that although Pixel & Tonic may be new, the guy behind it, and the add-ons, are not. Originally I was planning on accomplishing that by including a blurb about myself on the homepage, leveraging my own name’s recognition and reputation. But amidst the design process I realized that it would be far more effective to instead feature a few notable quotes from respected people in the community, and list a bunch of recognizable logos of agencies who are using my add-ons. I think the end result gets the job done very well.

Against all odds, I’m happy to say that I’m indeed proud with the design of this site. Although I do love designing interfaces, designing a full website from scratch – that big, empty canvas – scares the hell out of me. I’m glad I faced my fear, but I’m not exactly about to go looking for more web design gigs anytime soon.

HTML5, CSS3, IE Zero

This is the first time I’ve gone all-out with HTML5 on a website. Not talking about those arrogant frontmen <video> and <audio>, but rather <header>, <footer>, <section>, <nav>, <hgroup>, <article>, <figure>, and <aside> – the real musicians.

Overall it’s been nice, mainly because it makes the markup that much easier to follow while working on it. There’s less thought involved in reading and comprehending a </article> than something like </div><!--/.article-->. If you’re thinking about seeing what all the fuss is about for yourself, HTML5 Doctor’s Glossary proved an invaluable resource for discovering the new toys, and learning how to use them the way God intended.

There’s also a healthy mix of CSS3 on the site, mainly in the form of border radii, box shadows (outer and inset, for those of you that take the FF 3-6 to work), and background gradients. There’s even a CSS mask on the homepage, creating that fade-out effect when an add-on hero image nears the edges of the container (Chrome 5 and Webkit nightlies only).

So what about IE? Well, thanks to the fact that I’m targeting other web developers, I can say with 97.3% certainty that you’re not using it. Which is awesome, because that gave me a practical reason not to worry about it (besides just not caring). I did scope out the damages a couple days before launching, and it wasn’t pretty. Not even remotely usable. I’ll probably deal with that in some form eventually, but it’s most certainly not going to be full support.

That’s it for today; thanks for tuning in! This series will continue tomorrow with a look into how the site is structured, so make sure you’re following @pixelandtonic or subscribed to our RSS feed to be notified about that.