Slashdot Mirror
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?"
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.
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
http://validator.w3.org/
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.
There's so little difference between politics and jihad lately...
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.
You know you've been IMing too long when you almost say 'lol' out loud to a non-geeky friend...
Browsercam is a good resource. Of course, you can't test functionality with it, but your layout is where you will run into the most browser bugs.
Ultimately, the best route I've found is to stick like glue to the standards and don't use nested tables or rely on Javascript.
As long as you stick valid HTML 4.01 or XHTML and CSS, the rendering bugs for IE5+/Win and IE5+/Mac are pretty well known. Older browsers can easily be sent plain text or minimal styling with media or @import hacks. Spend a lot of time lurking on the CSS-d mailing list.
Where do you find out about the "well-known" rendering bugs? There are a ton of sites out there about them, but I like PositionIsEverything and the CSS-Discuss Wiki.
My web development environment consists of Firefox with Web Developer plugin, and DOM Inspector plugin, plus Mozilla with it's superb javascript debugger. on a side note, does firefox have a javascript debugger plugin?
either way, i can't recommend that enough. the web developer plugin has all sorts of goodies like w3c validator, turning css stuff on/off (and even inserting css stuff on the fly). combine that with the javascript console and javascript debugger for debugging those DOM scripts. i'll also often use the DOM inspector to get a vew of my webpage's DOM tree or find suspect nodes which aren't coming up properly in my javascript.
and i can't stress this enough: strive for 100% w3c compliance always. nothing is worse than a website that doesn't comply to the standards, because if it does not, it introduces nothing but headaches with the major rendering engines: khtml, gecko, opera, and mshtml. yes. some of the w3c specs want you to do fairly dumb things. who cares, just do it. i hate seeing sites that don't comply and then users ask "why doesn't it render properly in <insert my browser>
- tristan
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.
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.
--Phillip
Can you say BIRTH TAX
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.
I'm not even interested on bidding on a project that wants to support browsers that are so old (or lame) that they can't do a "getElementById".
No browser supports getElementById() when they have Javascript switched off. What, you pass up all the lucrative contracts with accessibility requirements? Web accessibility is the new Y2K, especially here in the UK where they are beginning to enforce the Disability Discrimination Act.
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.
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.
Or use BrowserCam. For a small fee, they will provide screenshots of your site from all the major browsers on demand.
-
Use Validators and Load Generators to Test Your Web Applications
It is released under the GNU Free Documentation License.Request your free CD of my piano music.
There are also some general guidelines to follow for writing interoperable webpages.
;)
Someone recently commented in my livejournal that my layout needed some work and she'd do a new one for me. I agreed, but I said that if she were to do a new one...
i don't want my frontpage changed. actually, i'd love for my other pages to kinda match it, both in theme and in ascetics.
also, the HTML better be layed out nicely (i.e. readable in a text editor), better comply with W3C standards, and not be designed for any specific browser, resolution, platform, graphics capabilities, or fonts.
of course, if you use proper CSS, you can still encourage the browser to display things in certain styles of fonts (with keywords like serif, sans-serif, monospaced, emphasized, slanted) etc., and you can put low-importance tags to give a prioritized list of specific typefaces to use.
also, HTML must use CSS dynamic placement and not tables or frames for layout (and if iframes are used, they must be used in such a way that browsers that don't support iframes can still access all the content)
and CSS has to be organized with identifiers, classes, and such used as appropriately
oooohh and the pages better be split up using HTML structure codes (H1,H2,H3,P,HR, etc.) which have appropriate anchors and references.
also, all images must have ALT tags and must look respectable in a web-safe palette... no GIFs (PNGs and/or MNGs only)
no browser-specific features, javascript, DHTML, ActiveX, Shockwave, or Java
and all pages must properly use META tags. no EMBED tags, and all MIME types must be correct.
for an example of a page that follows all these guidelines, see the page i'm designing for my sister's harping career at BlueHarpDiva.com
still interested?
yes, i know, i'm an ultra-anal bitch.
--TheOrangeSquid Is it any wonder things seem so awry? We swim in a sea of confusion and don't have to think to survive
Or you can try iCapture, which is free.
Overcaffeinated. Angry geeks.