What are best practices for coding and testing a website prior to launch.

August 3, 2010 7:25 AM

I've made websites for myself - Now I'm going to be making them for others, and need to know the best way to code and test their sites prior to launching them on my client's domains.

When I've made sites for myself, I just do the coding in a simple text editor, or sometimes right in the code editor that comes with C-Panel, and I've just put the site up page by page on my domain as I finish, and make all my changes and corrections on the live site.

Now I am doing a complete site redesign for a client. The design phase is done, and it's time to start coding. They have an existing site on their domain, and want to leave the site up till the new one is ready and then do the switch.

I need to know the best procedure for doing the site coding and testing away from it's ultimate domain, and for how to accomplish the switch over when the coding is complete.

In my ignorance, my plan would be to code the site live using one of my domains (mydomain.com/clientsite). And then when it's all done, bring it on to their domain, but I don't know a good way to change all the links etc.

I am on a Mac, and would be amenable to buying a program to help me do the coding and eventual site launch if it is ~ $100.00. I don't want to use a program like Dreamweaver, but if something like Coda will greatly assist me in my goals, I would get that.

The site I am doing is a simple and mostly static portfolio site - no databases, nothing like wordpress to deal with.

I appreciate any advice you can offer.

posted by bonsai forest to computers & internet (11 answers total)

Since your content is static, you can do this on your local computer, you don't need to put it up "live" anywhere.
posted by beerbajay at 7:34 AM on August 3, 2010

"I don't know a good way to change all the links etc."

Use relative links, as opposed to absolute links. No need to change once deployed.
posted by jangie at 7:42 AM on August 3, 2010

This is more general advice, but in my time site-building I've found Browsershots very helpful for cross-browser testing-- saved me some real hassles (esp. testing in IE8) before I got too far into a site's design.
posted by mireille at 7:50 AM on August 3, 2010

See also W3C code validators.
posted by mireille at 7:57 AM on August 3, 2010

I would develop the new site as a subdirectory on their current server (e.g. /newsite) which is temporarily restricted by .htaccess to only your IP address. Then when you're done just move everything in the root except for /newsite into /oldsite, and move /newsite into the root. You should be using relative links like jangie said, so there should be nothing to change if you've done it right.
posted by Rhomboid at 8:04 AM on August 3, 2010 [1 favorite]

Use MAMP to get your projects running on your local machine. Since you're not doing any database or scripting, I'm assuming your just checking for broken links and images, the best way to do this, is to be methodical and pretty much click every link on every page. You can also use something like web developer toolbar; it has functionality for validating Javascript, finding broken images on pages and small things that may slip under your radar.
posted by Scientifik at 8:07 AM on August 3, 2010

To elaborate on Jangie's point:

A static link is one that contains a complete URL, for example:
<a href='http://www.example.com/files/document.htm'>Link</a>

Using a relative link you can link to the same file, example:
<a href='files/document.htm'>Link</a>

The relative link is relative to the page that contains it. As such, the above example links to a file in the sub-directory entitled 'files'. As long as you copy over the same file structure and the file is in the same location on the new server the link will work fine.

Relative linking works for just about anything, including external CSS and JS files.
posted by Gainesvillain at 8:20 AM on August 3, 2010

Relative links also work when you need to go up one or more dirs, for example if you had a file 'portfolio/index.html' in which it was necessary to load a script named 'scripts/foo.js', you could refer to it as <script src="../scripts/foo.js"> and still have that reference remain relative even though the two dirs are siblings, such that if both files were moved to 'bar/portfolio/index.html' and 'bar/scripts/foo.js' the links would still work properly without modification.
posted by Rhomboid at 8:49 AM on August 3, 2010

More Info: Relative links are relative to the document they live in, that is, the path starts from wherever in the file structure the particular html document is located.

If you prepend a "/" to the relative link, it becomes a root-relative link, which starts from the root level of the domain, not the location of the page.

This is handy if you have a lot of nested folders and don't want to put a whole bunch of "../../../" in front of every relative link when referencing an asset that may be located several levels away.
posted by Aquaman at 9:40 AM on August 3, 2010

Run a local web server and edit your hosts so it looks like you are browsing to your clients domain.
posted by wongcorgi at 9:43 AM on August 3, 2010

Thanks to all advice so far, I really appreciate it.
posted by bonsai forest at 3:36 PM on August 3, 2010