I really felt like WRITING something today. Been doing art stuff non-stop.

A lot of people when they are first starting out with their website, and find out how to navigate their first FTP, and change their site over and over with new images and new pages…often one day sign in an have NO IDEA where anything is. Their images are in the same folder as their webpages. The names of the images and the webpages are random and not indicative of the actual content.

As a person who has built too many sites, both for myself and for other people, here are the tricks I’ve learned to keep things organized and simple, so I’m not swearing at myself as I look for one file amid hundreds of ambiguously named files:

1) Have your webpages and images/other files in SEPARATE directories. It may be simpler to source images in the same directory as the page, but in the long run, you’ll just have a complete mess on your hands. For example, my webpages are in public_html (workspace/webpages, if you’re a ComicGenesis user) and my images are in an aptly-named “images” folder (workspace/images for a CG user.) Some people prefer to use “gfx” or “graphics” instead of images. The name doesn’t matter so long as it’s indicative of what is in there.

2) Use all lowercase for file designations. This is to make it easier for both you and someone checking out your site. For example, my images are “title.jpg” not “Title.JPG,” and my webpages, “not-alone.php” not “Not-Alone.php.” Both pairs are read as separate files (4 files total)! Capitals matter, unless you’ve managed some pretty fancy redirects, in which you probably don’t need to be reading this. Above all, be consistent!

3) Name the files exactly what they are. For example, my menu buttons are named by what it says on the button, e.g., “Home” is “home.jpg” and “Archive” is “archive.jpg.”  I take this one step further, since my site has had so many revisions, I name it “09_2_home.jpg.”  09_2_ is the year and month in which I made it. This means I have chronological AND alphabetical order in my FTP/hard drive.  It also means I don’t overwrite files that I may need later on. If I end up NOT needing an earlier version, for example,  08_6_home.jpg, I can safely erase it knowing all the 08_6′s are old, and NOT my current version.

4) Put your images in the directory “images/name-of-webpage-they-appear-on.” My images directory directly mirrors my webpage set up. All images that appear on my archive page are in “images/archive;” all images that appear on my world page are in “images/world.” My site is pretty big, and I have a LOT of images. Instead of shoving them ALL into one single images folder, I break it up. That way, if I’m looking for a specific image in my FTP, I know exactly where to start looking.  Don’t go overboard with this however, as it CAN lag a site (or at least, so has been my experience). For example, images/world/culture/character/heritage/talon.jpg. That’s just overkill! When that page is loading, it’s going through ALL those directories!

5) If there are spaces in your filename, use a hyphen (-)  or an underscore (_) instead, don’t keep it a space. Some browsers still have problems with spaces, so just circumvent that and don’t use them. If you do use them, you get that ugly “%20″  in place of the space, and that’s just fugly. Don’t use spaces.

6) Set up your FTP like your hard drive, or vice versa. This is especially important for Dreamweaver/WYSIWYG users.  People new to Dreamweaver keep asking me, “but why do all my images show up as broken?” either on their site, or worse, on their so-called visual editor.  I must restrain myself at this stage, because I remember doing exactly the same thing when I first started. I had my images located in a different directory on my harddrive than on my FTP. When building in DW, it sourced the image from that folder on my hard drive, so when I uploaded the page, the image was broken! Well, d’uh! The sources didn’t match up! If you’re sourcing images/world/map.jpg when building the webpage, that source needs to be exactly the same on your FTP!

7) Come up with your own naming Zen. Some files are just tricky to name, and you have bunches that are very close in topic.  On my gallery page, I name fan art in the following fashion: thumbnails as “(subject-of-fanart)_(who-made-it-for-me)_pic.jpg,” for example, “ravar_varethane_pic.jpg” and that links to “ravar_varethane.jpg.” Anything ending in “_pic” is a thumbnail.

I name banners in the following fashion: (width)x(height)_subject.ext. For example, “200x40_ravar.jpg.”  This keeps it separate for me from “436x60_ravar.jpg,” instead of naming them “banner32″ and “banner33″ or something. At a glance, without using a thumbnail view, I know exactly what it is. And you know where this file goes in my FTP? images/banners. Because it’s on my banners page. :D

Do I champion these specific designations? Pfft, hardly. I do champion you finding your OWN designations. It saves tons of headache as your site and comic grow.

————

More as soon as I can get to it. Uggggg.

EDIT: I can has correct spelling? ugggg.