Bloggerrific

It is time for the web design community to take a stand and stop supporting Microsoft Internet Explorer 6! That’s right, I said it, as many have said before me, and yet somehow, most web designers still cross-browser test in IE6. Well, guess what, I’ve stopped. Okay, not completely. With my freelance clients, I will probably still check IE6, because truthfully, many of my clients themselves still run IE6. However, at my fulltime job as the web designer for College Prowler we have officially stopped supporting IE6! So why did I push for this, and how are we handling it?

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…

When making a website, it is very important to consider branding. If you want the website to be memorable and recognizable to it’s visitors, there needs to be a level of consistency and impact across the whole site. To do this, I have a few suggestions to follow below:

1. Logo and Favicon: Designing a logo can be very difficult, but it is incredibly important. The logo will serve as a reminder to your user, wherever in your site they may be, that they are on YOUR site. Any print materials that reference the website should also have that logo to help your users with that association. If you are designing a logo yourself, try doing it in black and white first, then add color, because it should be able to stand on it’s own without color. Keep it simple too. Some of the most recognizable logos (like IBM or Apple) couldn’t get any simpler. Once you’ve done that, don’t forget to create a favicon! The favicon is that tiny 16×16 pixel icon that shows up in your favorites/bookmarks list, browser tabs, and sometimes the URL textbox too. To turn any square icon into a favicon, use this favicon generator. Then, include the following in your head:

<link rel="shortcut icon" href="images/favicon.ico">

2. Color Scheme: Picking a color scheme is really important for your branding. You want to select a small set of colors that remain consistent across your website, logo, and any print materials that are related to the website. I’d suggest first selecting a single color and then if it is easier for you, you can use color scheme generators that are available for free online. There are tons out there, but I’ve found a few for you here: Color Scheme Designer, Color Schemer, or Color Toy.

3. WWW Redirect: This phrase refers to how your website appears whenever you market it off the website, as well as the actual URL you actively use to point to your website. Any website can be written as both http://www.yourdomain.com OR http://yourdomain.com. Any user can type either one, and you’ll end up at the same place. However, it is important to select one and stick with it for two reasons. One, as I’ve mentioned in a previous post about SEO, I explained that search engines can actually see those two different URLs as two different websites, which reduces your traffic, which reduces your search results. Two, selecting one of these will help your users remember the site, and reduce any confusion with the less computer literate. FYI, here’s how you force your website to use the www version or the non-www version:

Insert the following into your .htaccess file:

The WWW Version (http://www.yourdomain.com):

Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^yourdomain.com [NC]
RewriteRule ^(.*)$ http://www.yourdomain.com/$1 [L,R=301]

The Non-WWW Version (http://yourdomain.com

Options +FollowSymLinks
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.yourdomain\.com$ [NC]
RewriteRule ^(.*)$ http://yourdomain.com/$1 [R=301,L]

In both cases, remember to replace "yourdomain" with your actual domain name.

Well, that’s all for now. Good luck!

Finding clients, especially when you are new to the web design business, can be both incredibly easy and difficult. It is easy because there are actually a lot of people out there in need of web design services. Small businesses are leaving the yellow pages en masse for the web, and most of them aren’t very web savvy. However, because most of them aren’t web savvy, they can be incredibly difficult to work with. So really, the better question is, how do you find good web design clients.

First let’s figure out some places you can look for any web design clients at all, and then we’ll tackle weeding out the bad ones.

• Craigslist: That’s right, depending on the city you are in, you’ll probably see several posts a day related to web design and graphic design. The other good thing is that you don’t even have to limit yourself by city if you are alright working remotely. The only warning I give for that is that not being able to meet clients in person can cause some issues.
• Guru.com: Guru, whose office happens to be right next to my employer, College Prowler, is an online marketplace for freelancers and employers. I personally have never used it, and it does have a few fees mixed in there, but if you are looking to do contract work for the majority if your income, you’ll need all the help you can get, and this one is definitely worth it. There are other sites out there like this one too, just look around a bit.
• An Online Portfolio: Make sure you have examples of your own work available to people. Then advertise this by passing out business cards, purchasing online advertising spots, or linking to it from sites you’ve already worked on. Just having something ready to go shows potential clients that you are viable, and will encourage them to reach out to you instead of you reaching out to them.
• Business Cards: Making as many connections as you can is always a great idea. The more clients you meet, the more people in the web business you deal with, the better. So go mingle, and pass out a nice business card to everyone you can. They might pass it on to someone they know. A majority of my clients have come through word of mouth and other connections I have, as compared to searching myself on websites like Craigslist and Guru.

But that is really only half the problem. You’ve really got to be able to weed out the bad clients, the ones that will be a pain to work with. Trust me on this one, for every good client you find, you’ll run into two or three bad ones. So now just a few suggestions to clean out the grime.

• If your client tries to swindle you down to a pay rate way below your average, or is incredibly surprised at “how high” you charge for your services, then keep in mind they don’t seem to value your work enough. Web designers can charge anywhere between $30 and $100 an hour in my experience. If they think that $30 is absurdly high, make it clear to them that is isn’t, and if they don’t understand, then drop them!
• Make sure they have an idea of what they actually want. When clients don’t know what they want, then it’ll be very difficult to produce anything they like (at which point they blame you). Then let’s pretend you magically figure out what they want, they are just as liable to change it up on you and request alterations all the time. Either don’t sign with this client, or if you do, make sure you are charging an hourly rate instead of a flat rate, so you get paid for your iterations.
• Often times, small business owners are looking to get on the web, but they have little expertise with computers or the web at all. This will make communication difficult, and you’ll often find them nitpicking over minute details that in reality are not important. You probably won’t get screwed over here, it’ll just be a huge hassle.
• If a potential client doesn’t email you back for 5 days, then that means they are probably disorganized or bad at communicating. Either way, this could be quite dangerous. Set up a strict communication schedule, or ensure that if anything falls to the wayside, that they’ll recognize when it is their fault.

Those are just a few suggestions for weeding out the bad clients, so you can keep the good ones around. Got any other questions? Let me know, and maybe I’ll have a few suggestions for ya!

If you are making a website, you absolutely need to test it across browsers. This need increases even more when you use CSS heavily for your layout and other styling. Why you ask? Well, different browsers read CSS differently. In particular, Internet Explorer (IE) is awful because Microsoft doesn’t feel the need to ascribe to web standards. So here are some suggestions to get your started with your cross-browser testing:

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…

So I’m not going to pretend that I’m an expert at freelancing, because I’m certainly not. However, I do have some experience, and I think after your first few times doing freelance work, you learn a whole lot. So I figured I’d offer up some advice to those of you who may be getting into the freelance web design or graphic design business.

1. The most important thing you can do for a freelance job is write a contract! A simple one page contract can go a long way in encouraging both you and your client to abide by specified timelines, payment dates, etc. In all likelihood you’ll never even need to threaten your client with breach of contract, but it is nice just to have the comfort. You should write you contract in a way that indicates a timeline for the project. This will encourage you to keep on top of your work, as well as make sure your client provides any materials that you need in a timely manner. It also makes sure you can’t get screwed over if they “aren’t happy” in the end (you’d be surprised how much people will try to reduce the price after you’ve already agreed on something). Clients also have the tendency to ask for something, agree on a price, and then ask for more without wanting to pay more. For these reasons specifically, ALWAYS get a contract written up and signed before you begin any work. (For sample contracts, check this out (make sure to edit this to apply to YOUR situation!), or if you’d like, shoot me an email and I can give you some advice).

2. Make sure your client is aware of their responsibilities (because even though you are the freelancer, they almost always need to provide you with something). The best way of doing this is to include deadlines for the client as well as yourself in the contract. These deadlines are often dates that you need content by to finish the website, or logo materials to work on the designs. Timeliness of your client’s deliverables will affect the timeliness of yours.

3. Ask your client for a list of websites that they like, with details of why they like them. Getting this information will help you understand the design aesthetic that your client appreciates, and give you an idea of how they might want their users to work through their website. It might also be helpful to sit down with them as they discuss this, and even ask them to visit their competitor’s websites if you are working with a business.

4. Make mock-ups before you start coding anything. When presenting mock-ups to your clients make sure to do four things. First, always make multiple options. Presenting one looks cocky and stingy. When you present multiple designs, ask for critiques (both positive and negative) on all of the design possibilities, but have them pick one. Then incorporate those critiques into the final design. Second, present your mock-ups in PDF format. PDFs are by far the most professional way to send documents. Sending Photoshop or Illustrator files is unprofessional, and they can rarely be opened by clients. Sending jpegs/gifs is lame because then your client is opening up your design in random programs. Keep it consistent with PDFs. Third, use “lorem ipsum” dummy text. It fills the page realistically without requiring actual content from your client or you. It isn’t worth wasting your time coming up with realistic content, just make it look good while you are working on the mock-ups. Fourth, it helps to present your mock-ups in a browser window skin. This will help your client imagine what the website will really look like live to their users. Looking at the design outside of a skin is like looking at a photograph outside of a frame. Sure there is information there, and sure it might look good, but it sends a much different message in the frame.

5. Figure out ahead of time how your client will be updating their content. There are many possibilities including you updating your client’s content, the client using a content management system, or if the client using Dreamweaver or plain markup after you tutor them. These three options will most likely impact how your code the website.

6. Find out what other things you can do for your client on top of their website! There is no better place for more business than the people you already do business with. Many clients just getting into the web also need help with other graphic design needs (such as logos, letter heads, business cards, etc.) or will want you to do updates on their site, or SEO work for their site. This extra work leads to extra cash. Just make sure to include it all in the contract from the start.

7. Get a feel for your client’s expected website users. If you have a good feel for the people that will be using the website you design and/or create, then you’ll be able to do an infinitely better job at creating the website.

Got any other questions? Let me know!