Most people can appreciate the time and energy that goes into crafting a unique, effective website design. Companies and organizations spend good money for quality design that says a lot about their brand and what they stand for.

On the other hand, words and copy that bring a website to life are often an afterthought. Web copy has become a tool to manipulate search engines rather than speak to people in an authentic, persuasive tone.

Making design your first priority is putting the cart before the horse in my opinion. Hours should be spent crafting the right copy for your site before starting on the first mockup. This ensures the best possible chance at success when the designs are created because if it's well done, it makes the copy really pop. When copy pops, so does your ROI.

I spend a good portion of my time working on copy for some of our sites and have come up with a guideline. At least 50% of the time you spend designing the website should be spent creating and refining copy. On average we spend at least 40 hours designing a website, so that means the minimum amount of time spent on copy should be 20 hours. If the site has more than 15 or so pages of static content, the percentage should be even higher.

Just like a quality website design takes time and multiple iterations to get perfect, so does your copy. Your first or second draft should never make it anywhere close to a finished web page. By using the 50% rule you will be a great deal closer to a final design you are thrilled with, and results that you are even MORE thrilled with.

An extremely important part of the web design process is wireframing. It involves taking all of the specs, notes, creative briefs, content and so on, and finally putting them into one complete picture. Over the years we've tried all kinds of different tools and techniques, but have more recently settled on a process that works great.

Every project I work on starts with a Sharpie and a piece of paper. It's cheap, low-tech and fast. In a couple of minutes I have some ideas on paper to work with. Once it's full, I start over and try to make a better one. Sometimes we'll go into the design process with 2-3 home page wireframe designs just to see what sticks.

Why a Sharpie (Fine Tip) and not a pen or pencil? They are less specific and they fill the page faster. Sharpie's force you to get creative with space and make room for only what is most important. It's not possible to get too wordy or carried away with a Sharpie.

Another benefit of paper wireframes is that there is no learning curve. Anyone can read or create a wireframe without having to learn anything new. When working with people of all different technical abilities, paper puts everyone on the same level and forces focus on the important stuff.

Here are a few examples from projects we have done:

Response TV Wireframe

Response TV Design

Rolling Hills Media Wireframe

Rolling Hills Media Design

Linkpatch Account Wireframe

Linkpatch Account Design

The Dot Grid Book

I've done a lot of research trying to find the perfect wireframing sketchbook. Without a doubt it is the Dot Grid Book. This notebook is super-functional, well designed and great quality, making it an ideal geek tool. It's a pleasure to use.

This notebook is double spiral-bound with 80lb, perforated paper. It's easy to scan everything in when finished and keep it on my computer for further reference. It also handles the Sharpie marker bleed through to the other side of the paper pretty well.

Getting More Specific

Although we believe it's best to wait as long as possible to worry about specifics of a design, eventually it comes time to take wireframes further. I recommend a couple of tools for making pretty digital wireframes:

• Mockingbird (Web app based on Cappuccino) - http://gomockingbird.com/
• OmniGraffle (OSX Software) - http://www.omnigroup.com/applications/omnigraffle/

Further Reading

• Wireframes Magazine - http://wireframes.linowski.ca/
• 37signals: Sketching with a Sharpie - http://37signals.com/svn/posts/466-sketching-with-a-sharpie

In a recent post, I boldly proclaimed that people not doing multi-variate testing on their websites are lazy. To prove that we drink our own kool-aid, I wanted to share the results of some tests we have been running on Linkpatch.com, a web application we built.

Through the use of Google analytics and website optimizer (both are free tools to use), we were able to increase account signups by 74% over a four-month period. Here are the three tests we ran:

1. Re-design the Tour Page

I learned pretty early on that the tour page was not helping us like it should. Early feedback from customers and friends that tested the software proved that the copy was wrong. We needed to explain exactly why we did not create a website crawler or link checker, and clearly outline the unique benefits of Linkpatch over every other available solution.

Some key metrics I was watching in analytics when testing the old tour page versus the new one were "Time on Site", "Bounce Rate" and "Exit Percentage". Here are the results:

Time on Site went up 35% as a result of this change, which is a great improvement in my opinion. Bounces went down 14%, and the Exit Percentage stayed about the same. There is still more to improve on there, but most importantly, the conversion rate for people that viewed this page went from 3.3% to 4.5%.

2. Test Headlines

Next was the main home page headline. A great headline is everything in my opinion, because an effective one will qualify our target audience and explain exactly how the app makes their life easier. Here are the three variations we tried:

Original- "Linkpatch reports broken links and images on your site, and provides all the information you need to fix them quickly."

Alt 1- "Linkpatch monitors your website for 404 errors, and provides all the information you need to fix them quickly."

Alt 2- "Linkpatch monitors your website for errors, so that you can be the first to know when users run into a problem."

As you can see, the differences in copy are subtle. Here's how they did over about a month of testing:

Alt 2 was the variation that proved to be the best headline for us to use. It resulted in a conversion rate of 5.28%, which was 11.6% better than the original we launched with.

3. Test Call to Action Button

The final test we worked on proved to be the most important, because it had the widest margin of difference between variations. Many people have debated the "right" language to use in a CTA button for a web app, and "Plans and Pricing" somehow became the de facto standard for most. However, the reason testing is important is because EVERY site is different. The same rules don't apply 99% of the time, so we decided to test the buttons for ourselves to see what converted best. Here are the buttons we used:

Of the four combinations, the "See our plans and pricing (free trial included)" button won:

As you can see, the winning button had a slight edge over the original one after testing for about a month. What is most important to note though, is the estimated conversion rate by the time the second test was over, compared to the estimated conversion rate in the first test. From beginning to end over those 4 months of testing, that's where we saw a 75% increase in conversions according to analytics:

How Long?

Although these 3 tests spanned about 4 months, it was all in my spare time. All in all it only took about 10-15 hours of work and study.

What's Next?

Keep at it! Re-work and re-test some other variations to see what works. As the site evolves and things change, there will always be plenty of things you can test on the site in search of a higher conversion rate.

Takeaway

The biggest takeaway for me is to quit fretting about small design and copy decisions prior to launching the site. Give it your best, then create multi-variate tests for anything you feel may impact conversions. There is no way to be right 100% of the time about this stuff, so take the pressure off and your users will tell you what works best.

One final note to keep in mind is that you can't test your website or get great quality feedback until it's launched. We see projects get delayed all the time while internal decision-makers contemplate what they think is best for the website. It should never be up to them if you are in the business of maximizing conversions. Just make an educated guess so you can launch and start testing! That's the only way you can find the most accurate answer.

In school I learned that 50% of marketing is effective, but marketers have no real way of knowing which 50%. Thankfully, this rule does not apply on the web. Not only can you track 100% of your online marketing and website activity, but you can also test multiple variations simultaneously and make changes on the fly.

The most successful websites aren't the ones with the best designs, although that would make our job much easier. The best websites have people behind-the-scenes that are obsessed with testing and analytics, constantly finding incremental ways to improve. So while educated guesses and "gut feelings" may be acceptable elsewhere, this approach is sheer laziness on the web.

A while back I was talking with a client about the importance of multi-variate testing when considering some major changes to their site, when I got the "gut" line. They said something like, "I've got a gut feeling this is the best way to go", thus dismissing my pitch for doing some testing.

This is a really great person and client, but I think they made the wrong decision. In this case, meeting an internal deadline, checking it off the to-do list and moving on to something else potentially cost the company thousands in lost revenues. When lots of dollars are involved, it's simply not worth leaving decisions up to one person's opinion. When you take the time to test properly, thousands of customers can definitively make a decision for you.

I believe that's the most unfortunate thing about being a web design/development agency. The project-oriented nature of our business inherently lacks the post-launch follow-up and ongoing relationship to make sure the client achieves their goals. Up to the launch we're making educated guesses, but after that is where serious ground can be gained.

The "set it and forget it" mentality may result in a pretty site, but it won't help you build a business online. Still so many people do it that way because testing takes time, money (not a lot) and the desire to learn new things. Regretfully, many people feel they are too busy to see the incredible long-term benefits of such effort.

For those that are interested, we are teachers and doers at Project83. We enjoy teaching others how to implement multi-variate testing on their own, analyze results and re-test. We also don't mind doing it for you! All it takes is an open mind and a strong will to get better results from your current website.

Seth Godin recently touched on this topic (of course more eloquently) in an article called, "Everyone Gets Paid on Commission." It is definitely worth a read. The web changes things, people!

Here are some tools that we use on a regular basis for testing:

• Google Analytics (http://www.google.com/analytics/)
• Google Website Optimizer (http://www.google.com/websiteoptimizer/)
• ClickTale (http://www.clicktale.net)
• CrazyEgg (http://www.crazyegg.com)

The process of estimating time in our business is broken. At most, we typically have a document of basic requirements, alongside a few calls with the client to go over questions about a project. In turn, we are expected to provide a budget/timeline and stick to it for what can easily be 3-6 months or more.

For many projects this is enough, but for larger or more custom work, estimates in many ways are just a shot in the dark. The process is often inaccurate and risky. It's like remodeling a house. The project often takes longer and costs more than you originally planned. Since we're committed to meeting both the timeline and budget, there are times when an inaccurate estimate can present a bit of a pickle.

An incorrect estimate isn't good for anyone. Overestimating isn't in the client's best interest and can keep you from getting the project, but underestimating almost ensures that the project will not promise to be your best work and it can be very frustrating for both sides. Ick.

Recently we have begun suggesting a paid "exploratory" period (needs a cool name). We spend all the time necessary to define a clear project scope, write out written requirements and estimate the time needed to complete the project. An accurate quote can easily take at least a few days when done properly, and it is only fair to be compensated for that kind of time.

Since the client pays for the time, they own the work that we do to define the scope and create written requirements. That way, getting bids from other companies should not only be easier, but all the bids should be more realistic.

Another benefit of paid exploratory periods is being able to partner with a client/company before diving in head first. It is very important for both sides to get to know each other, and get a good feel for what it's like to communicate together. If it does not work out, you can look elsewhere without being empty handed.

We don't do this on many projects, but it is extremely helpful for some. Here is a list of questions I consider when deciding whether the project needs further exploration:

1. How well do I know the client? How quickly do they typically communicate and get things done? Do they trust our expertise or value the same things we do in a quality website?
2. How long will the project take?
3. Have I done this before? How much of the work is new for us or custom?
4. With what we know about the project now, is it enough to provide a very accurate quote or do we need more information?

I'm definitely most comfortable with this approach right now, but it took nearly 4 years to figure it out. I believe it is perfectly reasonable to ask for compensation if it will take a significant amount of time to provide an accurate bid on a project. If you can master the art of pricing and estimates in web development, you are on your way to building a very successful business.

For additional thoughts and ideas on estimating time as a web designer/developer, our friends at Smashing Magazine published a very informative article about it.

On average, roughly 45% of a web page's weight is made up of images. Considering the size of that number, optimized images are the best way to speed up a website. A study for Amazon.com has concluded that each 100ms slower the page loads, equates to a 1% drop in sales. It's no wonder they go to great lengths to expedite page weight, and why you should too.

Up until the last couple of weeks, I didn't have a great understanding or appreciation for image optimization. I, like many others in our field, left the dirty work to Photoshop and assumed it would produce the lightest possible images.

Learning the basics about image formats, what works best for certain applications and what tools are out there to help, is something all web designers and front-end code monkeys need to master. I've put together a collection of best-practices and resources over the last couple of weeks that should be helpful:

Highlights

PNG gets a bad wrap.
PNG is not only useful for alpha-transparency, but in nearly every case is better quality and lighter weight than a 256-color GIF. For more on this, check out the Image Optimization series linked up below.

Make use of CSS sprites.
Sprites are an advanced CSS technique, but can be HUGE in creating lightweight websites and applications. Read this Smashing Magazine feature for a great round-up of CSS sprite resources.

Adobe CS4 does not have it mastered.
Optimization in Adobe Creative Suite 4 is inconsistent. Photoshop does an average job optimizing images for web. Fireworks does a much better job, with JPEGs especially. Neither do particularly well with PNGs, and require outside tools for best results. The Adobe team says that the Fireworks web optimization features are coming to Photoshop in the next release, so we'll see.

Additional Reading

Yahoo! and their people have led the way when it comes to prioritizing website performance. Stoyan Stefanov (member of the Yslow team) has written a very educational 5-part series about image optimization that is a must-read:

1. The Importance of Images
2. Selecting the Right File Format
3. Four Steps to File Size Reduction
4. Progressive JPEG ... Hot or Not?
5. AlphaImageLoader

Tools

Smush.it
Developed by the aforementioned team at Yahoo!, this website will take all the images on a given page, optimize them, and ZIP them up in a tidy little folder for you to download. It also shows you the measurable size improvements made on each image. It's a phenomenal tool we will not ever launch a project without in the future.

PNGthing
This is a very handy little Mac application for optimizing PNGs, since Creative Suite is not there yet. Simply drag an individual image or folder to the application icon, and it will optimize all PNGs for you within a matter of seconds, showing how much you saved in a little Growl notification. I love it.

The 5-part series from above mentions a bunch of other, more geeky command-line tools for optimizing images, but the two above tools work best for my needs. Happy optimizing!

So we made our way down to Austin, TX a couple of weeks ago for the annual geek-fest we all know and love, called South By Southwest. Yes I do know that SXSW is more well known for the film and music festivals, but we're not cool enough for those yet. "Interactive", as they call it is a fantastic time for bonding over brews, seeing some web design superstars and learning some stuff in the process.

Most of all, I've found SXSW to be an incredible source of inspiration. This was the 4th straight year I went to the festival, and we come home overflowing with ideas and motivation to take on the world wide web each time.

Many of the panels have now been posted on the SXSW website, and if you did not have the opportunity to be there, here are 5 recommendations (in no particular order) that are definitely worth checking out:

1. Opening Remarks: Tony Hsieh

If you know us, we're BIG fans of Zappos and all the great things they are doing in the business of customer service. We even made a trip to Vegas in January just to get a tour of their offices, and it was one of the more valuable business experiences of my life.

Tony (Zappos CEO) made a big splash at SXSW last year, and was brought in for one of the keynotes this year, so he could talk about culture, service and marketing.

Listen to the podcast

2. Even Faster Web Sites

Steve Souders (Google) is one smart dude, and he is one of the foremost experts when it comes to the need for SPEED on the web. He created a great Firebug extension called YSlow while at Yahoo!, and in this panel takes a deeper dive into advanced techniques that can make your website(s) faster.

I found the panel to be incredibly informative and useful. I learned more at this one than any others. Be on the lookout for the 2nd edition of his book, High Performance Web Sites (O'Reilly) this summer.

View the slides

Listen to the podcast

3. From Freelance to Agency: Start Small, Stay Small

This panel had some very different, yet well-respected folks on it that have companies providing web services. It was moderated by who many consider the godfather of web standards, Jeffrey Zeldman of Happy Cog. Members of the panel talk about making the switch to freelance, hiring, firing, benefits of staying small and more. This is a must-listen podcast if you are thinking about doing your own thing, or if you run a small agency like we do.

Listen to the podcast

4. Oooh, That's Clever! (Unnatural Experiments in Web Design)

Paul Annett is a designer (and hobbyist magician) for a shop based in the UK called Clearleft, who does absolutely brilliant work. His presentation was well researched, well delivered, entertaining and absolutely inspiring. Anyone interested in design for the web simply must watch this presentation, and it makes sense to see the slides he has also.

Watch the live video

Hear the audio and watch the presentation slides

5. Gary Vaynerchuk

I'm sure this panel had a name, but all you need to know is that the one and only Gary Vaynerchuk took the stage at SXSW for over an hour, and it was memorable to say the least. Gary works his butt off and KNOWS social media unlike anyone else.

He is one of the loudest, most fired up people you will ever meet, and it's all real. Best of all, he knows what he's talking about, and especially knows wine. Watch his keynote and you will definitely want to go conquer the world like he is doing right now. Be advised, the language is pretty heavy. He's from Jersey.

Watch it here.

It has been about a month since we launched the latest version of Project83.com, and I have been pleasantly surprised by all the great feedback we have been getting.

Version 3 of the website is certainly something we are proud of internally. I feel it is a great representation of who we are and what we value as a company. We have grown a lot in 3.5 years, and it is cool to look back on versions one and two of the site to see how far we have come.

I wanted to spend a little time walking you through the process that got us here, which runs over seven months. Hopefully it will encourage or challenge you in some way:

The New Logo

I never asked for or desired a new logo for Project83. However, I could not be happier with how it ended up. Lesson #1: only great things can result from giving your design team (in my case, Jared) complete creative freedom.

The typography got a well-deserved update. We moved to all caps ("J" sure is a weird letter), changed the font and gave the letters a little breathing room. The new mark is much more relevant, and the colors are much less distracting now. The website matured a great deal in version 3, and it all started with the logo.

Old Logo:

Doing Less

Leaders in our industry have mastered the "less is more" approach to web design. As our team continues to learn more each day, we get better at doing less and making the most of it. Each version of our site has been no exception; less design, less code, less content and fewer overall distractions.

Easier to Update

Thankfully, Project83.com finally runs 100% on our content management system called Springboard. Adding new portfolio items, writing blog posts and updating content has never been easier. Whew!

Especially when it's your own site, you have to do everything possible to make sure it is quick and easy to make updates. Otherwise, you simply will not get to them as often as you should. Find a content management platform you love (if you don't have one try ours!) and make sure to update content regularly.

Copy is Everything

The website copy probably went through at least 15 revisions. This is the first version of our site that I believe was truly built around the copy, which is the way it should be. The site has fewer words than previous versions, yet speaks to our target audience more clearly and persuasively than ever.

I can't overstate the value of spending time on your website copy — and the value of having a little fun with it! It's something I preach every day, but it really hit home in working on this new design. Without quality content, the best designs in the world don't work.

Keep in mind that good content takes time. You won't get it right the first or second or fifth time. Keep at it, and I believe it will prove to be absolutely worthwhile in the end.

I hope you like the new design ... we appreciate your feedback!

Everyone wants their site to rank well in search engines, and for obvious reasons (more site traffic!). SEO (search engine optimization) is a big part of building a successful site, but it should not be your #1 priority. Making decisions on your site solely for SEO benefit has some serious downsides.

For most websites, incoming traffic is simply not enough to achieve success. You need a conversion of some sort. People need to make a purchase, fill out the contact form, sign up to a mailing list, or take some sort of action that helps build your business. Without a conversion, traffic is useless.

While SEO might get the visitor to your site, it won't generate the conversion for you. What decisions have you made to generate a better ranking that now work against you in creating a conversion? Here are some things to keep an eye out for:

Ridiculous Amounts of Content

Why write 8 paragraphs of content when 4 is more than enough to make the sale? Effective web copy is all about cutting the crap, and giving the customer all the information they need in the fewest amount of words possible.

The longer it takes people to find what they need to know about your product or service, the less likely it is that they do business with you. So all the redundant, lengthy copy that earned your site a visitor ends up costing you a sale because it wasted their time.

Content Written for Computers instead of People

Content is what generates conversions more than any other factor. I would like to say it is our fabulous design, but in most cases that is simply not true. Saying "high-definition plasma television" 52 times on a page most likely won't help you sell any more plasmas.

When writing copy for your site, write with the customer in mind FIRST, then sprinkle in keywords when it makes sense. Writing primarily for search engines makes for ineffective copy, and sticks out like a sore thumb.

Cluttered Design

From a design standpoint, we often see the same trends as with copy. Sites are designed to rank well in search engines, but end up cluttered and extremely difficult for people to use. Just like with copy, sites work best when you design for your ideal customer FIRST, then do everything possible to rank well.

In most cases you can create a user-friendly, quality design while also writing code that works great for SEO. But there are bound to be conflicts as well, and you have to be certain about what is more important: the traffic or the conversion.

Doing the Math

As a design shop that is solely focused on clean, user-friendly design, you can tell what side of the fence we are on. But some simple math backs up my point.

Let's say you generate 2,000 visits as a result of being #1 on google, but due to some of the sacrifices you had to make in order to earn the ranking, your conversion rate is 2%. That is a total of 40 sales.

On the other hand, let's say the customer is your #1 priority. As a result you may choose to do a few things that boost conversion, but maximize your ranking. Maybe your site is #6 and generates half the traffic (1,000 visits), but has a nice conversion rate of 5%. Even with half the traffic, the end result is 50 sales because your site converts better.

I know this is a hypothetical situation, but higher conversion often ends up being a more powerful factor than generating more traffic. Plus, it's usually cheaper to improve conversion than it is to generate more traffic.

The answer? Learn to Make Compromises

SEO is still a great thing, and should be among your top priorities in managing a site that depends on conversions. Our company spends a lot of time and effort creating very SEO-friendly sites, but it always takes a back seat to user-friendly design that generates conversions.

Compromises must be made to maintain the integrity of your site's design and copy while also taking steps to maximize your search engine ranking. Understanding both sides of the coin, and working with an SEO company that understands them too, will ensure in the highest rate of success for your site.

"Coming Soon" is a perpetually bad habit I see on the web. There is no doubt you have seen the following many times over ...

• "New website coming soon"
• "This website is under construction"
• "The store section of our site is coming soon"

Why do we feel the need to tell users that something bigger and better is on the way? In any case, "Coming Soon" sends a bad message about you ...

1. It sets expectations.

9 times out of 10 when people say "coming soon", they don't have a definite time that they expect whatever it is to be ready. So why set expectations with users when most times it leads to a total letdown? It just makes you look bad.