I was both honored and excited to be a part of a recent interview posted on Smashing Magazine this past Friday. Project83 was one of 35 designers/companies asked 5 questions about web development for their article. I really enjoyed participating and reading all of the great things everyone else said in the interview. You can read the entire article here.

Ever since our yearly journey to Austin, TX and the massive SXSW Interactive conference a few weeks back, I have been thinking a great deal about constraints and their role within web design. I came to the conclusion that they are both good and bad. Understanding both has been pivotal for us in building a successful web design company.

The Good

While it may not seem like it all of the time, structure inspires great work. Nasty terms like "deadlines" and "client specifications" exist for real reasons, and can actually be used as an advantage for designers.

I have heard a number of designers speak about the power of a deadline to make them try something they never would have tried. Somehow in those last hours, the light bulb comes on. Or maybe being forced to work within a specific wireframe for a design helps contribute to an idea you never would have been capable of without structure.

I see evidence of this principle often when designers have ultimate freedom, like on a site of their own. There are no deadlines, so the site literally takes months longer than it should. Sadly it also results in a sub-par product, simply because 110% effort is never given to it for any considerable amount of time.

A site without written specifications or pre-meditated structure can also suffer from the same complications. When we have ultimate freedom, somehow that makes us want to insert every possible feature or design concept. Again the end result takes much longer and it can be very cluttered.

Constraints only allow for the necessities and nothing more, which is a good way to start on the web.

The Bad

One thing people perceive as a constraint that I don't understand is code. Thanks to technology, the web is a place where most anything is possible to create, so I see no reason to take shortcuts or water things down by considering code during the design process.

Quality web design should start with a user-friendly interface, something that is intuitive for users of all experience levels. Keeping that in mind, there is a TON of room for being creative and building a user experience that is not only functional, yet fun to look at and representative of everything the brand is about.

This principle comes into play with our design process at Project83. Our designer Jared does not get involved in the coding process. I believe this helps him focus on his primary objective, which is design. While having an understanding of how the code works, it is not a primary factor when focusing on the creative process in each site's development.

Jared's designs are very detailed, often encompassing tons of layers, gradients, rounded corners and other elements that are scary for geeks. But those characteristics make a good design a GREAT design, something that really leaps off the page. By thinking about the code and how much longer details like that would take to add, we might leave them out. Sure it can take much longer to code the design eventually, but I think it is absolutely worth it.

This is something I have grown to feel very strongly about. First, design for users. Then design for the sake of creating something unique, detailed and representative of the particular brand.

I would like to encourage all web designers to create something without code constraints, as if it were only being printed out. The result could very well be a design with more depth, detail and overall character.

Of course there will always be exceptions to both of these rules about constraints. I see more and more incredible design on the web every day. But in general, I feel these principles have merit. They certainly do in the way Project83 develops websites.

When it comes to sending HTML email messages to a large number of people, web developers need all the help they can get. Not only are web browsers much more advanced in parsing HTML/CSS properly, but there's the whole privacy/spam issue to deal with.

Spam will only get worse before it gets better. Popular web clients like AOL and Hotmail are among the toughest that I know of to blacklist servers, and I understand why. So as web developers, we have to continually find best practices and tools that will keep clients and list subscribers happy.

I recently found a very useful tool that can provide some insight on what spam filters look for and how your legitimate email can get through to subscribers. It's called Email Check, and it's a service from Active Campaign.

Simply enter in your newsletter details, such as sender/recipient name and email, subject and the message source. Once submitted, the newsletter will be checked against the very popular spam filter, SpamAssassin. 

Email Check will then produce some very useful information about the email. First off, it gets a score from 0 - 7, zero being the best. The BEST part is that it also lists potential "problem areas".

When running a recent email through, I learned about a couple problem areas within the copy and made quick changes to enhance my score. My final score on a recent email was 0.9, an estimated 12% chance the message will be marked as spam. I was satisfied with that result considering all of the HTML source in the body of the email. That in itself is a trigger for many filters.

I find the Email Check service to be a quick and FREE way to instantly build better emails, and now an essential to my testing suite.

Here are a few other resources I have recently found useful in building and testing HTML emails:

• How to test HTML emails
• Improve your email delivery rates
• EmailStatCenter.com- A new resource of email marketing metrics

In part one of this brief series, I talked about an experience I had recently attempting to make a purchase from CircuitCity.com. Today I am going after another major merchant for some frustrating shopping cart practices. This article will be focusing on Buy.com.

Like Circuit City, Buy.com is overall a very solid store with many benefits and solid e-commerce practices. This article is not an attempt to take a shot at them. The idea of this series is to dig a little deeper and focus on some common practices that don't make sense to users, so that is what we will do.

Why So Many Ads?

The main reason I end up shopping at Buy.com is to do price comparison. I never choose to shop there unless it can help me save money, and the reason is because the site just feels overwhelming. I know we are all in business to make money, but the advertisements on the website are too much in my opinion.

I find it ironic that Buy.com makes a huge effort to earn my business, yet there are at least two large images on each page directing me to a completely different site to buy something else. It seems counter-productive and really cheapens the look and feel of the site.

Sites that sell thousands of products simply don't need help filling space. Buy.com already fills each page with TONS of content that is pretty overwhelming in itself; the ads just get in the way.

A Change of Pace

Want to see the complete antithesis of overwhelming, busy page structure? Just proceed to Buy.com's checkout. I was so surprised the first time I saw it, I inspected the URL a couple of times to make sure I was on the same site.

Simplifying the checkout process is a breath of fresh air, and I would be willing to bet that it has improved their conversion rate. The major problem is that this checkout is based on the "best possible scenario". If you proceed through without needing to go back, without needing help or without wanting to edit your cart, it's a great process.

The fact is, we can't just build a shopping cart hoping that the customer will checkout just the way we planned them to each time. Let's take the Payment Page for example . . .

First off, the use of an order progress bar is always a plus. A very common mistake is that the progress bar is not clickable, though. If I want to go back and edit my shipping information after leaving that page, I should be able to click on the "Shipping" part of the bar and go back.

Throughout the checkout process, customers can neither go back nor view/edit their shopping cart. Aside from the very first page of the checkout, there is absolutely no way to get back to the regular Buy.com site without pushing the back button a bunch of times.

My favorite part of the payment page is on the bottom, perfectly summing up my frustration. There is a nice sentence here . . . "Having difficulties? Please visit our Help pages to learn more about placing an order."

This is nice, yet NO PART of this sentence is hyperlinked. So how the heck am I supposed to find help? Where might these helpful pages be if there is no link to them anywhere? Is that just an FYI? I can't figure out how that helps people.

Order Cancellation

When attempting to make my original purchase on this site, I did make it all the way to the final page. At that point, I decided that more price comparing was in order, and I needed this particular product sooner than they could ship it. Now all I need to do is cancel my order and be on my way.

Wait a minute . . . there is nowhere on this page where I can cancel my order!

I literally spent nearly five minutes reading and re-reading each word of the order confirmation page looking for a cancellation link somewhere. Do they really think that if I can't find that button that I will just go ahead and make the purchase? Users deserve the option of canceling their order at any time during checkout.

It's easy just to close the window and forget about the purchase, which is what I was forced to do. But being paranoid like any other online shopper, I just wanted confirmation that the order was cancelled instead of placed by accident or still existing a week later in my cart when I had no need for it.

There is an important lesson to be learned from the frustration found in Buy.com's checkout process. We as developers must plan for every possible scenario during checkout. When a customer wants to edit their cart, find help or cancel an order, by all means we should find the most convenient way to help them do so. Even if they don't make the purchase, they are more likely to come back another time.

From a user perspective, if the task of modifying a cart or changing the shipping address feels too confusing, it is likely that the cart is abandoned and possibly never picked back up.

Shopping cart conversion is all about convenience, so those that do their part to help customers with a smooth checkout process will be rewarded with higher sales and customer conversion.

One can easily be overwhelmed by the sheer number of javascript libraries out there these days. Is there one better than all the others? For someone that just tries to bluff my way through DOM Scripting without bothering our developer Denny, I have found jQuery in particular to be really fun and simple. As of late, Denny and I both started using the jQuery library for little things here and there. Despite what others are using, I find the xhtml markup to be simple and intuitive. It's also very quick, weighing in at only 55k. Some of the great demos showcase how easy it really is to use jQuery for yourself. My favorite jQuery demo as of late has to be InnerFade, from medienfreunde. I would give them more credit, but their website is not in English :-). This page shows how simple it can be to create fantastic slideshows and such with simple front-end code. We are also big fans of thickbox, in case you have not visited the showcase portion of our website. Any other jQuery demos out there we should be aware of? Opinions on other javascript libraries?

Over the holidays I was doing a lot of Christmas shopping online, like so many others this past year. I love it, it's just so easy . . . or at least I wish it was. Maybe I am a little critical, but there are some foundational mistakes being made during the checkout process by major merchants.

The checkout process is so important, yet it sometimes seems overlooked. This is the "make or break" point with a customer, and every effort must be made to close the sale. This two-part article will provide some commonly overlooked elements of a checkout process.

Today I will focus on CircuitCity.com. I would like to preface this by saying they seem to be a very nice company, and their website is quite useful. I found it very easy to browse and find the product I wanted. Their reviews are also very helpful in making an educated decision. However, I feel that a couple elements about their checkout process could be refined.

In my particular case, I wanted to buy a wireless router. I knew exactly what I wanted, so I proceeded to find the product. The product page was very informative, and I was ready to add the item to my cart.

Before adding the item, I thought it would be a great idea to pick up one for my home's upstairs. Unfortunately I could not find a place to specify the quantity, so I just added it to my cart. Surely I could change the quantity later, right?

There are a lot of things right about this screen. It shows a picture and the name of the product being added to my cart. The thumbnail and product name link back to the product in case I want to go back and verify something. It's great practice to always show a thumbnail and link back to the product throughout checkout.

This page also had one major problem: I still could not specify a quantity or edit anything in my cart. In going back to research for this article, I noticed that there is a small text link to "Edit Cart" to the right of my screenshot, but I honestly never saw it. In my opinion, I should not have to make another click just to specify a quantity that should have been available on the product page.

This last screen in particular was frustrating. I am now aware that I will not have the opportunity to edit my quantity before making the purchase. Yet, I click on the product name (in both places) and realize it is no longer a link. The only way I can view my cart is a little gray icon on the top right, which I did not see.

I happened to be in a hurry at the time of purchase, and decided to abandon my cart. I bought the two routers at a local store and was on my way.

I definitely overlooked some things throughout the checkout process, but so do most users. Customers are impatient, and often if what they want is not right in front of them, they abandon the cart. Here are a couple things Circuit City could do that would have prevented my abandoned cart:

• Allow me to specify a quantity on the product page, when I first add the item to my cart.
• Make a "View Cart" or "Edit Cart" button that is in the same location throughout checkout in the main viewing area. I should not have to look above the navigation in the header for a cart icon. It should be right there next to my product with the other nice GREEN buttons.
• On every page in the checkout, the product name should always be hyperlinked back to the product. This has been the subject of numerous user studies, and customers like being able to go back and forth.
• When I add a product to my shopping cart, I should be able to edit my cart on the very next screen. That way, if I added the wrong product by mistake or want to edit the quantity I can instantly do so without having to click on another page.

Stay tuned for part 2 of this article, where we look at another large online retailer, and where things went wrong in their checkout process.

Retail Email Reports

This blog has instantly become one of my favorites, and is very useful to anyone interested in email newsletter marketing. The site studies email campaigns from 100 or so of the largest online retailers, and comes up with ideas, trends and reports on what they are doing to win customers. This site is especially important during the all-important Christmas season, and is a great place to start if looking for campaign ideas. They also have done some fantastic studies on things like Send to a Friend Forms, Welcome Emails and Email Subscriptions. Great resource guys!

Ever wonder how they named eBay?

Naming a company or product has to be one of the hardest things I have ever done; especially these days, when it is of the utmost importance to secure the right domain name. I happened to stumble on a blog today called day2dayactivities that researched a bunch of companies, and how they were named. Some of them have some really neat stories, it is worth checking out. Here is one such story about how eBay was named . . . Pierre Omidyar, who had created the Auction Web trading website, had formed a web consulting concern called Echo Bay Technology Group. "EchoBay" didn't refer to the town in Nevada, the nature area close to Lake Mead, or any real place. "It just sounded cool," Omidyar reportedly said. When he tried to register EchoBay.com, though, he found that Echo Bay Mines, a gold mining company, had gotten it first. So, Omidyar registered what (at the time) he thought was the second best name: eBay.com. Read more of them here . . .

The Beauty of Photoshop

Brian Dilg is one of the best in the business at photoshop work, and his website proves it. Take a look at his imaging page and hover over each picture to see the original. I am not sure how I feel about making people look this artificially good, but it is amazing work regardless.

Steve Jobs' First Keynote

Being a big fan of Steve Jobs, this video taken in 1984 was a real treat to find online. From the beginning, he has been such an innovator, and this was inspiring to see considering where Apple is as a company today.

On a scale of 1 to 10, how would you rate your sales pitch? Let's face it, there are a lot of companies out there doing phenomenal work, writing beautiful code, and building functional, standards-based layouts. One way to set yourself apart has nothing to do with semantic markup, it has to do with your sales pitch, meaning your proposal. Numerous elements come together to create a winning website proposal that can help you land that big client or project; I found four of them that I consider to be high priorities in my own experience.

Provide a Value Proposition

Most any web developer or company feels there are certain qualities that set them apart from all the rest. This quality, whatever it may be, is your unique value proposition. In writing your web proposals, make sure you spend some time exploiting the number one reason you should get the project. In writing proposals, our value proposition is the first thing I talk about. Right off the bat, the potential client knows how we are different than most any other company they might choose for the job. I find that this sets the tone for your entire sales pitch.

Use a Copy Editor

At Project83, we send all of our public copy through a copy editor. Getting your proposal edited by a professional already sets you apart from most other companies, and fixing common grammar and spelling mistakes is only the beginning of what they can add to your proposals. Not only does an editor bring an English degree to the table, but also the opinion of a real person that understands simple terminology instead of the latest industry-specific jargon we are all used to. A good editor is exceptional at putting complicated terms in words that people can easily understand, which is key in this line of work. Anyone can benefit by communicating clearly to potential clients, and a proposal that is in very simple, understandable terms is a great start. If anyone knows of a good resource to find online copy editing, please leave it in the comments for others to see.

Add a Personal Touch

People can always appreciate something that has been personalized specifically for them. While you might use the same general "template" for proposals, be sure to add a personal touches throughout that grab your potential client. For instance, make sure the cover page is decorated with the client's logo, something they can immediately connect with. Revise the copy throughout the entire proposal to make sure it all applies specifically to the potential client and their specific needs. Finally, we try to write a personal note at the end of each proposal to assure them that a great deal of time was put into creating this document. If a client sees how much work you put into a free proposal, imagine what that says of your work ethic once you start working on their project.

Keep it Simple

This principle can apply to most anything relating to web development, and is absolutely true in a proposal. This is not the place to layout every single specific about the project. Save specifics for the contract and for writing out technical specifications down the line. A proposal is simply not the place to do anything but sell your services. Make sure that you provide a clear description of the services you would like to perform, and a clear description of what those services will cost. Doing this will probably give your proposal the ideal length as well. These are definitely principles that have helped our team to write proposals we take a great deal of pride in. Another nice resource for writing proposals can be found on the Blue Flavor Blog.

Everyone is looking for ways to increase website traffic these days, and for a good reason. But what are you doing to make the most of the traffic that's already there? Optimizing your checkout process is definitely one of the most efficient ways to make more money from your existing site traffic. Let's take a look at 5 of the most important changes you could make to give your customers more certainty making a purchase

1. Are We There Yet?

Optimizing your checkout process is all about reassuring the customer, in a sense you need to hold their hand until the purchase is made. One simple way to reassure your customers that they are almost there is a progress bar. Find out how many steps there are in your checkout process and make sure to let your customers know. They are much more likely to make the purchase if they know how many steps are involved in the process. Spelling it out is also effective, like Step 2 of 5- Checkout.

2. Respect Your Guests' Anonymity

With new visitors on your site, the object is to keep things as simple as possible. One way to do this is to NOT require them to create an account. A powerful feature of some carts is that you can give the customer an option to proceed as a "guest". This means they can fill out the bare minimum of information and make their purchase quickly. The guest technique works especially in stores that don't have many repeat customers. One of our clients, AndyAndrews.comhas a sign-in page that looks like this . . .

3. Be Available by Phone

Not only should you have your contact information and store policies visible to the user at all times, but a phone number is still most important. Many of us in the web development world just assume that everyone has come around to making purchases online, and there is no need for other ways of ordering. If you think that, then you should get out more. Tons of people still feel insecure punching their personal information in a machine regardless of how secure your site is. We suggest having a phone number that people can call and speak with a real person. If you are a smaller merchant and are unable to have staff available to help customers, simply setup a voicemail line. Do whatever it takes to assure the customer they can order through other means if they wish. Ordering by fax and mail is also worth making available. It also gives your customers a sense of security in knowing they can make a phone call if they have an issue.

4. Make Changes Easy

Most of us are quite methodical and indecisive in our checkout process, myself included. In light of this, give the user every opportunity to edit their shopping cart, and to edit their information before confirming their order. If a customer has to go back five steps in order to add something to their cart or change the shipping address, they are likely to just leave. So one thing you can do is to make sure the product name in the cart ALWAYS links back to the product. Do the same for the shipping address, give them the opportunity to change it up until the order is confirmed.

5. Study Your Customers

Once you have taken the time to optimize your shopping cart to the best of your knowledge and ability, make sure to keep an eye on stats. Free programs like Google Analytics are an incredible resource that will tell you exactly where you are losing customers in the checkout process. If you seem to be losing most customers on the shipping page, then that is where you try to make some changes and simplify your process. I would recommend coming back to check your analytics once a month and finding ways you can constantly make your checkout easier for the customer. In case you were wondering, an abandonment rate of 20-30% is superb. Depending on the cost of your store products and other factors, it could vary, but that is certainly a great target. Thanks to Bryan and Jeffrey Eisenberg and their MUST-READ book on this subject, Call to Action. I highly recommend it for further study, and you can always contact us if interested in shopping cart optimization services.

A couple years ago I came to a shocking realization about business in general. Whatever you are passionate about, wherever your career takes you, it all hinges on one single thing. One skill can single-handedly take you where you want to go. It is true in every field of expertise that I know of, especially in developing websites. Your business succeeds based on relationships.

This principle is not profound, but it is proven. We can all stand to be reminded that everything we do revolves around our interaction with others. The science of mastering those relationships creates success in whatever form we choose.

Those of us in the web development field can easily lose touch of this key principle while tucked away in front of a screen for 14 hours per day answering emails and writing code until our fingers cramp up. While email and instant messaging makes our lives infinitely easier, it is not the answer to how we master our relationships with clients and team members. Being a closet introvert myself, I would much rather send a mindless email than go out of my way to be nice to someone, or heaven forbid leave my office and meet them for coffee. That kind of attitude is a great way to tread water for the next five years and never grow your business. Find a way to communicate better.

Clients and customers that you work with just so happen to be your biggest marketing tool. So find a reason to pick up the phone and call your client to discuss the project you are working on or work out a support issue with them if they need help. Find time to meet people you are working with and just bounce ideas off each other. Whatever it is, find excuses every day NOT to send email.

I also find that miscommunication often occurs through an email or instant messages. So if nothing else, give your clients absolute clarity by calling to give them an update. People are often times unintentionally rude and create a great deal of tension in a working relationship through an email. I find that the things people would say in an email (or on a blog), they would most likely not have the nerve to say to anyone's face. In those situations, have the integrity to call them up and walk through whatever is going on. 9 times out of 10 you will both leave the conversation feeling better about where you stand.

Lastly, not everyone works like we do. We love technology and email because it enables us to get things done, but many of our clients don't care as much about it. Taking the time to call and give your undivided attention to a client will make a world of difference. In the end it just creates future business for your company.

I would like to challenge you to try and make five work-related verbal connections per day. Just five. Whether it is calling a potential client to talk with them about their new website, or meeting a co-worker for pizza to discuss your current projects and the web application idea you have, these five connections will help you to create the business you always dreamed of.

This very article has inspired me to meet early with a client tomorrow for coffee, and then to fly to New York for the weekend and hang out with someone I have worked with for two years and never met before. I hope that it inspires similar action in your own business.