Organizing your website files: Best practices

If you have ever struggled to find a file on your computer or on a website, you know how frustrating and time-consuming it can be. Having a messy and disorganized file system can affect your productivity, as well as your website's rankings and speed. That's why it's important to follow some best practices for organizing your website files, whether they are images, documents, backend code, or anything else your website requires to run smoothly.

An introduction to folder structure and why it matters

"Folder Structure" is simply the way that folders are organized and arranged on a computer. How you organize these files can have a big impact on how your website works and how easy it is for you to update and manage. Organizing your website files also helps you to avoid duplication and errors, improve your website's performance and security, and speed up the process of editing outdated or broken files.

A good folder structure can help you:

- Find files faster and easier

- Avoid duplicate or lost files

- Share files with others more efficiently

- Keep track of versions and changes

- Maintain consistency and clarity

A bad folder structure can cause you:

- Wasted time and frustration

- Confusion and errors

- Poor communication and collaboration

- Security and privacy issues

- Low quality and performance

Not only is folder structure important to help you locate files and keep organized, but file names are equally as important. Quite obviously, having every file on your hard drive named "Untitled Document" is not going to help you find anything fast.

Folder Structure and File Naming on Your Website

While structuring folders and naming your personal files is certainly something that most of us need to dedicate a few hours to every once in a while, folder structure and file naming on your website is equally, if not more important. Since your website is publicly available, both your visitors, and search engines like Google view your folder structure and file names, so it's important that they don't get confused.

Here are some tips for creating a good folder structure, creating meaningful names for your files and folders, and overall just good habits to have when managing your website filesystem:

1. Use subfolders to organize files by type or function

2. Use descriptive and meaningful names for your files and folders

3. Use lowercase letters and hyphens for folder and file names

4. Avoid special characters and spaces in folder and file names

5. Use consistent naming and formatting

6. Delete unused or outdated files

7. Backup your files regularly

8. Use relative paths instead of absolute paths for linking your files

9. Minimize the number of files and folders in your website

Now, let's take a deeper look at some of these tips, including why they are beneficial, and what you can do to implement them.

1. Use subfolders to organize files by type or function

One way to improve your website's organization strategy is by using subfolders to separate different types or functions of files. For example, you should create different subfolders for images, stylesheets, scripts, fonts, and different categories of content on your site.

This way, you can keep your files organized by their role or format and make it easier to find and edit them when the need arises.

2. Use descriptive and meaningful names for your files and folders

Using descriptive and meaningful names for your files and folders can help you keep track of what each file contains and what its purpose is. It also makes it easier for other developers or collaborators working with you to understand your website structure.

And most importantly, it helps your visitors and search engines better understand your content, and what it is about. For example, instead of using generic names like image1.jpg for your website's assets, use names that describe the content or function of the file, such as ourAwesomeLogo.jpg. Similarly, instead of using generic names like "folder1" or "folder2" for your subfolders, use names that describe the category or type of files in the subfolder, such as "articles" or "ldquo;images".

3. Use lowercase letters and hyphens for folder and file names

Using lowercase letters, hyphens, and underscores for file and folder names can help you avoid problems with case sensitivity and compatibility between different platforms. For example, if you develop on your local computer before uploading the files to your production server, you will probably run into some issues if you use Windows to develop (Which is not case-sensitive), and lynx for production (Which is case-sensitive).

What do we mean by case-sensitive? Well, if you have a file named Logo.jpg on your server, but you link to it as logo.jpg in your HTML code, the server might not find the file and display an error. This is because some operating systems view the uppercase and lowercase "L" as different file names. To avoid this problem, it is better to just use all lowercase letters when naming your files and folders.

Lastly, it is important to point out that hyphens and underscores are preferred over spaces and special characters in file names. Spaces and special characters will cause problems with some servers and browsers, especially when they are used in URLs. For example, if you have a file named "My Product.jpg" on your server, and you link to it as "My Product.jpg" in your HTML code, the browser might not display the image correctly (Because the browser will encode the space, making the filename "My%20Product.jpg". To avoid this problem altogether, and avoid any cross-compatibility issues, it is better to use hyphens "-" or underscores "_" instead of spaces or special characters in your file names.

4. Avoid special characters and spaces in folder and file names

Special characters and spaces in folder and file names can cause problems when accessing or transferring your files across different platforms, browsers or servers. For example, some characters may have special meanings in certain systems, such as the characters #, ?, % or &amp; (Both the question mark, and the ampersand are used in basic URL structure to define query parameters). Spaces may also be interpreted differently by different operating systems. For example, some systems replace spaces with "%20", while others replace them with the plus sign "+".

To avoid cross-compatibility issues (And to save yourself the headache of figuring out if a specific character will cause an issue or not), we recommend that you only use numbers and letters, or alphanumeric characters (Such as A-Z, a-z, 0-9). Additionally, as previously mentioned, use underscores "_" or hyphens "-" in your folder and file names instead of spaces. Following these important tips will help keep your file structure more consistent, readable and compatible.

5. Use consistent naming and formatting

Using consistent naming and formatting for your folders and files will not only help you locate your files, but it will also help your visitors and search engines when they are looking for your content. For example, we recommend using lowercase letters, camelCase, or snake_case when naming your files and folders (You can also use hyphens "-" instead of underscores "_").

While it is up to you to decide what naming structure to use, we recommend you choose one type, and stay consistent with it throughout your entire site. And if you are on the fence about deciding whether or not you should update your file structure, keep in mind that relevant file and folder names are important in SEO, and descriptive URL paths can help your website rise up the results page with search engines like Google.

6. Delete unused or outdated files

Deleting unused or outdated files will help you to free up space, and perhaps even improve overall performance on your website. You may have old versions of your files, temporary files, backup files or event test files that are no longer needed or relevant to your website. Not only do these files may take up valuable storage space, potentially slow down your loading time or cause confusion or errors, but they may also help bad actors hack your site by giving them valuable information that you thought you removed.

To avoid these problems, all you have to do is periodically review the files and folders that make up your website, and delete any files that are no longer in use.

7. Backup your files regularly

While not technically a step in file organization, backing up your files regularly will help you to protect your website from data loss (Such as corruption or damage due to accidental deletion), as well as malware or hardware failure.

To prevent these scenarios, you should always have a recent copy of your files stored in a safe and secure location, such as an external hard drive located within a fireproof safe in your home. You should also backup your files frequently, depending on how often you update them on your server. Getting really off-topic here, but it is equally important that you regularly backup and safely store copies of your website's database(s), as your website may stop working if you lose that information.

8. Use relative paths instead of absolute paths for linking your files

An important and potentially time-saving tip when creating or editing code is using relative paths instead of absolute paths for linking to files within your web server. Doing so will help make your website more flexible, and less likely to break down (Causing you hours of manual code updating) if you need to change the name of a folder.

An absolute path is a full URL that specifies the exact location of a file on the web, an example being "https://tinkertechlab.com/images/logo.svg".

A relative path is a partial URL that specifies the location of a file relative to the current files location, an example being "images/logo.svg". In HTML, you can place a forward-slash "/"; at the beginning of the path to locate the file from the root (So even if you are currently editing a file within a subfolder, you can still type "/img/img.png" to locate the file "https://domain.tld/img/img.png").

This is important to consider when linking internal files, since using absolute paths for linking your files will cause problems if you move or rename your files or folders. However, using relative paths for linking your files allows you to avoid these problems, as the links will automatically adjust to the files new location.

9. Minimize the number of files and folders in your website

Lastly, Minimizing the number of files and folders in your website will help you to optimize its performance, efficiency and especially its maintainability. Having too many files and folders will increase the size of your website, affecting its loading speed and making it harder to manage and update as the site expands and grows.

To reduce the number of files and folders on your website, we recommend using techniques such as combining multiple CSS or JavaScript files into one file (And reducing unnecessary code while you are at it), compressing images or videos to reduce their quality or size (Just run a quick google search for free online tools), or using image sprites to combine multiple images into one.

Conclusion

In this article, you learned 9 tips for maintaining your websites file structure. Hopefully you were able to take something away from this article, and use it to improve your own website! As always, send us a message if you have any questions, and thanks for sticking around until the end. Thanks for reading!