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.

Related Posts Plugin for WordPress, Blogger...

Tell us what you think

  • Bob Belderbos

    Thanks for the interesting article
    Less is more thanks to css3 and html5

  • Paul Irish

    > And while it does (90% of the time) fix FOUT on Firefox for Windows, it’s a total failure on Firefox for Mac.

    weird!

  • Jon Henshaw

    Paul, I already have the anti-FOUT code in the head, because Chrome for Mac seems to behave better with it. And while it does (90% of the time) fix FOUT on Firefox for Windows, it’s a total failure on Firefox for Mac. I have no doubt that it probably has something to do with how the site is coded, the size of the files associates with it (js, images, etc…), but I don’t have time to debug and deconstruct everything, just so I can get it working on Firefox for Mac. So for now it’s Webkit browsers only.

  • Paul Irish

    Jon here’s a guide to making Firefox behave like Chrome when it comes to FOUT:
    http://www.html5rocks.com/tutorials/webfonts/quick/#toc-fout

    Typekit shares the same code as the webfont loader, so those classes should work there as well.

  • Jon Henshaw

    Sweet! I just wanted to make sure I wasn’t missing something. Anyways, thanks for taking the time to check out the code and comment. Appreciate it!

  • Jason O’Brien

    Jon, after looking at that section more closely, I think you’re right. At first glance I had misinterpreted what was going on, but since those items are related to the tool you’re currently looking at, I’d say it’s a perfect use case for “aside.” I stand corrected!

  • Terry Van Horne

    Nice… haven’t seen any reason to start with HTML 5 til now. Thanks for the info on semantic elements. With the info provided on the Caffeine update mentioning parallel indexing using segments these semantic elements could become very important in defining these segments for indexing.

  • Jon Parker

    Looks amazing! Congrats guys!

  • Jon Henshaw

    Jason, curious to know why you think the aside element is being misused. The aside element is for tangential information. The spec states:

    The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.

    Also, I’ve read that FOUT article, along with several others, many, many times! I couldn’t get it to work well with my implementation, so I had to give up on it for now :( When I have the time to troubleshoot it more, I will. I definitely want to use it for Firefox too.

    Thanks for the feedback, and woohoo to HTML5 and Microformats!

  • Jason O’Brien

    Oops, re: my previous comment, that was supposed to be the “aside” tag not fitting in with the W3C spec, which I enclosed in brackets (and got removed).

  • Dana Lookadoo

    Impressive! Really like the redesign and appreciate your sharing what worked and the downsides of IE (agree with Marty). Raven’s pushing the limits. Well done!

  • Jason O’Brien

    Very nice, glad to see you guys pushing forward with HTML5, and your use of Microformats is great to see.

    If I was being picky, I’d take issue with your use of as it doesn’t fit in with the W3C spec of how to use it. You’re not necessarily wrong, and I enjoy seeing how people use the new elements.

    You should be able to use TypeKit’s Font Events to control FOUT in FireFox: http://blog.typekit.com/2010/05/14/typekit-font-events/

  • Jon Henshaw

    Maybe you need a new monitor, because that’s orange! As long as you can see the login link, we’re good. ;)

  • netmeg

    It looks great, but I have to be honest, my ancient eyes have a serious problem with that red on grey nav up there. It kind of hurts. Seriously.

    But I’m already signed up, so what do I know.

  • Marty Martin

    Down with IE!

    Thanks for the round up, I’m going to check out that boiler thing who-bee what-y soon.