When Bad Websites Happen to Good People When Bad Websites Happen to Good People When Bad Websites Happen to Good People
Tip 1 Tip 2 Tip 3 Tip 4 Tip 5 Tip 6 Tip 7 Tip 8 Tip 9 Tip 10

Tip 6: Website Code – What’s Under the Hood?

What good is an uber-cool car if the engine that runs it is utter shite?Website coding is like the forgotten middle child of site creation. Seldom discussed when sketching out wireframes and frequently overlooked within the make-it-pretty world of design, coding is the workhorse of functionality and is usually relegated to the geek-speak world of programmers.

But repeat after us: Code may not be sexy, but it's very important. Code may be "under the hood" and invisible to most, but what good is an uber-cool car if the engine that runs it is utter shite?

As a marketing manager, business owner or creative team member, you may not ever have to know how to code a site yourself, but you do need to understand that if your code isn’t up to par it can reduce search-engine friendliness, user-friendliness and even hamper the look of the site.

We’ve compiled some simple code dos and don'ts to use as a starting point for discussion with your programmer or web designer.

Spider-Inhibiting Design

Stay clear of these "features" if you want search-engine robots to easily crawl and index your site:

  • HTML frames
  • Flash-only navigation
  • Javascript-only navigation
  • Using a PDF when a web page would do
  • Pop-up windows for keyword-rich content

Code Bloat

Sleek, clean code is a thing of beauty. Here are a few tips to streamline your code:

  • Go table-less for non-tabular data layout wherever feasible
  • Use external CSS files as much as you can: keep style information separate from site content
  • Style your content using "semantic markup" that uses headings and other tags to define the function of each part of the page
  • Ensure your website passes W3 validation and has as few errors as possible

Don't Confuse the Browser

Browsers will go a little batty when presented with code they don’t understand, like:

  • Specifying non-standard fonts, which forces the browser to make decisions about what font the site will display with – and that may be a font you never intended
  • Missing Doctypes (“document type declaration”) send browsers into “quirks mode,” a type of browser conniption fit that may also render the site in all kinds of unintended ways

Non-Optimized Images

All images should be optimized for the web. This means photos should usually be JPEG images and non-photographic logos or graphic images should generally be rendered as GIFs or PNGs. Files should be compressed to the smallest possible size with the least loss of visual quality – it's a balancing act.

So get in there, lift up the hood of your website and take a look.

Coding may not be as exciting as wireframes and mockups, but it is the engine that keeps your site performing at its best. A peek under the hood along with regular maintenance and servicing can do a world of wonders.

Creative Commons LicenseYou are free to use this tip's graphic under this Creative Commons license as long as you provide attribution to When Bad Websites Happen to Good People and provide a link back to this site.

2 Responses to “Tip 6: Website Code – What’s Under the Hood?”

  1. 1

    Absolutely agree with your points.

    I’m curious, though — your CSS throws up 32 errors at http://jigsaw.w3.org/css-validator/. (See sample results at http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.whenbadwebsiteshappentogoodpeople.com%2Ftip6%2F.) Is there a reason you don’t consider this to be a problem?

    (I’m not being snide; I’m honestly wondering. I have never been certain how serious these sorts of errors are.)

  2. 2

    Hi Donna,

    Thanks for taking the time to look at our site so closely and ask about CSS validation.

    There are two sets of CSS warnings/errors that show up for this site.

    1) Properties that are only valid in non-Internet Explorer browsers, such as Firefox & Safari. Specifically, those properties do things like round the corners of the boxes that surround each tip and comment and change the opacity of the social-bookmarking icons below each post. In IE browsers those properties “degrade gracefully” – for example, by displaying as regular, sharp-edged rectangles, instead of rounded rectangles. Since these effects are entirely aesthetic we opted not to worry about the validation issue.

    2) CSS declarations in the Yahoo User Interface (YUI) CSS reset code – http://developer.yahoo.com/yui/reset/ This code is widely used to reset CSS code on websites before custom code is applied. The reason some of it does not validate is that it uses asterisks to trick certain browsers – again, usually Internet Explorer, which has traditionally been resistant to standards-compliance – into behaving like standards-compliant browsers. In these cases, those workarounds trigger validation errors, but again, since they are intentional and do not have any ill effects, we leave them be.

    I think the key thing with validation is to understand *why* each error is thrown and whether they have enough of an impact on usability, functionality, or display to live with them or not. 100% validation is ideal, but not always necessary.

    I hope this answers your question – thanks again for dropping by!

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.