John Pape Online Blog

I recently completed a project for TSM advertising.  My mission was to provide a fresh new look and feel of the site.

Here is a screen shot of the original site.

Tim Turner of TSM Advertising wanted something that “popped out” better than the muted blue and gray theme that was in the old site.  So I put on my thinking cap and here is the new design.

You can visit the site at:  http://www.tsmadvertising.com

As you can see it’s has more color and more vibrant than the original site.

As far as the site’s architecture, I basically kept the linking and page names the same.  I basically re-skinned the site with the new look and added a couple of new features.

CSS

The page layout is table-less CSS.   I used Blueprint CSS to create the layout grid.  Blueprint is a CSS framework that allowed me to quickly create the site’s basic layout.  The layout I used was to divide the page vertically in thirds.  The nice thing about Blueprint and other CSS frameworks is the ability to keep the vertical line straight.  That help with making the layout look a lot cleaner.

Navaigation

For the navigation, I used a technique call CSS sprites.  This technique allowed me to create one image file then let the CSS make to proper alignments and adjustments.  There are three states to the the menu.  Static, Active and Hover.  The advantage to sprites is there are fewer HTTP requests and the image is actually smaller that if it was sliced as separate images.

Slide Show

The large image slide show that is found on each page next to the navigation use jquery to create the slide show.  jquery is a framework that works well with css and javascript.  There are many resources for jquery and I’m learning more about it ability to create special effects.  I though that for this web site I would use jquery instead of Flash for the slide show.

Page Title

For the page title I used sifr.  With sifr I don’t need to worry about the user having the special font installed on their computer.  With the combination of Flash, javascript and CSS I am able to use any font on the website and it will show as I want it to show.  The font I used was Myiad SemiCondensed Bold.  Now some users may have this font installed on their computer, but I imagine not everyone does.  So with Sifr I am able to use display fonts.

PHP

As with nearly all the site I develop I use PHP quite a bit.  On this site there is no exception.  One powerful function that I love is the include() function.  This function will include a file into the web page.  For each page there are basically three include files 1) header.php 2) nav.php 3) footer.php.  What is nice about include files is when the code is exactly the same in each page there is only one file to maintain.  I had to do maintenance on static HTML files. One site I inherited had about 200 HTML pages.  One day the company wanted to update the site navigation and I knew that I had to edit each page.   It was quite time consuming, but I knew that if the navigation was in a separate file I would only need to edit the one file and be done.

Also there is a web form on the site and it used PHP as well.   There is the mail() function that is very useful.  Also, an auto-responder message is created for the form.  Also, I used jquery to validate the form.  Very nice and each to implement.

All in all this was a vary satisfying project.  I am pleased with the results.

In addition to this website I have a couple of others as well.  From time to time I go in and tweak the site to make them better.  One site I’ve been working on is http://www.accordionboot.com It is what you would call is single product e-commerce site.  This item is used in many application primarily in vehicles.  It is used as a gasket in truck campers and also use in a blow-through audio port for car audio speakers.

Recently I expanded the site to include new pages.  The goal for creating these pages was to develop new content that would help in my SEO for the site.   To accomplish this I added a resource page.  On the resource page I added several page that relate directly to the accordion boot product.  I included these pages:

• Glossary of terms
  The idea behind this was to create a list of keywords that are related to this product.  Then provide definitions of these words.  The hope is to create a keyword rich content.  In turn, I hope that it will attract the search engine spiders and index this page.
• White Paper
  The purpose of a White Paper is to provide a document that will provide information regarding the product.  The format contains 5 sections:
  • Abstract
  • State the Problem
  • Describe the Product
  • Tell how the product solves the problem
  • Conclusion

  Again the purpose of this document is to provide my client with additional information that will allow them to make an informed decision when they decide to purchase the product.

• Technical Data for the rubber material
  I added this page to provide proof and evidence of the technical performance of the material used in the product. With this I hope to gain trust with the client.  Although this data is technical, it will appeal to a certain segment of my audience that wants this type of detailed information.
• Online calculator
  This page came about as a result of one of my customers ordering the wrong amount of accordion boot material.  As a convenience to my customer I included an online calculator that will help them determine the amount of material they will need for their project.  As the boot is designed to fill a gap between two openings, all a person has to do is make a few measurement, then enter the numbers into the appropriate form.  The calculator will them use the proper formula to determine how many feet are required.  The form uses javascript to perform the math functions
• Installation Guide
  Although the material is very simple to install, one issue that popped up was how to properly boot the two end together.  This page has a visual representation of how to do that.  I create an illustration in Photoshop to help the customer visualize the solution.

Now that I’ve added these resources to my website, I can now monitor any improvements in incoming traffic.