If you had to guess at the largest entrance barrier for a website what would guess? Maybe there is a cost involved and its too high? The website design is bad? Its a complicated website and not enough instructions?

Sure the cost might be more than the market will bear. More than likely your just trying to get that initial contact, an email, newsletter sign-up, anything to get more information to a potential customer. Cost to the user, $0.00 and your still only getting a small percentage of visitors to take the next step, whatever that may be.

Is your site ugly? Maybe, an ugly site to one person is artwork to another. Do ugly sites get less use? Unless your making the visitors eyes bleed and not distracting them with flashing or scrolling text this is more than likely not the cause. Some would say Amazon is ugly or Gmail, certainly Craiglist isn’t the pinnacle of design. As long as the user can get around easily without getting a migraine this probably isn’t what is holding you back.

Maybe you just need more instructions because they get confused? Here is the truth, nobody is going to read your directions if its more than a couple sentences. You can use all caps bold flashing text to tell a user what to do and they will not read it if its too long. If you already have instructions and you think you need more detail your only making it worse.

Its all in the forms.

Well designed forms aren’t the end all metric of usability however I would argue its a majority. Its all in the little details. Here are some of the basics.

• Are required fields clearly marked?
• Are those fields really required? The longer the form the less likely it will get submitted
• If a user puts in the wrong input is it immediately obvious what went wrong?
• Did you erase the whole form on failure causing the user to start over?
• Can a user easily fill out the form by just typing and tabbing to the next field?

An example of bad form.

The federal government uses a site called My Pay. This is by far the craziest process I have ever seen to fill out a form. Recently they asked all their user’s to change log in credentials and what a nightmare.

The first thing that happens when you try to login is it opens up a new window in full screen. So if you have a large monitor your now staring at 23″ of login form. Annoying, but not the end of the world.

The complete insanity is you can’t use the keyboard. You have to actually click on each character with a Virtual Keyboard. But lets take it one step further down the crazy path. The letters an numbers are generated in random locations with each attempt.

This is for “security” purposes. I wonder why banks don’t use this practice? There is a notice message up now. They’ve disabled right click function as well … nice.

To all myPay Customers

Although most users have established their new login credentials with no trouble, some users are calling the Central Customer Support Unit for assistance. As a result, customer support is experiencing high call volume, and many customers are waiting on hold longer than usual.

We apologize for any inconvenience this may cause. We are doing everything possible to remedy this situation.

Good Form

Mint has an example of a great sign-up form. As soon as the page loads the the cursor is focused on the first field so you can start typing right away. You can tab to the next field and you’ll notice the current field is clearly highlighted. Furthermore by clicking on the label it brings the field in focus. You can click anywhere after the check-box field and it will toggle the check-box. You can actually fill out the whole form without even touching your mouse.

Usability is increased by validating on the fly. Each time you go to the next field the form will check if you have a valid entry and display the error if there is one or simply OK if there isn’t.

The Problem

The client uses the Contact Form 7 wordpress plugin for events, registrations and subscriptions. Up until this point all the emails needed to be cut and pasted manually into a master list for marketing or other action items.

Specific actions are taken with each contact form. Some are simply added to a master email list while others are used to send content through snail mail. The need for more forms over the next few months will be increasing. These forms are very time sensitive so the solution must be dynamic enough to preclude more than a few hours in turnaround.

The Solution

If resources were unlimited (time and budget) this would be a great place to implement pre-built CRM (customer relations mangment) system. There are plenty of open source and commercial applications that would work well.

The biggest limiting resource here is time. The client knows how use wordpress and the current site is already well established with content. So we’ll hack it.

Logging Emails

Logging outgoing emails from any type of contact form is essential. This could be as simple as storing them in a database or even writing to a flat file. Logging emails will help you pick up security issues as well as troubleshooting.

The solution is pretty simple. Every email sent out through wordpress uses the wp_mail() function, including forms through Contact 7. All we need to do is capture the $_POST variables when a call is made to wp_mail().

We can use the add_action() hook from wordpress to accomplish this.

A simple example

We’ll insert our hook in the functions.php page for the theme. For this example I’ll use a theme called custom.

wp-content/themes/custom/functions.php

We’ll create a function to capture the posts. This function won’t really do anything but you’ll get the point. Then we’ll hook the function into wp_mail().

function saveContact() {
    // all of our post variables are in the $contact array
    $contact = $_POST;

    // now would be a good time to clean and filter
    foreach( $contact as $key => $value ) {
        // trim it, escape ... it you know the drill
    }

    // insert into the database or save a flat file

}

// hook it
add_action( 'wp_mail', 'saveContact' );

Now anytime wordpress sends an email it will call our saveContact() function. This is fine to just capture the data but we want to do something with it. Keep in mind Contact 7 adds in some of its own post variables so you may want to pop those off before processing the data.

If you want to echo anything back to test this turn off your javascript otherwise Contact 7 will send an ajax call behind the scenes.

An advanced example (go cURL yourself)

Wordpress is great but I want to use a MVC framework to handle all of the the different actions. I want to know what form was sent and use the information to populate various tables. I use Kohana but any of the popular frameworks can handle this in the same way. The benefit here is I can use the framework’s built in cleaning and database helpers. We’ll use cURL to send the post variables to our controller.

I’ll send the data to a controller in public_html/example. So the domain www.mydomain.com has a standard wordpress install but we have a kohana controller living in www.mydomain.com/example. I’ll also send along the URI where the form originated. We’ll take care of all the data inside the framework. Clear as mud?

Wordpress by the way does not like putting this source code inside the post. You can check it out here.

For security you can make sure the cURL posts are only sent from your domain.

With permalinks enabled you can differentiate between forms posted from something like www.mydomain.com/contact and www.mydomain.com/contact/subscribe.

I’ve been trying to come to a conclusion of what php framework to use on new projects. I finally took the plunge into Kohana and I’m loving it. Some of the other frameworks that made the short list.

• Zoop – I like the command line, smarty, and PEAR integration.
• CodeIgniter – Great documentation, huge community and heavily used.
• TinyMVC – Stripped down version of CodeIgniter. Easy integration into smarty.
• Zend – All the cool kids are doing it.

Like most developers I fought the extreme urge to do everything myself and reinvent the wheel. Although I could of expedited that decision. In the end choosing a well documented and community driven framework makes any application more valuable. It helps when other developers get involved and don’t have to guess what it is your doing. It sets the standard and hundreds or thousands of developers have contributed to that standard. In short it reduces the “WTF?” moments.

If I need a hand on a project or turn it over to someone else the next developer can pick up where I left off. Some of the features that sealed the deal for me.

• Security – filters XSS by default. No configuration needed.
• Large module/plugin library
• Ajax integration and seperation is easy to work with.
• Strict OOP

Development is very fast with Kohana. The more I dig into the more I’m enjoying it.

Open up the file.

pico /etc/apf/deny_hosts

Find your IP and delete the entry. Then restart APF

/etc/init.d/apf restart

There, I wrote it down this time.

Suckage to usage ratio 101

The 37 signals post uses the Amazon Kindle as an example of how a single feature can have massive suckage but still produce a great product. It sucks to type on a kindle but how often do you actually type on your Kindle? Not often, the kindle is for reading not typing. I only type to search for a book which is probably less than 5% of my use.

Suckage to usage ratio and you

As your building your website there will always be features and pages that need love. Maybe its a bad layout, maybe its bad programming or maybe its a bad idea. If its rarely used how much time should you spend making it perfect? Websites have finite resources (time, budget and manpower), choose their allocation carefully.

Consequences of Suckage

At best failure to understand this principal will lead to late milestones and blow your budget. Worst case scenario it will blow your whole project. Developers can only do so much to keep you on track but in the end we will usually write it the way you want it.

Applying the suckage to usage ratio

Come to think of it you can apply this formula to everything. People, places, things, anything that takes up time and money.

• Purchase of a home or car
• A book or movie
• Where to go for vacation
• Who your going to vote for
• Your Relatives
• Your dog

The key to a full life may very well be in the suckage to usage ratio. Certainly worth applying to your website.

The Problem

If the submitted form doesn’t pass validation I want to return the data so the user doesn’t have to re-enter all the information. I don’t want to rely on javascript, although I will add it for user convenience as a final step. I also don’t want the form re-submitted if the user refreshes.

The Solution

There are quite a few ways to solve these problems. My standard approach is to post the form to a processing page and store the POST variables in a session. If the data fails the validation I redirect to the original form, pull the submitted data out of the session variables and re-populate the form with an error message.

Pretty straight forward for small contact forms. Once you get to a gigantic form that makes your eyes bleed this becomes cumbersome. On a side not I try to push my clients to the smallest possible forms they can get away with..

I use a postToSession class to make this go a little quicker.

Example Usage

I’ll use three files for my example. Comments are in the source files.

• index.php
• process.php
• postToSession.php

You can see a working demo of these files in action here.

Basically by using this class I can automatically serialize the form value and stuff it into a session variable. Once I unpack it, it cleans itself up.

Lets start with process.php. The form has been submitted. We instantiate the postToSession class and pass a parameter of _formValues to the constructor. This is the name of the session variable we’ll use.

$session = new postToSession( '_formValues' );

Next we’ll serialize the post values and store them in the session variable.

$session->serializePost();

Now that you’ve saved the posted values you can work validation to your hearts content and set any error messages according. If no error messages are sent the data is ready to go. In this example I simply set a status message and pass them back to the original page. If an error message is set I’ll send them back with failed in the query string.

Either way they are going back to the index page. On index.php I’ll look for the failed variable in the query string. If its set I can pull all the values back out and re-populate the form. I’ll put the values in a local array called $formValues.

$formValues = $session->unserializePost();

Now I’ll assign the form values to print out to the user. If it $_GET['failed'] isn’t set I know we either passed form validation or its a fresh start. I’ll also check to see if there is a status message set in the $_SESSION variables. If it is I’ll assign it to a local variable for display and clear it.

The End

This is just one of those little tricks I wish someone had shown me when I started. By using a separate page to process and redirecting after processing we can keep the user from submitting multiple times by pressing the refresh button. You could just as easily use the query string to repopulate the form but it looks horrible. I also use this method because many times the form is pre-populated with information like the users profile or other account information. I can use the same template for adding new records as well as editing existing records.

This would block not only website access but emails as well. Good deal, everyone hates spam. Say good buy from all those Nigerian emails!

There are a couple details they missed on this.

Its almost entirely unenforceable.

Most fraudulent sites aren’t even hosted in the US. Alright, block the IP address. They’ll get another IP adress. It would take massive resources keep up with the changes if its even possible. Maybe the feds can outsource it to the same company that is taking care of the 18 million dollar recovery.org website? Its probably a good use of our money.

Who decides what is fraudulent?

Maybe I’m wrong here but the federal government has never had a great track record when it comes to keeping up with fraud. And of course there is never an agenda.

Last year congress discovered twitter, they know all about those interwebs. Maybe they were updating twitter when someone was advising them of the technical details of accomplishing this.

These guys have done multiple tours in Iraq doing the worlds most dangerous job, explosive ordinance disposal (EOD). As a navy guy I might be biased but I’m sure most would agree, U.S. Navy EOD operators are the best in the world at what they do. The guys at Denali are passionate about passing their knowledge to other military and law enforcement personnel. They also run various mountaineering and risk mitigation courses.

The Process

We worked out what the site needed from scratch starting only with, “It should be cool”. Not only did we need to figure out how to make it “cool” we needed to figure out what they needed.

My goals are to get the essentials first, automate as much as possible, create something that is manageable by the client. Of course always being mindful of how things will change as additions are added. This always involves taking a hard look at their business model so I can anticipate needs and break down the essentials features and the “cool features”.

Obviously their business model revolves around their courses. Some courses are available to all, others have a specific target audience.

The Results

We ended up with a custom built CMS (content management system) that allows them to manage their courses and who they offer them to. The guys at Denali will be able to easily add new course offerings, new courses and modify their own content without the need to call up their web developer.

Dork Stuff

• LAMP Environment
• Fresh copy of Blueprint for the layout
• jQuery and various plugins for the “cool” factor.
• Google map integration

Looking Ahead

The guys at Denali are already looking into expanding their site and I’m looking forward to helping them out. Especially the video additions, video of things blowing up is even better than pictures.

I’m sure there is a more elegant approach to this. If I had the occasion to do it more often it would be worth a bash script.

The Problem

I have 20 images that are the right size but the file size needs to be reduced from about 150k to 40k. They need to be renamed from DSC-999999.JPG to 0.jpg, 1.jpg etc.

The Solution

First you need to install ImageMagick

$ sudo apt-get install ImageMagick

I create some working directories on the desktop.

From /Desktop

$ mkdir new
$ mkdir new/resized

Put the images to be converted in /new

Now we’ll change the name so they are all .jpg instead of .JPG

From /new

$ rename 'y/A-Z/a-z/' *

Now we’ll make a copy at a lower quality in /new

$ convert *.jpg -quality 60 resized/new.jpg

You can play with -quality to get the size you want.

Now we’ll rename them to the new filenames.

$ rename 's/new-//' *

That’s it. You now have reasonable file sizes to work with on a website. There isn’t anything you can’t do ImageMagick.

The typical wordpress install is downloading the .zip or .tar file. Unpack the archive file and then upload it to your server. If don’t have a decent connection it involves a coffee break while you upload.

The easy way is to use the command line and move the files directly from the wordpress server to your server. Run the command, count to five and its in place. There are a few different ways we can handle this. I’ll cover installation with subversion and without.

First, our site structure. We’re going to install wordpress in the blog directory of the public documents. Ideally you want to install wordpress in the root directory and place wp-config.php one directory up for security. We can’t always do this. instead use .htaccess to deny wp-config.php.

Without Subversion

SSH into your server and navigate to /blog

~$ cd public_html/blog

Download the latest .tar file

~$ wget http://wordpress.org/latest.tar.gz

Now unpack the file.

~$ tar -zxvf latest.tar.gz

You’ll see the /wordpress dir with all the goodies. Now lets clean up our mess.

~$ unlink latest.tar.gz

Alright that took less than a minute. But we want the wordpress install in the /blog dir not /blog/wordpress. Lets move the install.

~$ mv wordpress/* .

Clean up your mess.

~$ rmdir wordpress

Now you can continue with your install as normal.

With Subversion

If your using subversion you have even more options.

Use svn import to checkout a clean copy without the .svn files.

~$ svn export http://core.svn.wordpress.org/trunk/

Now you can follow the steps above to move the files from /trunk to /blog.

But your using subversion so lets think ahead for updating your theme, plugins and wordpress install. This is the easy button for maintaining wordpress.

Assuming your working from a development environment on your local machine, install wordpress as you normally would for development but this time check in your install to your repository. Once you’ve committed it to the repository updates come easy. Simply download the update to your local machine. Complete the update and do a commit. Now you can ssh back into your server and type ….

~$ svn update