So, some quick stats on Microsoft Internet Explorer 6. IE6 was launched by Microsoft in 2001. Though it has had some minor updates since it’s initial launch, you know that doesn’t change anything, especially because some people out there are still using that first launched version! IE6 came standard on every Windows machine since then until IE7 was launched in 2006. Now last time I checked (aka when this post was written) it was late 2009. IE6 has been out of date since it’s inception, but has definitely been out of date since it was replaced by IE7 over 3 years ago. So how it is that still approximately 5% of internet users still use IE6? Well sadly, Microsoft does not require, or even really push users to update, especially in the olden days. I grabbed that 5% estimate off of Google Analytics for my own site, College Prowler, and a few of my freelance clients. Though the percent is slowly falling, it will be around for a while I’m sure. So, based off of the small percentage, which is slowly falling, and the fact that cross-browser testing IE6 occupies at least 50% of my cross-browser testing time

The irony of it all is that even Microsoft is desperate for users to upgrade off of IE6 to IE7 or IE8. This of course begs the question, how stupid do you have to be to still run IE6!?! At least 90% of the display bugs I’m aware of are solely IE6 problems. Entire blog articles are devoted to listing bug fixes for IE6. Well, based off of all of those stats, our company finally let me move away from IE6. We put up a warning (only visible to IE6 users) that we don’t support IE6. We even included a link to download IE8, but somehow I don’t think that’s gonna do anything. I’m just glad to be done with it!

So if you know what’s good for you as a web designer, forget IE6! The more people that stop supporting it, the faster people will switch off of it, and the faster we’ll be rid of that evil browser that has trouble outputting today’s beautiful websites. Of course, if you are still making websites with red text on a blue background, maybe you should still be testing in IE6…

Share this post

1. Enhance your user experience: Google analytics has tools to track the types of users you are getting. You can look at their location (in the world), their computer specs (computer type, screen size, operating system, browser/version), their viewing trends (page views, bounce rates, time on the site), and much more.

So why is this helpful? It allows you to design your site around your users. You know what browsers and versions they are using, so you can decide how much time to spend cross browser testing. You know what screen sizes your users are using, so you can figure out how wide you want your designs to be. You can see when you launch major changes to your site what happens to your user trends (did it cause an increase or decrease in the positive experience of your users). But these are all very broad things, let’s get more specific.

2. Test and improve specific content: Google analytics takes the first benefit a step further by allowing you to look at most of the above data and more with specific pages and sections of your site. This will allow you to test out smaller changes to your site by looking at user trending and navigation on specific pages or new sections that you just launched or changed.

So why is this helpful? Imagine you just put up a new section of your site that is a little more alternative to the standard navigation you have throughout the rest of your site, or the design is a bit more energetic and you aren’t sure how it will be received. Now, say a week after your launch, you can go back and see how your users interacted with the new section. You can see where they came from in the site to get there, what they did there, when they left, and where they left to go to. You can compare the visitor trends with the overall site averages and get a feel for whether the new design and/or navigation is an improvement to your site, or a detriment. It can then guide future changes to that section, or even the rest of your site!

3. Pimp out your SEO efforts: With the “sources” section of Google Analytics, you can track where your users are coming from, and how they are finding you. You can see how many users are coming in directly (typing in your web address or using a bookmark), through referring sites (external links), or through search engines. Then you can look at keywords that people used to land on specific pages within your site, or the site in general.

So why is this helpful? If you have been trying to up your SEO, then you can see how often people are linking to you (based on the rate of referring sites) and how effective you are at certain keyword searches that you are trying to optimize for. Knowing what people already land on your for and teach you what your site is doing well, and help you decide what other keywords you might want to focus more on.

4. Make some moolah: Lastly, Google Analytics allows you to track sales and other goals within your site. If you have specific items you are trying to sell, you can put in a specific goal that tracks it. Then you can see the paths those users took to get to that sale and optimize for it even more. To be honest, I haven’t focused on these tools much myself. For my own website, I don’t have much of a need for it with all the other customization options. For my work at College Prowler, though we do have sales, I tend to focus more on the user experience considering that is where my background is, and my boss looks at everything, including the sales “goals” and “ecommerce” options.

All of these sections have some additional benefits that Google Analytics is still testing out, in particular the “advanced segments” tool. This tool allows you to set up segments of your visitors or your site so that you can get even more detailed with your website’s statistics. Say you have too main sections of your site, and though they sometimes cross over with users, they are often relatively separate. You might want to see just what one half of the users are doing, as compared to the other half, because they really represent two completely different user bases. Again, it allows for even more customization to your user. There are some downsides to this tool though. In particular, you can create segments, but you can’t share them with co-workers that might be on the same analytics account, they are only available to you. I already emailed Google months ago and complained about this, but they are slow to respond to that kind of stuff. I think sometimes they pretend to be all focused on usability, but in reality, they lose that focus too often…

One more downside to Google Analytics is the slight inaccuracy of information. Data is never 100% accurate or reliable. This is a problem with really small sites where small differences can really cause issues with the data (because of low statistical power). Still, take everything you see with a grain of salt, but also put some trust in it. If anything, it will lead you in specific directions for real user testing! Overall though, fantastic tool!

Share this post

1. Download every major browser to test your site in. Essentially, you should be working with Firefox, Internet Explorer, Safari, Chrome, and Opera. Opera is used by about 3% of internet users, and is the least common of the five mentioned here. There are also other browsers, but usually you need to stop somewhere, and I think Opera is a good place to end.

It might help to set yourself up with Google Analytics so you can know what percentage of your users are using what browsers. It will even break it down further into what version your users have, which brings me to my next point.

2. Make sure to test both IE7 and IE6. Internet explorer 6 and 7 are vastly different. Soon, IE8 will be out of beta testing and will be yet another version that needs to be tested. This is the biggest pain you’ll encounter. IE7 is actually pretty good at complying with web standards, but IE6 is like a death trap. The problem here is obviously you are only allowed to have one version of Internet Explorer on your browser at any given time. So, either install a virtual machine (much to techie for myself) or keep setup files for both IE6 and IE7 around, and just uninstall and reinstall (which is annoying, but it does the trick). Why must we go through such painful agony just to make sure our site looks good? Well, sadly, too many PC users don’t let Windows automatically update for them, leaving about 25% of IE users still with version 6. This is of course sensitive to the date of this post and will slowly decrease. Overall, in the past 6 months, I’ve found users of my company’s website go from about 18% IE6 users to 14%, which isn’t even statistically significant. Bottom line, test in both because they are vastly different!

3. Try out some of the free cross-browser compatibility testing tools out there. There are a lot of them, but most just want your money, and most aren’t very great if they are free. Short of shelling out some money, your best bet is probably browsershots.org. However, last I checked they limit you to one page (with every browser imaginable though). However, this requires you to have your site live when you test, whereas installing the browsers on your computer allows you to test offline.

4. Keep an eye out for common errors with specific browsers. The more you test, the better feel you’ll get for the flaws of different browsers. You’ll learn that the default margin on paragraph tags is different in IE than it is in other browsers. You’ll learn that min-height and min-width attributes do not function on IE6. As you come to figure out these flaws, you’ll be able to preempt them by writing clean and efficient CSS. This doesn’t completely eliminate the need to cross-browser test, but it certainly will make the process go a lot quicker.

When I was studying at CMU, I learned the mantra of usability research, “The user is not like me”. It is so true that it’s cliche, but it also applies to web design. You just can’t assume that your users see the same thing as what you see unless you go about finding out how they see it! Different browsers display code differently. Account for all your users or suffer the consequence and lose some of them to layout bugs…

Share this post

However, it does get a bit more complicated than that. There are two things you should consider, your target audience, and your future website. Based on the age and demographics of your target audience, the distribution of screen resolutions will change. Young and hip audience? Targeting upper class users? Assume that a larger percentage of your audience will be using larger screens. As for your website, you may have a dire need to shoot for a larger screen size because you need the space. Or perhaps you think you can sacrifice screen size because you really don’t have much content and you’d rather accommodate everyone. These are all things you should think about.

However, the bottom line is, around 30-40% of your users (again, as of December 6, 2008) are using 1024×768. Another 30-40% will be using 1280×800 or 1280×1024. Those are your two to pick from, but again, unless you want to inconvenience 30% of your users, 1024×768 is your sweet spot. You’ll have about 5% of your users still with a 800×600, but honestly, they need to upgrade. By the time a group drops to around 5%, it is worse to inconvenience 95% of your users to help the other 5%. Lastly, whatever is remaining in your percentage will be even larger resolutions.

Keep in mind that these things change over time. Within a few years, 1024×768 will be outdated, and we’ll be shooting for 1280×1024 or something else. Always track your users. I highly advise using Google Analytics. This tool allows you to gather information on everything to enhance your user experience. There will be another post on this topic in the next few weeks.

Now, another quick lesson. With 1024 as your target width, you actually need to be designing for about 990px. At least, that’s what I’ve always shot for. This is to take into account a scroll bar when your content goes below the fold. Also realize that 768px is a huge overestimate. After you factor in a windows bar, browser title bar, menu bar, URL bar, bookmark bar, and tab bar you’ve lost anywhere between 100 and 200 pixels. I’ll be writing another post on wrapper divs and sticky footers to help center your content regardless of screen resolution, as well as a post on sticky footers, which will keep your footer at the bottom of the screen unless content pushes it down further.

Thanks for reading, stay tuned!

Share this post