As I learn more about Web design, I realize how easy it is to make a mistake that causes your site to not work properly on a certain browser, or to forget about users with smaller screen resolutions. Firefox is my browser of choice, so that is what my work is usually tested in first. What I have learned the hard way is that it is important to test your work throughout the process, not just when you’re done. Trust me, it’s much easier to fix a problem when you’re checking along the way.

The main things I check as I go along are cross-browser compatibility, markup validation and resolution. My favorite tools to make that easier include a resolution tester, the W3C markup validator, Browsershots and a couple of Firefox extensions. All of these tools are free.

UNK resolution test

University of Nebraska Website Resolution Test

This online test tells you what your current monitor resolution is, and gives you several options to test a site at other resolutions. You can choose a common resolution size ranging from 640×480 to 1400×1050, or input any size you need to check. Click here for the site

Browswershots

Browsershots

Browsershots takes dozens of screenshots of your Web site using many different browsers and operating systems. You can choose a specific resolution, and other options include enabling or disabling Javascript and Flash. It takes a only few minutes for the site to compile your images, then you can choose to either view them online or download them. Click here for the site

Web developer Firefox extension

Web Developer Firefox extension

This extension for the Firefox browser has a plethora of features, but I’m just going to touch on those that go along with the theme of this post. You can view and edit stylesheets, view a page’s source, resize the window and check markup validation all from a toolbar. Essential. Click here for the site.

HTML validator Firefox extension

HTML Validator Firefox extension

This handy-dandy extension puts an icon in the bottom-right corner of your browser that indicates whether the current page was marked up with valid HTML. It’s a quick, easy visual to check your work as you test in Firefox. If the extension finds an error, you can get a report that shows you where in your HTML the problem is, and often a suggestion to fix it. Click here for the site.

W3C markup validation

W3C Markup Validation

This free service from the World Wide Web Consortium allows users to check the validity of HTML or XHTML, CSS and RSS, as well as find broken links in your documents. You can check a site that’s already online by inputting the URL, upload the file or paste the applicable code into the validator. Click here for the site.