The live version I definitely like. My idea here was to focus on my recent work, and most importantly give a clean and modern feel. I like the overall tone, and feel it goes with my name and brand.

The first version I actually like a lot too. This one I had been working on for a while. However, I still felt it was missing something, and could feature my work a little better.

I think the main thing with both of these versions, is keeping things simple and clean. That’s what I am all about. Also, don’t think you can steal the second design since I am not currently using it… I most likely will work it into a future client. Or who knows, maybe a do an A/B test using both designs.

For those of you who would like to know, I used Spry to handle the animations. I created my own function that handles the timer to make it move on it’s own, as well as highlight the current number. Also, I used a simple function to pull my latest WP blog posts. The blog and portfolio are currently being redesigned. In the meantime, let’s get some feedback.

I was very impressed with the ease of integration. In about 1 hour, I set up a simple PHP script that allows my clients to pay invoices online. Paypal for the same thing took about 3 hours… to read through their complex documentation, decide which API method I wanted to use, and even a call into Customer Support for a common error you will find across Paypal’s customer support forums. Braintree gave me a PHP class that was ready to go. I only had to define my merchant info and get the values from my form and it was working great.

A really nice feature of their solutions is how they simplify PCI Compliance and eliminate my need to locally handle or store my customers credit card data – without using a hosted page. I was also able to achieve compliance much faster and with less cost.

In stark contrast to other providers I spoke with, Braintree’s approach is honest and straightforward. They don’t hide fees behind teaser rates and everyone I’ve worked with there, from sales to support, has been extremely responsive and knowledgeable.

I am a developer that always likes to keep things simple. Through working closely with Braintree and using their product first hand, I have realized they are the same. I am thus sticking with Braintree for all of my credit card processing needs, and recommend them to all of my clients. It’s nice to find other companies as passionate about their industry as I am about mine.

Myth 1: As long as I have a lot of traffic, my design doesn’t matter

With the magic word “SEO” becoming the new internet gold rush, companies and individuals are increasingly believing that design doesn’t matter. As long as the herds of consumers are coming to their site, there is no need to worry about design research, color schemes, navigational structure, or usability. Before I am misunderstood, I am not bagging on SEO’s at all. My brother is a well-respected owner of 97thfloor, an SEO firm. Even he has told me that some of his clients would be better off having their website rebuilt or redesigned, to increase website conversion, before starting such a large marketing campaign. Every company, whether a mom and pop shop or Wal-Mart can benefit on a design that is created around conversion and the user experience. With that said, it is often that companies come to me and say “We have put a lot of money toward advertising, we rank high on Google, but we are not seeing the sales or conversion we had hoped for.” My reply, “Your design and user interface scream lack of money, lack of research, lack of care.” Web design isn’t a slipshod process. It isn’t just a matter of “getting something up”. It is much more than that.

Myth 2: Since web design involves programming, any firm can do the work I need.

A smart business would never allow a cousin, friend, acquaintance etc… to make important business decisions with lack of experience. However, people allow these same people to create their companies websites all the time to save a buck or two. How often have I had to redesign a site, a matter of weeks after their first round, because their first designer didn’t create what was needed. In these cases, they loose time (which is money) having to start from scratch and redevelop something new. This time by someone who knows what they are doing. With how important the internet is these days, companies have to pick design firms that are experienced in designs that create customers out of site visitors.

Myth 3: If I tell a web company my budget for design, they will up their price to match it.

This one happens frequently. I ask every potential client that comes to me, “What budget have you set aside for this project?” As I wrote in a previous article, if they don’t have a budget this is usually a red flag for me. This means that 1. They really haven’t sat down and thought how much energy, time and resources they want to put into their project, and 2. The company may hiding it to try and narrow down design firms based on how cheap they are, not by how well they can take their budget and turn it into something fantastic. I like companies to have a budget for two main reasons: 1. It tells me they are organized and serious about their project, which gets me more excited to be a part of it, and 2. I can give them options of what is possible to deliver within that budget. It may make more sense to break a project into phases and work on them as sequentially. So companies, please let us know you are serious by figuring out your budget before you expect design firms to seriously look at your project.

Basically, we design firms need to find new ways to show our clients that we are different then the run-of-the-mill firm, or their neice. We need to show them that our design will increase profits, help to magnify their brand, and improve their business as a whole. If we can somehow put the value back in web design, businesses will be happier having received a design that accentuates their goals… and true designers will be happy taking on projects of value, while being compensated for their time.

Since the big push for “Web 2.0″ and “Valid” websites, there as been an increase in mirrored text effects, gradients, bevels, colors etc… however, on many of these websites the forms get passed up. Why? You will have to check with the web designer I guess.

Anyways, I took it upon myself this morning to develop a valid, beautiful, css form in under 10 minutes. I took me 12 minutes actually. In fact, it is taking me longer to write this article and link to the form then actually making the form. Anyways, take a look at these forms I whipped up: Form1 | Form2 Â Here is a preview one Form 2:

Form 1 could be used to collect more information then a normal contact form. For example you could ask for their personal details, then shipping info etc… Form 2 is a basic contact form that most sites need.

Feel free to take the code and customize it to fit your needs. Also, you will notice that the forms are pointing to “process.php”. Well, if you want to know what to put in that file to make it work, download it here.

So, hopefully this will help us all to create nice forms. All you need to do is follow my lead. Change the repeating background image in the css properties for <fieldset>, make some color adjustments to other properties, add some extra fields etc…

Happy Forming!

The idea here is setting up a form with a text field and via CSS making it invisible. Then, if a post is sent to a php script handling the request and that text box has information in it, that means a human didn’t fill it out, and the script is simply aborted.

Here is a simple example. You can view the actual page here.

THE FORM:

Here is the xhtml I am using for the form code:


<form action="process.php" method="post"> <fieldset>
<label>Name: </label>
<input name="name" type="text" />
<label>Email: </label>
<input name="email" type="text" />
<label>Comment: </label>
<input name="comments" type="text" /> <input class="special" name="info" type="text" /> <input type="submit" value="Send" /> </fieldset>
</form>


First, this is not a tutorial on making forms look nice, so don’t give me crap. Everything should be straightforward, however, you will notice after the comment text box, there is another text box with the name “info” and the class “special”. This is the spam fighter. I didn’t want to mess up the orientation of the form, so I didn’t put a break between the comments box and the spam box. I just put it at the end of the line. Real people won’t see it looking at the page, because I turned off the visibility in CSS:

THE STYLES:

[quickcode:noclick]
body {
line-height:35px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
font-size:14px;
}
.special {
display:none;
}
[/quickcode]

Really, the only class you need to look into is called “special”. Basically, I made it really small, again to avoid any design conflicts, and then I assigned the visibility property with the value “hidden”. This way, browsers don’t make it visible, and thus people can’t fill it in. However, when a spam scraper comes through the site, it’s going to read it and think it should be filled in — only to their surprise.

THE SCRIPT:

The php to handle this is very straightforward. Basically, you just look to see if that field has been filled in before it was posted, and if it was, you simply break the script so no email is sent, and tell the spammer to get lost. If it’s not filled in, then business as usual. To see this in action, fill out the top form and press “submit”. Then, fill out the bottom form including the spam box and press submit. Process.php returns different results based on what is typed in.

More Thoughts:

After doing this, my spam levels from form submission went down to zero. You could always add a function to search for html in the post as an extra caution as well. It just made me realize once more how important CSS is to making things work right. So in this case, CSS is my weapon of choice. I recently implemented this on my Orlando Florida Used Cars and Utah used cars website. It’s also working great for Doug Bennett Magic and Consumer Credit Repair Agency.

Another interesting article:
For those of you tired of gamma not showing correctly for images in PNG format, this awesome fix is for you.

When you compress an image in Photshop as a png format, the gamma information related to it is saved within the file information. When taking advantage of transparencies within the png format, this data has to be removed in order to work correctly in IE 7. So how do you do this? TweakPNG.

First, download the program. It’s standalone, so you won’t need to install anything. Open the program and drag your problematic png into the window of it. You will then be shown some options that will look like this:

If you look on the left in the “Chunk” column, you will see a “gAMA” property. All you have to do is click on it, and press Delete. While you are in there, you might as well save a little bit of space by deleting the “tEXt” field as well, which only contains data of where the png was created, in this case Adobe Image Ready. Then click on “File -> Save” in the menu at the top, and re-upload your png, test it in IE7, and you should be good to go.

Although this can be a hassle, you should realize you don’t have to do this to every png you create. The problems occur when a png and jpeg or gif that need to match colors are close together. For many sites I do, I never use it because I am able to use images all on png format. But, it does come in handy when something needs to be done.

For more information about the png format, and how it is recommended by Wc3, click here.

[quickcode:noclick]

[/quickcode]

I am not going to get into how everything is working. I would have to do a big javascript tutorial. Basically, you are setting up the function of what happens when the mouse rolls over a button, or when it comes off a button. Then, here is the where you assign the actual variables to the pictures you want to change:

[quickcode:noclick]

[/quickcode]

In the above code, a few things need to change to work on your site. First, for: image_off= new Image(470,167), this needs to be changed to the size of the image. Width, height. This should be changed anywhere you see those numbers in the above code, for each pic you are going to use. On my site the images are staying in the same spot, so the sizes are all the same. Also, anywhere it says images/…” this is the relative URL to the pic you want changed. Image2, Image3, Image4, are the 3 pics that I will rotate. So I first assign their width and height, and then the relative URL to where the image I want is. Before this will work, you have to give a title to the default image. Like this:

[quickcode:noclick]

[/quickcode]

Once that’s done and the javascript code set up, you need to now add the function into the links you want to use to cause the images to change. For example:

[quickcode:noclick]
Your Link
[/quickcode]

The above link will change the default pic above to the src you specify in image2.src above in the javascript. Sorry if this is a bit confusing. I don’t have enough time to get into how it all works. However, you can easily copy and paste the code and it will work for you.

[quickcode:noclick]
RewriteEngine On
RewriteCond %{HTTP_HOST} ^yourdomain\.com [nc]
RewriteRule (.*) http://www.yourdomain.com/$1 [R=301,L]
[/quickcode]

This is an apache re-write. You are basically re-writing any domain without the www to become the domain with the www. It is set up as a 301 link, or permanently moved. So when search engine bots come through, they will read the change, and always redirect to the domain you want.

Search engines also will treat yourdomain.com and yourdomain.com/index.php as two different pages. To change this and revert any /index.php requests back to the home domain, you can do this in the same .htaccess file:

[quickcode:noclick]redirectMatch 301 ^/index\.php(.+)$ http://www.yourdomain.com/$1[/quickcode]

Make sure to be uniform here. It would be counter productive to have /index.php revert to http://yourdomain.com if above you made it re-write to www.yourdomain.com.

A Tip: Make sure all URLs for links in your site are absolute, not relative. This will ensure clean spidering, and also help you rank individual pages of your website, which is your goal.