Developing for multiple browsers *sigh*

I know it’s unfortunately the “taboo” of modern website design, but many developers don’t want to simply leave their IE7 visitors and IE6 visitors in the dark. It’s fine for sites like this one, or for web applications but what about corporation websites? For sites that HAVE to support older/alternative browsers. This came to light ever more when I recently worked on a website which would mean that customers worth millions could possibly be using IE6. There’s 50% of employees there too who still run IE7 so not supporting them wasn’t an option. I needed (and used) a large set of tools to help me accomplish this task, and I’m going to tell you about them.

Every web developer should (and probably does) use these tools on a daily basis. They streamline your development and help speed up little niggles with your site.

Web Developer Toolbar

fftb

This handy toolbar includes features such as in browser CSS editing which lets you see CSS changes live, the ability to disable Javascript, Cookies, CSS and Images (for usability testing) and includes many handy features.

googleSome fancy tricks also include:

  • Element outlining
    This allows you to see which <div/input/anything> tags are lining up wrong and combined with the CSS editor proves a powerful tool in element alignment.
  • Disabling CSS
    This allows you to see how your layout holds up with browsers which don’t support CSS (such as screen readers). If your content is laid out poorly, it. will. be. read. out. loud. poorly.
  • Browser Resizing
    Want to see how your site looks in a 1024×768 browsers? Click the re-size button and the toolbar will set your browser window to any size you specify!
  • Quick Validation links
    Want to know if your XHTML or CSS validates? There’s quick handy links under the Tools drop-down.
  • Generated Source vs Source
    Is your Javascript messing up your code? Then view the Generated Source to see what it’s actually doing to your pages.
  • Quickly Edit HTML & CSS in-line
    It’s a quick and dirty way to see how your new CSS/HTML code works in your site. Simply open the editor and type away to see your page update live.

There’s many more options you can play with. All you need is Firefox and the Web Developer Toolbar.

Firebug

Firebug

Firebug is a tool used by almost every web developer in the world. If you’ve not installed it yet, do it immediately as it will save you many man hours fixing bugs in your websites code. It’s had over 19 million downloads and averages 22,000 downloads every day.

Colorzilla

colorzilla

When I can’t remember how to count in hex (which often happens) I use Colorzilla. It makes sure my #009ecc is not #02a4d3 and that my #666 isn’t #999. It’s best to keep consistency and is what separates a good designer, with a great designer.

There’s loads more Firefox Add-ons you could also check out:

Internet Explorer Developer Tools

Internet Explorer Developer Tools

On the Internet Explorer front there’s not much for the modern Web Developer. However, using the Firefox tools above covers most if not all of your needs, except for IE8, IE7 and IE6 testing. This is what I’ll go over next.

The best tool is actually one released by Microsoft themselves. The aptly named Internet Explorer Developer Toolbar which gives you a few tools to play with which include a CSS and HTML editor, the ability to disable CSS and images, use a colour picker and outline elements. It’s basically a shorter version of the Firefox web developer toolbar. It also allows you to quickly switch between IE7 and IE8 browser rendering. Simply select which browser mode you need and you can see what your page looks like in IE7.

Now for IE6 (cringe). I know a lot of developer are now dropping support but as previously mentioned sometimes it’s not an option, and we sometimes need to think about this when developing mass market websites.

Spoon.net

It’s a tool I only recently found and because Microsoft won’t properly develop something which lets you run IE6 on your machine, Spoon developed a browser plug-in which lets you run ANY browser, well, IN browser. They call it “App Virtualization” and I call it magic as it let’s you run IE6! (note, as of writing I couldn’t get it to buffer on Windows 7 64-bit but could on Vista (32) and XP (32), let me know, maybe it needs to be XP Virtualized?)

Adobe BrowserLab

adobe

This amazing tool lets you preview your pages side by side and even overlay pages (known as onion skin). You can also preview your site in many browsers which include Internet Explorer 6/7/8, Safari 3/4 and Firefox 2/3. The only downside is you can’t preview it as a functional page so can only be used for styling sakes, and it’s a little slow to run sometimes.

I hope you found these tools useful for your web developing needs and good luck (you’ll need it if your working with IE6)

3 thoughts on “Developing for multiple browsers *sigh*”

  1. Good article, but I must add I run IE6 on my XP SP3 install without a problem also IE3,4 and 5 runs.

    I use something calld Multiple IE’s

    Cheers
    Chris

  2. @ Chris, I used that too (and nearly included it) but it’s a little buggy to say the least and includes many errors popping up. It also doesn’t like input fields in IE6 for some reason which kills form validation in IE6. Spoon on the other hand has no errors. Nice tool though!

  3. @Mark, I will give that Spoon.net a go, Like you say for personal projects we can build for future and current browsers but for commercial sites we need to be looking at all browsers including IE6

Comments are closed.