How Do You Test Your Web Pages?

Pieroxy asks: "As a web developer, both professionally and personally, I try to always make sure what I write works in every browser at my disposal. When the choice came for me to choose a platform for my PC, I went the Windows route, because I cannot afford not to test IE on all those websites/applications. But now I am facing a problem with all browsers that don't have a native Windows port, such as IE5/Mac, Safari/Konqueror. kde-cygwin helped very little because the version of Konqueror shipped doesn't display most JPEG, making any testing worthless. IE5 for Mac should die soon, but is still widely used as being the default browser for so long. How do you test your web pages? Have you noticed discrepancies on how a specific engine (Gecko, Opera, KHTML) renders content on different Platforms? Do I need a Mac and a Linux machine to make sure it is working on these platforms?"

Comments

Of course...

[sribe]

Do I need a Mac and a Linux machine to make sure it is working on these platforms?

Yes. Glad I could help out ;-)

Depends.

[Hank Reardon]

This really depends on the type of page I'm working on. If it's a personal page, I make sure it works with Mozilla and IEWin, because those are the two browsers I have available.

If I'm working on a business project, I let the boss spec the work. If it's required to work under Safari and IEMac, then they have to provide a Mac for me to develop with, not just have somebody else test it.

Virtual Machines

[sampowers]

Get yourself a copy of VMWare or Virtual PC, or something cheaper. Boot a Knoppix CD image, and test away. Konq and Mozilla are right there. Also test opera, but you can do that on whatever platform you want.

I also reccomend testing with stylesheets turned off, if you're using them, to make sure your site degrades gracefully in browsers with no stylesheet support.

Virtualisation thing

[rikkus-x]

Ever heard of VMWare or Virtual PC? As for MacOS, well, they have Safari, which is basically KHTML of Konqueror, and Mozilla.

Oh yes, and as another poster said, stick to the standard.

Rik

Re:Virtualisation thing

[orthogonal]

Ever heard of VMWare or Virtual PC?

Or consider the Free alternative of coLinux, which allows you to run several linux distrubtions under MS-Windows.

Validator

[wishus]

http://validator.w3.org/

Re:Validator

[JimDabell]

I'm sorry, but that's simply not good enough. Writing valid code is only a very small part of making a robust website. You can write perfectly valid code that fails to display properly in any major browser. For example, not testing in Internet Explorer 6 will leave you prone to a couple of very nasty bugs that cause large sections of the page to simply not get shown.

Re:Validator

[JimDabell]

>The whole point of testing in browsers is to ensure that things work properly.

The whole point of standards is that you don't have to. They will, all by themselves, if the browsers are standards-compliant.

The point of standards is to aid interoperability. They aren't a get-out clause to expect everybody else to write bug-free code. That is an unreasonable expectation, especially as validators themselves are only a tool to catch errors you've made yourself. So you make errors but nobody else is allowed to, is that it?

If I validate xhtml 1.1, that's the end of my testing phase.

You are aware that XHTML 1.1, per standards, will not work in Internet Explorer?

>How do you ensure that the HTML, CSS, etc you have chosen works with popular browsers?

By using standard-compliant xhtml and css. In and of itself, this guarantees that this will work in particular browsers.

Which particular browsers? There is no browser that gets XHTML or CSS completely right. It's quite obvious to anybody who has spent more than five minutes developing websites that standard-compliant XHTML and CSS does not guarantee your website will work in any particular browser. Browsers have bugs. You can deal with that by testing, or you can stick your head in the sand.

Note that I semantize, and don't go for special effects. (None. Go to my site, you'll see. It navigates and looks the same in Konq, Safari, Moz, Op, Lynx and Links.)

Your website violates RFC 2616 (HTTP 1.1) and RFC 2854 (the text/html media type), as XHTML 1.1 is not permissable to send as text/html. Also, by including an XML PI, you are screwing up rendering on Pocket IE and one other user-agent that I can't quite recall. If you want to comply with the specifications and also be accessible to the majority of the web, you'll have to drop back to XHTML 1.0 and follow Appendix C.

Or you could take your own advice, use the application/xhtml+xml media type, and say goodbye to Internet Explorer users, Lynx users, Links users and most search engines. After all, you just have to write to standards, and your job is done, right?

Re:code to the standard

[Hank Reardon]

Not really...

There are a ton of bigs with Internet Explorer and the way it "works" with the standards, particularly CSS Positioning.

A site I frequent for various work-arounds to get things working under both IE and working CSSP browsers is A List Apart. It's amazing the number of funky comment-within-comment hacks that you have to perform to get sites to display properly across two or three "standards compliant" browsers.

Re:code to the standard

[cyber0ne]

But even "standard" code can render differently in different browsers on different platforms. Depending on the complexity of the website/application, small differences can be a big problem.

At my last job I kept a log of browsers/platforms that hit the webserver. From the vast majority (at the time, IE5 on Win9x) down through the percentages, I would run what I could for testing. For example, using whatever tool of choice (VMWare on my home network was what I used), I tested my sites in IE5 on Win9x, IE5 on Win2K, Netscape, Mozilla, etc, etc. I think I was regularly testing on maybe the top 6 percentages in the log, capturing about 99.5% of the hits.

There will always be a percentage of browsers in the world you can't test, be they either little-used browsers on little-used platforms or widely-used browsers with some strange configuration that messes things up. But if you can identify the majority of the variations that are hitting your site(s), then just test as many of those as you can before you feel confident that it's "as compliant as it's going to get."

BrowserCam

[bjpirt]

If you don't want to buy a mac, you could always use browsercam

Of course you messed up in the first place not getting a mac. You can test in PC/IE from the mac, but not the other way around.

Re:BrowserCam

[Jkames]

Actually. You can get a program called PearPc which allows you to emulate a mac. It's was in constant developement before one of it's programmers got hit by a train.

Re:BrowserCam

[Ianoo]

If anyone hasn't heard what the parent is refering to, then see the announcement here. RIP to him and my thoughts to his family.

Re:BrowserCam

[aWalrus]

Or you can try iCapture, which is free.

Re:code to the standard

[silverfuck]

The W3C Validator is your friend. There's also one for validating CSS.

It's not perfect, however, so take it with a (small) pinch of salt.

Significant Other?

[jtheory]

If you have a significant other (I'm married, so I do), sell them on getting a Mac. I bought an iBook for my wife, so I can test on my laptop (w2k), her Mac, and Linux by booting from my handy Knoppix CD.

That covers the base pretty well.

Of coures, it's always wise to generally try to avoid dicey display tricks that you know will probably give you problems... or if you absolutely *must* have that stock ticker, don't code it yourself -- find one whose creator is doing the testing for you.

Mac

[octover]

I have a PowerBook that I do my web development on. I then use Virtual PC to test the windows IE stuff. I have found that the Mozilla rendering engine on windows/mac/linux is pretty much the same, i.e. testing on one is good enough for all (granted I try and stick with writing things once and having it work everywhere so its the safer (X)HTML/CSS).

Re:code to the standard

[Basje]

That's a self fulfilling statistic: people with an unsupported browser (in which the page won't render correctly or at all) won't return. Thus, the supported browsers will always be top in the logs, unsupported browsers will stay at accidental hits.

You need a Mac

[JimDabell]

I don't think there are any decent Mac emulators around. There are, however, decent PC emulators on the Mac.

If that's not an option, then you can't really do anything about Mac/IE, as the Mac and Windows Internet Explorers use completely different rendering engines.

Safari is based around the KHTML engine, and so you can be fairly safe with that browser as long as you test in Konqueror.

Things like Browsercam aren't very helpful, as you can't interact with them, and a lot of bugs only show up when interaction takes place. But if you have no other option, like Mac/IE without owning a Mac, then it's better than nothing.

Even if you aren't bothered about other platforms, virtual machines like VMWare are useful. You can set up a range of them with different screen resolutions, font size settings, Javascript on and off, and so on, so you don't have to keep fiddling with your settings.

If you take the "fiddle with your settings" approach to testing, set up a second account on your workstation for just this purpose. That way, any plugins, settings, etc, that you use for normal day-to-day surfing won't interfere with your testing. Make sure you keep a checklist where you can tick off each combination of settings that you have tested against - you will miss combinations otherwise. You will probably find it useful to install multiple versions of Internet Explorer on the same machine.

Obviously, run your code through HTML and CSS validators, and possibly linters as well. It's a good idea to incorporate validation into your publishing routine - nothing invalid ever reaches the server. If you can't do that, it's a good idea to set up a validator to automatically spider your websites on a regular basis and report any errors to you via email. Alternatively, check out Ben Hammersely's validation RSS feed.

Re:code to the standard

[Phillup]

I do it with three computers.

One dual Xeon system with a shitload of memory running Linux and VMWare... and several versions of Windows/IE via VMWare.

And, two Macs. One running OS9 and the other running OSX.

That gives me the greatest OS coverage with the minimum number of machines.

And... I load each OS with as many clients as I can test.

Linux, WINE, and WWW::Mechanize

[markjugg]

Most of the web pages I develop are database driven. I use the WWW::Mechanize module as part of an automated testing solution.

To manually test websites, I run Linux on my desktop. This allows me to test Windows/IE via WINE, as well as Mozilla and Konqueror (which should render like Safari).

It doesn't catch every issue, but it works well for me.

Just save yourself the trouble and get a Mac.

[tweder]

I'm a professional web developer and I can safely say I couldn't be nearly as productive without my Mac.

I do my main development in BBEdit, checking against Safari's rendering engine. As things are shaping up, I'll check it in Mozilla (and variants), Mac/MSIE (we HATESSSS it!), as well as VirtualPC running Windows 2000 to keep ensure things are looking good in Win/MSIE, and lastly Lynx to ensure that content is properly available, despite lack of formatting.

This way I feel I've got all my bases covered.

KHTML (Safari, Konqueror)

Gecko (Mozilla, Firefox, Camino, etc...)

MSIE::Mac

MSIE::Win

Text-based (lynx, WAP, screen readers, etc...)

My Macintosh lets me get everything done with ONE computer on my desk. No need to deal with the upkeep of several boxes, as well as the real estate they'd all require at my workspace.

Re:code to the standard

[britrock]

I generally write to the standard, and then spend a few hours after the fact making it work in ie. Safari/Khtml and Mozilla/Firefox are really very good at following the standard.

There are of course quirks in all of the browsers though. There is a REALLY great site to help with that though. quirksmode.org lists each css attribute, and has a table showing which browsers it works in, and which it mostly works in and so on.

You really can do some amazing things if you follow the standards AND work around the quirks. I try to avoid the comment-within-comment hacks, because they are ugly, and there is almost always a better way. Once you have a good knowledge of the quirks its not so bad.

Re:code to the standard

[FuzzyBad-Mofo]

Or use BrowserCam. For a small fee, they will provide screenshots of your site from all the major browsers on demand.

Re:code to the standard

[AllUsernamesAreGone]

Nope, doesn't work. It'd be wonderful if it did, but .. well, just look at XHTML 1.1/CSS2 and tell me how many browsers you think will handle pages written in them correctly. The site I'm building can only be valid XHTML1.1/CSS2 when delivered to Mozilla or Firefox (although I've got to test it with Knoq/Safari yet). Opera doesn't (or didn't inthe last version I grabbed) support id attributes in object elements and IE... <shudder> Even if you code to older standards support is patchy at best, especially in IE which in places expects practically prehistoric versions of some standards.

And even when browser do all support the standards you're using, they are somewhat liberal in their interpretation of them, especially when it omes to margins, padding, border sizes and whitespace in general.

In short: coding to the standards is a bit like navigating a minefield in the dark with a map of the mine locations drawn by a guy with amnesia. If that is all you rely on, you are going to end up doing the biggest splits you'll ever do in your life.

Re:code to the standard

[Rick the Red]

Go with standard code, and let browsers render as they will.

So, are you saying we should ignore the 600 pound gorilla, or thumb our noses at it? Most people code to the standards, then tweak each page so the gorilla won't barf on them.

When over 80% of your clients use one browser, you either alienate 80% of your clients or you code to their browser, however sucky it may be. "Coding to standards" sounds good on paper, but we live in the real world. BTW, the gorilla thinks it is the standard, and with it's market share it really has become one, like it or not.

P.S., in the read world the Mac doesn't even exist -- I've tested web pages for some Fortune 500 companies and while mostly they said to test on MSIE and Netscape, none of them required me to test on Mac.