IE7 Web Design Issue: Centering

November 11, 2006 | 2 Comments

I’ve run into two problems that were fine in IE6, in Firefox and Opera, but that display poorly in IE7.

First, the <center> tag.

Yes, it has been deprecated for a while in favor of a <div align=”center”>. And, then, current recommendations call for creating a enclosing <div>and applying margin:auto or margin-right:auto; margin-left:auto.

But, this gets rather hairy very quickly.

With IE6, the easiest way to center a page was to use a <center /> tags. Firefox and Opera went along quietly and all was well, until IE7 came along.

Internet Explorer 7 doesn’t like <center> tags, at least with the combinations of DIVs I was using on my www.TerrysComputerTips.com site.

Although my pages are fixed now (by removing the <center> and </center> tags), IE7 initially took this same beautifully centered page — and right-aligned the DIV at a page width of about 1400 pixels.

Where it got that number, I don’t know. Idenfifying the problem was easy.

Identifying the solution wasn’t — who would have thought that removing the <center> and </center> tags would make the page center properly?

I’m not sure how I found it, other than shooting at the problem with a “what affects the whole page…that I can change” approach. But, that was it.

It’s time to lose the <center> tag.


Host Unlimited Domains on 1 Account

Improving Website Usability, Revisited

November 9, 2006 | Leave a Comment

No matter how gorgeous your website design might be, if your visitors have difficulty finding your content, then you will lose those visitors quickly.

Here are some usability tips to improve the design of your website to ensure it serves its functions optimally:

First, check the fonts and typography of your content

If you have large blocks of text, make sure to use CSS to space out the lines accordingly. The longer a single line of text is, the greater the line-height of each line should be.

Make sure the fonts are clean, clear and readable. If the fonts are cute and hard to read, your site visitors will go elsewhere — it’s that simple.

Second, break large paragraphs into smaller paragraphs.

Visitors will skim over your content. If you’ve got long paragraphs, they will often miss your message!

You will often find that breaking the paragraphs into smaller pieces not only makes them more readable, but allows you to focus more effectively on the key words and key thoughts that you want to communicate.

Of course, that also means that your articles should end up more meaningful to the readers and the search engines, too. Instant SEO via short paragraphs…

Your grammar teacher would not like the thought. On the other hand, examine the articles in your favorite newsletter, magazine or news web site.

In the world of today, short, sentence-length paragraphs are the medium of effective communication.

Third, make sure the font size of your text is big enough to read easily

Some sites have 10-pixel-tall text in Verdana font. While that may look neat and tidy, you have to really strain your eyes to read the actual text.

On the other hand, usability studies have shown that visitors actually read smaller fonts more carefully, while they will skim over large fonts to see if there is any “good” content.

Fourth, make it easy for visitors to find content that they want on your site

You may have dozens, hundreds or thousands of articles on your site. If a certain visitor wants to find one single article from that pile, you have to provide a feasible means to enable visitors to do that without hassle.

Whether you use an article index, a menu-driven system, a Google search of your site, or even an SQL-driven database search engine, you need to provide your visitors the ability to locate the content they desire.

Fifth, make sure that your site loads quickly.

Most internet users will leave a website if it doesn’t load completely within 15 seconds, so make sure your information is delivered to the visitors as soon as possible.

Be sure to resize images in your graphics program, not just by setting width and height variables for display of the images. If you resize the images and optimize their quality for the display size, you can dramatically reduce their file size.

Last of all, test each and every link on your site before it goes online

When you add pages or content, check the links. Then, load the pages and check them again — you may find that you were linking to images or files on your hard drive and not on your site!

There is little that creates a worse impression in a potential customer than to find broken links when she is looking for information.

Recommended Resource: Don’t Make Me Think

Technorati Tags: , , ,

Reflecting Images on Your Web Site

October 31, 2006 | Leave a Comment

I found a neat web script that was released via the CorePHP blog recently.
With the Easy PHP Reflections v1.0 script, we can make our web images have matching reflections below the image.

Sure, we can pull an image into our favorite graphics editor and create the reflection, but this utility does it for us.

One call to load the image, and another to load the image again via the reflect.php script. Of course, there are a bunch of parameters we can set, too, to make the reflection blend into our web pages. How cool can it get?

The reflect.php script requires PHP 4.3.2+ and the GD library, both of which are available to me at my webhost of choice — Powweb.

Email Address on the Web?

October 30, 2006 | 2 Comments

Do you post your email address on your web site?

Almost all of us do — we almost have to do this — but that makes it easily harvestible by spammers’ spiders.

There are some tricks you can use to make your email address available to visitors but not for the robot spiders…

First, you can use one of several JavaScript encryption systems. These are designed to have your encrypted email address within the JavaScript, but to use the visitor’s web browser to decode and display the address.

This works fine when the user has JavaScript turned on… but doesn’t work at all if she has turned off JavaScript (ActiveScript in Internet Explorer) for security reasons.

The second method is the one that I normally use — it’s called Spam-me-not. Although the web page says that it uses JavaScript, it really doesn’. It simply encodes the individual characters of the email address into mixed decimal and hexadecimal HTML character codes.

For example, the character “t” can be coded as “t” or as “t” or as a “t” — and the web browser will understand, decode and display a “t” character.

Fortunately, for now, the spiders aren’t that smart…

The New Chitika ShopCloud$ Ad System

October 28, 2006 | 1 Comment

Chitika has a new advertising product for web site publishers to use. I just found out about it recently and wanted to become a beta tester — but, even better, it’s been released to eMiniMalls publishers for use on their sites. It’s called ShopCloud$, and it is a neat, new interactive tool for Chitika affiliate advertisers.

ShopCloud$ is an advertising system based on keyword “tags.” When a visitor clicks on a keyword, they are taken to a related set of merchant listings.

This is what a ShopCloud$ looks like:

It’s easy to pick from the many pre-defined sets of keywords. Want keywords that are PC Notebook related, pick the Category Hint “PC Laptops.” In addition to the predefined sets for specific categories of words,there’s another called “Seasonal Specials” for popular items.

Of course, we also have plenty of control over the colors used in the ads we display, so we can blend them into our sites.

The great thing about Chitika eMiniMalls (their other advertising system) is that, as publishers, we can define our own keywords for the ads. Well, we can do that for ShopCloud$, too!

I’m using them on my Computer for Christmas site to show tagged clouds for desktop computers, notebook computers, graphics cards, sound cards and software.

Sign up to become a Chitika publisher here

My new Computer for Christmas site

October 25, 2006 | 4 Comments

I’ve just released my “new” (reworked) site Computer for Christmas

It was up last year in its first draft, although I got little traffic to it. This time, I’ve designed a new header, played with the colors, and added a lot more information and search features.

Check it out when you get a chance — and comment about it here…

« Previous PageNext Page »