- Launched: January 2010
- Status: Lightly Modified (The live site has had some modifications, but the overall structure and design has remained.)
While I was working for Workstate, one of the primary clients I worked with was 3 Pillar Homes. The company is a Columbus based luxury home builder with both the ability to build custom homes and an inventory of already-built "stock" homes. They already had a website, but they were looking to improve visitor retention and get more customers, and so wanted to refresh and update the theme. They also wanted to be able to update the page of home listings in a more timely manner by simply doing it themselves, but since they weren't web developers, they wanted a way that they could understand and work with easily. So, they came to Workstate to get a new design and implement it.
The Site Design
I didn't create the design. That honor goes to Workstate's talented designer, Andee Bower. I did, however implement it. Since it's a reskin of an existing site, the code isn't as clean as I'd have liked, but I worked on cleaning it up, as well, to make working with it easier. During the first phase of the redesign (which involved implementing the design on the at the time existing static site), I was able to clean it up enough to pull out reused elements, such as the header and footer, and put them in their own include files.
Backgrounds: Fun With Sprites and Sliding Doors
The 3 Pillar site is a little more liberal with images than I usually do, but it's currently the only way to really get the effect we were going for. I was able to minimize the use of images, which helps speed up download time and reduce the amount and sizes of files downloaded, through using a variety of techniques.
Sliding doors is a technique of using two images for the background of an element. Combined, the two images are larger than what the element's size is expected to be (generally speaking, this is done on things like list items, where their size is relatively small), so that they can expand and contract based on the size of content. One of the images contains the bulk of the background, while the other image acts as a "door" on the visibility of the former image. The result is a pair of reusable images for things like navigation.
A Touch of CSS3
To give the text an overall "engraved" look, we employed a little CSS3 "text-shadow" to the text. The result (in browsers that support it) is a rather dramatic effect that makes the text appear to be "in" the backgrounds. I really like how that effect turned out.
Under the Hood
The 3 Pillar site was the first one I had done using the SilverStripe CMSand SimplePie, as well as the first client project on which I was able to use CSS3. This provided quite a bit of learning experience with SilverStripe, and PHP and MVC in general.
I had attempted to work with MVC (model view controller) patterns in the past with some ASP.Net projects while I worked for ICC, because I could see the tremendous value the pattern offered, but the way Visual Studio had the file organization and the way I was trying to learn it only served to confuse me. It wasn't until I started working with SilverStripe that I gained a better understanding of the MVC pattern.
It was also one of my first client projects as a front end developer with someone else's design. That was definitely a different learning experience. It helped me to learn how designers signify different things to developers within the designs themselves.
Another part of the project was migrating to a new host. The new host was a base server with a static IP address, and I was charged with setting it up. So, I got a crash course in setting up a server completely through command line. Thankfully, the base operating system, Ubuntu, was one I was already famaliar with, and I had had some experience with Linux server administration, as well as an appreciation for, and some experience with, the command line, thanks to running Linux in my own home and working tech support for ten years. It certainly exercised and expanded my command line abilities, and actually made me a lot more comfortable and confident with it.
There were some challenges, but it was a great experience, filled with a lot of fun and learning. I had the opportunity to learn how to use a fantastic CMS that I was able to use again in future projects. I got to play with MVC on a practical level and further understand how it works. All in all, I had a lot of fun with it (while drooling over the gorgeous houses they have).