Sometimes figuring out what is wrong with your Web design can be very frustrating. Some things can be very difficult or impossible to fix, but if you are systematic about your analysis, you can find the problem and fix it more quickly.
Validate Your HTML
When I have a problem with my Web page, the first thing I do is validate the HTML. There are many reasons to validate HTML, but when you have a problem that should be the first thing you do. There are already many people who validate every page automatically. But even if you're in the habit, it's a good idea to check the validity of your HTML when you have a problem. That will ensure that it's not a simple error that causes your problem.
- HTML Validator
Validate Your CSS
The next most likely place where you'll have problems is with your CSS. Validating your CSS serves the same function as validating your HTML. If there are errors, that will ensure that your CSS is correct and that is not the cause of your problems.
- CSS Validator
Test in Multiple Browsers
It may be that the problem you're seeing is a result of the Web browser you're viewing it in. If the problem occurs in every browser you can test, that tells you something about what you have to do to fix it. For example, if you know that the problem only happens in IE 6 or 5, you can create a style sheet or alternate page for that browser, in the event that you can't fix the problem.
Simplify the Page
If validating the HTML and CSS doesn't help, then you should narrow down the page to find the problem. The easiest way to do this is to delete portions of the page until all that is left is the portion with the problem. You should also cut the CSS down in a similar fashion.
The idea behind simplifying is not that you'll leave the page with only the fixed element, but rather that you'll determine what is causing the problem and then fix it.
Subtract and then Add Back
Once you have narrowed down the problem area of your site, begin subtracting elements out of the design until the problem goes away. For example, if you've narrowed down the problem to a specific <div> and the CSS that styles it, begin by removing one line of CSS at a time.
Test after every removal. If what you've removed fixes or completely removes the problem, then you know what you need to fix.
Once you know exactly what is causing the problem begin adding it back with items changed. Be sure to test after every change. When you're doing Web design, it's surprising how often little things can make a difference. But if you don't test how the page looks after every change, even seemingly minor ones, you may not determine where the problem is.
Design for Standards Compliant Browsers First
The most common problems that Web designers face revolve around getting pages looking the same in most browsers. While we've discussed that it can be very difficult, if not impossible, to get Web pages to look the same in all browsers, it is still a goal of most designers. So you should start by designing for browsers like Firefox, which are standards compliant. Once you have them working, you can play with the other browsers to get them working.
Keep Your Code Simple
Once you've found and fixed your problems, you should stay vigilant to keep them from cropping up again later. The easiest way to avoid problems is to keep your HTML and CSS as simple as possible. Note that I'm not saying you should avoid doing something like creating rounded corners simply because the HTML or CSS is complicated. Only that you should avoid doing complex things when a simpler solution presents itself.
Posted in: Web Design and Applications