The file structure of a website
When we began coding our own websites back in the 90′ies we did not have any guide that thought us some of the simpler things involved when making websites, for example: how to set up the file structure of the website we were making.
There were many guides going through the various steps and techniques on how to edit images for the web and different obscure HTML-tags never used in real life. But these guides did never teach us anything on how to structure a professional site.
This was an awkward situation since we wanted learn have to structure our sites like the big boys did. Many years later I realized that during the 90′ies the web industry was a huge mess with no clear rules so everybody came up with solutions that worked for them self.
Through experience and routine I have come up with what I think works best.
Pictures
Location: /img
Pictures should be placed in a folder called “img” in the web-server root.
Location: /img/base
Pictures that are used for the layout or template should be put in a sub folder of “/img” called “base”. These pictures are placed in their own folder since they are only used once in the beginning when the site is designed and converted to HTML.
Location: /img/portrait
Some part of the website may have a contact page dedicated to the co-workers. It is a good idea to put these portrait files in a sub folder called “portraits” under “/img”. It is very convenient to have a group of similar pictures in its own folder, especially if a picture is updated, you do not have to go through a huge folder with various images. We think it is unnecessary to do a unique folder for every page of the site but if a single page have lots of images it might be a good idea as shown above.
A big complex site may need many sub folders for images, a simpler less complex site may not need any sub folders for pictures.
HTML/ASP/PHP-files
Location: /
I have seen many examples of different page structures. The only variant we have been using is the one where we put every HTML-file (which is not “include” files) in the root of the web server. The different HTML pages are named after what they are about, so if there is a “About us” page that page will be called “about-us.php” or “about-ut.htm”. Naming pages like this will also help you out when you optimize your pages for search engines.
CSS
Location: /css
CSS files are put in the folder “css”. It is possible to run more than one stylesheet for a site and then it can be very convenient to have them put under a single folder.
Flash
Location: /flash
Flash files are put in the folder called “flash”. This is when we use a Flash-animation as a part of a HTML-layout and not if we would have developed a complete Flash site.
Includes
Location: /includes
Include files are put in the folder called “includes”. Include files can easily swell in size and having them in a separate folder is a real boon then.
Other things to keep in mind
Some web servers do not care if a file name is in upper or lower case but take for granted always to name files in lower case. Having all your files in lower case can save lots of work in the future.
MS-DOS had a serious file name limitation where it only allowed the user to name files with ten letters. MS-DOS is obscure nowadays so do not keep the old habit of trying to short cut every name of a file. What is easier to read: “links-two-our-customers.htm” or “lnks_cmr.htm ?
Spaces in filenames should be avoided. Replace the space with a “-” instead.