Blog

We work on the Internet and are constantly consuming information. There's a lot of it out there. We'd forget it if we didn't write it down someplace…

Visual Lizard's blog covers everything from web standards to the muppets, from php to comic books to music, just about anything we find interesting

File Naming Conventions

The importance of providing a consistent and readable name for files

As someone who works with a computer every day, the consistent naming of files and folders is something that the very organized part of my brain is very happy about. It is also one of the things that can drive a person to distraction if that organization is not being done. There are many reasons to follow a file naming convention when working with computers or the internet. The most important reason, in my opinion, is to keep files organized in a way so that others can quickly and easily understand the naming convention and follow it.

In case you didn't know, computers generally speaking are not smart. They can do amazing things, but they need to be told exactly what to do by programmers. Contrary to popular belief they cannot just fix things for you. They must be told what to do, how to organize, and can only really work within a restricted set of parameters. We won't get into a discussion about Artificial Intelligence or machine learning here because we are simply discussing how to keep our own files, or files we upload to our websites, organized.

We have had this conversation with some of our clients in the past when we've been asked to try to find specific files for either updating or deletion. People who are not overly familiar with computers assume that a filename that is created by an automated process (camera or phone), or by someone other than themselves cannot be modified. The truth is that any file can have its name changed, as long as the file extension is not changed.

For example, if I receive a file called "Design 45224 revision 6 Final.jpg" this may mean absolutely nothing to me. Once I take a look at the file and see that it is the final design for a header graphic, then I can rename the file to something that I will recognize, "website-header-background.jpg".

The same can be done for image files that are downloaded from a camera, or phone. An image from a camera that has a filename of "DCP_1344995673.jpg" doesn't tell me that this is a picture of my pet dog. Renaming the file to "scruffy-the-puppy.jpg" is going to be a lot easier to understand.

The proper naming of files is extremely important when it comes to a directory containing hundreds or even thousands of files. Without being able to see the contents of a file, an unrecognizable filename will require us to open or preview every file until we find the one we need. If a file is created using a naming convention that we as humans can recognize, we are able to use the power of a computer to find the file we are after very quickly.

We've used examples of image files so far, but naming conventions should also be applied to all file types. Descriptive filenames are not only easier to recognize by humans, Artificial Intelligence (I know I said I wouldn't discuss this) has been programmed to do pattern recognition of filenames. The big search engines have their bots scouring the internet for recognizable filenames. Using a search engine to find logos or images with specific search terms only really works well if the filenames have some form of proper naming. How often do you an image search on Google for "DCP_12345.jpg"? You don't. You search for "puppy images". The results will invariably have a large number of images that have the word puppy in their filename.

Here are some rules to follow when setting up a naming convention for your files, and these can be used for files that end up on the internet as well as for your own computer file system.

Filenaming Best Practices

  • Naming consistency: when creating a naming convention files should be named in a consistent pattern. A prefix of the kind of file is useful, for instance img for images, doc for documents. The file extension will tell you the file type. Examples: img-scruffy-the-puppy.jpg, doc-scruffy-the-puppy-ownership.pdf
  • Descriptive: descriptive names for files is important for both your own pattern recognition, and for when using your computer's search functionality. You may not remember the exact name of your document, but you may know a portion of the filename if you are using a naming convention. If you have a thousand images starting with DCP_, you can imagine the time wasting of trying to find one specific image.
  • Special Characters: This is one of those things that seems like a good idea, but in reality it can cause no end of problems. Using an apostrophe for word contractions in a title, or an ampersand to reduce the length of a filename. Unfortunately many punctuation characters or symbols have specific uses in programming. Using these characters in your own file structures on your computer will not likely cause issues, however they will in all likelyhood cause major issues if they are uploaded to a website. These characters can prematurely stop a web page from rendering, or have other unintended consequences. Therefore it is important to limit which characters are used in your filenaming convention.
  • Spaces: Spaces, again seem like a good idea. On your own personal computer they are unlikely to cause issues. On the internet however, a space isn't actually a space. Internet programming replaces a space in a filename with 3 characters. That space becomes %20. So a filename that is put up as scruffy the puppy.jpg will be rendered as scruffy%20the%20puppy.jpg. This may or may not cause problems, so it's better to be safe than sorry.
  • Special Character Exceptions: There are two characters that can be used in filenames that should not cause issues. They are the hyphen and the underscore. If you need some spacing in your filenames, these characters can give you that legibility.
  • If you are going to use dates as part of your filenames, it is best to use the ISO 8601 standard of YYYYMMDD (20220610).
  • If you are going to have multiple versions of a file, it is best to include a version number. Example: img-scruffy-the-puppy-v1.jpg, img-scruffy-the-puppy-v2.jpg
  • There are no restrictions on uppercase or lowercase letters, but filenaming should be consistent. Depending on how the computer interprets filenames, img-scruffy-the-puppy.jpg and Img-Scruff-The-Puppy.jpg could be considered the same file. Being consistent in how uppercase and lowercase are used will make this issue moot.

The above rules can also be applied to file directories (folders).

From a usability standpoint, by using proper naming conventions, a webmaster or website content editor will be able to find their documents or media files much easier and it will keep their website file library relatively tidy. For instance, we have seen the same image uploaded multiple times to a website because the webmaster could not find the original file they uploaded the first time because they didn't give the file a recognizable name, and therefore it was just easier to find it again on their computer and upload it again. As a result, the server file system ends up with several versions of the same file.

With site hosting costs based on file storage and bandwidth, the storage of extraneous files can really add up. An extreme example would be a directory containing 20GB+ of images and documents. When reviewing the directory that contained those files, there were a considerable number of duplicate files that likely could have been replaced with a single well named file and reused in multiple locations.

This may seem to be a lot of work to keep files organized, but in reality that organization of files can save time and money.

Daily Links

Daily Links

Daily Links

Daily Links

Daily Links

Daily Links

User Interface and Accessibility

Over the past five or six years we have seen a steady push toward quality accessibility in websites and web applications. From a development point of view this can initially look like a way to stifle creativity. A better way to look at it is an opportunity to come up with creative ways to implement a user experience that includes everyone.

For programming we have taken this accessibility to heart. We have developed our Catalyst CMS to start with accessibility as a default feature. We include keyboard based tab navigation, semantically correct html formatting, and we follow the W3C standards for accessibility for imagery, audio, and video. With these items available from minute one of development, it means that we are making sure that those with visual and physical disabilities are primary considerations as our projects progress.

What we have noticed when it comes to other CMS platforms is that their functionality takes an approach of being everything for everybody. Some of the accessibility requirements sometimes fall by the wayside, especially with open development for plugins and themes, third party developers do not always follow the standards that the core CMS developers require for their platforms. As a result, we see considerable inconsistency with the level of accessibility in sites and applications developed on these platforms.

When designing and developing with accessibility in mind, it forces the designers and developers to think through more thoroughly what features that would be considered cool, or really good marketing gimmicks. These elements may actually be a hinderance to the audience who cannot see or physically interact with an interface in ways that able-bodied audience members can.

When clients and designers are coming up with user interface ideas, we have seen concepts that look amazing and would be a real challenge to create. We then put on our accessibility advocate hat and look at those same ideas and we then need to torpedo the design. When I say torpedo, we are not giving the client or designer a hard no. We feel that it is important to bring up these accessibility issues so that our clients and designers are aware of how some of these interface ideas may leave out a portion of their potential customer or user base.

Here is a short list of things that we have noticed over time that should be considered to make for a better user interface experience.

  • Pop-ups and modals. Clicking or tapping an interface element that opens a layer above the primary interface can be a hinderance to how the user interacts with the page. A person with a visual disability needs to be informed in some way that a pop-up or modal has opened in a layer above the rest of the page and that some form of action needs to take place to either close the pop-up or interact with what has appeared in the pop-up in order to return to the rest of the site.
  • Small design elements or copy. If the copy or design elements are very small, it may be hard for a person who has a visual disability to read the copy, or if buttons and design elements are small, audience members with physical disabilities may not have the fine motor skills to position the cursor with precision.
  • Backgrounds and text colour. A busy background image with varying colours with copy over it can be extremely difficult to read. Background colours and copy colours that do not have enough contrast can have the same issue.

If you are like me, you really do not like automated pop-up elements. The ones that bother me the most are the ones that wait about a minute before they appear. You're in the middle of reading or watching the content you are visiting a site for, and right in the middle of your reading or viewing a pop-up or modal block appears causing you to lose your place or miss the specific moment in the video that you wanted to see. You are forced to stop and dismiss or interact with the pop-up before you can continue. Now imagine if you have a visual disability and your screen-reader is reading you an article, and suddenly it stops. If the modal doesn't somehow provide the screen-reader with information about what it is and why it is there, the user is not going to understand why the screen-reader stopped reading the content.

Imagine you have a disability like Cerebral Palsy. It is already difficult for you to interact with the base web page interface and now you required to move the cursor to the close link on the popup before you can continue reading.

I've used some pretty specific examples of where certain elements can cause difficulties. These examples provide glaring examples of why accessibility in user interface and design development needs to be a high priority.

Designers and Developers have a history of coming up with ways to help with accessibility. One of the best examples of this was having a font-size changing tool in the interface. It was a good attempt to make a website or web application accessible. Now however this is no longer required. Modern web browsers have zooming tools to increase font sizes. If an interface is designed properly, it takes advantage of the accessibility features of the browser itself. When developing with accessibility in mind, remember to work smarter, not harder. Since the browser can handle things like font-size changes, developing a stylesheet with font-sizes that are relative rather than absolute means the interface design can flex to work with the user's needs. It is important that our interface adapts to the user, and not the other way around.

Another item you may have noticed or wondered about. Autoplay of video or audio. We have been asked time and again about autoplaying videos (not so much for audio). The standard now is that autoplay is not acceptable. There are several reasons not to have autoplay in a web browser. Most of us don't want to be caught out watching movie trailers when we're supposed to be working. But the accessibility reason for this is about it being up to the audience member as to whether or not they want to watch a video or hear an audio clip. If an element autoplays, then the user has to start searching around to find out how to pause the media that is being played.

From a marketing perspective we understand that need to drive traffic to a product, service, or promote content. From the audience perspective however, this can be a distraction or an intrusion on their senses that they did not want. The audience wants to be on the site, but if they are inundated with unwanted visual or auditory stimuli the fastest way to make it stop is to close the tab or browser window. As a marketing person that is the last thing you want. Accessibility also means that the audience is provided the choice to listen to or view media. The audience doesn't want it forced upon them.

As the internet continues to evolve, we are now seeing a push by governments to legislate accessibility. So going forward keeping accessibility in mind and developing interfaces to be accessible means that your designs and your websites are ahead of the game and you won't have to go back and retrofit or rebuild.

Recommended Reading - A Book Apart: Accessibility for Everyone by Laura Kalbag

If you are having trouble with accessibility on your website or web application, please get in touch and we would be happy to help you out.