John Pape Online Blog

Project Description

This is a website for a business coach that helps financial advisors and attorneys.  What Solutions Directed Coaching does is help individuals grow their business and improve their personal life.  The website was created to introduce the services that are available to the client.  The owner of the company is Thomas Fuchs.  Site visitors can learn more about the ways Thomas can help them grow there business through various coaching programs.

Design Process

In the beginning I spoke with Thomas regarding the primary goal of the site.  I also requested that he provide some sample sites that he liked.  We also looked at web sites from others in the industry to see what they were doing.  After looking at the sites and the competition, I set out to create the graphic layout.  Also for this project I decided to build it using WordPress.  By doing this I allowed the client to create the primary content.

Graphic Design

As this is a newly formed business there weren’t any  graphic assets to work with.  Therefore I needed to start from scratch.   Using the ideas and concepts collected in the initial phase of the project I designed a layout.  During the process the idea of being global kept coming up.  As you can see the main heading is a map of the world to indicate the global aspect of the company.

As I mentioned before there were no assets to work with so I also designed a logo for the company.

Because the site was built using WordPress, I knew that certain areas of the site would require certain design features. Even so, it seems like 80% of  WordPress site use a horizontal menu.  The layout that the client liked had a vertical sidebar navigation menu.

All of the site layout was done in Photoshop with some elements built in Illustrator. Several variations of the design were created and the best solution was selected.

Building the Site

Once the design was approved, it was time to built  the site.   WordPress was installed and now I needed to modify it to match the design.  For the Theme I started with Thematic.  This gave me a starting point and I built it from there.  During this project I learned that it is best policy to leave the main theme alone as much a possible and modify it using what is called Child themes.  Child themes basically modify the main theme.  In some ways it is like using layers in Photoshop.

One thing that make this a distinct WordPress site is it has a vertical navigation in the side bar.  I happen to like side menus because they can expand as more or less items are placed in the navigation.  The menu was styled using CSS.  Also I used the new 3.0 menu function.  This made it easy to add only those pages that we wanted in the navigation.  Here was the final navigation at the time of publication.

• Home Page
• About the Coach
• Coaching for Financial Advisors
• Coaching for Attorneys
• Program Options
• Guarantee
• Contact
• Blog

One great feature of WordPress it the ability to add functionality through plugins.  There is a great community of contributors and you can find almost anything you want.  Here are some of the plugins used

• All in One SEO Pack – Make page optimization easier.
• Audio player – Allows easy installation of MP3 audios
• Blogger Importer – Previously Thomas had a Blogger account.  This plugin made it extremely easy to import all of those posts into WordPress.
• Contact Form 7 – This plugin allow for custom forms
• Easy Sign Up – Use for lead generation
• Google Analyticator – Add Google Analytics  code and allows for custom attributes to be added
• Google XML Sitemaps – Helps the site get indexed in Google, Bing and Yahoo
• Smart Youtube – Really easy way to embed videos into posts or pages
• Subpage Listing – Needed this to keep track of subpages, especially because I used to WordPress menu
• Enhanced Paypal Shortcodes – Allow the addition of Paypal buttons

I decided the build the site in WordPress because I knew it could be build quickly and economically.

You can visit this site at Solutions Directed Coaching to learn more about this organization.

Need A Web Site?

Custom Web Design for Small Businesses by professional and experienced web designer and developer.

Here is what I can do for you…

• Innovative Web Design
• Graphic Design Logos
• Maintain Your Website
• Data Driven Content
• Flash Applications
• Build Shopping Carts for E-commerce
• Custom PHP Applications and Programming
• WordPress Installation & Customization

Get an affordable, attractive great website today. Hire John Pape Web Designer For Your Web Design Solution. View my portfolio at http://portfolio.mediatunes.com – 619-593-9483

Project Description

This is a website for an author who is self-publishing his book.  He needed a website to help promote and sell the book.  The book is written by Tim W. Turner.  The web site is a place where visitors can learn the book and other item available as well as request Author Visits

Design Process

For this project I got an advanced copy of the book in PDF format.  By browsing through the book I was able to get an understanding of the content as well as the general look and feel of the book.   I was able to design the layout using graphic elements and page layouts to develop the basic web layout.  I was also in communication with the client to get information regarding what they wanted to website to do.

Graphic Design

A logo was provided by the client.  It is basically a question mark.  It was important to include this in the design.

The next point of action was to create an effective web layout that was clean and easy to navigate.  From here Photoshop and Illustrator was opened and began to create the basic layout. Several ideas were created and the best solution was selected.

Building the Site

One the design was approved it was time to built out the site.  For the images, I spliced the Photoshop image to get the header, footer, navigation and page background images.  Using CSS I put together the page elements and place each image as a background for each area.

• Home Page
• About the Author
• Authors Visits
• Questions Stuff (Ordering)
• Contact the Author
• Site Map
• Privacy Policy
• Terms of Use

Because the site has under 20 pages it was build on a static rather than a dynamic platform. A site with under 20 pages can be easily managed without a CMS. However as the site grows it can be converted to a dynamic site that utilizes some kind of CMS.  PHP was used for the form submissions and JQuery was used for form validation.  Once all the pages were created and link through the Navigation system it was time to upload and test the site.

For common elements like the header, footer and navigation.  I stripped the HTML code and created separate files that can be included using PHP.  The primary reason for doing this is the ease of maintenance.  By including the files there is only one file to change or edit rather than going through all the pages.  Make life easier.

The client wanted to have scrolling review and testimonials this was accomplished by using  jQuery. This made for quick and easy implementation of the scrolling function.

You can visit this site at http://www.questionsthebook.com/ to learn more about this organization.

Need A Web Site?

Custom Web Design for Small Businesses by professional and experienced web designer and developer.

Here is what I can do for you…

• Innovative Web Design
• Graphic Design Logos
• Maintain Your Website
• Data Driven Content
• Flash Applications
• Build Shopping Carts for E-commerce
• Custom PHP Applications and Programming
• WordPress Installation & Customization

Get an affordable, attractive great website today. Hire John Pape Web Designer For Your Web Design Solution. View my portfolio at http://portfolio.mediatunes.com – 619-593-9483

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)

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

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.