Good web designers understand that quality content is what distinguishes a website and triggers desired results. Design plays an important role, but it always follows the content. The better quality the content, the more we can do visually to emphasize it within a design, which is why we always require finished content before designing a page.

Not many people like to talk about content because it’s really hard and few consider themselves “a good writer”. In an age when more of our communication is in writing than at any other time in history, it’s crucial that we all learn to be writers. We all appreciate good writing, whether sub-consciously or not.

Writing good copy for the web is different, because users “scan” web pages rather than read them from top to bottom. Most users are looking for something, so they scan quickly until they find it. 

Here are some tips on how to write “scannable” web content that performs better on the web:

1. Keep paragraphs short and sweet. Each paragraph should be no longer than 3-5 sentences.
2. Write like you have to pay by the word. Users won’t read every word, so don’t waste any. This is not the place to be verbose. Get to the point and be as clear as possible. Make it a game if you have to. How can I cut this paragraph in half and make it even more clear?
3. Use bullet and numbered lists. Lists are very scannable and they usually signify important content the reader is interested in. Use this to your advantage, just like I am in this article.
4. Pepper with Headings. Every 2-4 paragraphs needs a heading to tell the reader what the content is about. If the page has 500 words or more, there should be several headings throughout so that the reader can easily comb through the page.
5. Emphasize whenever possible. Bold and italics are great ways to set aside important content without breaking up a paragraph. It’s a great way to point readers to the most important points.

Book Recommendations

There are some great books available if you are interested in writing better quality web content. My favorite so far is Killer Web Content by Gerry McGovern. For a classic dedicated to writing better in general, try On Writing Well by William Zinsser.

CSS Sprites are a technique made popular back in 2004 by Dave Shea. In short, creating a sprite means combining a bunch of images into one, then using CSS background positioning to display images individually. Built properly, sprites cut down on page weight and minimize http connections required in order to load a web page. Bottom line: it makes things a lot faster.

Still, using sprites isn't all that mainstream because it takes longer to code a website with them, and making regular updates can be tedious without proper planning. For many smaller sites, the benefits simply aren't overwhelming enough to invest the additional time.

If you haven't been using sprites on projects for whatever reason, my hope is that this case study will tip the scales for you.

The website we worked on for the case study is ErgonomicsMadeEasy.com. We created this site a couple of years ago with only one sprite for the navigation. After improving the home page with sprites, image optimization and roughly five hours of time, here are the results we saw:

Highlights

• Total page weight decreased by 270.7k or 42%
• 55% fewer HTTP calls
• Page loaded in 2 seconds, a 70% improvement
• Total number of images decreased by 45 or 62%

Four total sprites come together on this website, three of which were new. The navigation was already a sprite, so it remained the same. Here is a link to see each:

• sprite-icons.png (10.1k, 15 total images)
• nav_bg.png (21.4k, 3 total images)
• sprite-tabs.png (2.4k, 2 total images)
• sprite-footer.png (4.8k, 5 total images)

Why four sprites and not one big one? Two reasons:

1. When optimizing images for minimum file size as a PNG-8, the image quality deteriorates with more color diversity.

2. Big huge sprites are typically very hard to maintain.

Non-sprite optimization

As part of this project I also did two other things not related to sprites that made a nice dent in the overall file size on the home page:

1. I highly recommend saving any JPG images with Adobe Fireworks CS4. Don't ask me why, but the process is completely different from how Photoshop saves JPGs for web. It's quite common to save 20% or more in file size by using Fireworks over Photoshop. However, I still use Photoshop for PNGs.

2. I noticed about ten background images that were being loaded on the home page through the stylesheet, which were only necessary on category pages. So I took that CSS code and put it in a separate stylesheet that is only loaded on categories. If you have large background images being referenced in your stylesheets that are only necessary on a couple of templates, I recommend putting them in a different stylesheet and only calling it when they are needed.

What Now?

These numbers should be proof enough that sprites play a crucial role in maintaining a fast website. Not only that, but running your own tests and optimizing is important before launching a site.

It takes time to understand the right uses for sprites, but the only way to learn is to work with them. Here is a collection of my favorite articles on creating sprites:

• A List Apart: CSS Sprites: Image Slicing's Kiss of Death (where it all started)
• Smashing Magazine: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
• CSS Globe: Creating easy and useful CSS Sprites
• mezzoblue: Sprite Optimization
• Tutorial9: Building Faster Websites with CSS Sprites

Lastly, I don't recommend any auto-magic sprite generators because they don't account for some important criteria like images that repeat or may not have a defined width/height. Create/code your sprites from scratch and I believe you will get much better results in most cases.

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!