IT and Patience

It's a problem I see way too frequently.  Web designers don't build websites that are portable.  This becomes a problem when one tries to do real-world exercises like changing the directory structure or creating a test site.  Proper planning is the key to avoiding this problem, along with following some DOs and DON'Ts.

What's the big deal?

A web page has essentially two components: data and linked resources.  The data is usually the plain words/text on the page.  Linked resources are usually everything else: images, scripts, style sheets, anchor tags and iframes to name a few.

The crux of the problem is all about the path that the web designer uses to link to these resources.  An inexperienced designer won't spend any time planning how to lay out the directory structure of the website and will use hard-coded paths to the resource.  Let's look at an image for example.  When one wants to place an image in a web page, one uses the HTML 'img' tag with the 'src' attribute to define the location of the actual image file on the server.  An inexperienced designer will create the image like:

<img src='http://www.acme.com/images/pic1.jpg'>

This will work ok but it is very fragile.  If you wanted to change the domain name from acme.com to products.acme.com, you would have to go in and change the path in all the image tags on the site (along with all the linked resources that utilize the fully qualified domain name).  If you wanted to encrypt your content by using https, you would have to do the same thing.  If you want to move all your content to a sub-folder on the server (like if you were creating a test website), it is the same exercise.  You get the idea.  Basically, any time you want to move the site, everything breaks.

Use Relative Paths

A much better idea is to use relative paths for your linked resources.  If you page is named product.html and its located in the document root, an experienced designer will create the image like:

<img src='images/pic1.jpg'>

Here, the designer is defining the path to the image relative to the html document's location on the server.  This makes movement much simpler because nothing breaks as long as the relative relationship doesn't change.  In the real world, the relative relationship rarely changes, especially if any sort of planning is done.  It is much more likely everything will move all together.

DOs and DON'Ts

• DO use relative paths for linked resources
• DON'T hard code the fully qualified domain name
• DON'T hard code the path from the document root
  

Properly plan the site out, use relative paths, and have a little patience.  You will deliver a better product for no extra work.