Through my friend Blair and my work on her site, I met George Hartner of Outdoor Illumination of NC. His current business website at the time was an old-style, non-interactive, single page of plain HTML. He had seen the site I designed for Acacia Tree Wellness and asked me if I’d be interested in making a site for him. And he even wanted to pay me for it, which was pretty amazing to me since I would have done it for free.

Since his work is outdoor lighting, he has a lot of pictures to show off his projects. They’re taken at night, so a black background for the site was a requirement. Since he had a bunch of wonderful pictures, I decided to make the pictures the main focus of the site. Again, I tried for a “metro” inspired design. The list of his projects (wordpress posts) would be displayed in a 3×2 grid and display the title and link on an overlay when hovering over the image. I chose “Open Sans” at a 300 font weight for the font, from Google Fonts, and used small-caps for most of the headers and titles.

The project details (single posts) consisted of a piece of text containing George’s comments about the project and a gallery (I decided to use Galleria) of his images. Originally, I had planned for a project completion date, address, google map, and social media buttons to appear along with the project title, but George didn’t want those things. I kept the social media buttons but made them appear/disappear when the page is scrolled.

Pages were generally straight forward, but George wanted some fancier things on some pages that required some specialized content. For example, the “Why choose us” and “Contact” pages. Instead of a plain bullet list of Outdoor Illumination’s virtues, we decided to have the main “catch words” showing and a blurb about each appear underneath when the user hovers on the word. I structured the html in a definition list (<dl>), which allowed me to separate the word (term) from the blurb (definition) for use in javascript. It also would provide a nice presentation if CSS and javascript were disabled. Using jQuery, I hid all the dd tags, fetched the html content when the associated dt tag was hovered, and put the content into a display div. For the contact page, I just needed to add an ‘email form’, so I made one and wrote a mail script for it in php. I also added some javascript via jQuery to intercept the submit, submit via ajax, and show the result without leaving the page. It’s quite slick, and the form still works by normal means even if javascript is disabled.

Overall, I’m quite pleased with how the site turned out, though I do feel there are some aesthetic touches to be had here and there in order to bring up to the next level. Or maybe I just don’t use enough gradients and spiffy fonts.