T&S Web Design

Here at T&S we recently started creating favicons for all our clients’ websites. What is a favicon? Well, visit any popular website and take a look at your browser’s tab, or up at the address bar. You’ll see a small 16×16 icon. Each browser has a default icon (Internet Explorer 7 has the IE logo), but if the site has specified their own favicon, it will appear instead. The favicon is also shown in the bookmark list in most browsers.

If you create a favicon for your site, a visitor will associate it with your site. It will create additional branding reinforcement.

There are several ways to go about creating a favicon. Just use your favorite graphics editing program to create a 16×16 icon. Make sure you view it a 100% to ensure that it’s easily identifiable. Then you can use one of the following methods for converting it into a favicon.ico file.

• Paint Shop Pro / PhotoShop plugin
• Online converter

Once your file is ready, just put it in the main (a.k.a. root) directory of your site. There you go! Your favicon should now automatically appear when anyone views or bookmarks your website.

For more info on favicons, check out Wikipedia’s page on the favicons.

Today I needed to use a bit of javascript to modify the contents of a web page. However, the section of the page I was changing was being updated with user entered content. I wanted the content on the page to show exactly what the user typed, meaning that I had to make sure that if the user entered any valid xhtml code it was encoded correctly. I searched around on google and found next to nothing on the topic, so I decided to create my own.

I used the php function “htmlspecialchars” as the basis for my function. I looked up the replacements that this functions uses. It turns out that only four characters need to be replaced to properly encode the contents: &, <, >, and “. Here is the function:

function htmlEncode(str) {
  return str.replace(/&/g, '&amp;').replace(/"/g, '&qout;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

The only thing I had to watch was that the ampersand character was encoded before the others, since it is used for encoding the others.

We’ve all heard it before: less is more. I couldn’t stress this enough when it comes to website color schemes. A common misconception is thinking every color on the wheel will enhance your site, but in reality, choosing a scheme and staying consistent is your number one goal.

Depending on the site I’m designing, I tend to stick with two to three colors at most. For example, if you look at Missi Bryant’s website in our portfolio (also pictured here), you’ll see that I chose yellow, pink and burgundy. I was able to use different shades of burgundy to enhance the depth and the brighter colors as accents. Once again, the bottom line always stands: simplicity.

If you own your own domain, you can set up any email address for that domain. If your name is John Doe and you own example.com, you can set up john@example.com, johndoe@example.com, contact@example.com, or anything you want, as long as it ends in your domain name.

If you’re like everyone else, you probably have some email address you’ve already been using for awhile. Two email addresses would just be a hassle. Fortunately, there are options.

1. You can take your new email address and just set it up so that all those emails forward to your preexisting address. The downside to this is that you’ll still be replying to emails from your old Yahoo, AOL or other email address, instead of the more professional looking address you just purchased.
2. Email everyone in your address book and let them know you’ve changed email addresses. Keep the old one open for a couple months and go through it every week or so to make sure you’re not missing anything. You may even be able to set it up forward to your new email address, though that depends on the company you were using.
3. Set up your email client (Outlook or whatever you use) to check both emails. The vast majority of email programs can be set up to check multiple email addresses.

I can’t emphasize how much more professional it is to use your email from your new domain for all business emails. Because of that, I recommend against option one, though I have had clients select that option.

To follow up on my previous post, I wanted to give you a taste of some cutting-edge business card designs, which will hopefully spark a few ideas for your personal cards. Whether or not the designs are feasible, it’s helpful to see the creative ideas out there!

Business Cards on Deviant Art

Business Cards on Stationary Style

Here are some random things that annoy me about websites. I’m not going to link to any specific examples, as that would be too mean. That, and I’ve probably been guilty of some of these in the past.

1. Too few graphics. The vast majority of websites need some graphics to break up the text. Although occasionally there are exceptions to this rule, they are far and few between.
2. Too many graphics. Don’t go too far the other way, either. Your website visitors won’t stick around if your site doesn’t load pretty quickly, and unnecessary graphics increase that load time.
3. The web designer is unwilling to change the site design just because a lot of time was spent on the first design. Just because you spent a lot of time on it doesn’t mean the design is great.Know when to make a clean break and redesign your site.
4. Not much contact info. I will say that some of my clients have specified that I leave off certain contact information of theirs. As a believer in approachability, I think that the more ways you can give someone to contact you (email, phone, address, etc.), the better.
5. Sites with good content but horrible design. This is like displaying the Mona Lisa in your friend’s basement. If you have something cool to show the world, then do a good job presenting it.

Make sure you don’t do any of these things. Or if you do, you’d better have a really good, well thought out reason.