Cross browser testing
Ivan | Thu, 2005-07-14 07:55
Cross browser testing and debugging can be the most frustrating exercise for web designers.
Debugging is a headache, but good practices can help you deal with the issue and no, I'm not going to say that you should build table based sites.
The first practice is to discuss the issue of cross browser compatibility with client as early as possible. Get an agreement on which browsers do you guarantee that the site will match the approved layouts and make it clear that the rest of the browsers may not look perfect.
Study the browser stats to make a conscious decision as to what are your priorities. You can see that IE6 is actually growing again and FF is losing market share unfortunately.
Make your site as simple as possible. The more complicated your HTML and CSS the more difficult debuggin will be.
Set up a good test ground. Probably the best way to test your sites is to pay for the sweet services of SiteVista. They don't have a free trial at the moment, but you can watch a demo. The main benefit of SiteVista is the full page screenshot - even below the fold. You can also try browsercam. They have a 24 hour evaluation. If you're looking for a free option check out broswershots.
Although it's virtually impossible to set up a full home grown test lab, since it would require dozens of browsers on several operating systems. But you can create a setup where you can cover more than 95% of users.
Mac
Download all the main browsers available for Mac: Safari, Firefox, Opera, OmniWeb, Netscape and IE5. The rest that is not featured here are mostly based on WebKit, which is virtually the same as Safari.
Windows
Get Virtual PC. You can run VPC with two separate disk images. One that has IE 6 and the other one has IE 5.5. If there is a way to run both on one please let me know. Get FF and other browsers for one of the disk images as well.
Linux
Hmm... Got no experience. Pls. help me out and I'll update the post.
Text based
To get a feel of how your site looks like on text based browsers, you may want to check out Links.
The last most important practice is to collect a library of links for useful bug fix tricks, such as this one. If you know of any good debug links pls include them here as comments.
- Ivan's blog
- Login or register to post comments
Most browsers used in the Linux Distros are cross platform or use a cross platform rendering engine. About the only difference between Firefox for Windows and Firefox for Linux is the font rendering. Font rendering in GNOME for example is much nicer than the way Windows handles font rendering. (GNOME is a (Linux) desktop env.) I think you can very well compared to the Mac OS X font rendering. So there is no real reason to test your websites on Linux if you are already testing them in Mac OS X.
Timon
(a Linux-user)
http://www.xs4all.nl/~snetselr/timon/
An brilliant service and pretty looking site too hehe.
Some very useful pointers Ivan, like actually asking the client what browsers they want the site to work in. I have to say its not something I've done but which I did, although i doubt the clients I've got would know about anything other than "the one comes with my computer".
thanks for the pointers, and sitevista is incredible ^_^
__
Goo
Thanks for the info, SiteVista looks like another keeper in the web designers toolbox. :o )
Although they have their problems these standalone versions of IE will let you run different versions of IE on the same PC, virtual or otherwise.
http://www.skyzyx.com/downloads/
I've currently got a PC sitting next to my PowerBook and Cinema Display with an ugly old beige monitor for testing.
I've tried Browsercam, but wasn't satisfied. Mostly because of the fact that it doesn't have any test that shows a footer.
But SiteVista does. I'm all over that. I don't do enough sites per month to pay for a monthly subscription. But it'll be built in for each site I do that the client will have their site tested with SiteVista.
SiteVista seems cool, but I try to do my testing as inexpensively as possible.
I develop and design most of my sites on a Windows machine, and then do a little extra tweaking on my Mac at home. 9 out of 10 times if it works in both FireFox AND IE flawlessly, it will work in Safari, Opera, etc.
I also keep in mind WHO the site is for. If it is for designers, and based on totally visually content and multimedia, whether or not it works in a text-based browser doesn't matter. For something like that, you can just set up an alternate page for the browsers and let them know your content is visual and non text-based.
My "9 to 5" job is coding state gov't sites for accessibility. We've won several national awards for it, even though we use tables (I like CSS better, but tables can be used correctly and be accessible). But though I'm used to coding for accessibility, on some sites I realize it is not necessary.
For example, my latest site I am working on is my Tibathon site about the national car meet. While I certainly don't mind coding it to be 100% accessible to screen readers for the blind, I also consider the incredible low (probably 0) number of blind people who drive across the country to car meets, so I save myself the unessary tasks and focus on increasing the experience for the target audience.
---------------------
Josh Stevens | Nautilus7 Design
My CB Blog
---------------------
Josh Stevens | My Site
My CB Blog
Regarding browser stats, do not rely on w3schools to reflect the rest of the internet. People visiting w3schools are tech savvy web designers and programmers, and many of them have moved to alternative platforms, such as OSX or just alternative browsers (FireFox).
The rest of the internet will have a higher IE percentage for sure, because the audience are not tech savvy (as high as 80-85% IE combined). The average person uses whatever the computer came with, which is nowadays IE6 on XP.
This is bad news for us (programmers and designers) since we have to support the piece of crap called IE on our web sites.
Regarding Linux, the most popular browser would be Konqueror. It is used by those who are using KDE as their desktop, which are more than those using Gnome, where Galeon would be popular. Both would also have FireFox as well, since it is included in newer distros by default now.
P.S. Konqueror was where KHTML rendering engine was developed, and Apple took KHTML and built Safari around it for OSX.
--
Drupal development and customization: 2bits.com
Personal: Baheyeldin.com
--
Drupal development and customization: 2bits.com
Personal: Baheyeldin.com
Awhile ago, Ethan at Sidesh0w figured out how to run multiple versions of IE on the same install of windows. This is perfect for testing your site in IE 5, 5.5 and 6. I have all three sitting in my little tray thingy in windows on Virtual PC. It's very handy.
They're zipped up and ready for download at Skyzyx here.
Browsercam lets you VNC into their machines, so you can remotely use all the browsers they have on different OS's. This enables you to check out how rollovers work, etc. They also offer screenshots as layered PSD files, so you can check pixel alignment at a glance, should that be important to your design.
Don't forget AOL, especially if you are doing a small biz site. Even though you've tested the site for IE and AOL uses IE, you will get a call from the site owner that something doesn't look right according to their freind using AOL. More than likely it will have to do with the fact that that freind uses the default (tiny) window on their browser and something on the page didn't reflow well.
All of the "degrading nicely" speeches don't mean anything when the site owner's friend is trying to make an issue that the designer made a mistake.
http://www.dolanart.com
Thanks for this article. I have been actually having problems with one of my sites in IE, and it made me rethink the layout!
check out http://kritios.net
Actually it's no problem to run IE 5, 5.5 & 6 on the same machine (or disk image in VPC): http://www.skyzyx.com/archives/000094.php - seems like this guy also made IE 4 up and running.
Don't let the "about"-window of IE fool you though. It'll always display the latest version installed, regardless if you fired up 5 or 5.5. Other than that it works great. Well, at least as great as IE can be.
that one was posted before, sorry. Gotta slow down that mousewheel on 10.4.2 ;-)
Solid info nevertheless i am extremly impatient to run tests manually on different machines. Thank God i cme across a tool called BCT that has just solved my issue. No more headaches. Just submitted a couple of pages for testings and wolla! Got my HTML code checked, got the screenshots of my page across browsers and platforms, i could run even a simple script to test the functionality.
WOW! when i thought that wasnt enough BCT tool even checked for inactive links. I thought this info could be extremly useful to this community. the web address is www.essentiabct.com
BrowserSeal is a new tool which can be very handy, if you happen to use Windows. It exploits the fact that you can actually install locally all browsers that anyone cares to use, including multiple versions of IE. BrowserSeal can use all these browsers to automatically capture the screenshot of your site. It is much faster than any web based service and it can work with web sites on your company's intranet or local hard drive.
Moreover, after you discover some rendering inconsistency, you can actually launch the problematic browser and debug the problem.
http://www.browserseal.com