5:30 Design Tip

Well, from writing that is. You may have noticed. A little over a week had gone by before my post yesterday. Why do I bring this up in a blog about tips on how to write your own Web site? To point out that it is going to happen. It happens to everyone: you, me and everyone else.

When you are working on anything there are always other circumstances. Things happen to make it so you run out of time to work on your site.

What happens when you take a week off from writing your site? When you pick it back up do you remember where you left off and what you were going to do next? If the answer is no then you may not have your site documented well enough.

You should always start out with a sketch of what you want your site to look like. This can be as complex as a picture done in Photoshop or it can be as simple as a piece of paper and crayons. For those of you writing a site to post pictures of the grandkids for their grandparents, the crayons may be easier to find. With a sketch you will always have a picture to look back on to remind you what your goal is.

Then the next three steps:
1. comment
2. comment
3. comment

A comment in HTML is simple. You start with:

&lt!–

then you put the information you want to remember and then end with

–>

Your actual comment might look something like:
<!– my new picture goes here –>

That way, when you need to take a week off for whatever reason, you remember what you were doing and can jump right back into creating your home on the Web.

Angie

In I.E. you will notice that sometimes it acts funny.

For instance if you use this code:

<div style="border-top: solid think black; border-bottom: solid thin black>
<img src="mypic.jpg">
</div>

in Firefox or almost any other browser you will notice that you get two very nice borders that go across the top and the bottom of the image.

However, if you look at the same code in I.E. you get extra whitespace at the bottom of the picture before the border!

This is a rather annoying problem because it will make cohesive layouts not look right. There used to be a documented bug in I.E. that somewhat related to this and you had to utilize a precise DOCTYPE to get it to go away.

That, however, is not the cause of what is happening now. In order to make the extra whitespace disappear in I.E. you must write the code like this:

<div style="border-top: solid think black; border-bottom: solid thin black>
<img src="mypic.jpg"></div>

Notice how the closing div tag is right next to the image tag. I have never seen this extra white space written up as a bug in I.E. but I would call it such. My understanding of the standards is that white space within the HTML text is to be mostly ignored with the exception of the actual space character. Otherwise a new line would not need a <br> at the end, a simple newline within the HTML would do it.

I say bug, they say interpretation differences. Either way, the above code gets rid of the annoying extra line.

Angie

Yesterday we discussed that there are 216 Web safe colors. Did you know that one of the most popular images types on the web, the GIF file, only allows 256 colors. You may have noticed this is you ever tried to save a GIF file and you noticed that it started to dither. Interestingly enough, there is not a finite set of 256 colors that a GIF can use. You can use up to 256 colors but that is the only limitation.

The files size of a GIF file can be smaller than the other main image format used on the Web, the JPG. But, for complex graphics, using a JPG is better. The intricate gradients used in many photos, for example, take far more than the 256 colors allowed in a GIF file.

The main thing to remember here is that a GIF file is limited. This can be very useful for file sizes but can also make designing graphics more challenging. When using the GIF format, always save the file and look at it in a Web browser before publishing it to ensure that it looks OK. Some issues will not show up in your graphics editor.

Angie

Did you know that there is such a thing as Web safe colors? Most Web designers know this little known fact but not many share it.

With monitors as powerful as they are today one might ask themselves why there are Web safe colors. Back in the Stone Age (OK, maybe not that far back) it was not uncommon for a monitor to only be able to display 216 colors. Therefore, Netscape developed a palette of 216 colors that their browser would display which corresponded to the 216 colors a monitor would always be able to display. Because Netscape was the leading Web browser at the time, Web designers had no choice but to follow Netscape’s list of 216 colors. Otherwise, Netscape would replace the color you chose with the closest matching one in the palette and some sites looked really funny because of this.

While it is not still the case that you can only use these 216 colors in your Web site many high end design firms will attempt to stick with them. This is so that your colors look the same on each computer. For many businesses (the target market for the high end design firms) consistency is the key. In fact, a Fortune 500 company I previously worked with had a list of “approved Web colors” for their designers that were tested on different computers and browsers to ensure their consistency. Not surprisingly, each of these colors could be found in the 216 Web safe colors.

From an aesthetics perspective these colors can also compliment each other very well.

By this time you are probably wondering where you can find a list of these 216 Web safe colors. There is a fantastic Web site at http://www.visibone.com/colorlab/ which actually goes a step further than just listing the colors. Using their color picker you can see how the colors look next to each other and find which ones best fit your site and which ones compliment each other the best.

VisiBone in a highly respected company in the Web design field. I have heard several designers say that their most treasured possession for their job is the VisiBone 216 Color Palette and now you can look at it right online.

Happy color picking! And tomorrow, the 256 colors of the GIF palette and why they can be more friendly (or less depending on the objective) than JPG files.

During my time off I have been thinking about what other tips I can give you and there are a lot. I have been working with a group who is designing their own site and have been answering a lot of questions for them. It is an eye opening experience to see what questions have come up. I do have to say that so far, they are doing most things right. The biggest issue that they had was when they realized that their pages looked different between different browsers. That is when I was called in. I was very impressed by the fact that they remembered to test in each of the different browsers.

It can be difficult to get your pages to look about the same in the different browsers but it can be done.

More tips will be coming soon!

Angie