Archive for the ‘Website Design’ Category

If you are a website designer who likes PHP, you need to have a test server.  There is no better  solution in my mind than XAMPP.  You can download it right here.  I will be making a tutorial soon on how to install and use… but it isn’t crazy hard to figure out,  so go to it!

Managed Services Directory

PC Network Services out of Pittsburgh belong to a group of Managed Services providers.  As part of their link building program, I came up with the idea to launch a cooperative blog / directory that would help the members promote each other.  The website is designed on a WordPress platform and incorporates Google Maps to help map out the geographic location of each company.  The website contains articles written by the various members and also videos I create to help build some traffic.

Admiralty Blog for Moschetta Law

Washingtop, PA Webiste Deisgn

Custom WordPress Template

I needed to create a new WordPress template that incorporated the new Moschetta Law Logo into the design.

I decided to create a similar look and feel to the main website but make it stand out so that the user knew that they were in a different area- the blog. I also added a FaceBook plugin so that users can share the posts on their FaceBook account if they choose to.

Florida Website Harris Resources

This website was designed for Julie Harris of Harris-Resources.com.  The website required registered users to be able to either post jobs or resumes depending on their permissions.  I worked with a website design firm in Florida to complete this project.

Jupiter Florida Website Design

Real Estate Website Design

Rose Vasha at www.rosevasha.com needed a website developed that would tie into the Florida Multilist and also display featured properties.  This website was designed with WordPress and Open-Realty.  While, overall I am pretty happy with the design, there are certain elements that were requested that I did not like, mainly the sand in the background and the music on the home page. I rarely use any type of textured backgrounds because they tend to distract the eye and I am not a fan of background music in general.

All and all, the site has been a success and if you are looking for real estate in Florida, Contact Rose!

Worlds In Motion

Part of the Heinz History Center, the WorldsInMotion.org website needed to be converted from its then, incomplete state into a finished ready to go website.  Because the website was unfinished and broken in many places I had a basic design to work from.  The structure of the website was recreated in a Joomla website install.  This offed the website’s managers to add their own content and modify existing content.

The design of the website is wonderful, but the previous design company had proprietary elements to the website that they would not release to the client.  This is such an  important aspect in selecting a website design firm.  Make sure that you get all you pay for.  You should be allowed to host your website anywhere and walk away with a functional website if you ever decide to leave the agency.

I get people asking me where to find the storage location of Joomla’s default images.  The default location is images/stories.  You can change this setting in the Global settings but keep one thing in mind… it will not be a retroactive change… so if you have your images currently in the stories folder and want them to be located in the images/ folder, the setting will not affect existing images.  If you have a new site, great.  You are good too go.  If you have an existing site, be prepared to do some leg work or keep the stories/ folder for all old images and start storing the new ones in the images/ folder

Online Quotation System

Website designed as a quotation builder

The WeldedWirePanels.com website was designed to help users get the best information on the Tamis Corp’s line of welded wire panel security fence.  The site offers multiple ways for the user to get in contact with a Tamis sales rep with multiple displays of the company phone number, a main contact form, product specific forms for more information, online chat and the quotation system itself.

The site is designed in a content management system with an integrated shopping cart converted from a payment function to only deliver a ballpark quotation.  At the point of checkout, a sales rep will be notified and can contact the user to discuss their needs further.

The site also produces a squeeze page housed in a lightbox when users first visit the home page.  This squeeze box is designed to point the user to any special offers on fencing packages.  It is built on a 15 day cookie and is much less invasive than a traditional pop-up window.

Five Extensions you will use a lot

Expanding Joomla

Joomla kicks arse as it is, but when you have thousands upon thousands of people out there trying to make it better and more flexible, you are in for a rock solid content management system. Here are five extensions that will make your life easier and add to your Joorma experience.

1. Joomla Content Editor (JCE). The default editor is a pain and does not work well. USE THIS ONE.
2. Joomlapack. Great component for keeping backups of your site. Makes it really easy to more and restore.
3. Jumi. Is a good tool to use if you want to paste code into your site, Javascript, PHP, etc. It will keep it clean and tidy.
4. eXtplorer. You can edit all your files directly from inside Joomla.
5. Metamod.Good for having more control over your modules. Have a coupon in a mod you only want to run for a week? This is the mod for you.

Using background images and CSS  is the most efficient way to make your rollovers.  One common mistake website designers make is using two separate images: one for the upstate, one for the over state.  That is not efficient.  It increases server load.  So, to fix this, we will upload one image that contains both.  Belhold:

This is our rollover background image we will use in our css styles.

You notice that we can see the up state and the down state in the same image.  All we need to do now is add two styles in our sheet to handle the button:

.tutRolloverWrapper{

width:198px;

height:45px;

display:block;

background-image:url(button.png);

background-position:top left;

}

.tutRolloverWrapper:hover{

background-position:top right;

}

In order to make it happen on the HTML side, all we need is this:

<a class=”tutRolloverWrapper” href=”http://www.robbluther.com” title=”This is a title”></a>

Sooo simple its scary.  Extremely efficient also.  Notice, all we are doing is using the “background-position” to move the image around based on the style state.  All we do is assign the class to the link in the HTML.