Blog

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.

Posted in Project83 - Web - Join the Discussion (1 Comments)

Email check screenshot

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.

Email check screenshot

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:

Posted in Web - Join the Discussion

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

Buy.com checkout page

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

Buy.com checkout page

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.

Posted in Web - Join the Discussion (1 Comments)