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

Project Description

This web site is for a ministry that assists people in sharing their faith.  Specifically, they teach presentation skills.   Individuals will learn how to present their unique message to small, medium and large groups.  This ministry is headed by Mary Ann Mariani.  The web site is a place where visitors can learn about various workshops that are available to help them with presentation skills.

Design Process

For this project I wanted to learn as much as I could about the organization and what their goals were.  I needed to get an understanding of what Kingdom Presenters wanted the user to experience.  In the beginning phase the goal was to provide information about Kingdom Presenters and to provide credentials and principals of the organization.   Also in this process it was important to get an understanding of the visual elements that would augment the message.

Graphic Design

With an understanding of the organization I started to create the Kingdom Presenters logo.  The idea was to show the kingship of God.  The elements of the heraldic shield with wings, banner and crown was selected.  The color theme would be Gold and Purple both very royal colors.

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

Building the Site

Upon approval by Kingdom Presenters it was now time to develop the website.  First, the graphic image was spliced in Photoshop.  Each graphic element was them placed on in the HTML and was positioned using CSS to create a master template from which all the pages would be build.  Creating the master template helps in developing as site and keep pages consistent.  Once the master template was created I could now develop the navigation.  In order to create the navigation a site map that show each page and its relationship to adjoining pages was needed. Some of the pages decided on were these:

• Home Page
• My Story
• Workshop
• Workshop Descriptions
• Registration
• Date
• Reviews
• Contact
• 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.

You can visit this site at http://www.kingdompresenters.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 Ecommerce
• 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

When it comes to your website, extra attention should be paid to every minute detail to make sure it performs optimally to serve its purpose. Here are five important rules of thumb to observe to make sure your website performs well.

1) Avoid the use of splash pages

Splash pages are the first pages you see when you arrive at a website. They normally have a very beautiful image with words like “welcome” or “click here to enter”. In fact, they are just that — pretty vases with no real purpose. Do not let your visitors have a reason to click on the “back” button! Give them the value of your site up front without the splash page.

2) Do not use excessive banner advertisements

Even the least net savvy people have trained themselves to ignore banner advertisements so you will be wasting valuable website real estate. Instead, provide more valuable content and weave relevant affiliate links into your content, and let your visitors feel that they want to buy instead of being pushed to buy.

3) Have a simple and clear navigation

You have to provide a simple and very straightforward navigation menu so that even a young child will know how to use it. Stay away from complicated Flash based menus or multi-tiered drop down menus. If your visitors don’t know how to navigate, they will leave your site.

4) Have a clear indication of where the user is

When visitors are deeply engrossed in browsing your site, you will want to make sure they know which part of the site they are in at that moment. That way, they will be able to browse relevant information or navigate to any section of the site easily. Don’t confuse your visitors because confusion means “abandon ship”!

5) Use audio wisely on your site

If your visitor is going to stay a long time at your site, reading your content, you will want to make sure they’re not annoyed by some audio looping on and on on your website. If you insist on adding audio, make sure they have some control over it — volume or muting controls would work fine.   If you provide audio content like music, teleseminars, speeches, audio books then you need to embrace the audio technology available to push your content to the user.

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 Ecommerce
• Custom PHP Applications and Programming
• WordPress Installation & Customization

Get an affordable, attractive great website today.  Hire Me For Your Web Design Solution. View my portfolio at http://portfolio.mediatunes.com

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 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.