Building the new RavenTools.com
Before I discuss how the new Raven site was built, I first have to mention the design. Our Art Director, Jeff Crump, did an amazing job at creating a modern, clean, and minimalist site design. It was an absolute pleasure coding this site.
HTML 5 Boilerplate
The new site was coded in HTML 5, and I used the HTML 5 Boilerplate (Boilerplate) as a starting point. Boilerplate denotes itself as a future-proof base template, but it’s also past and present-proof.
New HTML 5 Elements
One of my favorite additions to HTML 5 are the semantic elements. They include:
Similar to Microformats — which are implemented on the Contact page — they provide semantic structure to data. While semantic HTML 5 elements may seem unimportant to many people, I believe they will ultimately play a significant role in communicating content and structure to search engine bots — similar to my prediction years ago that Microformats would play a significant role in SEO.
The new site uses all of the semantic elements. The navigation is encased with the nav element. The blog content uses the article element, because it’s intended for syndication. The brochure content uses the section element, but also uses the aside element for content related to the site, but not necessarily the page. The header and footer are used on each page, as is the header (and hgroup) element.
Type and Style
Like all designers, Jeff wanted to use a non-standard web font in the new design. This is the first time I didn’t tell a designer no.
The new site uses Droid Sans, which also happens to be the default font for Google’s Android (also known as the new Arial). Unfortunately, if you’re not reading this in Safari or Chrome — both Webkit based browsers — you’re still looking Arial (boo!). That’s because Firefox suffers from a bad case of uncontrollable FOUT, and IE, well, it’s still a PoS as usual.
The site uses rounded corners in a few places, and uses text shadow throughout the entire site. The text shadow effect not only looks nice, it also makes the copy easier to read on the grey textured background. Of course, if you’re reading this in IE, then you won’t see the text shadow effect. In fact, if you’re using IE 9 beta, you won’t see it either. “Beauty of the Web” my ass!
I took advantage of the new Appearance Menus SubPanel, which makes it incredibly easy to create and manage every navigational menu on the site. One of our developers, Jason Tan, also created a Coremetrics plugin, which we may be releasing to the public once we feel it’s stable.
Other than my emotional baggage about IE, I enjoyed this project. Hope you enjoy the results.