I recently started using a new CSS framework called Blueprint. I’ve been excited about the results and wanted to share some of them here.

The cool thing about Blueprint is that it truly saves time in development. It cuts the time needed to take a design from sketch to a skinned website. And because it works so well across browsers, it cuts down the time needed for testing and debugging.

It’s also flexible. It makes flowing a design into a site simple, and it cuts the labor needed to change that design once you’ve started. If you decide to add an image to the right side of the screen, for example, Blueprint allows you to just drop it in, rather than having to rework your layout from scratch.

Here are some of my favorite Blueprint features:

  • It has a CSS reset feature that eliminates differences across browsers. Those minor differences — like setting a margin at 12 pixels rather than 15 — can turn a website from beautiful to bogus real quick. Blueprint standardizes these values across browsers, creating a uniform appearance for your site and reducing the time needed to cross-check it in Firefox, Explorer, Chrome, Safari … you name it.
  • It has an easy-to-use grid that can accommodate simple and complex layouts. Most designers work in a grid, whether it’s 960 or 1020. With Blueprint, you can “snap” your design into CSS almost as easily as putting together Legos. You can also write custom CSS on top of Blueprint to accommodate out-of-the-box designs.
  • Functional form styles. It’s easy to spot a form that hasn’t been styled — it just looks ugly. With this framework, you can write the HTML for your form, and Blueprint will autostyle it. You can customize the styles as needed, but Blueprint it provides a good base to start from.
  • Ready-to-go print styles. Blueprint also includes separate stylesheets just for printing. They’re set up to hide unnecessary content like banner ads and to print web content in a one-column, easy-to-read format.

The best thing about Blueprint might be the fact that it’s an open-source, supported framework. That means there’s a community of worldwide developers constantly working on making it semantic-valid and browser-tested. As new standards emerge and bugs are discovered, Blueprint’s network of users updates the software accordingly.

So the next time I’m working on a new website, don’t be surprised if I tell you that I’m “working from a blueprint.” That’s what all great architects do, right?

Everyone knows that when developing a website, you want to think like a customer, not a marketer. You should build the site from the customers’ perspective, to address their pains, needs, and desires.

But there’s a huge gap between knowing you should do this and knowing how to do it. Here are a few techniques I use to “get into the customer’s head” and help create successful, customer-centered websites.



Imagine you’re a shopper. During the planning stage of your site, try to slip into the mindset of a customer. Think about their needs, rather than your own. Most business owners make the mistake of focusing too heavily on their own product specifications. They want to shove as much info as possible into the site—rather than considering what customers need to see before they can even get interested in a product.

For example, if you have a storefront, your customers’ priority might be as simple as finding out your hours and location. They don’t need a lot of product detail — they’ll come to your store to get that. Or if you’re selling high-end products online, customers might want to see your pricing up front. Only if the price suits their budget will they take the time to learn more about the product.

Get an outside view of your site. Pretending to be a customer is a good start, but realistically, it’s almost impossible to see your own site objectively. You’re too close to it. Start getting input from a third party—an interactive firm, a user research group, or even friends and family.

Often, an objective reviewer can spot gaps in your content or navigation almost immediately. Usually, those gaps represent your own instinctive understanding of the site content — an understanding that outside customers won’t have. In other words, you designed the site, and you “get” how it works — but no one else does.

Check out the competition. To get a fresh perspective on your own site, look at what your competitors are doing. How do they structure their navigation? Where do they place calls to action? How quickly do they introduce pricing—or do they introduce it at all?

Their choice aren’t necessarily the right ones. But seeing their approach can provide valuable insight—and again, help you spot gaps or flaws in your site that you otherwise wouldn’t spot.

If all else fails, remember three basic concerns that all customers have. Is your site easy to navigate? Is it easy to find what you’re looking for? Is it visually stimulating? If you answer “yes” to all three questions, you’ve gone a long way toward creating a customer-friendly site.