Gregory and Sons, LLC – General Contractors
One of my favorite design mantras was told to me by a close friend. He said, “When you have a hammer, every problem starts to look like a nail.” This is a saying that I’ve tried to keep at the forefront of my mind whenever I begin a new project. Clearly I prefer the WordPress platform; not only is it a solid publishing tool for a blog but it is swiftly becoming a top competitor as an overall CMS. However, when a client comes to me and explains their needs, I try to weigh all the options and requirements in hopes of crafting a solution that will fit them.
When Gregory and Sons came to me for a website they needed something simple. They wanted a way to display pictures, a way for people to get in touch with them, and a page or two describing the company and their services. As easily as WordPress would have taken care of those needs, I felt that it would have instead been overkill. There didn’t need to be a database backend and user permissions. They didn’t require plugins or themes. So the website was instead coded by hand, from scratch.
The Basics
This website was a return to my beginnings. Ever since I began fooling around with HTML and CSS, I’ve preferred to do things by hand. I’m well-aware that there are plenty of tools out there to make a web designer’s job easier; but when you get down to it, there’s something deeply satisfying about writing your own code. (Maybe it’s just my inner geek.)
So I sat down at my kitchen table and simply went to work. My first step was to create a mock-up (commonly called a “wireframe”) of the page. This laid out all the necessary elements on the page and added some dummy text in order to get a feel for the finished project. Once I had my sample page the next step was to “design” it. I had created all my fields, now it was a matter of writing the CSS necessary to display the fields, and their contained text, properly.
After that, it became a small matter of replicating the wireframe several times, linking the menu properly, and then inputting all of the relevant information.
A Picture is Worth a Thousand Words
However, there was still the small issue of developing an unobtrusive and easy-to-manage image gallery that didn’t result in the client having to touch the code of the site. Then I discovered that he used Picasa on his office computer to manage and sort all of his pictures. Picasa is an application developed by Google that allows a user to organize the pictures stored on their computer, and publish them to an online gallery from within the application itself. Meanwhile, Picasa has a web-app component that handles the pictures you’ve decided to make available on the web. By simply creating a few predetermined web albums inside their Picasa application, the client could now add the pictures they liked to their respective albums and sync them to the web. Meanwhile, a few snippets of easily obtained code allowed me to add the web albums into the site. All-in-all a great example of how a little exploration (and patience) can yield a better-fitting solution rather than just hitting the problem with a hammer till it looks right!
At-a-Glance
Hours to Completion: 30 hours over a period of two weeks
Site Features: easy navigation, contact form with error handling, picasa-linked picture galleries
Browser Compatibility: Completely cross-browser compatible from resolutions 1024×768 and up
Color Palette: light background and dark foreground for clean, professional lines
Visit: http://www.gregorysons.com/