Metal Toad is now a certified AWS Advanced Consulting Partner with expertise in DCX, IoT, mobile, and beyond. Learn more.

How We Upgraded Metal Toad to HTML5 and Drupal 7

Our new site design is live, so if you're reading this in a feed reader, please click on through! In a nutshell, we wanted to redesign to take advantage of Drupal 7, HTML5, and dramatically improve the readability and usability of the site as a whole.

Old and Busted
fig. 1: Old and Busted
The New Hotness
fig. 2: The New Hotness

Drupal 7

The redesign was a perfect excuse to use Drupal 7 on a new site. It wasn't the easiest site we've ever set up, since D7 isn't even in beta yet, but the core product was surprisingly easy to work with. The real problem is that some of the modules we rely on aren't quite ready for prime-time yet. For example, Views doesn't even have an alpha of their D7 version up yet. The dev version works for the most part, but we bumped up against some real problems. Thankfully, our programmers were smart enough to find a solution to every problem I threw their way — and Dylan even contributed a fix back to Views!

In a nutshell, I'd say that the whole experience has made me even more excited to start using D7 for clients, but also cautious about doing so. It's definitely a work in progress, but when it's ready, our clients are going to love it. The improvements to the admin side alone are worth the upgrade. All that #D7UX work has really paid off.

HTML5

Since our website should serve as a model for the kind of work we can do for a client, I wanted to use HTML5 development in the redesign. These things tend to take on a life of their own, however, and instead of just converting our template, we created Boron, a new HTML5 base theme for Drupal 7. The design you're looking at right now is a sub-theme built on top of Boron, and we've got big plans. Soon, we're going to create a D6 version, and also port it to Wordpress.

For the most part, we're just using the new doctype and taking advantage of the new semantic elements. But really, we've laid the groundwork for the future, and we'll be able to implement all the new HTML5 goodies as they become supported in more browsers.

If you're interested in the work we did, be sure to check out the talk I gave at DrupalCamp LA about how to use HTML5 in Drupal. You can also download Boron to use on your own site.

Typography

One of the things I really wanted to improve in the new site was our typography. The old version of the site used a 10.5px font size, which felt unnecessarily cramped. I kicked it up a couple notches to 14px (actually it's measured in ems, but let's not get distracted) and increased the line-height to 1.5. It's a simple change, but by giving the text more room to breathe, the whole site feels better.

Photography

Good author photos on a company blog are like feta on pasta. If they're missing, it won't stop you from reading, but when they're there, it makes everything better. We're hard-wired to communicate visually, and when you can see the face of the person you're "talking to," it makes it easier to connect with them. Our previous site had photos, but they were all run through a late-90s hotwired.com-style filter with a pixelated green tint. While there's something to be said for the uniform style, I think one of the key features of an author photo should be that when you meet that person at a conference, you're able to recognize them. When we started on this redesign, I pushed hard to get good quality photos taken of everyone, and I think it's really paid off. Check out the Company page or Blog to see what I mean.

Profile Pages

I'm especially pleased with our profile pages. First of all, it's got a nice big photo. In most cases, a more relaxed or casual shot than we used for the avatar (Dylan and Joaquin are my favorites). In addition to the bio, we've got links to various social networks (and their drupal.org profile!), and we pull in their latest tweets. We're planning to expand this soon to also display recent blog posts.

Blogs

The area we probably invested the most time in was the blogs. A great deal of the traffic on our site goes straight to a blog post, bypassing the front page and blog page entirely, so we put some extra effort into making the blog post pages better. Aside from the giant headline, my favorite feature is the "About the Author" block that appears below the post. It pulls in the brand-new photos we took for everyone on the team, shows their bio, and links back to the author's profile page and also more posts by that author. Hopefully, these links will allow these direct-to-the-blog visitors to find more content that they'd appreciate.

We also tweaked the comments to work more like the way Wordpress handles them. Now, if someone from Metal Toad leaves a comment, it shows their photo and links to their profile page, but for anonymous users, we link to their website (if they provide one) and use their email address to pull up their Gravatar photo. It's a subtle thing, but I love having those photos next to our visitors' comments. It really makes the conversations feel more personal.

Comments

Great job on the redesign - I always thought that weird flash header thing on the old site was a bit odd and out of place, and I'm glad to see it gone :)

Great markup, and I can't wait to try out Boron (I'm looking for a good Drupal HTML5 base theme... so far I've been rolling my own custom themes in the interim).

I love the new site. The UI / design is very clean and a great improvement!

I took the RDFa stuff out of the base theme because it all uses xml prefixes, and I'm unclear on how RDFa will work with HTML5. We'll add it back in once I find some good information on how they interact.

Great job guys! I am looking forward to hearing more about improvements on the D7 admin side in the future. Scalability is dead, long live Usability!

Congrats. Lots of fun and good-looking Drupal site launches recently. :)

Are you using the Gravatar module for D7? Just curious to know when bigger sites use modules I work on. :)

We're doing it by hand using this code in comment.tpl.php:

<?php if (!empty($comment->registered_name)): ?>
  <?php print $picture ?>
<?php else: ?>
  <div class="user-picture"><img src="<?php print get_gravatar($comment->mail); ?>" alt="" /></div>
<?php endif; ?>

I couldn't get the module to work the way I wanted, and since gravatars are so easy to get, I just did it by hand.

Hi Dave,

We are using the 7.x versions of pathauto, path_redirect, and mollom. We had globalredirect in at the beginning, but it seemed to be producing some loops. I'm also looking forward to testing the new redirect and metatags modules soon.

What about upgrading from Alpha6 to let's say Alpha7. It will break the DB.

Yes, migrations to alpha7 (or, fingers crossed, beta1?) are certainly a concern. No doubt we'll be spending some extra effort chasing HEAD (and using / patching the http://drupal.org/project/head2head/ module) until D7 reaches beta, at which point the head-to-head upgrade path becomes officially supported.

That's also why we chose to release with alpha6 instead of HEAD. We had used both at different times during development, but ultimately my intuition is that the alpha-to-alpha upgrade path will be better understood.

The biggest obstacle for our site is likely to be taxonomy upgrades, as the taxonomy-as-field code is still in flux.

I just landed on a blog post and was disappointed that I had to scroll all the way to the bottom to see Dylan's smiling face. I liked having the author info at the top even if it isn't "standard"

It was also then confusing to find the "blog" section of the site from a blog post. It would be nice to set an active class on the "blog" menu item when people are on a blog post.

Great work overall!

Nice re-design Scott. The mark-up looks great too. (I can't believe it's been 12 months since I came here! Where does time go?)

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Ready for transformation?