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.
- 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
- 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.
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.
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:
- YSlow https://addons.mozilla.org/en-US/firefox/addon/5369
- Pixel Perfect https://addons.mozilla.org/en-US/firefox/addon/7943
- Firecookie https://addons.mozilla.org/en-US/firefox/addon/6683
- PageDiff https://addons.mozilla.org/en-US/firefox/addon/4274
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.
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?)
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)