DuctTape
At a glance
- Site
- www.ducttape.sourceforge.net
- Info
- The home of DuctTape, a brand new software app to help HL2 mod developers
- Role
- Design & build of the site, complete with AJAX document loading and PHP contact form
Snapshots
Details
I was approached to create the look and feel of the new DuctTape website and then implement it into a fully working site. The idea of the product is to be a useful tool the mod developers for the game Half-Life 2 and with the name DuctTape I decided to theme it around a DIY look. One thing to note is the use of the 960 grid system which I found worked to great effect.
After sign-off on the design I created a semanticly rich XHTML document and implemented an advanced CSS document to render the page as I was free to disregard IE6 support, allowing me to enjoy use of advanced CSS selectors not usually used due to IE6 having no support. The audience for this site are primarily users who will be using modern browsers but the content of the site is accessible to IE6 users despite looking far worse.
I also added AJAX file loading for the docs page to provide a richer user interaction. This and other Javascript effects were added using the jQuery library and are fully accessible and degrade well.
What I did
- Creating the full site design in Photoshop based on a grid system
- Creating semantic and valid HTML to convey the site information
- Writing CSS to display the site design
- Ensuring the site is accessible and also renders in older browsers
- Using PHP to create a basic template system
- Writing jQuery to handle DOM manipulation and load documents with AJAX
- Ensuring the CSS and HTML were as modular as possible for ease of development
