Test Your Web Design In Different Browsers With Browsershots.org – It’s Supa-Kool
Test Your Web Design In Different Browsers With BrowserShots.org Or Else!
If you’re styling your website with CSS (who isn’t?) then you will probably be aware of some problems your styling will display on certain browsers, IE 6 and IE 5 in particular. Most designers perfect their styling in Firefox and IE 7. But how does your site look on a Mac running Safari 1.3 or Linux Opera 9.50 or WindowsXP Internet Explorer 6?
“Who cares?” says you, and that’s fine if that’s your line. Chill.
I’m not the browser police or anything, but maybe take a quick look at your website analytics. Chances are you’re getting at least half of your traffic from visitors running Internet Explorer. And chances are about half of them are still using IE 6 to view your site.
Do you know what your site looks like on IE 6?
Well lets hope it looks supa-kool but there is a likely hood that your CSS
looks shi… is not displaying as you and God had intended (for reasons to do with how IE 6 renders the CSS Box model that I’m not getting into right now).
Anyway for a free or cheap solution to your browser blues check out www.browsershots.org, it’s supa-kool!
What is Browsershots?
From the horse’s mouth…
“Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.”
Now the free services is fine if you have time to write your novel between loads of your screenshots but it might be best to splash out 10 or 15 notes and register for the paid service for a month at a go, it is well worth the money.
You Will Need To Know How To Target CSS for IE 6 (or other browsers) Of Course, Here’s How
In your <head></head> tags you’ll need to target your CSS for IE 6 or lower IE browser. So very quickly (because I’m late for dinner and my wife will kill me this time) add the following to the head tags:
<!–[if lte IE 6]>
<link href=”css/ie_hacks.css” rel=”stylesheet” type=”text/css” />
This will display the ie_hacks.css stylesheet for IE 6 and lower browsers. You can do this for any browser. You will of course also link or import a stylesheet for IE 7 and Firefox as normal.
I better get going!
Just keep blogging