...

View Full Version : Cross browser testing?



mikehende
11-11-2010, 05:05 PM
Hi, can anyone provide a reliable testing utility for me to test sites on the main browsers please? Best I am coming across is this:

http://browsershots.org/

but it doesn't show me the actual browsers I am seeking?

Excavator
11-11-2010, 05:17 PM
Hello mikehende,
browsershots.org is the only one I've ever used. What browsers is it missing?

digitalclubb
11-11-2010, 05:19 PM
Spoon offers a great Browser Sandbox:

http://www.spoon.net/browsers/

Install a simple plug-in and you're away :)

mikehende
11-11-2010, 05:36 PM
Hello mikehende,
browsershots.org is the only one I've ever used. What browsers is it missing?

I went to the page, input the url, waited and it only showed 8 browsers and none of the main ones except for Firefox?

mikehende
11-11-2010, 05:42 PM
ok, it's working now, I can see the screenshots but tell me this guys, is that all where testing is concerned to simply see that your home page is showing ok in the major browsers?

teedoff
11-11-2010, 06:07 PM
For some reason, sometimes it takes quite a long while for all your browser shots to show up. I usually just check about 10 or so of the most popular browsers and their outdate versions(IE in particular) to test. Doesnt make sense to test on 30 or 40 browsers to me.

mikehende
11-11-2010, 06:17 PM
I've been told to test only the 5 main ones FF, IE, Chrome, Opera and Safari, if this is correct, then why check the oldest versions of these operating systems as opposed to the latest versions?

MattF
11-11-2010, 06:36 PM
I've been told to test only the 5 main ones FF, IE, Chrome, Opera and Safari, if this is correct, then why check the oldest versions of these operating systems as opposed to the latest versions?

Not everyone runs the latest versions. Btw, they're browsers, not O.S's.

mikehende
11-11-2010, 06:54 PM
Oh, yes, I had not meant to refer to operating systems, but what about mobile handheld devices and screenreaders e.t.c, how you test on those?

teedoff
11-11-2010, 07:12 PM
I use device central, an adobe product that has hundreds of handheld screen sims, to test mobile devices. There are some sites out there as well, particularly for the iPhone and iPad brands, that utilize screen simulations to check your site on their products. Cant remember the site urls, but I'm sure a quick google will find them

As Matt pointed out, you must test for older browsers, epsecially for IE 7 and 6. Some even test as far back as IE 4 and 5. I think the latest survey suggested up to 10% of internet users still use IE6. Better to be safe and cover all your options.

Also, as well know as Firefox and IE are here, if you have need to target overseas users, then they may have different browsers altogether. You would have to research that.

digitalclubb
11-12-2010, 09:38 AM
Did you even try the Spoon link I showed you? If you're in a windows environment it will let you run all major browsers in a standalone fashion.

Browsershots is a poor choice of testing medium because you can't test core functionality and left with a single image of one page at a time.

Realistically you should be installing all the newest versions of browsers on your system, then using something like Spoon to test the older versions, such as IE6 etc.

mikehende
11-12-2010, 11:49 AM
Yes, I tried installing the Google Chrome plugin and it said it did but I don't see an icon on my desktop to launch that browser?

mikehende
11-16-2010, 12:21 PM
Can anyone tell me how to open this software please? When I install it, I don't see an icon anywhere to launch the software?

http://www.spoon.net/browsers/

mikehende
11-16-2010, 09:44 PM
Ok got it now thanks so please let me see if I understand what browser testing involves?

1] Zoom in and out of each webpage on the new site to see if all content is centered and all divs stay together and not separated?

2] Open the site in question on the major browsers IE, FF, Opera, Safari and Chrome, any others or would those do?

2] When on those browsers exactly what am I looking for and/or what should I do? Just make sure the page fits correctly on each of the browsers?
Check to see all animations, slideshows or whatever is working properly?

Anything else please?

Arbitrator
11-16-2010, 11:12 PM
1] Zoom in and out of each webpage on the new site to see if all content is centered and all divs stay together and not separated?You want to make sure that your page degrades well when zoomed, yes.

However, make sure that you test in text zoom modes since that's where layout issues seem to occur. In Firefox 3.0, for example, going to View: Zoom: Zoom Text Only will turn this non-default option on. (Default zooming zooms everything. That may preserve layout on the one hand, but, e.g., make images look like crap on the other, hence why text zoom is still in use.)


2] Open the site in question on the major browsers IE, FF, Opera, Safari and Chrome, any others or would those do?Those are the big five that you should test in. Other browsers such as Avant or Seamonkey simply reuse the rendering engines from the major browsers.


2] When on those browsers exactly what am I looking for and/or what should I do? Just make sure the page fits correctly on each of the browsers?
Check to see all animations, slideshows or whatever is working properly?You probably want to go through each page give it a quick view and test all of your scripts to make sure that they work. Depending on how concerned about accessibility you are, you may want to go through and make sure the sites work when printed, with CSS disabled, with scripting disabled, with images are disabled, when text is zoomed, etc. Certain tools (like Firefox extensions) make this process easier.

mikehende
11-16-2010, 11:28 PM
Depending on how concerned about accessibility you are, you may want to go through and make sure the sites work when printed, with CSS disabled, with scripting disabled, with images are disabled, when text is zoomed, etc. Certain tools (like Firefox extensions) make this process easier.

I have FF web developer toolbar, which feature can I use to test accessibility please?

MattF
11-16-2010, 11:38 PM
Disabling styles and making sure the site is navigable is the first thing. Disable scripting and make sure full functionality is available. There's the Total Validator plugin for checking things like alt tags, link structure etc. There's one addon called Fangs which literally mimics a screen reader. HTML Validator for checking validity, WAVE toolbar, WCAG contrast checker, (for ocular related disabilities) and Web Developer are the primary addons I use for checking across the board.

NoeG
11-17-2010, 12:54 AM
well is it even possible to validate your site to function in every browser possible? old and/or new? or is it fine to make sure it works in all the primary browsers like IE,FF,Crome,Safari ect and not concentrate so much on those weird ancient browsers?

MattF
11-17-2010, 01:00 AM
You'll never get everything pixel perfect on every browser. There are just way too many deviations and quirks in browsers. Plus, support for technologies differs etc. Get it working best as in the modern browsers and backport to the older browsers if you must. Good, clean valid code will usually appear fine in 95% of cases without further ado however. It's generally IE more than anything which screws things up with a vengeance. As to whether you want to try and support that piece of crap depends on either how patient you are or whether you're being paid to support it.

Arbitrator
11-17-2010, 04:41 AM
I have FF web developer toolbar, which feature can I use to test accessibility please?In the Web Developer extension:


Test with scripts disabled via Disable: Disable JavaScript: All JavaScript. You can use the NoScript extension of you want to selectively disable scripts based on domain.
Disable CSS with CSS: Disable Styles: All Styles (Ctrl+Shift+S). This basically helps you see if you usedproper HTML/XHTML markup since the default formatting should be adequate to read the document.
Disable images with Images: Display Alt Attributes.

This will substitute img element images with their alt attribute fallback text. This gives you both an opportunity to see how it looks and to style it. (You can style the fallback text as if the img element is a span or div element except in Internet Explorer where fallback content is treated as unstylable replaced content.)

This will also allow you to see what your page looks like without background images. That's useful for seeing if your text looks right on the background color behind the image.

mikehende
11-17-2010, 11:55 AM
Depending on how concerned about accessibility you are, you may want to go through and make sure the sites work when printed, with CSS disabled, with scripting disabled, with images are disabled, when text is zoomed, etc. Certain tools (like Firefox extensions) make this process easier.

Still confused as to why the need to test pages with scripting, css and images disabled, can you explain please?

MattF
11-17-2010, 05:52 PM
Still confused as to why the need to test pages with scripting, css and images disabled, can you explain please?

Due to the fact that not everything either understands them or even bothers with them. Text browsers, screen readers, bots etc. You should be able to view a web page with no formatting or images and have its layout and alt tags make sense and keep it understandable. You should be able to use a web page with scripting disabled and have the full functionality available which is available when scripting is enabled. Just remember, the likes of JS and such should be used for enhancement only, not sole functionality. If you need CSS, images and scripts enabled to make a page understandable or functional, you're doing something wrong.

mikehende
11-17-2010, 06:01 PM
Very well explained, appreciate it!

Arbitrator
11-18-2010, 05:52 AM
Still confused as to why the need to test pages with scripting, css and images disabled, can you explain please?MattF covered most of it, but to add a few points:

Cell phones may have scripting disabled or allow you to disable it. Devices like phones will simply refuse to load some pages if the page is too resource intensive too.

Ditto for search engines like Google. If your content can only be accessed via a script call, Google isn't going to see it.

You should pretty much have a server side backup script for every client-side script that you use unless it's just a cosmetic script. Of course, a lot of developers don't do this right because it's very time-intensive since you essentially have to write most scripts twice in different languages (e.g., JavaScript and PHP).
CSS-disabled testing is mainly for yourself to ensure that your page uses the correct markup. Most users aren't going to view your document without CSS. This might also reveal that you're improperly conveying information in a way that requires CSS though; for example, you might have a text header image that's actually just a background. That's probably not something that should be in a CSS style sheet since the name of your site is not style; it's content.
Images disabled is to ensure that you have decent alt attribute fallback text and that you've styled the fallback in a way that's readable. This text will be seen by search engines (in place of the image) and is also fallback in case the image doesn't display for whatever reason or if a user with a slow connection or weak device chooses to disable them. (I know some pages won't load on my phone if they have too many images so that would be a good reason to disable them; I also used to do this when I was using dial-up on some sites.)

wcompton83
12-12-2010, 08:46 PM
I too am having trouble with my content extending outside of the desired height. I've been working on a website for a client for a couple of weeks and I've recently had to do a rush job and on a new interface (don't ask). Anyways I used a bit of jquery and I have several different css scripts embedded in the website. It shows up fine on computers, but for some reason my background-image for my website runs waaaay beneath the footer on smart phones. The site name is http://sette-demos.thesette.com/. Can someone please help me out?

Arbitrator
12-13-2010, 06:45 AM
I too am having trouble with my content extending outside of the desired height. I've been working on a website for a client for a couple of weeks and I've recently had to do a rush job and on a new interface (don't ask). Anyways I used a bit of jquery and I have several different css scripts embedded in the website. It shows up fine on computers, but for some reason my background-image for my website runs waaaay beneath the footer on smart phones. The site name is http://sette-demos.thesette.com/. Can someone please help me out?Could you please refrain from hijacking threads? If you have an issue, start a new thread.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum