Site Refactoring

Freshness Warning
This article is over 18 years old. It's possible that the information you read below isn't current.

The process of creating a structure for this site is a real-world case study for dealing with moved pages, dead links, categorizing content, and more.

When I created this site, I really didn’t have any concrete plans for it. I had some photos to share with family and friends. I posted the notes and assignments for a class I taught. What I had was content that put up in a haphazard fashion with no real structure.

The process of creating a structure for this site is a real-world case study for dealing with moved pages, dead links, categorizing content, and more.

Card sorting

How do you determine where pages go in a Web site? My site, like most personal Web sites, has rather diverse content. There’s some photos from trips and parties, a martini recipe, a weblog, some longer writings, and a couple of applications that I have written.

Unfortunately, the manner in which this site grew meant that the early content that I had created was usually just stuck in random places. The newer content was placed in a hastily organized structure that wasn’t very flexible.

What I needed was a way to categorize everything and create a site structure that could be extended to support future growth of the site. To determine a structure, I used a technique called card sorting. I cut out slips of paper for every item on my site and went through them, placing similar items in piles. I did this several times until I had all of the content organized into a few categories.

For an in-depth look at card sorting, you can read articles in Intranet Journal or developerWorks.

Moved Pages

Once my card sorting exercise was complete, I had a logical structure for the site that should be able to support the addition of new stuff without the need of a complete reorganization. But to place all of my existing content into the new structure meant moving files.

In the past, when I placed something on this site, it stayed where it was. When things get moved around, it makes life difficult on people. Owners of other sites that have linked to me now have dead links. People with bookmarks have bookmarks to missing pages. It’s a bad deal all around. So I never moved anything.

But now I had a solid reason for moving my files around. Placing everything into the new structure would make it easier to manage in the future. I made the decision to move everything into the new structure, but also decided to minimize the problems created by doing so. I modified the page that comes up when you request a file that is not found to check if the page that was requested had moved. If so, the user is automatically redirected to the new location without any interruption. So now people won’t suddenly have broken links and bookmarks just because I decided to rearrange things around here.

If you would like to do the same thing to your site, you’ll need a little knowledge of regular expressions and the bit of JavaScript code found below. You can learn more about regular expressions in JavaScript from Webreference.

<script language="JavaScript">
<!--

var url = location.href
var reg

// Redirect requests for the old Yosemite URL to the new one
reg = /\/yosemite(.*)/i
if (reg.test(url))
location.replace("/photos/yosemite/")

// Redirect requests for all pages in /foo/ to the new
// location in /articles/foo/

reg = /\/foo/(.*)/i
if (reg.test(url))
location.replace("/articles/foo/" + RegExp.$1)

// Keep adding your own.

//-->
</script>

Refactoring

Over at Elegant Hack, Christina had the clever idea of applying the software engineering concept of refactoring to Web site maintenance and improvement. Refactoring is the process of making small changes to a program that improve the overall execution without introducing new features (and hopefully no new bugs). The basic idea is to leave things better than you found them.

Over the last few days, I’ve been engaging in the refactoring of this web site. I took 20 minutes to clean up some of my CSS. I spent an hour standardizing the TITLE tags on all my pages.

With a little planning and some work, I have created a solid structure for my site that shoals support anything I would like to add in the future. A flexible architecture is key to growing while avoiding having to reorganize things again later.

Every day, I can pick something off my to-do list and spend a few minutes cleaning things up. By doing it this way, I don’t have to wait until I can spend a large block of time making changes all at once.

Pablo
February 17, 2002 5:06 PM

Kalsey, just for curiosity, what kind of "todo" list do you use? a webbased? Thanks, Pablo.

Adam Kalsey
February 17, 2002 11:11 PM

I keep my to do list on my Palm and I use ToDo Plus and MegaWiki to categorize items into groups. MegaWiki is freeware and can be found at http://www.palmgear.com/software/showsoftware.cfm?prodID=36156 ToDo Plus costs $20 and can be found at http://www.handshigh.com/html/todoplus.html In the past I used AnyDay for online calendar and task management, but Palm has bought them and converted it to a service for Palm Net subscribers only. I'm not thrilled with the task list that is part of Yahoo Calendar, although the calendar itself is pretty strong.

Crys
August 5, 2003 2:53 PM

Of course you could do it /right/ and use server side redirects rather than client side ones that 1) are not useable by users without Javascript 2) break the functionality of the back button. for Apache: add text similar to the following to your .htaccess file. Redirect permanent /images/rayne.jpg http://enlighteneddreams.fanworks.net/images/ltaw/rayne.jpg Redirect permanent /images/rayne2.jpg http://enlighteneddreams.fanworks.net/images/ltaw/rayne2.jpg

Adam Kalsey
August 5, 2003 2:57 PM

This site uses server-side redirects (using Apache's mod_rewrite), but not everyone has access to that sort of technology. The JavaScript solution will work on any server. The JavaScript above does not break the back button, since it uses location.replace instead of location.href.

Your comments:

Text only, no HTML. URLs will automatically be converted to links. Your email address is required, but it will not be displayed on the site.

Name:

Not your company or your SEO link. Comments without a real name will be deleted as spam.

Email: (not displayed)

If you don't feel comfortable giving me your real email address, don't expect me to feel comfortable publishing your comment.

Website (optional):

Follow me on Twitter

Best Of

  • Simplified Form Errors One of the most frustrating experiences on the Web is filling out forms. When mistakes are made, the user is often left guessing what they need to correct. We've taken an approach that shows the user in no uncertain terms what needs to be fixed.
  • Embrace the medium The Web is different than print, television, or any other medium. To be successful, designers must embrace those differences.
  • Writing Realistic Job Descriptions Publish a job listing like this one and you are virtually guaranteeing that you won't get qualified applicants for the position.
  • Newly Digital Newly Digital is an experimental writing project. I've asked 11 people to write about their early experiences with computing technology and post their essays on their weblogs. So go read, enjoy, and then contribute. This collection is open to you. Write up your own story, and then let the world know about it.
  • Google on the desktop Google picks up Picasa, giving them an important foothold on people's PCs.
  • More of the best »

Recently Read

Get More

Subscribe | Archives

Recently

Managers and technical ability (Dec 26)
In technical fields, the closer you are to the actual work being done, the closer your skills need to resemble those of the people doing the work.
Dysfunctions of output-oriented software teams (Sep 17)
Whatever you call it, the symptom is that you're measuring your progress by how much you build and deliver instead of measuring success by the amount of customer value you create.
Evaluative and generative product development (Aug 30)
Customers never even talk to the companies that don't fit their needs at all. If the only product ideas you're considering are those that meet the needs of your current customers, then you're only going to find new customers that look exactly like your current customers.
Product Manager Career Ladder (Aug 19)
What are the steps along the product management career path?
Building the Customer-Informed Product (Aug 15)
Strong products aren't composed of a list of features dictated by customers. They are guided by strong visions, and the execution of that vision is the primary focus of product development.
Assumptions and project planning (Feb 18)
When your assumptions change, it's reasonable that your project plans and needs change as well. But too many managers are afraid to go back and re-work a plan that they've already agreed to.
Feature voting is harmful to your product (Feb 7)
There's a lot of problems with using feature voting to drive your product.
Encouraging 1:1s from other managers in your organization (Jan 4)
If you’re managing other managers, encourage them to hold their own 1:1s. It’s such an important tool for managing and leading that everyone needs to be holding them.

Subscribe to this site's feed.

Contact

Adam Kalsey

Mobile: 916.600.2497

Email: adam AT kalsey.com

Twitter, etc: akalsey

Resume

PGP Key

©1999-2020 Adam Kalsey.