Is "What You See Is What You Get" what you really see on the web?
From ADV Magazine and ADVMag.com
By Christopher Raymond

WYSIWYG editors are a true blessing for Web designers – especially for those who don’t have the luxury of passing off complicated designs and graphics to programmers for assembly. I'll admit, HTML programs like GoLive‘ 4 and FrontPage‘ 99 are powerful programming software packages that make advanced Web design easier than ever. Yet, as advanced as these programs are, graphic and type consistency among computing platforms and Internet browsers is still very difficult. For example, what you see on a MAC through Netscape Navigator 4 doesn't necessarily look the same as viewed through Microsoft Explorer on a PC. This is were a Web designer's headaches really begin.

Due in part to new programming software, Web designers are able to use more graphics and tables, advanced Java script, dynamic HTML, and Cascading Style Sheets. All these design elements complicate a Web site, making it difficult to run on a wide variety of computing platforms and browsers. The older the browser, the more error messages the user will see.

Are there any rules to developing an error-free Web site? The truth is ugly…yes there are some loose "rules," but you can play by all the rules and still lose. Standard HTML produces very different results through different browsers. Older browsers are not as equipped to efficiently handle large graphics and advanced Java scripting. Not to mention, there are currently 11 different browsers in use and your Web site must work on all eleven. Some of these browsers include: Netscape Navigator 3 and 4, and Microsoft Internet Explorer 3, 4, and, now 5. Of course, don’t forget about AOL 3 and 4. Multiply the total number of different browsers by 2 (to account for PCs and Macs), and you've got 22 different ways your site could go wrong!

So how do you get around these headache-makers?

First things first…When designing a site, determine who will be viewing it. Are your viewers chemists, who will use this site primarily for information purposes? If so, heavy graphics, background music and DHTML aren’t necessary, but easy navigation, .pdf downloads, and fast-loading pages are. If your viewers are high-tech software pros, on the other hand, they probably expect to see some graphic razzle dazzle that requires Java script and DHTML. And, the hardest – your agency's site. Here, you may want to use all the bells and whistles to impress your site visitors with your work in action. The problem, however, is that not all of your Web site visitors may have the latest browsers. Yes, the site will still look good in older browsers, but there's no guarantee that all the toys will work right.

The code: Tables are a very basic HTML tool. Even still Navigator and Explorer translate tables differently. If a table row, cell, or column is not carefully specified by pixel and percent, the graphics or text within the table will shift. One way to avoid this is to carefully match each graphic pixel height and width exactly to the table pixel height or width you desire. What’s the difference between pixels and percents when creating tables? Pixels are a fixed size whereas percents allow a table to grow. So, if you are designing for a 14-inch monitor, then pixels are the way to go. The best thing to do is to map out the table structure, build the table layout, tweak it until it works well on every platform, and then start placing graphics and text within the table. This will help ensure what and where you want items to appear regardless of computer or browser.

Second: consider your typeface. The standard PC font is slightly larger than MAC fonts. So, use a font that is common to all computers, such as Times, Arial, or Helvetica. Even with one of these basic fonts, you may encounter other flaws like odd breaks in paragraphs or huge titles that don’t fit on a screen. One way around this is by using the Font Face tag. The Face attribute allows you to specify which font you want the browser to use when it pulls open your site. Remember to specify the exact name of the font desired. The tag looks like this: <FONT FACE= "Futura," "Arial," "Helvetica">. In addition, specify at least three fonts. The rule of thumb: use the absolute lowest common denominator font that is found on both computing platforms.

Third: Choose the right graphic format. There is nothing more aggravating to Web visitors than long download times, so be sure to take this into consideration or your site will turn more people away than it will attract. There are only two graphic formats that are widely supported by most Web browsers: GIF and JPEG. The GIF was developed for CompuServe and is the most widely used. Unfortunately, the GIF format only supports up to 256 colors. If you stay within these 256 colors, your images should stay true.

JPEG was developed by the Joint Photographic Experts Group. JPEGs support 16.7 million colors. However, when compressing a JPEG format, you must use the p-JPEG format (progressive format), which stores a series of scans that together comprise the image. Like the GIF format, JPEGs are widely supported by all major browsers. What’s to come? PNG, pronounced "ping." PNG was developed in 1995 by a group of graphic programmers to provide better compression and still support a larger number of colors than a GIF. PNG will likely replace the GIF format over the next few years, but it is not yet standard in web design.

All this information is nothing if a site isn’t properly tested through all browsers, on both the PC and the MAC. Never assume that it works on every platform. Until Netscape and Microsoft adhere to a single HTML standard, be prepared to spend a lot of time tweaking your site through that so called WYSIWYG program.


© 1999 Christopher Raymond, All rights reserved. Schubert Communications

Back to the top