Cross-Platform Tips for HTML Artists
Ever since the advent of the browser wars, I have been inundated with questions about how one Web page can look so different on Internet Explorer and Netscape Navigator (and now Opera and others). This question never seemed to go away:
the same in all browsers?!
Here’s the short answer: You can’t. The browser creators have seen to it. Internet Explorer and Netscape Navigator are very different animals. They have different margin settings, different browser screen sizes, and different methods of rendering tables, just to name a few fun problems to come.
Why are they so different? It’s an attempt to create a browser that has something the others don’t in an effort to get you to use that browser. I believe it comes down to marketing, pure and simple. Create the different, and hopefully better, mousetrap and users will surf a path to your door.
Some might state that the easiest way to go about getting pages to look the same across browser platforms is to use a browser-choice JavaScript (I have one for you here) and simply create a page for Netscape Navigator and a page for Internet Explorer.
Well, maybe, but that’s a lot of work and it still doesn’t take into account the fact that there are people out there using text-only browsers and browsers that don’t support JavaScript, so the browser-choice JavaScript doesn’t solve the problem. The real solution is to create a Web page that looks good across all browsers.
Here, in no particular order, I’m going to go over 21 basic tips to help you make it so that your pages are presentable in no matter what browser you choose.
Tip One: Put multiple browsers on your computer.
If you have the hard drive space, install a version on Netscape Navigator (NN), Internet Explorer (IE), and Opera (O) on your computer. I have all three on mine and they don’t interfere with each other. That way you can open your HTML document in multiple browsers to see what they look like before posting them to the Web.
Tip Two: Write for the browser that is most picky about coding.
That would be Netscape Navigator. If your page looks good in Navigator, it’ll probably look good elsewhere. This is especially true in terms of tables. IE allows you to get away without ending every <TD> and <TR> command. NN does not. Every one must be closed or the table doesn’t render properly. So, if NN requires a certain coding, that’s the coding scheme you go with.
Tip Three: Allow the browser to decide when long pieces of text wrap.
If you have paragraphs, do not break the lines yourself. Just write the text and allow the browsers to wrap it. If you break the text yourself, you may run into trouble when people have smaller screen settings. You’ll get that lovely one-long-line-one-short-line look all the way down the page.
Tip Four: Force text issues.
Do not assume that if you use one command that every table cell’s text will be altered, because they won’t. NN will see to that. In tables, make sure every cell’s data is defined with HTML tags. Simple rule: When in doubt, add the tags. Make a point of forcing every text alteration you want. Tip Five: You may want to stay clear of Style Sheets for a while. According to the brochures, both NN and IE support Style Sheet commands. But if you’ve ever tried writing with them, you’ll know that isn’t always true. The scoop is that the World Wide Web Consortium adopted Microsoft’s template of creating pages using Style Sheets. That made it standard in the industry. Netscape then adopted the standard for their browser. That should have done it, right? Wrong. As you have probably noticed, there are many non-standard commands out there that do not work cross-browser. Case in point, the <BLINK> command works in NN but not IE. Furthermore, Style Sheet commands are fairly new. Believe it or not, there are still people out there browsing with version 2.0, and below, browsers. I’m not kidding, there are. So, even if you do use standard Style Sheet coding, they are left out in the code. (HA!) Everything that standard Style Sheet commands could do can be done with HTML tags. Either make your page so that if the Style Sheet commands don’t render, it doesn’t matter, or use the HTML tags. Tip Six: Be kind to those who are surfing without images. Use ALT commands. Many people surf without wanting to see images. Really. I do it now and again. All browsers that support graphics also allow you to shut off the “in-line” images. That means just the text displays. Plus, I know people who still surf with LYNX and CELLO. Those are text-only browsers and you’ll find links to download them in Appendix C. Also, when you use ALT commands, set the image text aside by at least surrounding it with square brackets, and maybe adding the word “IMAGE” in all caps. Like so:
ALT commands place text with an image. Read all about ALT commands in the Height, Width, and ALT command tutorial here. If the browser displays the image, you can get a tool tip box to pop up using an ALT command. But for those who are not using images, the ALT commands make their surfing life so much easier by telling them where the images are.
You should also know that using ALT commands helps surfers who are blind. There are now computers that read text aloud. These ALT commands allow the user to know where the image is and what it is.
Tip Seven: If you use Image Maps, also offer hypertext links.
For all the reasons outlined above, offer hypertext links to everything that is linked up in the image map. And use an ALT command to denote it is an image map.
Tip Eight: Do not use frames unless you have a very good reason.
Frames are supported by most browsers, yes, but that’s not the concern. Speed, download time, monitor screen settings, and text wrapping are. Remember, you are trying to let all people see your pages. Not everyone has your 56K dial-up or your Ethernet driven G3 chip. Many are still attached to AOL with 14.4 modems. Be kind. Unless frames are required, go with single pages.
Tip Nine: JavaScript, I love it, but don’t get crazy with it.
JavaScript is another item that is supported by most browser, but not all. If you use JavaScript, make sure it is not a pivotal part of the page. Your page should run just fine without it. I find you can use Event Handlers without messing anyone up. See the Advanced JavaScript tutorial for more on these.
If you do have a JavaScript marvel you wish to share with the people, put it on its own page and offer a link to it. Make sure the link tells the user what is coming. If it’s cool enough, people will click.
Tip Ten: Only use applets if it is quite necessary.
Applets require a 32-bit operating platform to run. That’s a MAC or Windows 95/98. If your user doesn’t have that, they get a gray box where the applet should be. Follow the same rules as outlined above with JavaScript. Use an applet only if it is truly needed, and even then, put it on its own page and allow people to click to it.
Tip Eleven: Always use both the EMBED and BGSOUND commands.
Neither is supported by all browsers. If you are going to put background sound on a Web page, use both commands. That way both NN and IE users will be able to hear it.
Tip Twelve: Force your page’s layout and design.
The best way to accomplish this is to always place your page’s elements inside table cells. It lays out the page beautifully. Then you can always make the table cell’s borders invisible by adding BORDER=”0″ to the main TABLE command. Read all about Tables here.
Tip Thirteen: Force your page’s width.
Remember that computer monitors can have many different settings. This plays havoc with Web pages. Use the TABLE method below to force your page to stay within certain parameters. I do this by placing every page inside one large table cell set to a specific width. Here’s the code:
<HTML> ****Content of page goes here**** </TD> |
I choose 80% as my width. That leaves a nice 10% border on either side of the page because I centered the table cell. It also sets the text perfectly inside each window setting. Nothing rolls off of the side. Smaller screen setting might shmoosh the text a bit, but that’s trade-off I am willing to make. You’ll never get perfection every time.
By the way, the same thing can be done using frame commands. What you do is make one frame a certain pixel width and set everything else to zero. You put the HTML document into the larger frame and a page with the same color background into the other. Here’s what the code might look like:
<FRAMESET COLS=”640,*” MARGINWIDTH=”0″ MARGIN HEIGHT=”0″ FRAMEBORDER=”0′ BORDER=”0′ FRAMESPACING=”0″> <FRAME SRC=”page.html”> <./FRAMESET> |
If you want it centered, you can always change the code above to COLS=”*,640,*. It’ll work, but again, you are incorporating multiple pages.
Go with the Table commands version I showed you above.
Tip Fourteen: If possible, use percentages when forcing widths.
I think this is the way to go as screen settings vary and if you set a width to 850 pixels, then those with 800 width screens get a horizontal scroll bar, and no one wants that.
Now remember that this isn’t always possible. For example, you must be using pixels when denoting an image’s HEIGHT and WIDTH.
Tip Fifteen: Use the .gif format for icons, .jpg format for larger pictures.
This is the way I have found it works best. .gif helps the smaller items keep their detail and .jpg helps the larger items load faster by being a compressed format.
Tip Sixteen: Try to avoid META Refresh tags.
You can read about Meta Refresh tags here. These are the tags that create what I call “dynamic pages” by jumping to a new page after a set amount of time. I love the look, but text-only browsers cannot support the command.
But if you decide to use Meta Refresh commands, make sure you have also posted a hypertext link so that people who do not get the effect can then click to go on.
Tip Seventeen: Always double align text and images.
Never assume that using an ALIGN=”—” command will do the trick. Even if your table cells include an ALIGN=”center” command, still surround the text with <CENTER> and </CENTER>.
The same goes for ALIGN=”left” and right. Use <P ALIGN=”left”> and </P>, too.
Tip Eighteen: DHTML is only supported by IE 4.0 and above.
Thus only those users can see it. Make a link to the page using DHTML so the user can choose to go or not. Don’t simply assume they are using the correct browser.
Tip Nineteen: When you are denoting colors, try to only use the 216 “safe” colors.
See the 216 non-dithering color chart. These are the 216 colors that most operating systems support fully. You might notice they are all hex command color codes made up from the values 00, 33, 66, 99, CC, and FF. You can use any one of the colors and be pretty darn sure the end user’s browser will support it.
Tip Twenty: If you need to pick a screen resolution to design for, choose 640 X 480.
Yes, that’s small, but pages conform better to a larger environment than they do to a smaller one.
The easiest way to do this is to set your own monitor resolution to 640 X 480. You can always change it back when you’re done. It’s your computer.
Tip Twenty-One: Write simply.
Yes, I know that animations, and JavaScript, and applets, and backgrounds are really cool. I like them just as much as you do. But go easy on the flash. Content should be your main concern. Text and static images make a very good page if the user is interested in what you’ve written.
Look, you’ve seen MTV. (If you’re my age, it’s VH1; if you’re my wife, it’s CMT). Anyway, you know that no matter how great a video is, if the song it’s set to stinks, forget it. You may look once, maybe twice, but after that the flash is not worth that poor content you have to listen to. See the analogy here?
If you want your pages to render well across browser versions and screen settings, then you’ll have to rein in your want to go for the latest thing. I love DHTML. It’s great, but not everyone can see it.
Stay with the basics. Many people do not dive on the next browser version the day it comes out. Their version 3.0 browser works just fine. Heck, their version 1.0 version browser works just fine. I still have Netscape Navigator version 1.0. I really do. It’s great to surf with. Just text and images. Nice and fast.
Some may not like that reasoning because it means you cannot fill your pages with bells and whistles and the latest scripts that make images jump around. Just don’t assume the user has the computer or browser to run the fancy formats. Always let the user see your simpler cross-browser page, then allow them to choose if they have the correct equipment and choose to see the latest thing.
So think about your users, not those whom you will impress. You may not be as flashy, but I’ll bet you’ll get more hits.