Troubleshooting the Design

By Jessica Albon

Image by eyebiz

A long-time NIF reader, is getting ready to launch her blog (to which I intend to link, with her permission, when it’s ready). With oodles of experience as a programmer, and as a brilliantly creative gal, she dug in and worked to edit the template on her own.

Everything went swimmingly until it came to using CommentLuv (a plugin that automatically links to your commenter’s latest blog post) which was working, but not displaying in quite the right place. Now, like I said, she’s an uber experienced programmer, but she doesn’t know much about JavaScript, and she thought that that was where the problem was. She Twittered for help.

When we’d spoken by phone a few minutes earlier, I’d assumed she was right, and then, reading her Tweet, I realized there was something I hadn’t asked…

The first step is always another browser

Whenever you notice something that’s not working as you should in a design, don’t assume the code is wrong until you preview the page in another browser or two. (By the way, if you think you’re “safe” because you code for Firefox, you’re really not. Not only does Internet Explorer have bugs that you want to resolve before launching your site, but, believe it or not, so does Firefox. So, sometimes something looks wrong in Firefox and perfect in Internet Explorer, and vice versa, and if you’re checking your work in the wrong browser, you may think you’ve made a mistake when in reality, it’s just a bug in the browser.)

Now, it’s not that you can just put a big sign on your site that says, “Firefox renders those corners improperly, and Internet Explorer puts an extra space at the end of each paragraph,” because you can’t. You have to fix this stuff if you want your website design to look professional and pretty. But, it’s good to know if what you’re dealing with is a browser bug (in which case, Google for hacks) or if there’s an error in the code.

With CommentLuv, she discovered it was an IE rendering problem. So, she hunted for IE hacks that would resolve the problem. If it looked right in IE, but not in Firefox, she would have done the opposite.

My #1 Most Common Mistake

When I’m coding a website design and I think I’ve fixed a problem only to refresh the page and see that the problem is still there, the most frequent problem is I’m uploading the wrong file. So, after you account for bugs, make sure that you’re changing the file you mean to be changing (double check the domain name and the directory and the file name, if you’re using an FTP program). If you’re editing the design directly on the server, this probably isn’t your problem, but check it just to be sure (sometimes, designs have multiple CSS files, for instance, so make sure you’re editing the right one).

Sure, it’s always embarrassing when it happens, and it usually only happens at the end of a long day of programming, but it *does* happen, and it never hurts to double check and make sure it’s not the reason you’re having trouble.

Remove bits one at a time

The most common place for problems are:

• Extra line spaces
• Div tags
• The styling (on the CSS sheet) of the blocks (whether you use Divs or some other method like table cells)
• The CSS sheet itself

The easiest way to track down what you’re dealing with is to take away parts of the code until you isolate the problem. If what you take away takes away the problem, you know that’s the part that needs fixing. If you take away a section of code and the problem remains, you know that section is probably safe. Every so often, you run into a problem that’s occurring because of two parts of your code, but you’d find that out in much the same method (just know that that is a possibility).

Extra line spaces sometimes get rendered in IE. It’s annoying, and it means you have to make your code less easy to read to fix it, but it’s an easy fix–just delete the spaces. You’ll usually be able to detect this kind of error because there will be very small spaces (one pixel in size) that will appear as breaks in graphics.

With the div tags, and styling issues, you’ll need to play around a bit and see what happens. Cut sections out (paste them into a new text document so you don’t lose them), save the new file, upload it, and refresh the page. Eventually, you’ll usually locate the problem. You’ll also get better over time if you do a lot of website design troubleshooting and start to be able to jump right to the problematic section.

When it comes to your CSS sheet itself, run a search before you do anything else for multiples of one style. This most often happens on stylesheets that more than one person has edited, but it happens even when you’re the sole author. If you find multiples of one entry, compare them and make sure that neither of them is responsible for the problem. (There are sensible reasons for having multiples of one style, but personally, I like to merge them and have only one instance of each–it’s a personal choice.)

When absolutely nothing else works

These steps should help you resolve at least 98% of the problems you may run into when you code your own WordPress design (or any web design). But, sometimes, they’re not enough and you find yourself really stuck. When that happens, you have two final options:

1. Take a break. You’ll be amazed at how many problems this actually resolves. Go for a walk, sleep on it, work on something else entirely–just let this particular problem go for a time. Your creativity will often kick in and you’ll find a solution you wouldn’t have otherwise considered.
2. Ask for help. There are lots of people out there who can help, so don’t be afraid to ask. If you’re working on a WordPress design, there’s a whole support community of fantastic people, and you can often get help in online marketing forums. Posting to your blog or Twittering that you need help is often just the ticket to finding someone with the answer. And, of course, you can always ask me here on this blog.
3. Whatever you do, don’t…

There is one thing you must not do, and it is not “give up” (though it’s a good idea not to do that, either). The thing you must not, under any circumstances, ever, ever, ever do is break the site to make it work. Hacks are usually okay (but tread carefully and use Google to research them thoroughly), but actual breaks can really impact your search engine scores, so keep the code clean, even if it means changing your design a bit to accommodate it.

So, if you’re designing your own WordPress design, keep these tips in mind when you get to the troubleshooting stage and you’ll save time and frustration. And, if you’d rather not do it yourself, get in touch because I can help.