John Pape Online Blog

Clean and simple corporate theme

Included pages:

• Homepage
• Blog
• Services
• Projects
• About Us
• Contact
• Privacy Policy
• Terms of Use

Item Attributes

• Created: October 15, 2009
• Design Style: Clean CSS
• PSD Included: Yes
• Valid HTML: Yes
• Layout: Fixed Width 960px
• Documentation: Well Documented – One RTF file
• Compatible Browsers FireFox 2, FireFox 3, IE6, IE7, IE8, Safari
• jquery image slide show
• Tableless layout
• Easy to Customize
• CSS Based Template (Layout based on Blueprint CSS Framework.)
• Ready to use contact form with php script
• Uses CSS Resets

Get this web template today for only $45
(non-exclusive use)

Technorati Tags: Blue, business, clean, corporate, css, HTML, jquery, Photoshop, PHP, PSD, valid css xhtml, Web Design, Web Template

I recently updated the look and feel of the Silent Voices website.  Here is a brief description of the organization:

Silent Voices is a ministry that provides services to women struggling with pregnancy and abortion related issues. Silent Voices provides care to pregnant women, single mothers and their children, as well as to women who had already had an abortion.  They offer pregnancy tests, abortion/pregnancy education, emotional, physical and spiritual support and post abortion support groups. While Silent Voices firmly believes in and advocates the sanctity of human life, all of our clients know that they are loved and accepted no matter what their situations, backgrounds or choices.

Here is a screen shot of the website before.

Silent Voices Web Layout Before

Sharon, the director of Silent Voices contacted me and wanted to get a fresh new look.  The layout was created several years ago she wanted to move away from the pink and blue theme.  As we we discussed the changes, she indicated that she would like to have brighter colors, more of a springtime feel to the site.  She felt that it would be more inviting.  It was at this point that I put my creative juices to work.  One thing that did help was she did provide me with examples of websites that she liked.  This is always helpful as a starting point.  I proceeded with creating three mockups in Photoshop for her and the board members to view.  Once we nailed down a design, I was able to further refine the design with additional revisions.  Finally, we had a new layout design had here is a screen shot of the final version.

Silent Voices Website Layout After

The conversion

For this project, my job was to create a new look to the website.  The existing content is the same.  I did add a couple of additional pages but nothing major. The old site also had a “splash page” and that was eliminated.   The previous site was built on a table style layout.  The new layout would be based on a tableless CSS design.  For many of my projects lately I’ve been using the Blueprint CSS framework as a starting point for my designs.  It is a good idea to have this in mind when creating the layout.  Blueprint does have a PSD with the Grids to help with the design layout.  The Silent Voices layout is 950px wide with 2 columns based on the 1/3 divisions.  The left column is 1/3 and main content is 2/3.  Blueprint makes it simple to make these divisions in the CSS.

The website is hosted on a Windows based server.  And all of the existing pages are static html.  The orginal site was created in Dreamweaver using the Template function.  Using Templates in Dreamweaver made the conversion of each of the html files very easy.  I don’t use this very often, but when I started maintaining the site I needed to learn how to use the templates.  What I did for this site was update the main.dwt file to the new layout and then convert the files.  It was quick and easy.

I’ve also started using  jQuery recently.  This is a javascript framework that is used to create some amazing effects.   There is a slide show that uses this technology and was easy to implement.

When the site was approved, I backed up all of the old files.  It is always a smart thing to backup when making a conversion.  Just in case there is a problem and you need to revert back to the old design.  Of course this was not the case.  The conversion when quite smoothly.  I only had to make a few very minor adjustments.

You can view the site at http://www.silentvoices.org/ And finally, if you have an idea for a website that you want designed and developed please contact me.  I am available to help you with your online presence.

rwjbd5ixpe

Technorati Tags: abortion, blueprint CSS, css, Dreamweaver, Graphic Design, javascript, jquery, ministry, mockup, Photoshop, PSD, Web Design, Web Development

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.

Technorati Tags: css, jquery, Photoshop, PHP, Web Design