Tools for Testing your Web Design
May 14, 2007 | Comments (8) | Filed under: Web Design
When it comes to web design, anyone who’s ever had to do it knows the headaches involved in multi platform compatibility and the inevitable tweaks needed to make your site look identical on all browsers. Nothing is more painful than coming up with an absolutely amazing layout for Firefox, only to have it look like absolute trash with Internet Explorer.
Unfortunately, the necessity of these tweaks is likely to never vanish. As a result, every web designer needs a solid set of tools to help them test their design on all platforms. Each tool can act as a powerful weapon in the designers arsenal and can help you develop a highly compatible layout.
Here are some of the ones I’ve personally used to great success. I talked about a few of these in last weeks Massive List of Web Design Resources, but I thought they warranted a closer look with more details. These have all been absolutely invaluable to me and I hope they’ll be just as useful to you as well:
- BrowserCam - An amazing online tool that can help you test the layout of your site on a wide variety of operating system and browser combinations. Results are relayed very quickly and you can test and tweak your layout almost realtime for results. The system does have a service fee after a free trial, so it might not be for everyone.
- IE NetRenderer - IE NetRenderer lets you see how your site looks in Internet Explorer without the hassle of actually having to launch IE. A nice plus for anyone like me that buried their IE shortcut long ago.
- Browsershots - BrowserShots is a similar tool to BrowserCam, except completely free to use. The big difference is that BrowserShots results are not realtime, and you may have to wait for many minutes to get your results. Then again, it’s free, so you can’t really complain that much either. I find BrowserShots is a great tool to test my layouts in once I’ve manually tested them on most platforms just to double check the more obscure ones for compatibility.
- FireBug for Firefox - FireBug is the ultimate addon for tracking site problems from within Firefox. Once installed, you get a much more comprehensive error tracking platform to help you diagnose problems with things such as JavaScript and HTML markup errors. A very handy extension and one I install instantly every time I get to a bare bones Firefox installation.
- IE Tab for Firefox - Where IE NetRenderer is a web based IE compatibility check, IE Tab is a firefox addition that can accomplish the same goal. As the name might suggest, IE tab allows you to open pages inside a firefox tab, as if that tab was an actually IE. Another victory for the anti-Microsoft movement.
- HTML Validator - One of the best ways to ensure everything on your end is as compatible as it can be is to run your site through an HTML Validator. These tools can show you any major mistakes in your site markup and give you tips and suggestions on how to fix them.
If you know of any other tools that can help out designers, drop us a line in the comments and let us know. The more tools we have, the better chance we all have at keeping out sanity
feel free to leave a comment
Comment Guidelines: Basic XHTML is allowed (a href, strong, em, code). All line breaks and paragraphs are automatically generated. Off-topic or inappropriate comments will be edited or deleted. Email addresses will never be published. Keep it PG-13 people!
XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
All fields marked with " * " are required.
Welcome
Make Money
8 people have left comments
Don’t forget the “Web Developer” extension for Firefox. I use it extensively when tweaking my two Wordpress blog. There’s more tools than I can name here in one extension but the real time CSS editor (shows your tweaks on the fly and once done, you can save those tweaks to a local “style.css” file you can upload to your theme) and the link to the validation tools alone is worth having the extension installed and that’s only a few of the tools and functions Web Developer offers. You can get it right at the Mozilla add-ons site.
Web Developer is an excellent addition to another great list of resources. I needed and IE tool.
How important is it that things validate if they work? I started using a new theme that says it’s XHTML compliant but when I checked, bam, lots of missed tags. Do I spend the time to fix it or let it go? The CSS has over 200 errors! I just want to get a site up, and start running it.
It’s fine to let it go, but writing compliant markup is a good habit to get into yourself. Search engines are rumored to validated source, and it also ensures you’ve done everything on your end to be compliant.
That said, this theme isn’t complaint either, and I am sure MANY of them aren’t.
i wanted to know any tool which let me see how long my page takes to fully load in different internet connection speeds.. like in dialup …. any idea..
I tried browsershots at least 3 times and never did see the final output. Can’t remember exactly but I believe it puts your site in the queue and tells you to come back later to view the results. It sounded like a great idea. Wish I had actually seen the output.
@hem - Try out the Web Site Analyzer:
http://www.websiteoptimization.com/services/analyze/index.html
@bret - I’ve used browsershots quite a few times and sometimes I get what you’re getting, and other times it works like a charm. Guess that’s what you get for free
Thank you — super helpful list.
Thanks for the handy list. I just went through a redesign, but I need to flesh it out a bit more. I kept things simple until I had the time to check all the compatibility things. Blargh! What a pain!