Building the new RavenTools.com

Company News/Tools

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

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.

While the Boilerplate template is based on HTML 5, it still comes pre-packaged with HTML, CSS and JavaScript for cross-browser normalization. The effectiveness of the template was quickly seen when I did my final rendering checks in IE — a process and browser I absolutely despise. For the first time ever, a somewhat complex layout rendered perfectly in IE! No thanks to IE, mind you.

New HTML 5 Elements

One of my favorite additions to HTML 5 are the semantic elements. They include:

  • header
  • section
  • article
  • aside
  • nav
  • footer

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.

Example of HTML5 Semantic Markup
Example of HTML5 Semantic Markup

Type and Style

Typekit

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.

I’m not a big fan of the image replacement technique, or the use of Flash based solutions like swfIR. Fortunately, I was able to use a relatively new type solution called Typekit.

Typekit uses a combination of JavaScript and forced font-face standards. It also acts as an impressive font library, enabling you to access a large variety of type faces. It currently works best on browsers using Webkit (the rendering engine that every browser should be using). It also works on Firefox, and barely works on IE (shocker!).

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.

Droid Sans versus Arial
Droid Sans versus Arial

CSS 3

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!

WordPress

The entire site runs on WordPress using a custom built theme. The theme uses several Conditional Tags and also relies on a few small-footprint plugins.

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.

Appearance Menus SubPanel
Appearance Menus SubPanel

Other than my emotional baggage about IE, I enjoyed this project. Hope you enjoy the results.

Comments are closed on this post