Solving Problems in Web Design

Steps to Take When You Have a Design Problem

Problems with a website
Learning how to best report website issues is important.

If you've ever built a website, you likely discovered that things don't always go as planned. To be a web designer means you need to get comfortable with debugged problems with the sites you build.

Sometimes figuring out what is wrong with your Web design can be very frustrating, but if you are systematic about your analysis, you can often find the cause of the problem and fix it more quickly. Here are some tips you can use to make that happen.

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, like a misspelled HTML element or property, that is causing 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

Validate Your JavaScript or Other Dynamic Elements

As with HTML and CSS if your page uses JavaScript, PHP, JSP, or some other dynamic elements, you should make sure that they are valid as well.

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 a certain browser, you can dig deeper into why just that one browser may be causing an issue while others are fine.

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 or "comment out" 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 the best browsers first, which includes those that are standards compliant. Once you have them working, you can play with the other browsers to get them working, including older browsers that may still be relevant to your site's audience.

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.

Get Some Help

The value of someone who can help you debug site problem cannot be overstated. If you have been looking at the same code for awhile, it becomes easy to miss an easy mistake. Getting another set of eyes on that code is often the best thing you can do for it.

Edited by Jeremy Girard on 2/3/17