Occasionally I need to mockup where the ads are going to go in an application (it has to pay for itself somehow, right?). Rather than putting the ads into the application while I am still doing development, I use some simple CSS to put a placeholder where the ads will go. In Rails, it looks like this:

<div class="ads vertical_tower">
  <% if RAILS_ENV == 'production' -%>
    <script>... Live Ad Code Goes Here </script>
  <% else -%>
    Ads Go Here
  <% end -%>
</div>

Then I can use my simple ad template CSS to make it standout. Check out the css source on Github

photo by texas_mustang

One of the things I like about taking a project from start to finish is the first few rounds of development where we hammer out what the application is supposed to do. After reading Kathy Sierra’s article “Don’t Make the Demo Look Done“, I wanted to see if I could come up with something similar to the Napkin Look and Feel for my web applications.

Why is it important? I have found out the hard way, what Joel Spolsky points out in The Iceberg Secret, Revealed. As soon I start putting the colors, graphics, and drop shadows in place for the finished product, the attention is no longer on the functionality of the application and now turns to “could you move that button over 5 pixels?” And this is still while half the application remains unfinished!

So this is my interpretation of making the demo look like a demo. It is completely driven with a separate CSS stylesheet that can be removed and replaced with the finished stylesheet. I make use of the Yahoo CSS and some paper background images. I have even contemplated making use of the Tongue In Cheek icons to make it even more authentic. I would have used a handwriting font, but there is not a good cross browser way to deliver fonts, so Comic Sans will have to satisfy the prototype font requirement.

Here are what the initial screens look like for a new application:

• Home Page
• Sample Page
• Sample Page

Does it work?

So far it has worked great. And as soon as we switch stylesheets, we lose focus on the functionality. Every time. So I will keep using this and keep pushing this as far as a project will let me.