Intelligent File Management

This post is really directed at new designers, and those of you who manage your own websites. File management is a practice of housing your website files in an organized way. The primary advantages of file management is that when files are organized effectively the process of locating, updating, deleting, and generally making sense of what is on your server is much easier. I can’t tell you how many times I’ve started a redevelopment and found multiple file versions and outdated content, which often resulted in broken links for pages, images, and scripts which was caused in a big part due to the confusion of exactly where the files were in the file structure.

Another important consideration is that many common web page additions such as JavaScript and CSS can be either added to the web page directly or linked to. When content is linked to it has a benefit of providing source code that is cleaner and easier to make sense of; in addition external files can be compressed which helps a page load faster, which in turn helps to ensure that a search engine is indexing more of your page’s content.

CSS AND JAVASCRIPT

Not too long back web pages included inline CSS styles. This was deprecated as HTML versions advanced, but you’ll see this in use in older websites and some simple editing environments such as Craig’s List. Following is an example of in-line styles for font size and color:

In current designs the CSS styles are linked to as in the following:
<link rel=”stylesheet” type=”text/css” href=”styles/style.css” media=”screen” />

To be clear, one could have the styles placed directly in the header portion of a page.

The important thing to note is that from a a designer perspective why would one want to include all of this on every web page? It is much simpler to simply link to a style sheet.

As for JavaScript, when it is added within a page you’ll see the:

Most scripts can be linked to, and in this case you would see something like:
<script type=”text/javascript” src=”js/customscript.js”> </script>

In the above case the javascript is an external file called “customscript” and the script declaration loads the script into your page/s.

The inclusion of CSS and JavaScript may not seem like a problem, but when there are multiple CSS and JavaScript files in place (as is needed for most contemporary websites) then linking to files is a much better practice when there is a need to troubleshoot a problem, edit code, etc. The use of “linking” to CSS and Scripts is a practice similar to when one links to a header or footer in a PHP file (known as an “include”). Templating systems always use includes of some type. The final, and maybe most important advantage of linking to a file is that when a change is made (CSS or JavaScript) the changes are made to all of your existing pages which saves the time of having to go back to each and every page and making the change manually.

FOLDER MANAGEMENT

The use of folders to organize content is another important consideration. Many of the websites that I redevelop will have all of the files … HTML docs, PDFs, images, video, flash, etc. all in the same directory (folder). It makes much more sense to place all of the HTML files in the root public directory (public_html, www, etc) and then create folders for each content type. In this case you would place word docs in their own folder, PDFs in their folder, video in a folder, JavaScript in a folder, flash in a folder, etc.

The following example of a site we redesigned several years back illustrates the difference a bit of file management can make. We started with the files on the left and created folders for the various file types and existing and new content during the site’s redevelopment. In the root folder we have HTML and PHP docs with folders for the resources.

NAMING MANAGEMENT

The “after” version of above example was definitely an improvement, yet you may have noted the need for naming management. In this regard it is important to be consistent in naming practices to achieve a professional appearance and avoid broken links. Firstly, naming management is necessary both for the code of the pages and the file and folder names. For example, in the code it wouldn’t be appropriate to have a paragraph tag added both as uppercase and lowercase …. <P> a bit of text </P> … <p> a bit of text </p>. Currently the browsers can read uppercase tags, yet the stricter doc-type declaration may not render a page properly that uses uppercase or mixed coding tags or attributes.

When naming files and folders the current standard is to use lowercase, and a dash between file and folder names. In our above example we had four folders which started with a capital letter, all should have been lowercase. All of our file names were lowercase and provided as one word so no problem there. That being said, you could have file names with two or more words.

Depending upon the complexity and size of your website you may have several image folders, several JavaScript folders, etc. In this case just group them within a master folder of this type.

images >> slideshow | staff | client-logos | etc.

This will again make it easier for you to quickly find content of a certain type. For my clients that have ongoing changeable content I always date the folder:

pdfs >> pdf-2013 | pdf-general-2012 | pdf-reports-2012, etc

Okay, so you could decide to have all of your folder names without dashes, or use underscores. So long as your consistent this really isn’t an issue. And yes, you could capitalize your folder names, and even the file names if you wanted. But just think of what the URL would look like … https://www.yoursite.com/FOLDER_NAME/File-name.html Unless you use an htacess URL rewrite the address bar link would look rather unprofessional. Whatever you decide just be sure there are not blank spaces between a file or folder name, always use a dash or underscore.

SEO AND EXTENSIONS

Most of you will realize how important it is to ensure that your pages are SEO optimized. The naming of a file and folder is a big part of SEO. Remember that the URL of a link has a big influence on whether a link is served up in a search. If you are searching for bird cages for sale consider the following two links:

htttp://www.birdcompany.com/products.html vs. htttp://www.birdcompany.com/bird-cages-purchase.html

The second URL is much more descriptive from an SEO standpoint. Whether or not to include “purchase” would be based upon some keyword searching, but my assumption is that most people who are searching for retail bird cages would use “purchase” in their search. If I was looking for images (Google Image Search) and there was an image titled “IMG32245.jpg” and another titled “bird-cage-wood.jpg” the second would most likely come up in a search a head of the previous.

Finally be sure that your files use the same extensions. In many cases the break in links is simply a matter of some pages being created with the .htm extension, while others use .html. This goes true for other file formats with variable extension options such as Ms Word. And for lowercase .htm on one page and uppercase .HTM on another.

I recognize that many will think this post is rather obvious, but considering the many website’s I have come across which were created by new designers that did not employ any logical sense (or consistency) of file management I felt that this posts deserved my time.

As always if you have design questions, or need help please feel free to contact me.
https://www.ecurtisdesigns.com