Project83 Weblog

Fixing Broken Links with Linkpatch

Mon, 06 Jul 2009 00:43:44 -0400

After nearly two months without a post on this blog, I'm pleased to come out of hibernation this week. One of the reasons I was unable to make time for blogging recently is because my spare time has been dedicated to a side project that we launched about 3 weeks ago.

Our team is never short on inspiration or ideas for the web, and our outlet is a little software company called Brightwurks. Linkpatch is the name of our second web application, and it is our way of solving a problem we deal with every day at Project83.

One of the more frustrating things a user can run into on the web is a broken link. Often times, it leaves the user stuck, forcing them to wander the site aimlessly looking for what they need, or become frustrated and go elsewhere.

We do a number of things when launching a website to minimize dead ends like that. We always check the site for broken links between internal pages, and setup redirects (when applicable) from any old URLs to the appropriate location on the new site.

While most geeks stop there, I don't believe that's enough. There aren't any tools that are constantly watching, monitoring when and why people run into a broken link on your site. If another website is linking to your website, but the URL is broken or out-of-date, you have no way of knowing ... until Linkpatch.

The idea behind Linkpatch is simple. It is a small script that is always watching your website's error pages. If a user ends up on an error page as the result of a broken link, the script records all kinds of information about what happened, and sends an email to the webmaster so it can be fixed.

Linkpatch has been an incredible resource, as we have been using it internally for quite some time. We have it installed on many of our websites, and if a user or customer runs into an issue, we're able to diagnose and fix it very quickly. If we make a mistake in building the site, Linkpatch usually lets us know before the client does.

Here are just a few of the uses we have had for Linkpatch recently:

One of the URLs in a recent client newsletter had a typo. We were able to add in a redirect from the misspelled URL to the correct one.
The shopping cart page on a client site was broken after a recent update, and Linkpatch found it very quickly.
Links from blogs, twitter, search engines and affiliate websites that were all wrong or out-of-date were able to be caught and corrected within minutes after the first sign of an error.

Linkpatch has definitely been a big help to us in keeping our client websites error-free. We think other webmasters and web design shops will enjoy it too. Feel free to check out the site if it sounds appealing, and we always welcome any feedback. For the next 2 days, you can get a free 5-site Linkpatch account for mentioning the app on twitter. Check out this page for more info.

Resources for Image Optimization

Wed, 13 May 2009 01:11:55 -0400

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:

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!

Designing on Spec

Tue, 05 May 2009 23:28:40 -0400

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!

SHOWCASE- 3 new sites

Tue, 28 Apr 2009 19:22:46 -0400

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.

Why

Tue, 28 Apr 2009 14:51:04 -0400

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:

Why is it done this way?
Can it be done better?
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.

Customer Service and Web Design

Thu, 16 Apr 2009 12:53:05 -0400

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.

South By Southwest Recap

Fri, 27 Mar 2009 14:20:15 -0400

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.

How to Win Your Office March Madness Pool

Thu, 19 Mar 2009 14:11:57 -0400

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!

Project83.com Version 3: What We Learned

Tue, 03 Mar 2009 09:56:10 -0500

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!

It's Alive!

Mon, 02 Feb 2009 23:32:06 -0500

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!

Project83 Weblog

Fixing Broken Links with Linkpatch

Here are just a few of the uses we have had for Linkpatch recently:

Resources for Image Optimization

Highlights

Additional Reading

Tools

Designing on Spec

The Process Gets Shorted

When Spec Does Make Sense

Decide What Works for You

SHOWCASE- 3 new sites

Vigilant Investments

The Noticer Project

The Salon Professional Academy

Why

Customer Service and Web Design

It's a Marathon

The Work is Subjective

Personal Relationships are Everything

It's Not About You

South By Southwest Recap

1. Opening Remarks: Tony Hsieh

2. Even Faster Web Sites

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

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

5. Gary Vaynerchuk

How to Win Your Office March Madness Pool

1. Go with great guard play.

2. Pick teams that don't commit turnovers.

3. Can they shoot free throws?

4. What have they done lately?

5. Experience matters.

Project83.com Version 3: What We Learned

The New Logo

Old Logo:

Doing Less

Easier to Update

Copy is Everything

It's Alive!