Web Design Workflow

Whether coding by hand or using an authoring tool like Dreamweaver, the following represents a basic (and sensible) workflow:

  1. Author locally
  2. Test locally
  3. Revise locally
  4. Publish page/site via FTP
  5. Test remote page/site

Author Locally

To code by hand, use a text editor like TextEdit, TextWrangler, BBEdit, Notepad, etc. Make sure that the program you use is saving in generic text format. Do not use MS Word or other word processors that save formatting codes in the file. To use TextEdit on the Mac, turn off the default Rich Text Format in the Preferences.

Always be aware of your file paths. If working on two or more files (aka “a web site”), you need a local root folder. If coding by hand, that just means that you’re saving into the same folder (there can be subfolders). If working in Dreamweaver, you must define your site.

Test Locally

After saving the html file, test it in a browser on your computer. Go File < Open, just drag the file into the browser window, or drag it onto the browser icon. If using Dreamweaver, use the “Preview in Browser” feature. It’s a very good idea to test your pages in a number of browsers and on both Mac & Windows.

Revise Locally

After having seen the page in the browser, make corrections to your code back in your editor. Save the file. Reload the page in the browser if coding by hand, or “Preview in Browser” if using Dreamweaver. Repeat as much as necessary.

Publish Via FTP or SFTP

Using an ftp/sftp program like Fetch, Fugu, CuteFTP, WSFTP, Cyberduck—they’re all more or less similar, but CyberDuck has the best icon—copy the page over to the server. Careless people stop here, but you must test the pages you’ve uploaded.

Test Remote Page/Site

Always check your pages by entering the URL into a web browser. Check all links, etc. It’s routine for something to screw up. Sometimes file permissions aren’t set right, or file names contrary to UNIX idiom break links, etc.


One thought on “Web Design Workflow

  1. Pingback: Publishing: Electronic Communications «

Comments are closed.