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!

Imagine for a moment that you are engaged to be married. One very important decision you have to make is choosing a photographer for the wedding and reception. Photographers can easily cost $2,000 and up, so you want to be sure about your choice.

You are having a tough time making a decision, so you invite five photographers to participate in your wedding. There is only one caveat: once the wedding is over, you will review the all photographs, and choose the one photographer you like best and only pay that person. The other four get a friendly handshake and nothing more for their hard work.

This is the concept behind what people in the design world refer to as "spec work". It's been quite a hot topic as of late. Entire websites (this one too) are now dedicated to helping companies find designers willing to do spec work, and basically compete for the right to work with a client on their project. We have gotten inquiries about doing spec work at least twice already this year, so I feel like it is important to explain why we don't participate.

The Process Gets Shorted

One of the criteria that must be met before we take on a project is answering YES to the following question: "Can we do really great work?" Our very best design work is the result of seamless collaboration with the client, extensive research and careful planning before ever getting started on the visual design. With spec work, this part of the process is often cut short or ignored all together.

By choosing a design created on spec, it gives too much weight to the visual side, instead of what will perform best with customers or help grow your business. The visual part of a site is only one piece of the puzzle, but with spec it is often the only piece of the puzzle considered by the client upfront.

We enjoy the process of creating a user-friendly, effective website; but that process takes a lot of time and effort. It's simply not feasible to do it all for free, with no guarantees of getting paid for it eventually.

When Spec Does Make Sense

Whether spec makes sense for you as a client is all about what you hope to achieve with the design. If one or more of the following characteristics describe you, it's possible that it will be a good fit:

• You can accept that the initial work will not be as polished or thorough
• You don't really have a good idea of what you want "until you see it", and need to see styles and variety that is all over the board
• Your budget is limited, and expectations are not incredibly high
• You have no problem working with someone that's less experienced, but eager to learn

Decide What Works for You

I personally think it's wrong to expect any professional to perform 10-25 hours of service free of charge without any guarantees. But plenty of creatives are totally okay with it! If you are a designer, and use spec work as an opportunity to prove yourself and get better, then make the most of it.

No matter what side of the fence you are on, it's important to respect those on the other side. Some of that has been lost in all of this banter across the web. We spend a ton of time on all our projects and really dedicate to the process, so spec does not make financial sense for us or the clients we work with. However, for those that can make it work and are proud of the results, more power to you!

We had the great pleasure of launching a number of projects over the course of April, and three of them recently landed in our portfolio.

Vigilant Investments

Visit this site in a new window
Read about the project

The Noticer Project

Visit this site in a new window
Read about the project

The Salon Professional Academy

Visit this site in a new window
Read about the project

Great companies, successful entrepreneurs and product innovations start with a simple question. Why?

Zappos built their company by asking why companies spent more on marketing than customer service. Ricardo Semler created democracy and empowerment within the workplace by asking why companies don't trust their own people. Apple asked why mobile phone manufacturers put all their efforts into fancy hardware when the software is what sucked.

All of these ideas come about as a result of dissatisfaction with the status quo. To these people, "industry standards", company policies, or the way things have been done in the past are nothing but excuses. What excuses have you made in the last 30 days that kept you or your company from being it's very best?

It's a simple test, really. In everything you do, ask yourself the following:

1. Why is it done this way?
2. Can it be done better?
3. How can I become the best or be most effective at this?

It might be appropriate for you to ask yourself why people don't ask why more often. I ask myself that all the time! It's because asking why is never popular, it's never cheap or easy, and it's never the most productive thing at that moment. But if why is the difference between you and being average, wouldn't it be worth it to ask every time?

Sometimes when you ask why, the answer is to change nothing, and sometimes the answer is to change everything. In both cases, there should be a great reason to do so. For the record, none of the following count as "a great reason":

• That's how our competitors do it
• I don't have time
• Our industry has always done it this way
• My boss or my client doesn't like it that way, and I don't want to rock the boat

That last one is loaded, because sometimes you have to give in and keep the boss/client first. But you still shouldn't be afraid to question something that can be done better, and challenge anyone that is afraid to leave their comfort zone.

If you are content running in the middle of the pack and not getting noticed, then by all means do not ask why. If you want to be the best, ask why at every opportunity, and be prepared to take action at whatever cost.

A thrilled customer is the biggest WIN a company can have in my opinion. Happy customers can single-handedly keep you in business, and outlasting any challenges a recession or struggling industry may bring about. For Project83, our customers are everything, considering we have yet to spend our first dime on marketing (and don't plan to).

That said, providing an outstanding customer experience in our business (web design and development) takes work—a LOT of work. It's something I was severely under-prepared for in starting this company, and I definitely have room to get better; even after nearly four years of learning.

If you are considering a career in web design or already have one, I feel it's important to be aware of what it takes to WOW a client over the course of a project.

It's a Marathon

When you typically think about customer service, it's a sprint. Purchasing a product in a store, going to a restaurant, or calling a 1-800 number are all forms of customer service that begin and end in a short span of time, thus the reason I call them sprints.

A typical web design project is very different. It's a marathon. It can easily take 3-6 months of work to provide one single outstanding customer experience to a client. That also means you have six months to screw it up.

My advice? Be patient, communicate constantly, take responsibility for mistakes and meet the deadlines you set. Do those things and you've already surpassed most companies in our business.

The Work is Subjective

By providing a creative service, literally nothing we do is black and white. It's all up for debate until you have analytics to back up your theories. All of our work is subjective, and in the end the client has final say on which direction the project goes. If we believe a project is perfect, yet the client believes it's not close, then it's not close. Sometimes that can be a hard pill to swallow.

Consider creative differences as a challenge for you to get better, and to get out of your comfort zone. At times we simply have to trust that our clients understand their business better than we do, and just make what they want happen. At other times you should be honest and try to steer them in another direction. It's a delicate balance, but always make your points with respect, and be willing to move on if they don't agree with you.

Personal Relationships are Everything

Web development is still like any other business in that it revolves around people. Due to the long-term nature of a web project, you are expected to initiate and maintain a great working relationship with the people that hired you, or else things can go downhill. If you are an unbelievable designer with bad people skills, it's virtually impossible to make your customers happy, despite the work being good.

My advice is not to be a hermit (I can struggle with this). Seriously, don't lean solely on email communication with clients. Check-in with them on a regular basis over the phone or in person to keep your relationship on good positive terms. Email can be so easily misinterpreted and cold, that you simply must do more to keep your relationship with a client on solid footing.

It's Not About You

As a matter of personal pride, it is perfectly natural to want each project you work on to be your very best. But that won't always happen, and you have to be able to smile through it.

Web design work is about honoring the client, and providing a product for them that will generate a great return on investment. Most importantly, you want them to have a big smile and tell all their friends about the great experience they had working with you. Do that and everyone wins. Make the project about you or your ego and you will lose most of the time.

I am not writing this post because we have the customer service thing down; because we don't. However, I do think we're getting better at it every day. Being conscious of common pitfalls in our business is the first step in rocking them out and providing outstanding customer service.

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.

Few people know that my career as a "web guy" or self-proclaimed geek is a fallback from the REAL career I wanted to pursue: being a professional basketball player.

Long story short, my DNA had different plans for me, and I never had an opportunity to play basketball for a living. However, my love for the sport still gives me an edge over most anyone come this time of year, in filling out my NCAA tournament brackets.

I bleed blue and am a die-hard University of Kentucky fan. Since this is the first time in 17 years we won't be part of the tournament, I felt it was appropriate to share some secrets about how to win your office bracket pool and make the right picks.

I predicted 57 of the 63 games last year in the tournament. 2 of those losses were due to the faith I had in my Wildcats to pull a couple of upsets. With a little research, you can pick most of the winners this year. Here are a few keys that should be a huge help in picking this year's big winner and any "cinderellas":

1. Go with great guard play.

Guards dominate the tournament ... especially point guards. Point guards are floor leaders, they make their teammates better and they don't make many mistakes. Watch out for any team that has 2-3 really great guards, and can shoot the 3 well. They will most likely be the difference in a close game.

2. Pick teams that don't commit turnovers.

Teams that do well in the tournament simply don't make a habit of turning the ball over. Look at each team's average turnovers per game, and don't pick anyone that averages over 15 unless they are superior in nearly every other statistical category. The most successful tournament teams know how to take care of the ball for 40 minutes.

3. Can they shoot free throws?

There will be lots of close games in the tournament. With the exception of the Memphis team from last year, usually teams that do well must hit over 70% of their free throws on average. Be sure to double check each team's free throw shooting, along with the individual attempts and percentages for the biggest scorers. At some point it will be a factor, and your picks have to be able to hit clutch free throws when called upon.

4. What have they done lately?

Momentum is huge in college basketball, because so little separates each team.  Research how each team has performed over the last 10 games. This is not always full-proof, but for me if I can't decide on a team it can come down to how they performed over the last 10 games. More times than not, teams on a roll of late will be more poised to make a run.

5. Experience matters.

Especially when picking an underdog, it's important to look at the team's overall experience in the tournament and in games played. Usually the cinderella teams have 4-5 really crucial seniors that make contributions to their team and provide great leadership. If a team is over-matched in every other statistical category, senior leadership could be the only thing that gives them a chance to get a win.

Lastly, keep in mind that any team can win any game on any given night. There is no dominant one team in college basketball. Don't be afraid to go with your gut and predict upsets that make sense. That's what makes this time of year the most exciting in sports.

Best of luck to you this year in dominating the office pool!

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!

After a ton of work, I am excited to announce the launch of Project83.com v3. A much longer post about the site and the various design/branding decisions we made is in the works. For now, just give it a look and feel free to share your thoughts! 

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.