Web Design, Part 2: Site Organization

2000 – Let’s start with a note on include files (the topic of the previous article). If you include a “/” in your reference as in <A HREF=”/news/index.shtml”> instead of <A HREF=”news/index.shtml”>, then it will not matter where the file is located – it will always relative to the root directory. In other words, it won’t be dependent on the location of the file making the reference.

Next site revision, I’m going to work on that.

Another thing I didn’t cover, since it varies by server, is naming conventions. Some servers will do SSI for any web page, but others insist they have a “.shtml” extension. The server I’m on doesn’t care about file naming, but Claris Home Page insists that I end my include files with “.txt” – so that’s what I do. Be sure to check with your host how things have to be configured on your server.

I learned web design and site organization on the fly. One lesson I learned early on is that you don’t want to move things around once people on the outside have linked to your site. And the longer your site has been around, the more careful you should be about it.

Case Study: Low End Mac

The Beginning

Low End Mac started out in the /lem/ directory of my personal Iserv account, along with some graduate school research and a smattering of other things. At first, the site only covered Macs from the Plus through the Mac II line. Site organization used three subdirectories:

  1. /lem/ii/ for the Mac II models
  2. /lem/lc/ for the LC models
  3. /lem/plus/ for the Plus and other compact Macs

Inside the /lem/ directory was The New Low End User Site‘s home page, index.html, with links to the various computers. You can view the site as it looked in April 1997 (with only the most minor of modifications) here. It was a very light home page: three small graphics and under 10K of code. the only other page in the root directory was an abortive attempt at offering classified ads.

Low End Mac home page, April 1997

It was a very stark site weighing in at about 50K plus three small graphics. There were no pictures on the computer profile pages. There weren’t even index pages in the subdirectories. Everything was accessed from the home page. If you look at it, you’ll find that a lot of the organizational principles remain to this day.

Two Months Later

By June 1997, I’d added Quadras and 68k PowerBooks to the site at the request of many visitors. I’d joined the Mac Cognoscenti ring and LinkExchange to promote the site. I was probably serving somewhere over 10,000 pages a month, although I have no site stats from that era. (In July 1997, I served over 20,000 pages.) I’d added “Mac” to the site’s name, and I even had a fancy graphic:

The New Low End Mac User Site

The home page had more links, more color, and a few more helpful links. Organization was haphazard. Quadra and Centris models were in the /040/ directory, while PowerBooks were in /pb/. I’d also added the Macintosh 128K, 512K, and 512Ke on the low end. I even had a picture of the Mac IIcx and IIci – the only models so blessed at the time.

All the “Vintage Macs” were indexed on one page, which covered the compacts, the NuBus models, and the non-NuBus ones. There were a lot of good links here.

Low End Mac home page, June 1997

Low End Mac home page, June 1997

The PowerBook and Quadra indexes weren’t even in the same directory as the computer profiles. And it would get worse before it got better.

Two Months After That

By August 1997, I’d published my first editorials. I had a lot more pictures on the site. I had a new name, The Low End Mac User, and a shorter URL: http://come.to/lowendmac. I was in the 17-20,000 hit per month range. I’d joined the Mac Web Network banner exchange. And I was experimenting with tables as a design element. And I had a new graphic header:

The Low End Mac User header graphic

At this point, I was trying to find sponsors and sell ads, but that never went anywhere. Site organization was terrible. But I was still learning. As I look back, in some ways I’m very pleased with what I was doing. In other ways, it’s embarrassing. (No, I won’t even show you what the site looked like back then. It had grown to 1.1 MB from the original 50K. Files were scattered everywhere.)

Low End Mac and MacTimes

MacTimes approached Low End Mac about hosting the site for free – and offering a percentage of ad revenue generated by the site. Low End Mac moved to the MacTimes server during November 1997, which gave me the opportunity to tidy up some messy site issues. (You knew this was coming to organization sooner or later, didn’t you.)

At this point, all the index pages were moved into appropriate folders, no longer left loose in the main directory. Editorial content was moved to its own folder. After all, since everything was going to be at a new URL, this was the perfect opportunity to make some site changes.

It was during this time that I learned how to market the site, sending news releases to other Mac-centric sites when I added new content.

It worked. Low End Mac rocketed from 21,000 pages served in October to 59,000 in December. Low End Mac was no longer perceived as just a personal hobby site, but as a player.

During the late 1998, we had our nightmare week: our new server required that all our pages using Server Side Includes end with .shtml, not .html. I discovered an incredible prerelease shareware program called Site Ranger that would let me rename files or folders one at a time, then update every link to that file or folder on the entire site. It probably cut my time investment in making the change by 80-90%, and I became the first registered shareware user for this incredible fast program.

Moving to lowendmac.com

In mid-February 1999, Low End Mac moved to its own domain, which again meant all the old URLs were defunct. It was a second opportunity to update the site, which included moving The iMac Channel (which had been a subsite of MacTimes) into Low End Mac and renaming a few directories, such as changing the /040/ directory to /quadra/. Again, Site Ranger greatly simplified and sped up the process. (If you need a program that does what Site Ranger does, it’s worth its weight in latinum and dilithium crystals.)

We’ve been at lowendmac.com, and later lowendmac.net (both point to the same pages), ever since.

Organizational Principles

As I noted above, I have no formal training in web design. (Nobody did in 1997.) I created the site to meet my own needs to have data on older Macs readily available. I organized it for quick access to that data.

The basic organizational principle is to keep almost everything within two clicks of the home page and as many other pages as possible.

A corollary to this is a fairly flat structure for the site. While some sites have level after level of content, almost everything on Low End Mac was one level down from the root directory in those days. There are very few subdirectories, and most of those are used to hold graphics. It’s a very simple organization, one that worked hand in glove with two-click access.

But the biggest lesson of all is one that cost me days and days of work: plan your organization before you begin. Most of that time spent in Site Ranger renaming files and folders and moving files could have been eliminated if I had planned a bit more before creating new pages and directories.

And that’s the key lesson this week: Plan your site organization – fixing it later can be costly, since it will break links from outside your site. Consider implementing a two-click rule and a relatively flat, easy to understand organization so anyone can understand how your site works.

Next: Cascading Style Sheets

Our Web Design Series

  1. Using Include Files
  2. Site Organization
  3. Cascading Style Sheets
  4. Site Graphics
  5. Web Content To Go
  6. Reading Your Web Log
  7. Redirects, Naming Files, and Some Rants

Keywords: #html #webdesign #websiteorganization #websitestructure

Short link: https://goo.gl/RjVcVd

searchword: websiteorganization