Scott Vandehey's Blog

You should follow us on twitter or subscribe to our RSS feed if you want to stay on top of all the latest.

How we made the Metal Toad site more mobile-friendly with media queries

There’s been a lot of buzz lately about Responsive Web Design, and in particular about CSS3 Media Queries. When our CEO recently asked me to make our site easier to view on his mobile phone, I jumped at the chance to retrofit our fixed-width layout using these new techniques. In a nutshell, media queries allow you to define alternate styles that are applied to certain screen sizes. The obvious example is to pass a mobile stylesheet to small screens, and your regular stylesheet to large screens. Read More…

How to use @font-face to avoid faux-italic and bold browser styles

Did you know that if you declare a custom font using @font-face, the browser will try to fake the bold and italic styles if it can’t find them? This is a clever little feature that avoids a scenario where a themer specifies a font and is then confused that bold and italics don’t work, but it can be very confusing if you actually have a bold or italic version of the font. In this article, I’ll walk you through how to properly load your font files to avoid the browser’s faux-italic and faux-bold styles. Read More…

How to Add Theme Settings for Drupal 7

You know that list of checkboxes on the theme settings page that let you turn on and off parts of the theme like the logo or slogan? Well, you can add your own options to that list really easily in Drupal 7. In D6, this was kind of a pain, because you had to write all sorts of functions to save and load your settings to the database and handle everything properly. In D7, that's all done through the Form API, so the heavy lifting is done for you. All you need to do is tell it to add some form fields, and what the new setting is called! You'll need to create a theme-settings.php file in your theme, and add this code to it: Read More…

I took it and so should you—The Survey For People Who Make Websites, 2010

The annual Survey for People Who Make Websites from our friends at A List Apart has gone up, and I encourage you to take ten minutes to participate. This survey is the only source of information about our industry, and by taking it, you benefit us all. Here's what they have to say about it: Read More…

New York Times Claims HTML5 is a "Pandora's Box" of Privacy Risks

Alarmist rhetoric from news organizations about the web is nothing new, but today's front-page headline on the New York Times still caught my eye: "Web Code Offers New Ways to See What Users do Online." It's about HTML5 privacy risks, and it's a load of crap. Read More…

What Makes HTML5 so Great?

When the W3C started working on HTML again in 2007, they posted a set of guiding principles for the new version, emphasizing compatibility, utility and interoperability. I’d like to highlight four of these principles that I think are especially important. Support existing content Degrade gracefully Pave the cowpaths Priority of Constituencies In the process, I’ll explain why HTML5 is not just the latest version, but represents a fundamental shift in the philosophy behind HTML. Read More…

optimizeLegibility does not work with @font-face

Recently, twitter was buzzing with news of a CSS technique called optimizeLegibility that enables better kerning and font ligatures. It's enabled by default in Firefox above 20px text, so you may have already seen it in action. I'd noticed the effect on my Talk Like Warren Ellis site (warning: possibly not safe for work language). I happily added it to my stylesheets, and was pleased to see the effect start working in Safari and Chrome as well. However, when I created the new Metal Toad site, it wasn't working. Read More…

Semantic Views is Awesome

Like any Drupal themer, I've done my share of grumbling about the frequently ridiculous level of nested divs with dozens of classes. I'd heard some people mention a module called Semantic Views, but I never really understood what it was for until I found this video. If you don't understand what the big deal is either, take the four minutes to watch. It's a total "ah-ha!" moment. I'm happy to say that I just used Semantic Views for the first time on a client site, and it's just as awesome as everyone says. It saved me a ton of work and let me get exactly the markup I wanted, even while working around Chuck's nested views. Read More…

How to Change the Content-Type Meta Tag in Drupal

I'm working on an HTML5 theme for Drupal 7 right now, and I needed to change the meta content-type tag. By default it looks like this: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />, and I needed the updated HTML5 version: <meta charset="utf-8" />. Normally, you can replace these things in one of the theme template files, but in this case, the meta tag was hard-coded in the Drupal source code somewhere, so I needed a programmatic solution. Here's what I found for both Drupal 6 and 7. Read More…

Pages