Updating website design of live website

How best to update the website design of a live site.

Small Incremental Changes

The easiest safest way is to make small incremental changes, until you achieve your desired website design. e.g. add new banners, change logo, change colours, etc. When you are confident with the system, you may also chose to change a template. But it is wise to test this on a trial site first.

Major Revamp - Approach A

1. Create a new page for testing, change it's design template to something that is not being used by the other pages, eg C,D,E,F etc
2. Define a stylesheet just for this page only. 
3. When you are ready to go live, just copy the stylesheet and template to the main stylesheet and template. 
4. Pitfalls: The menu CSS is defined in another file, and will continue to be active... So you should first move the old menu/catmenu CSS to the main stylesheet, and leave the menu CSS files empty.

Major Revamp - Approach B

1. Duplicate the existing site to create a new test/trial site.
2. Warning: We must test on the new site, but apply changes eventually to the old site. This is because the old site will have alot of ecommerce and customer enquiry history that we don't want to lose.
3. Make a change of the template as required, and take note of everything you do, so you can reapply these same settings to the main/live website.
4. Upload all new images into the same directory, so it will make it easier to move those files across to the new site.
5. When ready, pick a quiet day to make the change.
6. Eventually copy across the template code, and stylesheet code from the test site to the live site.
7. Fix up any missing image references, so they are base referenced as:  /images/

Notes

• Templates are defined by HTML code (template A-H) and CSS style (template + menu + catmenu)
• Some templates use a different doctype. That is a historical techy thing you can change in the advanced area, to make HTML/CSS render in a specific way.
• Most images in our websites are now referenced by a baseref of /images/ so it is easy to move code and data between websites, without having to fix up the references. However, the images need to exist in both websites.
• FTP is a fast way to move lots of images. Download the images directory to your computer from old website, then upload to the new website. (or if the images directory already exists, you will need to do it one subdirectory at a time, to avoid overwritting files)

Good luck!