Archive for July, 2009

Branding A Website

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!

CSS – IE6 Bugs and Hacks: Part Deux

IE6, has for quite some time, been the bane of my existence. It has a deluge of bugs, but it also has some easy fixes for it. Below I have a small list of some of those bugs which don’t have easy and simple solutions but that you should still be aware of.

1. PNG transparency fix link bug:
In my last IE6 bugs and hacks post, I wrote about the common PNG transparency issue. The common javascript fix that is used for this actually causes a problem if you use png images inside of a link. I use this a lot for custom-made rollover buttons (which I implement using a great CSS trick). If a PNG image with transparency is placed inside of an <a> tag with the javascript fix enabled, then IE6 won’t recognize it as a link. Luckily, this actually has a fix! Simply add a "position: relative;" to the image CSS definition and you are good to go!

2. Absence of min-height/min-width:
IE6 does not understand min-height or min-width style definitions for objects. These definitions are often very helpful with dynamic content. There is sadly no fix for this problem. Luckily, this usually won’t cause big problems with your layout. The best you can do is try to avoid the need to use these definitions and you should be fine.

3. :hover only works on a tags with an href
Unfortunately, IE6 decided that the pseudo-class :hover wasn’t useful enough for anything other than links. Obviously, that isn’t always the case. You may want to use it for divs, spans, paragraphs, or any number of other objects. There is no fix for this problem, you’ll just have to live with your hover not working in IE6 and below.

4. Divs won’t maintain a small defined height

This is a really strange one. It seems that if you define a div with a height of anywhere below about 10 pixels, IE6 will force it to 10px (or whatever it magically seems to have selected). This is most likely because it is making room for overflow. There are three fixes that I’ve heard of:

  • Apply a “font-size: 0px;” to the div (which can be a problem if you have copy in the div).
  • Apply a “line-height: 0px;” to the div (which can also be a problem for the same reason above).
  • Apply a “overflow: hidden;” to the div which should remove the overflow problem.

Now that all of that is over, Internet Explorer 8 has just been released post Beta. This couldn’t be more frustrating for me seeing as right now there are 3 active version of IE out there. Last time I checked IE has about 50% of the browser market, and within that, IE6 had about 20%, IE7 about 70%, and IE8 the remaining 10%. Slowly this will all shift, but it’ll be at least another year before I’d even consider not testing in IE6 anymore. Sadly that means for at least a year I’ll be testing three frickin versions of Internet Explorer. FRICK! Good luck to you all :).