Ah, debugging–the most annoying part of web design, at least for me. Drives me nuts to upload a page I think is perfect, down to the last tag, and find instead that something within that lovely code has gone horribly awry. (Debugging this WordPress layout was especially annoying!)

And yet, if we’re going to be responsible web designers and webmasters, we have to check through everything we upload to make sure it’s exactly what we intended. From unintentional (and often funny) typos, to broken links and other bits of HTML, to an unintelligble wall of text with no formatting, and all the way to colors displaying terribly, we have to make sure our sites are displaying the way we intended!

Content Bugs

• Typos
  Yes, we are all human and can make mistakes. That’s what causes typos in the first place, after all! Many’s the time I’ve meant to type “from” and typed “form” instead, or typed some horrible misplaced series of letters when my fingers got off the home keys. (But that’s the reason I got good at hitting the Backspace key at lightning speed.)

  When you go through your content, check for typos first, before you do anything else. Lots of misspellings makes your content look very amateurish and ill-written, even if you know exactly what you’re talking about, and it will give off the wrong vibe about your site. Even if your site is a personal site, you want it to be “dressed for success” in its content.

  If you’re not sure about the spelling of the word, you can check Dictionary.com to compare spelling. Also, for a quick fix, you can even type your spelling of the word into a search engine, which generally autocorrects your spelling with the infamous “Did you mean ____?” line at the top of the page.

• Unattractive/Listless Phrasing
  While offhanded phrasing like “Meh, I don’t really care about this section/article/page, but whatever” may sound okay to you, it will definitely leave your viewing public wondering why THEY should care about your site. If even the creator can’t be bothered to care about this content, why should they? Make sure that you’re using phrasing that plays up the best parts of your site, so that it shows others why they should care about what you’ve written.

  Example: Instead of “This is the content, but it’s still under construction…meh,” you could try saying something like “This section is still under construction, but enjoy what is here so far–and keep checking back for updates!”

• Half-Hearted Explanations
  Use clear and concise language, especially when you’re explaining something. (Yes, yes, I know, I should be following that myself…pardon my tendency toward verbosity, LOL!) If you’re writing informative articles, regular blog content, or anything on a site, always keep in mind that some people may not have an intimate knowledge of your subject matter.

  Use links to basic reference material if you don’t want to have to rehash all the most essential details, but do try to explain your content well enough so that even someone who is new to your topic can catch on. This will help make your site much more approachable, and might even interest your visitors in becoming more involved in your subject matter themselves!

Link Bugs

• Broken Links
  As many links as I collect from all over the Internet, just as many of them end up broken over time. It is very, VERY hard to police your links page and keep up with all the broken links–it could end up being a full-time job in and of itself!

  To combat broken links, set aside a time each month to review each of the external links on your links page, content pages, etc. And don’t just rely on an automated link-checker; those will give you false positives on “parked” domains, or spammy domains that are more robot-generated than anything. Physically go through and click on every link to make sure the site you intended to link to is still there.

• Mistyped Links
  Even if the site still exists, nobody is going to be able to follow your link if you type it like “http:www.thesite.com/” or “htp:/www.site.com/”. It’s easy to mistype stuff like this when you’re trying to assemble a page, especially in a hurry. If you click a link on your site that you KNOW for a fact exists and it doesn’t do anything, investigate how you typed the link–you might find the reason there.

Formatting Bugs

• Lack of Headings/Subheadings
  When walls of text are not broken up by headings and subheadings, it doesn’t give anybody a reason to keep reading. Use these more boldly-formatted, summarizing lines to help your users find the information they need as quick as possible, and to draw their attention to the content itself.
• Not a Paragraph Tag in Sight
  If you’ve formatted a big page of text using only one beginning p tag and one ending /p tag, it can lead to the “wall of unreadable text” phenomenon. Your awesome content will end up looking like a formless blob…trust me, I know. It’s best to break up your text into smaller paragraphs so that your users don’t look at it and get intimidated, even if you think your paragraphs look too small.
• Text Size Too Small
  I will never understand why 8px font became appropriate for personal sites, but for a good long while, it was. Imagine font size from your visitor’s perspective–would you want to read long pages of text that look like “fine print” on some contract? If your content’s very important to your site, you want to make sure it’s readable, and not just with a magnifying glass.

  As a rule of thumb, I never go below 10px on any font size (not even Verdana), and usually not below 12px if I can help it. 14px helps some of those more cramped-looking fonts (like cursive or more elaborately-ornamented fonts) expand a little bit so they are easier to read, too.

Color/Design Bugs

• Wrong Color Appears
  Colors, like links, are susceptible to being typed wrong or accidentally backspaced. If a color renders absolutely wrong on your page, check to make sure all 6 of the hexadecimal numbers or letters are in place. (Sometimes color will render as slightly different based on monitor color settings and what format you saved your images in…keep that in mind. PNGs and JPGs usually preserve more of the intended color in images across most browsers and computer monitors.)
• Misbehaving Layout
  Divs, tables, sidebars, and navigation are all infamous for inexplicably messing up on certain pages. Check all of your pages to make sure they ALL display correctly–if you have a random layout error, it could be part of your content stretching the page out too far, for instance.

  Also, check widths and heights of various layout structure. For instance, when two divs which should float side-by-side instead stack one on top of the other, one of their widths is likely thrown off by something (either a measurement or something contained within the div itself).

Summary

Bugs on your site don’t have to be just server-side or script-related. Much of how visitors perceive our sites comes from what we ourselves put up on the site. Taking time to browse our own websites, page by page, can help us catch errors in content, design, layout, and links…plus, it helps us remember how it feels to BE a visitor!