T&S Web Design

Stock photography is an excellent resource to designers because we don’t always have the time or outlets to take our own pictures or hire a photographer. When I was just beginning as a designer and visiting these stock photography websites, I could not understand why royalty-free photos were not actually free of charge. I finally had to research the meaning and discovered that you still have to pay the price of the picture, but it’s only a one time fee.  After you pay, you are able to use the photo multiple times, hence free of royalties (although there are still restrictions for non-commercial use, etc.), as opposed to the “Rights-Managed Licensed” photos where you are basically paying the person who took it and you pay every time you use the picture. The Rights Managed photos do allow for a much larger print though.

At the moment, I have a membership with iStockphoto which gives a relatively good selection of royalty-free photos, vector illustrations, and royalty-free videos for a reasonable price. A low-resolution image for websites costs $1-$3, as opposed to a royalty-free image on Jupiterimages.com, close to the same size, can cost about $100. It just depends on the quality and selection of photos you need.

www.jupiterimages.com is a good source for more professional-looking photos with an enormous selection

www.istockphoto.com is a better source for cheaper photos with a decent selection.

We have clients use all sorts of web hosts, including us, for their websites. But we always recommend they stay away from GoDaddy for hosting, though they’re great for domain names.

I just ran across this article about someone’s nightmare dealing with GoDaddy, and it just reinforces what I already thought.

• Why I Don’t Owe GoDaddy $6,579.51 (or $969)

Sometimes websites look awful. You’ve probably looked at a website and thought the colors were a poor choice. Or maybe you have worked with a web designer and the colors on your site didn’t turn out exactly like you wanted. While it may or may not be the designer’s fault, things are not entirely in his or her control.

Inexpensive monitors (the ones most consumers purchase) each come off the assembly line with slight differences in color. And even after that, the color on those monitors will drift over time. On most monitors, the drift is so small and the life of the monitor short enough, that it just doesn’t matter in day to day use. But when you’re approving designs for your business, that small difference will seem bigger to you.

So there are slight variations just from monitor to monitor, and that’s an unavoidable fact. While your designer can (and should) calibrate their monitors, that won’t let them see exactly what it looks like on your monitor, or anyone else’s, for that matter. All calibration does is give them a good average of what the site will look like on most monitors.

If you are about to embark on some web design work on your computer, or if you’d just like better color, there is an affordable option. While monitor calibrators used to be much more expensive, you can get one like the Spyder 2 Express or the Pantone Huey MEU101 for between $50 and $100. Although I’m not a graphic designer myself, I do use the Spyder 2 Express and calibrate my monitor on a fairly regular basis.

Another, less expensive option, is to simply check your website on a few friends’ computers. Or, failing that, email them a link and ask them if they could check themselves. Get some feedback on the website color. Your monitor may be way off, or it could be that you were absolutely right, and the color is horrible.

Either way, don’t judge your website by its appearance on a single monitor.

A great way to shortcut some ideas or at least get a design started, is by looking at some custom photoshop brushes. There are thousands, if not more of bushes out there customized in tons of ways. For instance, I found two amazing brush sets from Smashing Magazine that are freebies. Check them out:

These brushes also can be handy in that they can can be scaled as large as needed, and can be edited in illustrator and re exported as your own customized brush. Brushes can help add the fine details to your design that you may not have time to create from scratch. They are excellent tools that in my opinion should not be overlooked.

There are basically two ways to get listed in search engines. You can pay to be listed (sort of, I’ll explain in a bit), or you can optimize your website to appear higher in the listings.

One good analogy to explain the difference is to look at the websites like books in a bookstore.

Paid Listings

With the modern search engines, you can have a paid listing, though you’re technically don’t pay to be listed. Instead of paying every time your ad is shown, you only pay every time your ad is clicked on. This system is referred to as pay per click, or PPC. This does not involve ranking, but involves bidding on keywords and key phrases.

The image to the right shows some paid advertisements highlighted. You can see that they’re in a different position than the “normal” search engine listings.

This option is similar to a publisher paying a bookstore to have a display up front. In our hypothetical situation, a publisher could arrange with a bookstore for the store to be paid every time a book is sold, but not pay for the display itself.

Optimizing Your Website

The “natural” way to get your website listed in search engines is to just have good content that gets picked up for specific words and phrases. Maybe you set out with those specific phrases in mind and write your content with the goal of being listed for those phrases. That’s what we refer to as optimizing your website, though there’s a bit more to it than that. This is the option that involves search engine rankings.

You can see in the image to the left that the natural listings are highlighted. These make up the majority of the search results pages.

This option is similar to a book being written to be appealing to readers, and hitting the best seller list. It’s a self-feeding cycle. The more people that read it, the more people hear about it and want to read it. So they buy it and read it, and the cycle continues when they tell their friends.

Which Is Better?

Unfortunately, there’s no easy answer. However, you can do some optimizing yourself without spending a lot of money, simply by blogging. There are a couple of guidelines to keep in mind, though.

1. The blog must be installed on your website. For a blog to significantly help your search engine rankings, you can’t just link to a free blog on Blogger or Wordpress. However, Wordpress and others like it can be installed on your server. This means the search engines will see that your website is updated every time you blog, which helps your ranking. And that leads us to…
2. You must blog frequently. The whole point is that it’s much easier to update your website often. So both for your readers and the search engines, you should blog on at least a weekly basis. It’s even better if you blog a couple times a week.

If you have the budget and it’s really important to you, you should probably try both of them. However, you should track which of the two produced more (and better) traffic, and then shift your spending so you spend more money there.

There is a way to get elements in IE6 to have a min-height and a min-width. However, both require hacks that isolate IE6 from other browsers. We’ll start with the easy one.

Min-height can be achieved in IE6 by using a conditional HTML comment and the height CSS property. It turns out that Microsoft decided that the height CSS property in IE6 and below should actually be the minimum height. We can put this inside a style tag in the HTML comment after the initial CSS. This way all other browsers will not see the CSS.

<style type="text/css">
  .minheightclass { min-height: 100px; }
</style>
<!--[if lte IE 6]>
<style type="text/css">
  .minheightclass { height: 100px; }
</style>
<![endif]-->

Make sure that the element with the min-height does not have overflow: auto. It will not work in that case. You will need to override the overflow in the IE6 conditional comment in order for it to work.

Min-width in IE6 is a little bit trickier and it requires javascript to be enabled. We will still use the conditional HTML comment, but we will have to add a Microsoft proprietary CSS expression. A CSS expression allows some javascript code to dynamically determine the value of a CSS property. We will apply the expression to the width property.

<style type="text/css">
  .minwidthclass { min-width: 350px; }
</style>
<!--[if lte IE 6]>
<style type="text/css">
  .minwidthclass { width: expression(this.clientWidth > 350 ? "100%" : "350px"); }
</style>
<![endif]-->

Be careful when using this hack as it can cause the browser to lock up if you get the values wrong.

In taking a further look at Fireworks CS4 beta, I have come across some compatibility issues between the previous version and this one. Hopefully this issue will get sorted out as development continues with Fireworks CS4.

Recently I was designing a final version of a web site, all pages and content included. Upon reopening the design in CS3, I found that all of the text had strangely changed values. The kerning, spacing and point size of the text that changed by fractions of a value, and even the type itself was altered. Any word above about 8 characters got shortened. Furthermore, I had some lines of text that had two different colors in the same text box, and they were changed to the first color. Finally, I had used Arial font in the CS4 version of the final, and upon reopening the file, CS3 thought Arial (somehow replaced by Arial MT) need to be replaced, so I replaced it with Arial (considering that I did not have the choice and never had had the choice of selecting Arial MT). So in a nutshell I was forced to replace Arial with Arial, which may have caused the problems listed above.

So obviously CS4 is not yet compatible with previous versions of Fireworks, and CS4 really should only be used for testing until the actual release.

As I’ve mentioned before, we check our websites in six different browser / operating system combinations. Just the other day, my programmer asked me if we could stop checking in one of Opera. For Internet Explorer 6.0, there’s even an IE Death March website dedicated to telling others they should stop checking their websites in that browser.

To make things even more confusing, Wikipedia’s page of browser comparisons lists a whopping thirty-five current web browsers. Which ones should you check your website on?

Although we do take into account usage, as I mentioned before, we also take into account how easy it is to code for that browser. It’s a balance between the two. There are currently seven different programs on the browser usage list at w3schools.com. We check five of those seven. I’m going to talk about a three that are outliers in either usage, ease of coding, or both.

Internet Explorer 6.0

IE6 is a pain to code for. Thus the previously mentioned IE Death March website. However, it still has a significant market share, somewhere around 25% of the web surfers out there. Although it frequently frustrates our programmer (and many other programmers around the world), we continue to make sure our websites work in IE6, because we don’t want 1/4 of the website’s visitors to get less than the full intended effect of the website.

Internet Explorer 5.0

If you can imagine that IE6 is hard to code for, just imagine how much harder IE5 is. Combine that with the fact that it has less than a 0.5% market share makes it obvious why we don’t bother checking our sites in IE5.

Opera

Opera has a relatively small market share at 1.9%. However, it is fairly “standards compliant.” Simply, this means that once you code for other browsers that comply well with the web standards, (Firefox and Safari in our case), 99% of the time the website works correctly in Opera as well. So the low cost in terms of time means that we still check in Opera, despite its low market share.

Hopefully this gives you some indication why we check in the browsers we check in.

One of the most difficult and annoying things to set up in a small business is email. There are so many different options that it can be frustrating to even attempt to configure email. What’s the difference between IMAP and POP3 anyways? I’ve seen people just type in their email address and it works. Why doesn’t mine work like that? I will attempt to answer some of those questions in this post.

There are three main email retrieval protocols in use:

• Exchange - This is a proprietary mail protocol used by Microsoft to receive email from an Exchange Server. Support for this protocol is heavily integrated into Outlook. It is the easiest to set up. Simply enter your email address and password and Outlook takes care of almost everything else for you. In addition to easy set up, the Exchange protocol allows an Outlook client to be connected constantly to the Exchange Server, so any email received by the server when almost instantly be sent to the user. This means that you will know you have an email the instant it has been received.
• IMAP - IMAP stands for “Internet Message Access Protocol.” It is very similar to the Exchange protocol, with the exception of the set up. It, like the Exchange protocol, allows messages to be retrieved the instant they are received, but it is harder to set up. In addition to email and password, you will need to know the mail server, your username to connect to the server, and whether or not the server uses SSL.
• POP3 - POP3 stands for “Post Office Protocol version 3.” It is very different from the other two. It requires just as much information to set up as IMAP, but it does not maintain an active connection to the server. Meaning that it only checks every few minutes to see if any new mail has been received. Another limitation of POP3 is that it doesn’t allow messages to be marked as read on the server. Meaning that if you check your email with an email client on one computer, read, and delete some email messages and then you check it using a different computer, you will have to go through the same messages you went through before. This is extremely annoying, even more so the more computers you check the email with. The one advantage to this is that every computer will always have every email you received.

The one problem with IMAP is that it every email that you delete is deleted from the server. Most people want to have one copy of every email they have received for reference. The problem is that many mailboxes limit the size of the mailbox so that once it is full they can no longer receive new messages (POP3 doesn’t have to worry about this, since most email clients are set to remove the message from the server after a few days). To get around this we need to have a way to move old email off the server and into a different folder. This can be done in almost every email client using offline folders. I will show you how to do it in Apple Mail.

The first thing you will need to do is create a folder to store the old messages. Click Mailbox -> New Mailbox… and add the mailbox to On My Mac. Once the mailbox has been added, create a rule (Preferences -> Rules -> Add Rule) that will move old mail into it when it was received or sent a certain number of days ago. Under “Perform the following actions” select that you want to move the message to your new folder.

This archiving method allows you to get all the advantages that come with IMAP (not having to delete every junk email from your work computer, home computer, and iPhone, individually) along with the advantages of POP3 (being able to keep all your email messages in case you need to reference them later). It also keeps the number of emails in your inbox way down, depending on how many days you choose to wait before archiving your messages.

A lot of sweat and tears are poured into our (the designers’) work, mostly because we are forced to pick up the slack from our boss and programmer, who tend to be the laziest of all…just kidding. Granted, there are some websites that aren’t our favorite of the bunch, but I found two that easily stand out and show the potential of T&S as a whole.

My second favorite site is actually one that I designed for Daisy Exchange www.daisyexchange.com. Of all my website designs, I lean towards this one because the majority of the elements are custom designed, as opposed to buying stock images, etc. I personally like the movement with the variety of colors and design elements along with the spunky atmosphere.

And now for number one choice (drum roll) and that many would agree: our top site is Devin Derrick www.devinderrick.com, by our other designer Dave. If everyone could compare the first set of revisions to the current site, you would see the dramatic difference in changes that Dave accomplished. He spent a great deal of time learning new tips and tricks to make this site possible (and I suppose Nick, the programmer, should also be recognized for allowing the site to actually function). Overall, the site looks amazing and extremely professional, props to Dave.