LSW-WebDesign

During some recent accessibility training I was asked what browsers should be tested in and while explaining I discovered that many people do not know how browsers tie together, what ones are for what Operating Systems and what are even common. So here is a explanation of the big 4 and what to watch for in the future.

Firefox

Firefox is the second growing browser, on many sites I run it has in fact taken over the lead spot in statistics. Basically Firefox runs the same on Linux and Mac as it does on windows, so if the site works in windows it will on the others as well, it is the most used browser in Mac and Linux. It is standards compliant.

At one time Netscape was the lead browser, it’s code name was Mozilla. Later Mozilla broke away and became it’s own project and the Mozilla suite was the basis of Netscape 6. Mozilla began powering Netscape and Mozilla became it’s own browser as well. Then they decided that rather than have a bloated app with email, chat and what all else in, they would break each out into it’s own module. This gave birth to Firefox Browser, Thunderbird email client and Sunbird Calendar as a few examples. With the final release of Firefox, Mozilla was retired. However Mozilla lives on due to the work of some fans and with Mozilla’s support they are continuing to improve it and it is called Seamonkey now.

Gecko is the rendering engine. If you test in Firefox, you can be sure it will work just as well in any gecko client, so Netscape (now retired), Mozilla/Seamonkey and Camino (Mac only).

Opera

Opera has or had a cult following as it was the fastest browser on the market at one time, however i was privately funded and needed to be purchased. It has been free now for a few years still ignored, i will do a separate article on why you should check out Opera. But it has the easiest internal style switching available, first to incorporate a zoom mechanism, first to include spatial navigation, first to include voice command, first to include a mobile view for testing, first to offer a speed dial screen in new tabs… it has been unduly ignored. Opera is standards compliant but does show some things slightly different than other browsers. Opera was also the first browser to pass Acid 3.

Opera is not just a interesting alternative browser, it is the only commercial browser available for mobile use. There is a Firefox version being developed for mobile user agents but Opera has been in use for years along with a lesser known mobile only browser. By testing in Opera with Opera’s specialized tools will help insure it is working well for users, opera is also used on many cell phones as well as the Wii when surfing, so odds are good the web site will work better in those tools as well.

It is worth adding now that Opera 2.9 has been released. Well worth checking out as it is the most standards compliant version to date. It passes Acid 1, Acid 2 and acid 3 is passed with 83%, compared to IE”s 12%. It has good support for standards not yet released like CSS3 and HTML5. Here is a good article on the subject: Opera 9.5 - the next generation of web standards.

Safari

Safari has been around for years and is the Mac in house browser. It is well used in the community but still falls behind Firefox in statistics of Mac users. Safari is standards compliant.

There is now a version of Safari for Windows. Windows users can now install Safari 3 beta on a windows machine and test. There are some oddities between Safari Mac and Safari Windows, more to do with the presentation of Text. But for the most art if it works in one it will work in the other. The presentation may differ slightly, but the functionality is close enough to be sure the site can be used on Mac.

IE

Well what is to be said here, we all pretty well realize the quirks of IE. IE has never been standards friendly. The IE team has spent years trying to create their own standards even thought Microsoft is part of the W3C. IE 6 does not support Standards, IE 7 supports standards somewhat, IE 8 is supposed to support Standards when released. IE7 only works on XP SP2, SP3 and Vista. IE8 will I believe only work on Vista and later. IE6 will work on XP SP1 and anything before. As long as people are unwilling to upgrade, IE6 will be around like a zombie, dead but still attacking & eating our web sites. IE5.5 and below do not even register on most statistics or ring in at less than 1%. They are dead, we have to draw a line somewhere. IE support for Mac ended with IE5.2 and IE no longer supports Mac and never supported Linux.

So IE does it’s own thing. What do we do about it? Well traditionally hacks, but hacks are using a browser weakness to do something, if the weakness is then corrected as with IE7, many sites designed with hacks for IE6 broke. So stay away from hacks. Conditional Comments are the way to go. They were created by Microsoft and allow you to pick and choose versions. They are a form of CData comments and If loops. If IE6 do this, if IE7 do that. These are ignored by all other browsers. So it is a form of IE specific sniffing. You can for instance either load different style sheets or just specific commands to overwrite styles in a style sheet. IF IE6, use this H! style rather than the default style… sort of thing.

IE8 is a whole new ball game. IE8 was to launch a poorly thought out plan that was flamed in designer communities. This idea has been named Version Targeting. The idea is simple, a meta tag in the header of every page will tell IE what version of the browser the web site is meant for. IE8 can then choose from multiple rendering engines to show the site as it should be. So you may now be lazy and never update your site, just add the meta and tell it to render as IE6. I am sure laziness will overcome, but it is good for older sites that may have archived material, you need not rewrite everything, just say that that page was written for IE5 years ago and it should render as IE5, that is good, but using it as an excuse not to update a active site is laziness. Another problem is the size, IE8 will have to include multiple rendering engines to render old pages as old browsers… so each version of IE will be more bloated as it’s rendering engine is included with all the others. It was poorly thought out because the default was to be IE6, why should IE8 default to IE6? Why should those of us not wishing to use it have to use it to say we do not wish to use it (by telling it to act like what it is IE8). They finally saw the light and have announced that IE8 will default to IE8 standards mode, and you must add the meta tag for anything else. IE8 will still not support XHTML, so there will still be no reason to use it.

JAWS

JAWS is the most common screen reader and hails from Freedom Scientific. It is expensive so you won’t be buying ne, but the demo version runs for the first 30 minutes after booting your machine and it is not just a browser (actually piggy backs on the browser), it will read anything you do on your operating system as well. Now you can listen to your site, test it in a manner as well. Just remember that yu will not use it as a sighted person the same manner a blind person will. It has a visual pointer that you can move with the mouse and a virtual pointer. It can get problematic if you try to test as a blind user while using the mouse to point at things. So if you are going to use it, use it right. Unplug the mouse and turn off the monitor if you can, close your eyes or sue a blindfold if you can not. Then test your site. It will help you find structural problems, missing alt attributes and even misspellings. Then if you can, get a hold of a Assistive Technologies organization and have them test the site out using real users with disabilities.

The W3C are known for being vague, often due to trying to please everyone. This vagueness has caused issues in the past as developers understood the specs differently, a good example is IE’s showing of the alt attribute as a tooltip and all others browsers understanding it to be only visible when the image is not.

I have seen references before to the <address> tag and like all beginners did not look into it as it is clear isn’t it? You use it to create addresses. Well this is the web and the W3C and not everything is what it seems.

Here are two authorities on the subject:

The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document.

– W3C

The <address> tag defines contact information for a document or a section.

Note: The <address> tag should NOT be used as describing a postal address, unless it is a part of the contact information.

– W3Schools.com

For me this is fairly clear, but not what I thought as a beginner. The address tag is not for addresses, it is for contact information about the author. If I post this in an ezine for instance, the author information about me with my email and or URL would be the address. I am the contact person and not the newsletter that posts this. KillerSites is not the contact when I post it on their forum. If you have questions, you contact me.

So if you use it for a street or postal address you are clearly wrong.

Or are you?

In a comment section at a SimpleBits’ SimpleQuiz from 2004, some very good comments are to be found (126 in all, but good reading). It became and issue of how best to markup physical addresses and rather than people saying A, B, C or D, may began tweaking the offered solutions.

Comments here are long closed, I was dismayed that it took almost half the comments before someone pointed out the semantics of Address as many were stating simply “A is correct because that is what the tag is there for.” Well no, no it isn’t, read the specs. It is the contact information on the author. So name, email, URL and such.

Some posters blatantly ignore this but towards the bottom more and more reference it and some begin to point out other ways of seeing it than what I know to be the meaning of Address.

Now the easy to understand has become vague indeed. Let us look again, this time with my highlights:

The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document.

– W3C

Are you seeing what I missed and others saw?

Once again by generously using their favorite word, “may,” the W3C’s use of it opens the definition to be used and abused in many ways aside from it’s intended use.

Also look at it from a corporate point of view. We looked earlier at me as the author. Now let’s say it is a page on a corporate web site. Who is the “contact information for a document or a major part of a document?”

It depends, but it would be either a division or department or the corporation as a whole. So if I have a question or issue with the content who is my contact person? Likely the Public Affairs people for the corporation. How would I contact them? URL and email of course as before, but I may wish to send a letter. Now suddenly a postal address or street address I can visit to speak to someone in person is now fitting snuggly in the definition, especially with that “may” thrown in. A local part of a nationwide chain would not be the owner so the corporate headquarters would be the owner.

Personally, I find that stretching it as this tag is really meant to be directly on each page. So I do not agree with the full address use of the tag, To use it on one page to represent ownership and responsibility for an entire site is not in the spec. The spec clearly states it is “for a document or a major part of a document,” meaning singular, as under this theory you need to place the physical address of the company on every page. But I must admit that I can not hotly dispute it because in theory, even stretched theory they are partly right at least and you can liken a web site to a document, like a brochure of many pages.

Another repeated argument is that telephone numbers should not be included, they are not part of the address (usually meaning physical address), but they are however “contact information for a document or a major part of a document” and by that definition better candidates for the address tag than a complete physical or postal address.

So the <address> tag turns out to be not so simple after all. Like a Mirror you identify way off, when you take a closer look it is a fun house mirror and depending on what angle you look at the specs for address… it means different things to different people and warps to be seen however you wish to use it like a fun house mirror warping your reflection depending on the angle you see it. With W3C specs, things are not always what they seem.

I had a chance to talk with our IT folks and I was tipped to two excellent things.

So for those of you not in the know as I was not:

1. Windows has a tool called Virtual PC, I had heard of it but did not know what it was for. It sets up a virtual PC complete with virtual drivers and virtual hardware so you can install any number of Operating systems on one machine. Not a dual boot system but a virtual system that you can easily switch between. Now you can run XP but have Vista, Win 98 and Win 95 installed on the same machine and switch between them. No need for extra machines, I can run vista and a virtual PC with Win 98 installed to run my favorite old games. How about running Vista with IE7 and run XP with IE6 and Win98 with IE5.5 for testing? You can also run Linux and in some cases Mac as well for testing sites.
2. Mac being developed for Intel processors means it is now Intel/Linux based meaning you can now install new Mac OS on a windows machine. Either dual boot or using Virtual PC. You can now install Mac on your PC and test everything possible with one single computer and if it is a Laptop, use it to show customers.

I have dreamed of such things for years and it is possible and that fact never dawned on me.

So for your entertainment, I offer you the links to:

• Virtual PC which is free
• The preview of the soon to be released Mac Leopard OS which compares to Vista. It may work with Mac Tiger, but I am not certain, it is more XP level. The first 5 or so things on the left offer video demonstrations worth watching.