Video-Based Tutorial: Page (1) of 1 - 06/18/10 Email this story to a friend. email article Print this page (Article printing at page facebook

Web Site Planning and Wireframing: Part 5 of 12

The eight commandments of naming By Laurie Burruss

In Web Site Planning and Wireframing: Hands-On Training, Laurie Burruss, director of digital media at Pasadena City College, demonstrates the essentials of creating a web site with a polished, professional appearance and a compelling user experience. The goal of this hands-on course is to deconstruct a web site's home page in order to identify its structural elements and feature set.

Using Acrobat Pro and the web developer's toolkit, Laurie shows how to capture a homepage and create, in another layer, its visual framework (wireframe).

Topics include:

  • Seeing, scanning, and reading a web page
  • Understanding naming conventions
  • Creating file structures
  • Understanding page hierarchy
  • Using Acrobat and Photoshop with wireframes
  • Building a professional wireframe from scratch
  • Identifying and using web standards in site design
  • Usability Testing

The eight commandments of naming

This is a very important movie. I'm going to lay out the Eight Commandments. These are the rules, these are the commandments. Never break them.

So, let's take a look at commandment number 1:
Use no spaces in filenames. Now I have put together some examples. What is wrong here? Right off the bat, you see there is a space. So, how could we correct this? We could close up the spaces and just type it straight. An easy simple thing, just don't use spaces.


Commandment number 2:
Use underscores or hyphens for making spaces between words. Occasionally, it is good to see a little space or break between words or concepts and there is a way you can do that. What is wrong with this example? Again, we have a space. We can't have spaces just hanging here and there. So, how could we fix this but still make it look spacey? I prefer using underscore. Once I choose a method, I'm consistent in that use of naming throughout my web site. Underscore is my preferred way.

Commandment number 3:
Use short file names that have meaning. Most designers understand the importance of using short file names. It is easy to make mistakes when you are typing and short file names just makes it easier but the meaning part is often left behind. I can guarantee that in two weeks, in three weeks, in three months, when you come back to a web site to work on it, to update it or do maintenance on it, File1 .htm and File2.htm will have no meaning for you. You won't know which one is your preferred file. You won't know what the content of that file is and it's meaningless to the other people on your team.

A much better way to name things is to use short names that have meaning. I try to keep all my names around seven or eight characters if I can. Index would be the initial page and Gallery would be a secondary page on this web site and I would expect on that page, to see a gallery or portfolio or a page that has a number of images. This is a great way to name your files.

Click PLAY or press spacebar to start or stop video

Commandment number 4:
Lower case only but camel humping is okay. Simplify your naming for yourself. If you always stick to lower case, it makes it much easier for you to remember how to do the names and be consistent. Camel humping, which I'll get to in just a moment is a preferred way by a number of coders but let's look at a bad example again. Well, right off the bat, we see capital initial W, not a great way to go. You see a space in here and it is breaking a several rules. Let's look at how to fix this. We have eliminated the space. We have made the first initial letter a lower case letter and we have used a capital P to indicate the second word.

This is called Camel humping. This is an example of how to do it correctly. We have removed the capital letter for W and made it lower case. We have eliminated the space and where the second word starts, we have used a capital P. This is called Camel humping. Think of it being this way that you start low on the camel and then move up over the hump of the camel. It is used frequently by coders. It is used by people in Flash and ActionScript. You will see it all over the web. It is perfectly acceptable to use. For me, lower case just works. That is the way I like to do it but everybody is going to come up their unique way but following these rules will keep you safe and make it so that your files will work on the Server and display in the browser.

Commandment number 5:
All file names must end in dot three-letter extension.  I'm sure you are familiar with these . htm- web page, .JPEG image, .GIF image format, .mov - QuickTime movie, .swf - Flash movie, .aif - an audio file and .mp4 - could be a movie, audio file, all kinds of things, even an interactive file. There are a couple of exceptions to this. .js stands for JavaScript. It is a two-letter extension and there is also .html. I'll talk a little bit about that more in a later commandment.

So, looking at this, this is all wrong. I don't know that this is. This could be a title for a college paper. The Server is looking to understand what kind of document is being served to it and how to display it properly in the browser. The only way it knows is by the dot three-letter extension, so you are actually sending an instruction with the file name when you do this. It is important to include it on every file name you create. Here is the solution, webPage.htm. Now, the server and the browser know that this is the web page.

Commandment 6: Use alphanumeric characters only.

Again, a simplification of things is 'we use alphanumeric, we won't go astray.' It makes consistency. It is easy to remember. Okay, there are a lot of mistakes here. That exclamation mark is not alphanumeric, the money, money, money breaks several rules. One, it's way too long and not very meaningful and third, commas are special characters. Example three, the hash mark. Not an alphanumeric character, again a special character. So, how can we correct these three file names? Simplify the names, make them short and meaningful, get rid of spaces, get rid of any special characters, party.htm, money.htm, image2.jpg. Much easier to use, much easier to do. Designers like it simple. Keep it simple for yourself and use alphanumeric.

Commandment 7:
Avoid special characters. This is so important I have made a special commandment just for this. You may think that we covered it in the last one but it is interesting how people try to slide these special characters into names. All of these special characters appear at the top end on the right side of your keyboard. They are hard to learn how to type, so just don't use them. They are used inside of code and because they are used as code and mathematical operators inside of code, you cannot use them for any file names.

These are three bad examples. %$$$, done with the character of the dollar sign and this one is double duty wrong, *;. How can we correct these? If you need to use the word percent, write it out. Don't use the special character. Money pretty much says it all. We are trying to simplify and go for meaning and star page is a much better way to name this than using the special character, which tells us that it has a meaningful name, and we are following the rule again in Commandment 6 of alphanumeric.

Commandment number 8:
Use either .html or .htm for web pages but only use one file naming convention within a single site. So, let's look at a bad example. Within a site, you may use html or htm but you cannot use a combination of both. So, to correct this, just stick with one or the other. I really like to use .htm. It goes along with my other commandment of dot three-letter extension and it is simple to use throughout. Choose one or the other but be consistent. That is the main message with all of these commandments. Just make it simple, make it consistent, make it meaningful.

About is an award-winning provider of educational materials, including Hands-On Training instructional books, the Online Training Library, CD- and DVD-based video training, and events for creative designers, instructors, students, and hobbyists.

The Online Training Library and CD-ROM titles include such subjects as Photoshop, Flash, Dreamweaver, Illustrator, Office, digital photography, Web design, digital video, and many others.'s all-star team of trainers and teachers provides comprehensive and unbiased movie-based training to an international membership of tens of thousands of subscribers. Considering the speed at which technology evolves, the Online Training Library is a great solution for keeping your skills current. Library subscriptions begin as low as $25 a month, with no long-term commitment required.

Page: 1

Laurie Burruss serves as the director of digital media at Pasadena City College, where she has also been design professor for the past 15 years. Laurie is a professional digital storyteller, and she has developed a rich curriculum in digital and new media, which includes Flash, ActionScripting, web design and development, motion graphics, digital video editing, 3D modeling and animation, and environmental graphics design. As director of the Digital Media Programs at PCC, she has established many partnerships and collaborations in interactive multimedia, with companies such as Warner Bros., Disney Imagineering, Industrial Light and Magic, and Apple. Laurie has served as project director for grants from the National Science Foundation, the Department of Labor, and more. Laurie received a BFA and an MFA in fine arts from the University of Southern California.
Related Keywords:website planning, wifeframing, web design, web developer, page hierarchy, acrobat, photoshop, web standards, usability testing, naming conventions


Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved