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?"
thats usually your best bet
-- ladies and gentlemen we are floating in space!
Do I need a Mac and a Linux machine to make sure it is working on these platforms?
;-)
Yes. Glad I could help out
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.
There's so little difference between politics and jihad lately...
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/
Generally I'll do the dev work in $Mozilla-variant-of-the-week, but trying to keep with W3C standards and checking heavily against the validator. Provided the page is valid against various standards (HTML 4.01 Transitional as a minimum), and it renders ok in both Moz and IE, I'm happy. OTOH, I'm no longer a professional web developer (I have better things to do these days), and for a big client I'd want to check against various other platforms.
Beware the psychokinetic mimes!
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.
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.
There are only 10 types of people: those who understand decimal, those who don't, and, uh, 8 other types I forget.
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).
Do a Google search, and you'll find companies, tools and instructions, etc to help you do this if you are unable or unwilling to purchase the required equipment/software to do it yourself.
Of course, half the problem is knowing the correct question to ask. That's why google is so popular - it gets good results with bad questions, and you can refine your question with repeated searches.
-Adam
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.
Buy a cheap used iMac and make your Windows box dual-boot to Linux. If your situation allows, write the iMac off as a business expense.
I don't know half of you half as well as I should like, and I like less than half of you half as well as you deserve. BB
and your paying the price, you should have tried writing IE and testing Moz, Opera etc. then Then writing Moz, then Opera.
e loper) and click on the little tick thing on the right side of the bar and make sure you have "Standards compliance mode" as the Render Mode, then a quick check on IE (Windows) and your pretty much gonna be OK.
I personally find that if I write for Mozilla Firefox its usually only slight modifications needed for IE etc, and most of that is Javascript related.
IE's rendering engine is deliberately not picky, therefore it stands to reason its a bad choice to program for. Safari (KHTML) and Moz (Gecko) are OSS and as such tend to stick to the standards pretty well.
Opera used to (don't know if its still the case) stick absolutely to the standards so it may make a very good choice. I however don't test for it because of its small market share and it's still closed source.
Use Moz and go with the Web Developer Tools (http://texturizer.net/firefox/extensions/#webdev
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.
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 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.
That is, make sure your design isn't dependent on pixel-level control of everyone's browser as far too many web developers (and damned "content-generator" programs) seem to insist on.
Or in other words, always remind yourself that The Web is Not a Print Medium (Highly recommended, if slightly "fluffy", article). Most of the "hey, it doesn't work/look right in this OTHER browser" problems I've ever seen boil down to the web designer having a pressing attitude that they need to control the users' browsers down to the minutest pixel, and have a pile of browser-specific tricks that depend on recognizing the specific "brand name" of the browser and behaving in a different quirky manner depending on which (of the listed ones) it recognizes.
Many others have already posted the good advice to just "stick to the standards". In case it isn't obvious, that most especially means "don't reference any 'browser quirks' anywhere in your design." Even IE seems to have reasonable support for "standards compatibility mode", so if you stick to standards, you will greatly cut down the potential problems that necessitate testing your pages in 10+ different browsers on 4+ different platforms in the first place.
(The rare individual that really DOES require iron-fisted dictatorial control of the pixel-by-pixel layout of their page shouldn't be using HTML anyway - that's what PDF is for...)
Hacker Public Radio is our Friend
You will probably never see this as the standards folks will mod me into oblivion, but here goes: if you use the time-tested combination of good old ugly tables and single pixel gifs, your site will look good in almost every browser imaginable. A quick test in Firefox and the latest IE should be all you need to do.
:-)
One exception is to use CSS for the font formatting stuff.
Standards are a great concept, but with web design you need to deal with harsh reality: browsers suck. Look at the source code at the front page of google.com or yahoo.com if you want to see what the big boys are doing.
Wait until Firefox has 95% of the market, then move to standards
slashsearch.org - slashdot search. powered by google.
-
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.
IE hasn't had any worthwhile rendering engine improvements since version 5, giving it the absolute worst standards compliance of any browser shipped today.
Never forget that IE wan't designed as a developer tool, is was designed to kill Netscape. True to MS form, trying to decipher any of IE's pitiful error messages will only cause migraines.
The W3C stopped development of their own reference browser (Amaya) because Mozilla's standards support is so good.
And stop using dreamweaver. It is incapable of generating compliant code, its javascript library is optimized for 3.x browsers, and no one ever learned HTML by using dreamweaver. It's appaling to me how many people claim to know (X)HTML but don't. Macromedia doesn't really give a damn about standards anyway. DW is also why no one seems to understand CSS... they never see it used effectively. All this and DW uses IE to render pages; see above for why this is bad.
Every so called "web designer" needs have their DW uninstalled and be forced to code pages by hand for a week to see how good they really are.