Article - The importance of designing your website to work in different browsers.

The importance of designing your website for different browsers.

Designing your website so it displays correctly in different browsers.

Not old -vs- new versions of the same browser, I'm just talking today about the differences that show up between, say, Netscape and Explorer, and why you should know about it.

A couple weeks ago I received an invitation to join the affiliate program from a company that has four 'community' websites... (it was www.morvo.net if you're interested)... when I went to see what it was all about I was astonished to see that they are turning away traffic from anyone who is not using Internet Explorer!

The website didn't just display funny, like most designs that don't work well in other browsers, it actually said "You're not using Internet Explorer, go away and come back later when you get it."

That is just stupid. It's like running a drive-thru coffee-hut and refusing to serve anyone who drives a Honda. And this from a company that seems to be investing heavily in these websites. Maybe I'm over-reacting, but this just seems nothing short of idiocy.

According to my stats service, the browser-use stats for November 2007 were:

Now - I realize that other sites will give you different usage stats, some show that Internet Explorer users account for as much as 80% of the browsers in use...

The point is - if you design your site as 'optimized for MSIE' and ignore all the other users out there you are closing the door to somewhere between 20 and 40 percent of your potential customers.

I don't know about you, but I sure can't afford to do that.

So how do you make sure your website design won't 'break' in another browser?

The answer, while simple, can be a pain to put into practice, (which may explain why some people don't bother) but it's definitely worth it.

You only need two things: Cross-browser compliant code and adequate testing ability.

First thing is just to get a number of different browsers installed on your computer. This machine came with IE6 and I've added IE7, Firefox, Netscape7, Safari and Opera. I feel that these are sufficient to test anything that I'm working on and still make good use of my time.

(Update 12/07 - Netscape users may see a display problem with many of the pages on this site, it's a known problem and I am working on it... I'm just really glad that only 0.21% of you are using Netscape.)

Assuming you are using a Windows-based PC, you might also try to get your hands on a used Mac... Just to hook it up and see what Mac users see when they visit your site. (No, I haven't done that myself, but I plan to.)

Today there are hundreds of browsers being used - to accommodate PCs, PDAs, mobile phones and TV-based systems as well as computers. Because of this, it is impossible to test your site on every browser in use... but if you have four or five, you will still be able to accommodate the vast majority of your audience.

Use the different browsers to look at your pages as you are building them. (If you've never done that, you will be very surprised at how different a page can look when you go from IE to Opera - or any other combination.)

The main thing your pages need to display properly across different browsers is 'Clean' code... Valid HTML tags, properly used.

Don't use a WYSIWYG* editor. Write your own code or, if you use a template, carefully check the code in it for unsupported tags, redundant tags, missing close tags, improper nesting, etc.

The way browsers work today is essentially to "repair" improperly written HTML so their users can still view it. The problem is that browsers make these repairs in different ways.

Some of the more common mistakes found by code validators:

* Missing (or unmatched) end tags
* Header tag errors - like for italics or bold text
* 'Nesting' errors - tags listed in the incorrect order
* Missing the "/" in anchor tags
* Missing the quote marks around attribute values
* Misspelled or 'unsupported' tags
* Missing the ">" for terminating a tag

Some HTML editors use the blank space in the code differently, (the blank areas and indents that make it easier for us to read and edit the code) But - it can cause browsers to display those extra blank "white" areas as true spaces. Depending upon the browser used to view your page, this:

<td><a href="site.html">Some link.</a> some text</td>
<td><a href="site.html">Some link.</a> some text</td>

Will display differently than this:

<td>
<a href="site.html">Some link.</a> some text
</td>
<td>
<a href="site.html">Some link.</a> some text
</td>

The only solution I know of for that problem is to try different HTML editors until you find one that you are comfortable with, and learn all of it's little quirks.

Validate your code. You can use the code validator at validator.w3.org - it can tell you of any serious problems that may be hiding in your source code.

If you use CSS for formatting (recommended) check it with the CSS validator from w3.org.

Note - some javascripts that you get from other sources (like a google adwords code or a traffic counter code) may trigger the validator... don't mess with the code, just ignore the error and go on to the next one.

One more thing: If you use a "Document Type Definition" (and you should) use the correct one. Place it (all on one line) just above the first HTML tag at the beginning of the code. Below are the current tags that should be used:

The HTML 4.01 Strict DTD includes all elements and attributes that have not been deprecated or do not appear in frameset documents.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

The HTML 4.01 Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes (mostly having to do with visual presentation).
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The HTML 4.01 Frameset DTD includes everything in the transitional DTD plus frames as well.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

DTDs tell the browser how to read the code... a missing or incorrect DTD can cause all kinds of odd effects - and a code validator requires one to work. (For more info on all that see this)

The time it takes to find & fix errors will pay for itself in increased visitor time-on-site and that translates into more sales.

On a related subject:

Fixed -vs- fluid webpage designs.

Let's talk for a minute about different screen resolutions. The screen-size stats for blt-web.com show the following:
56 % use 1024 x 768 resolutions
29 % use 800 x 600
8 % use 1280 x 1024
3 % use 1152 x 864
4 % were 'unknown' - probably PDA's & other hand-held devices.

Why are these stats important? Two main reasons, either of which can make or break a commercial website...

1. You've probably seen a site like this: You get there and it is way too wide to fit in your monitor... you're forced to side-scroll back and forth to read the content.

The average surfer won't stick around to read it, he knows that there are over 40 million websites, he'll find what he wants somewhere less irritating.

If the designer makes the design 'fluid' to fit any screen resolution more surfers stay and finish reading ~ and maybe buy something.

"Fluid" design, in case you've never run across the term, refers simply to a webpage that expands or contracts to fit the monitor size. This is most often accomplished by using tables that are 90 or 100 percent wide, and sometimes by use of CSS to control layout - as I did with BLT-Web.

2. The other thing that many designers do is make a page that is 'fixed' at a certain width. Most common is making it 780px wide so it fits most monitors. That is not necessarily bad, but it wastes space - space that could be used for content or advertising.

A page that is 780px wide in a 1024px wide monitor is wasting over 200px of space. Large enough for a google adword box or another column with related information....

Efficient use of that space could make a big difference in your paycheck!

Your site design is totally up to you... but if your aim is to inform, entertain, and ultimately, make a living from your website, then it is important to have good design.

In my not-so-humble opinion good design starts with consideration for your audience.

Your entire audience, not just those with 800x600 monitors using Internet Explorer.

To Your Success!
Tim

By Tim Brown © 2006. About the author: Tim is the webmaster at http://BLT-Web.com, where webmasters can find free tools, advice, tips and other useful resources designed to help them build a successful website.

Webmasters & Publishers:
You are welcome to publish this article free of charge on your website, newsletter, or e-zine, provided:
* You don't change the article in any way and all links remain intact.
* You include the entire article, including the "about the author" box.
* In doing so you agree to indemnify the author, blt-web.com and its directors, officers, employees and agents from and against all losses, claims, damages and liabilities which arise out of its use
* I would appreciate it if you send a courtesy copy of your publication to