Building on the momentum from my last post, it's a perfect time to talk about when it's okay for web designers to drop support for IE6. Of course WE want it, but I don't believe designers and developers get to make this call when they choose. Lots of prominent designers disagree with me, but I don't think it's up to us to decide.

Fact is, studies show that most people still using IE6 don't have a choice to upgrade. As of May 2009, 60% of companies still use IE6 as their default browser. That's something we are compelled to take into account.

In recent memory we've seen popular web apps like 37signals apps, Apple's MobileMe, Google Apps and YouTube stop support for this browser. Since these apps cater to a more computer savvy audience, I believe it's makes complete sense for them. However, it doesn't provide just cause for people that build public websites to stop supporting it without more research. I don't believe Apple.com will stop optimizing for IE6 anytime soon if it means they can sell more Macs.

I did a quick survey of a bunch of our clients. I saw anywhere from 5-15% of users to our client websites are still using IE6. That's too high for me, so we're going to keep supporting it. Until that percentage creeps to roughly 3% or lower, I believe it's our obligation to make sure it works.

"Making it work" can mean a number of things. I don't think websites have to look exactly the same in IE6 as they do in modern web browsers. We geeks call this progressive enhancement, but as long as the website is still functional and degrades gracefully I have no issue with it.

A slightly more aggressive approach is being taken by the creators of IE6nomore.com, which I find pretty interesting. They have created some really simple code people can add to their website, which shows a banner like this to any IE6 visitors:

That's a pretty cool idea!

No matter what, if you do choose to drop support for IE6 make sure you are doing it for the right reasons. Doing it out of frustration, laziness or indifference isn't the best way to communicate expertise to clients and potential clients.

By far the most difficult thing to master when learning to code with web standards is browser optimization. It seems like every layout presents a different challenge than the last one. It's taken me years to figure out pretty much every bug Internet Explorer can throw my way, but I still struggle from time to time.

Part of coping with Internet Explorer (versions 6 and 7 in particular) means having some nifty tricks that can help you in a pinch. Some of my tricks aren't very well publicized, so I'm posting them here in hopes of saving at least one person from taking their frustration out on their innocent laptop, wife or dog.

Target IE6 or IE7 with a single character

A quick way to set a specific style that applies only to IE6 or IE7 without the use of conditional comments or javascript is to try the following simple syntax in your stylesheet. Just add a simple asterisk or underscore before the property:

#someElement {     
	background: red; /* modern browsers */     
	*background: green; /* IE 7 and below */     
	_background: yellow; /* IE6 exclusively */  
}  

Credit: NetTuts.com- http://bit.ly/8TIJSs

Using text-indent on an input in IE6

If you use image sprites (which I highly recommend), you are likely to run into this problem. The text-indent property does not work on an input. So you may get an image that looks like this:

Instead of hiding the text and replacing it with an image, both show up in IE6. The following three lines must be added to your IE stylesheet for the input in question to fix the problem:

display:block;
font-size: 0px;
line-height: 0px;

Usually the display:block property is unnecessary if you are using a sprite or image replacement technique to replace the text (because it's already a block level element).

Credit: ProductiveDreams.com- http://bit.ly/12YKXi

IE8 Rendering Modes

In typical Microsoft fashion, they actually present you with a bunch of rendering mode options in Internet Explorer 8 instead of just doing it the right way all of the time. So if you write code properly and it validates, you will want to add the following meta tag to the <head> ALL of your layouts moving forward:

<meta http-equiv="X-UA-Compatible" content="IE=8" />	

This tag enables the IE8 standards compliance mode on your website, which you would think should be active all the time.

Credit: Zurb.com- http://bit.ly/4RGzk

CSS Browser Selector

When all else fails, I use an amazing 1.1k javascript file called CSS browser selector. This script lets you code styles for tons of different technical configurations. You can set attributes by operating system, browser and browser version. It also cleverly adds a "js" class when javascript is enabled so that you can set styles up for when it is disabled. Pure awesomeness ...

Credit: http://rafael.adm.br/css_browser_selector/

The Alpha-transparent PNG Paradox

One super-annoying issue with IE6 is that it doesn't know how to read alpha-transparent images properly. So if you have an image with a shadow over a transparent background or something with an opacity less than 100%, chances are it won't look so hot in IE6.

This isn't an easy fix. There are a number of recipes that cover different situations. Frankly, we try to avoid all of them if we can and simply use different images in IE6 that don't have alpha-transparency. It doesn't look as cool, but that's what they get for using a crappy browser. Here are the best solutions I know about:

• Unit PNG Fix (lightweight, my favorite right now)
• Supersleight (doesn't work for background images)
• DD_belatedPNG (I haven't used before, but it seems very solid)

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.

First Impressions are everything. In business, the first impression usually starts with a logo. Companies go to great lengths in designing their logo so that their first impression is a memorable one for you. Here is some general information that is important in crafting the right logo for your company.

1. Functionality/Versatility

• Great logos work well across many different mediums, whether it's on a business card or a billboard display
• How does it scale? Great logos maintain their integrity and quality at any size.

• 
• 
• 
• 
• 
• 

2. Uniqueness

Since people spend less than five seconds on average looking at a logo, it's important to stick out!

• 
• 
• 
• 

3. Works in black and white

• Work with a designer that starts the logo design process in black and white
• Color is important, but it should not be an integral component of the logo
• The logo should communicate the same message in black and white as it does in color

• 
• 
• 
• 
• 
• 

4. Relevance

Your logo should accurately reflect the company's personality and communicate an appropriate message. A dance club's logo wouldn't work for a financial company. A fast food restaurant's logo would not work for a children's clothing store. It's important to get to know your client's business and personality before diving in to the project.

• 
• 
• 
• 
• 
• 

5. Symbol or Logotype, Make it Memorable

Symbol – An identifier/mark next to or above the company name.

• More common than a logotype
• Easy to recognize

• 
• 
• 
• 
• 
• 

Logotype – A text-based logo with no symbol

• Most effective with a short company name
• More difficult to make unique and memorable
• Heavily relies on shape and color

• 
• 
• 
• 
• 
• 

I hope these tips will come in handy when it comes time to love on your company logo. Be sure to check out works of some of the greats, like Saul Bass, Ivan Chermayeff and Paul Rand and many more.

Over the last couple of weeks we launched two projects of note that turned out exceptionally well. Our thanks to Xgaming and EACEF for letting us be a part of their new website projects. Both clients are fantastic to work with.

Xgaming

• Project details
• Visit website

EACEF

• Project details
• Visit website

A few weeks ago, the Google Analytics team released some fantastic updates to their software. Of particular interest to me was enhanced mobile tracking and reporting capabilities.

The first thing to understand about mobile website reporting is that it works differently than regular websites. Many mobile browsers do not yet support javascript, the language that platforms like Analytics depend on to track website stats. Instead of the browser doing the work, mobile tracking leans on some server-side code to track visitors properly.

Don't be intimidated by all the geek-speak though. It's not rocket science to implement analytics on your mobile site. If you've got five minutes, know how to use FTP and don't mind copy/pasting some code, you can do this!

1. Add a new profile

From your Google Analytics account, add your mobile site as a new domain.

2. Get advanced tracking code

Once your site is added, Analytics will give you a Web Property ID like normal. Keep this around for future reference. In the example below, the Property ID is highlighted.

Click on the "Advanced" tab under the instructions heading. Then click on the radio button to select "A site built for a mobile phone". Finally, select the server-side language. I will be using PHP for this example.

3. Insert the snippets

There are two snippets of code that you must copy/paste onto each page of your mobile website. One goes at the top of each page, right after the <html> tag. The other goes at the bottom of each page, prior to the </body> tag.

Note that the third line of the top snippet includes your Web Property ID. This varies for each domain, so be sure to change it if you ever re-use this code.

4. Upload the file

Lastly, you have to download this file called "ga.php" and upload it to the root directory your domain. This means if your domain is m.yourdomain.com, this file needs to be at m.yourdomain.com/ga.php.

5. Test and Celebrate!

Give it a few minutes and refresh the tracking status in Google Analytics. Assuming you followed the directions, you should be in great shape.

Known Limitations

Lastly, it's important to familiarize yourself with the currently known issues, published by Google in the sample code instructions:

• Multiple instances- you can't run multiple copies of the script on your website, or use it in conjunction with the standard javascript tracking code.
• Inaccurate locations- Since Google determines users' location using their IP address, tracking this from a mobile device is not as accurate.
• Server load- Due to the additional code required to track visitors properly, additional server load may be possible.

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

Have you ever had a really big idea? I live for big ideas! The excitement, the research and the speed with which things happen initially is invigorating. I feel like I have big ideas all the time; but in the end very few of them come to fruition, and for good reason.

You may be working on a big idea right now ... I know I am! However, it's important to understand and appreciate an idea for what it is: nothing but a spark. It's a glorified plan, where the benefits are crystal clear and the hurdles have yet to be realized in full if at all. Until executed with precision, an idea has no value at all.

So many people see an idea as a stroke of luck for one or a few individuals who somehow achieved overnight success as a result. Seeing an idea through takes incredible fight, faith and perseverance. Most importantly it takes execution, for which successful entrepreneurs deserve all the credit.

Successful companies like Amazon.com, 37signals, Google, Tesla and so many others win not because they were the first with a specific idea, but because they execute better than anyone else.

As an entrepreneur, understanding the value of solid execution has made a huge difference in how I approach ideas. Take our app called Feed My Inbox, for example. The idea is not new or sexy, but no one was doing RSS to email well. In a little over a year, 60k+ customers and not a dime spent on advertising yet proves that you can succeed on solid execution.

You don't have to be the first with a game-changing idea; you only have to be the best at executing it.

Ideas are awesome. They can bring about innovation in an industry or even turn one upside down. But never bank on an idea getting you anywhere. Execution is and always will be the game-changer.

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.

A couple of years ago I wrote a post outlining many of the tools we are using to run the business, work with clients and build websites. Of course a lot has changed since then. I'm always interested in what others are using, so hopefully some of you folks can benefit from this updated list.

By far my favorite app, the one that's most crucial to our work every day, is Dropbox. It stores all my files securely online, keeps backups and previous versions automatically, syncs everything across computers and even on my iPhone, allows me to share files and folders with my partners and does it all incredibly well without getting in the way.

Utilities

1Password (Mac/iPhone/Browser Plug-ins)

1Password is a useful application for keeping track of your logins/passwords. It makes great use of browser plug-ins to add new logins and sign you in quickly to sites it knows about.

Fluid (Mac)

This SSB (site-specific browser) allows you to use web apps like desktop apps, giving them a separate icon in your applications folder so it works independently of other apps. It's great to use for your favorite web apps.

Fujitsu ScanSnap S1500M (Hardware and Mac)

This is the best document scanner you will ever own. It's so awesome that I got the small version for home and highly recommend both.

Pixel Tracker (Mac)

This app is incredibly useful when you need to find a hex value fast.

Snapz Pro X (Mac)

Very handy application for taking photos and videos of your screen

Creative

Sharpie and Paper

All our wireframes start with a blank sheet of paper and a sharpie! I recommend the Dot Grid Book for sketching.

OmniGraffle (Mac)

I create sitemaps using OmniGraffle, and sometimes wireframes if the project demands it. However, we prefer not to get more specific than the paper/sharpie method whenever possible.

Adobe Creative Suite 4 (Mac)

We use Fireworks, Illustrator, InDesign, Photoshop and the Media Encoder regularly.

Code

Textmate (Mac)

Text editor that's fantastic for coding, and I also prefer to blog/write using it

Textmate Zen Coding Bundles (Mac)

I recently started using this super cool bundle that makes writing HTML and CSS 100% faster using abbreviations and snippets. This article should get you started.

DiffMerge (Mac)

This is a free tool for comparing files and finding differences between the them.

Transmit (Mac)

Great FTP client, easy and reliable

Versions (Mac)

Beautifully designed subversion client, love it

Communication

Adium (Mac)

Great little open source instant messaging client that supports any well-known provider (AIM, Yahoo, gTalk, etc.)

Skype (Mac/PC/iPhone)

Skype is a swell app for VOIP phone calls and chat

Mail/iCal/Address Book (Mac)

They are not perfect, but I prefer the default OSX tools for email, calendar and contacts. I especially love the Letterbox Plug-in for mail.

CoTweet (Web App)

CoTweet is great for companies that have numerous people managing one twitter account.

Tweetie (Mac/iPhone)

Great twitter client, beautiful UI for both the Mac and iPhone

GoToMeeting (Mac/Web App)

We use this as a conference call number and also for client demos of all sorts.

Twuffer (Web App)

This is a nice little application to schedule tweets for the future.

Productivity

Evernote (Mac/iPhone)

I store all kinds of notes in this program, along with categorized bookmarks. If I don't know of a place to put or remember something, it goes in Evernote.

OmniFocus (Mac/iPhone)

EVERY task goes through this app, as I swear by the GTD methodology.

Behance Action Notebook

Great paper tool for taking notes in meetings and so forth

Financial

iBiz (Mac)

All our time tracking and invoicing takes place in this app. The clincher for us is creative control over the template design using HTML/CSS.

Quickbooks 2008 (Windows)

I'm looking for a reason to ditch Quickbooks, so I am not going to link it up here. It's just tough to find a system that is CPA-friendly and has the advanced features we use.

Ubersmith (Web App)

All recurring and credit/debit card billing goes through this system. It's primarily built for hosting providers, but we know the developers of this software and enjoy using it.

Firefox Plug-ins

Firebug

THE web developer tool of choice!

YSlow

Great firebug extension that helps developers optimize pages for speed, according to Yahoo's best practices

Google Page Speed

Another firebug extension that is great for optimizing and measuring web page loading time

Feedly

If you use Google Reader, Feedly is a sweet little tool that structures your feeds more like a newspaper. Sometimes I prefer using this instead of the reader interface. Cool idea!

MeasureIt

Simple little tool to measure the pixels on a web page

Screengrab

Neat tool for taking a full page screenshot, no matter how long the web page is

Xmarks

Sync your bookmarks across browsers and computers, or even view them online

Web Developer Toolbar

Lots of very useful tools for analyzing and building websites

Website Optimization and Monitoring

Clicktale (Web App)

This is a truly awesome tool where you can watch videos of people using your website and see very useful analytics. It's a great form of user testing because it is cheap and users don't know they are being monitored.

Crazy Egg (Web App)

A great way to visualize how visitors are interacting with individual pages on your website

Google Website Optimizer (Web App)

Comprehensive tool for doing A/B or multi-variate testing on your website

Google Analytics (Web App)

Definitely the most popular analytics platform, and you can't argue with the price

Pingdom (Web App)

Uptime and performance monitoring, which notifies us immediately via email and/or SMS the moment anything is funky on one of our servers

Linkpatch (Web App)

Our team created Linkpatch, and we use it to watch for broken links on our websites. If someone encounters a broken link on the website, we get an email with all the information necessary to fix the problem.

Other Apps

MailChimp (Web App)

We recommend this service to ALL our clients for email newsletters and marketing, they rock

Google Reader (Web App)

Really useful feed reader

Feed My Inbox (Email/Web App)

We created Feed My Inbox, which you can use to subscribe via email to any feed. It's very handy for people that don't use feed readers and want an easy way to follow their favorite sites.

MyFax (Web App)

I've never owned a fax machine, so this application gives me a number by which I can easily send/receive faxes via email.

Survs (Web App)

My very favorite way to conduct online surveys

Tripit (Web App/iPhone)

Automatically organizes your trip itenerary