In a previous post I talked about Plain Old Semantic HTML (POSH). The POSH concept saved us a lot of time and frustration on a recent project. Our task was to create a cold water wash calculator for Seventh Generation’s Get Out of Hot Water for Earth Day promotion. The calculator takes four inputs: water temperature, type of hot water heater, type of clothes washer, and loads per week. It then tells you the savings if you switch to (or are already using) cold water, an Energy Star washer, and/or 2X Concentrate Natural Laundry Detergent.
They wanted a smooth user experience. This sort of thing would normally be created in Flash but we decided to use XHTML + CSS + jQuery instead. The first step was to create functional and technical specifications. The specifications (and looking through all of the calculations to make sure we understand everything correctly) were actually a big part of the project. After that we moved into production.
We had two people working on this project – I implemented the functionality in jQuery and Jason implemented the design in CSS. We spent the first two hours working together on getting the semantic XHTML correct. Once we had the semantic XHTML we essentially had an API that we both could use to do our work. It was worth the time upfront getting this part right.
Next we went to our respective corners. I created the jQuery functionality selecting and manipulating the DOM using CSS selectors. Jason used the XHTML structure we had come up with to add CSS and make it all look pretty. The great part was that, since we had come up with the the XHTML structure as the one touch point, we were each able to do our jobs without hardly bothering the other person to ask questions or make changes.
Of course, there were a few changes needed to the XHTML once we started working on our individual pieces – we’re not perfect after all. This is were Subversion came in handy. I could change my local copy and when I was sure I wanted to I could commit that change and Jason could update his local copy merging any of his own changes (or vice-versa). The whole process went quite smoothly and we’re very happy with the results (the “Switch to Cold Water and Save” calculator on the right).
