Behind the Scene: Organizing your Web Site

or: "I know it's in here somewhere"

Transcript:

To make working with your web site a lot easier, try these organization tips:

Images

Put all your images in a single folder. This folder can have subfolders so that you can more easily locate the images which belong to a particular section of your site, but don’t mix your images in with your html files. I usually call this folder “images” (lower case).

Here’s why:

It is theoretically possible for an image to harbor a virus. If your images are all in a single folder, that folder can be marked not to execute anything – no programs or macros should run in that folder.
When you make changes to your site, you’re usually changing the html. HTML files are generally small and upload quickly, whereas image files can be large and upload slowly. You generally want to upload images once, and leave them there, unchanged. If you have image files in your html directories, you cannot just upload the whole folder at once – unless you don’t mind waiting…and waiting… for those images to upload as well. Of course, you can always hunt through your files and pick and choose which files to upload and which to leave alone, but that takes time and brainpower which could be used for something better.
Dreamweaver has a utility which is called “cloaking”, which allows you to leave out certain folders when you upload the whole site at once, so if all your images are in an images folder you can simply cloak it when you go to upload to whole site. You can similarly file other types of files which tend to be large in their own directory as well.

For instance:

PDF Files

The pdf format is terrific when you need to put something on the web that may need to be printed to look a certain way. Registration forms, brochures, newsletters – these all benefit from having a controlled layout. The downside is that pdf files are often quite large, and, as with images, you will benefit from having them in their own folder. After your pdf files are uploaded, you may want to cloak the pdf folder in Dreamweaver so that you can upload the entire site, except for the images, pdf (and some other) folders, from time to time as you update multiple pages. I generally call the PDF folder “pdf_files”, or, simply, “pdf”.

If you have monthly newsletters in pdf format, in other words, I strongly recommend that you store them separately from your html files. If you have policies and procedures in pdf format, I would similarly recommend that you store them in a subdirectory of your pdf folder, for example in a pdf/policies folder.

A Word About File Names

If you were to look at the files and folders of most professionally-designed web sites, you would find that most of the folder names, and file names, too, are lower case. This is because people are lazy and do not want to have to hit the Shift key, or remember whether they used Title case or lower case. Unix servers are case sensitive, so “Teens”, with a capital "T", is different from “teens”, with a lower case "t". Since over 60% of all web servers used on the Internet are Unix servers, case matters. If all my folder names and file names are lower case, there is little likelihood of my forgetting whether or not the files or folders are capitalized or not. They’re just not.

Another key feature of most folder names in those big-site directories (and most file names) is that there are NO SPACES in them. The reason is that some less evolved web servers sometimes handle spaces badly. Most web servers translate the space between words in file names and folder names to the ASCII character "%20". When the file is retrieved, it knows the %20 is a space and has no trouble decoding it. However, every once in a while, some lame server somewhere will translate the "%20" as a…"%20" instead of a space, and will not be able to retrieve your file, and your visitor won’t get to see your page or image. So, to eliminate the possibility of confusion, simply use underscores or hyphens instead of spaces, or shove the words together . Instead of naming your file “using databases.htm”, say “using_databases.htm” or “usingdatabases.htm”.

Stylesheets and Javascripts

It’s also a good idea to have a separate folder for your stylesheets and another for your scripts. Usually they won’t have very many files in them, but it’s always nice to be able to locate them easily if you need to. I call mine "css" and "scripts".

Dreamweaver Library Items

Dreamweaver makes a folder for you called "Library", with an upper case "L". Since your site is for a library, this can make for confusion, but just notice that it will be one of the only folders in your web site with an upper case name. Once the Dreamweaver Library Items (with a .lbi extension) are in the Library folder, you basically just leave them alone. You wouldn’t even have to upload them to the web site if you didn’t want to, but since they’re really small, and really important, usually, it doesn’t hurt to have a remote copy. Just make sure you edit them in Dreamweaver.

Sections of Your Site

You need to have the home page of your web site in the “root” of your web site so that your visitors can get to it without typing its name. Web servers are set up to recognize a particular file as the entrance page to your site, and will serve it up even if your visitors don’t type it in directly. It’s usually “index.htm” or “index.html” or “default.htm” or “default.html”, though it could be whatever your systems administrator sets it up to be.

Other pages on your site, however, do not need to be in the root directory, so it’s best to segregate them into logical folders. Once you get your site organized and the sections named, it’s a good idea to name your site’s folders the same thing. Here are some variations of that organization for libraries:

Section:	Also known as:	Or perhaps:
general_info	your_library	about
children	kids	just_for_kids
teens	teen_zone	teen_scene
reference	databases	virtual_library
readers_advisory	book_nook	readers_corner, booklovers
events	museum_passes	happenings
circulation	service
support	friends	donate
seniors
policies

Working Files Folder

When you’re working on a site, you often have supporting documents that you would like to keep with the site even though they aren’t actually pages on the site. Sometimes content is supplied to you in Word Documents and Excel Files. After you extract the information you need on the site from these files, you may want to store them close by.

Also, you often receive VERY LARGE image files, and these have no place on a web site. While these images are waiting for resizing, keep them in your Working Files, not in your images directory. I recommend storing these images in folders with descriptive names – and dates! For example, give the image subfolders in your Working Files folder a year-month prefix and a descriptive suffix, like 2007_03_bookfair_pictures. The reason for the dates is that they make it a lot easier to find those images later. We often remember when we got something even before we remember what we call it. Putting the year first and the month second (and the day third, if necessary) makes the folders line up in chronological order.

The Working Files folder should get cloaked. You never want to upload it to the production server unless for some reason you need to share the large files.

Archive Folder

Another folder that is good to have is an archive folder. It’s sometimes comforting to have a place to put all the files you’re no longer using, just in case you need them back. Or parts of them back. When you replace one page with another, or delete a page altogether, or decide an image is really no longer needed, you can put it in the archive folder for a few months just to make sure it’s not needed. This folder should also be cloaked and never uploaded to the production server.

When you make new pages to replace old ones, in addition to renaming the old ones (e.g., internet_policy_old.htm) be sure to move the old ones OUT of the web site. Keep it uncluttered. No old files should remain in the main site. If you don’t want to delete them yet, simply move them to the archive folder for a while. Then delete them.

Do the same with images. They tend to accumulate. Move old ones out – if you can’t bear to part with them completely, save them off to a CD.

Save Your Work, and Back Up Your Work

This would be a good time to remind you to back up your web site from time to time. Here are some tips for saving your work, and backing up your work:

If you are making a new page, save the page every time you wouldn't want to have to do something over again. You can save any file on a PC by hitting "Ctrl-s". It's good to develop the habit, like a little tic, of hitting "Ctrl-s" often.
If you are about to make substantial changes to your site, save a copy of the current version in a separate archive folder, with the date and a small note, like "web_site_2007_04_before_color_change". After you make the changes, save the new version with a similar name in the archive folder: "web_site_2007_04_after_color_change."
Once a quarter (or more often if your site changes a lot) copy the whole site onto a CD or DVD and take it home with you or store it somewhere else off-site. Be sure to mark the CD or DVD carefully so you know what it is.

Organizing your CSS page

It’s good to have a plan for your CSS page.

Try this:

Put the styles first for any tags you are changing globally, like the body tag, possibly the h1 tag or others, at the top of your style sheet. Then if you ever go to use a tag, and it doesn’t behave as expected, you’ll know where to go to find its style declarations.
Then list styles for each section of the page, from top to bottom. The "id" style, which names your page’s sections (#header, #nav, #leftbox, #centerbox, #rightbox, #widebox, #footer) will be followed in each case by any styles which are unique to that section. Then list the styles for next section down the page, and so forth. The last section will probably be the #footer section. If there are any miscellaneous (class) styles, list them at the bottom.
If you have styles which are unique to one page or section of the site (kids, teens etc), consider making a second stylesheet just for that page or section.

If you follow a definite plan, you’ll always be able to find the style later.

One convention for listing styles is to list the id or class name, then a space, then the opening curly bracket. On the next line, indent the style declaration, and end it with a semicolon. Indent each style declaration similarly. Hit return and type the closing curly bracket. Some people put the closing curly bracket at the left edge; I prefer it indented, so that nothing impedes my eye as I’m scanning down the list to find something.

It would look like this:

#footer p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .7em;
	color: #000033;
	padding: 10px 20px;
	}

This concludes this podcast on web site organization. Thank you for listening. If you have other site organization tips you’d like to pass on, please write to us at podcasts@extramile.com.

This podcast was recorded on April 18, 2007.