Homepage of this site
 You are here :: Home » About » How This Site Was Built

How This Site Was Built

When I built this site, I wanted it to be a showcase of the sort of work that Dented Reality can produce, while also providing useful information to the people who came here, and the relevant business information to interested visitors. With this in mind, I narrowed down the aims of the site to the following:

  1. Complete layout using no tables (all done via CSS)
  2. Carefully-organised information to allow people access to the information important to them. I identified the following groups of potential viewers:
    1. Current/Potential Clients
    2. Web Developers (there are some downloadable projects which get high traffic)
    3. Fellow IAs and UCD professionals, looking for more information or my opinions on certain things
  3. A dynamic system which would allow me to easily update the content in certain parts of the site, without messing around too much.
  4. Try to integrate best-practise IA theories in a manner which could demonstrate their use in a real-life situation.

With  all of these things to think about, I came up with the following elements of the site which I could string together:

  1. "Projects" section which would include downloads, code samples, things like that. This section would mainly be targeted at developers, and the language/assumptions used would reflect that.
  2. The homepage should include a brief description of what Dented Reality does, and then allow for direct access into the key areas which would interest each of my target groups.
  3. I identified blosxom as a suitable web-log back end system to power my frequently-updated section ("Notes" and the homepage). I then customised blosxom to allow me to use REST-friendly and more permanent URLs for all posts. I also added a comments system because I think participation from users of this web site is very important. Adding a PHP-based calendar to my template gave an optional method for navigating the posts (by date).
  4. I added a search box on every page, to allow people to find things that they are looking for, without floundering around in my potentially-inadequate navigation system. I plan to supplement Google's index of my site with my own "Best Bets" system.
  5. The "Notes" section is configured to allow me to post frequent observations on the industry, as well as development notes on my projects. All project notes will be reflected across into the "Projects" section, on the appropriate project-page.
  6. My "Local Navigation" on the right of each internal page should allow me to cross-link and externally-link related materials.
  7. Since all pages were designed completely using CSS for layout, I would also be able to provide a print-version of each page using an alternate style-sheet. In compliant browsers, printing will cause the page to switch to that style sheet and print the page in a completely printer-friendly format; automagically!
  8. When designing the CSS for the site, I wanted to respect personal preferences for font-size and screen size, so all layouts and fonts should be as flexible as possible, to meet the settings of the user on the other end.

View the content inventory created for this website (PDF File, 75KB)I performed a Content Inventory on the existing Dented Reality web site, then re-arranged everything that I found according to the new planned structure. I used hand-sketching to come up with some alternate designs (keeping in mind that it had to be possible using CSS-only), and then created some wire frames for my own reference using MS Visio.

At this point, I actually side-stepped from the design process and wrote my customisations for blosxom. I wrote these using PHP, because it is my language of choice, and I don't know my of Perl. This means that blosxom performs the processing of my blog, then my PHP scripts perform post-processing of the output, and produce a further-customised version.

Once I had blosxom doing what I wanted it to do, I took the wire frames created previously, and determined 3 different templates that I needed:

  1. Homepage
  2. Standard Internal Page
  3. Notes Page (with calendar and cross-links)

I built the Standard Internal Page template by hand, using Macromedia Dreamweaver MX for prototyping, and UltraEdit for final coding. From there I went about populating that template (and the modified versions for the other 2 templates) with the content that I had, plus new content which I created as required.

Once I had everything together, I tested it all, making sure that links worked and that I had as few deviations from standards as possible. I used the W3C validation tools to find and fix errors with my XHTML, CSS and links, then launched it all to dentedreality.com.au.

Contact me if you'd like to hear more about any part of the process.