Archive for the ‘Web and Graphic Design’ Category

« Older Entries
Newer Entries »

GIF, JPEG, and PNG: What’s The Difference?

Wednesday, January 19th, 2011

Not a graphic designer? No problem! You can still easily master when to use different types of images for different purposes just by understanding some of their individual benefits! So find out below what each image type is good for:

GIF: Graphics Interchange Format
Images with a .gif extension are commonly used for the web because they compress quite well. They function by allowing you to restrict the number of colors that make up the image, with a maximum of 256 allowed. GIF images also allow for layering, which is commonly used to create moving images that you may often see in the form of internet ads or moving smiley faces. GIF images also allow for transparency so that items can be seen that appear beneath them.

JPEG: Joint Photographic Experts Group
Images ending in a .jpg or .jpeg extension are the most versatile images around. They have different levels of compression and are compatible with both RBG and CMYK color formats, making them suitable for both web and print. They have no color limitations, which can make their file sizes much larger than GIFs.

PNG: Portable Network Graphics
Images ending in .png only allow the RGB color format, meaning they are not suitable for print. Their biggest benefit is fantastic transparency capabilities that GIF images can’t match. They also tend to have a large file sizes because their compression isn’t always as successful as that of GIFs or JPEGs.

To help you decide what format to use for your images, try out this table:

Image Description GIF JPEG PNG
Black & White Photo X
Full Color Photo X
Black & White image for print X X
Color image for print X
Small Icon X
Image w/ just text X X
Moving image X
Image w/ complex transparency
i.e. curved lines or drop shadows		 X
Image w/ simple transparency
i.e. straight lines		 X

If you have any specific questions or examples you’d like to ask about, don’t hesitate to ask!

Tags: , ,
Posted in Web and Graphic Design | No Comments »

Take a Stand: No More IE6!

Tuesday, October 27th, 2009

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…

Tags: , , , ,
Posted in Browser Compatibility, User Experience, Web and Graphic Design | No Comments »

Branding A Website

Wednesday, July 29th, 2009

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!

Tags: , ,
Posted in Web and Graphic Design | No Comments »

Finding Web Design Clients

Wednesday, March 18th, 2009

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!

Tags: ,
Posted in Web and Graphic Design | No Comments »

Cross Browser Testing

Wednesday, February 11th, 2009

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…

Tags: , ,
Posted in Browser Compatibility, User Experience | No Comments »

« Older Entries
Newer Entries »