LuzCannon.com: The work of David Brooks. A Michigan-based Photographer, Musician, and Designer.

Awhile back I went in for a job interview for a not so prestigious design position. During the interview I was asked repeatedly if I had designed this site myself. The answer was of course, “yes I did.” But the guy wasn’t buying it for some reason — he was convinced it was a template I had picked up somewhere.

After that I decided it was time to start thinking about moving the site along. I was also tired of the limited space I had given myself for things like pictures. In general though, I just wanted to do something different. The overall design was holding me back, and that really shouldn’t happen.

Yesterday I launched the new look for LuzCannon.com, and it’s very different than it was before.

The General Design

I wanted to go with something richer, something that had a bit of warmth to itâ€¦ but I also wanted the option to keep the white and clean aesthetic. I fought with myself about it for awhile and eventually settled on a style switcher to go between the two options.

I was also tired of the “blog look” that my site has had for some time now. I wanted to expand the content, and I wanted to do something different with it. This time around I took away the focal picture at the top and replaced it with a stained glass window on the right side. I thought the stained glass window would anchor the look and keep the purpose of the blog-like design’s top focal image without being expected and traditional. And, if you don’t like it there’s the white design that focuses more on typography than texture and stained glass.

This edition of the site is also based on the concepts of the 960 degree layout. I didn’t use the CSS from Nathan’s 960 Grid System, but the Fireworks templates he provides in the package were a really big help in the planning phase.

Features and Social Media

This time around I wanted to include some extra features, mostly hinging on social networking or offsite APIs. Scattered throughout the site are pieces of information gathered from places like Last.fm, Twitter, BrightKite and Ma.gnolia. (Although at the time of this article Ma.gnolia has taken a hard hit, resulting in me removing the bookmark list temporarily.)

I wanted to use that information, but I didn’t want it to slow down the way this site loads. So, I wrote a lot of functions to extract and save data temporarily. And I’ll be writing about that concept in upcoming articles.

Also, knowing that some people like to see content in alternate ways, I thought that it might be helpful to show recent content on a calendar as well as in a list. So I wrote a PHP script that analyzes my slightly tweaked RSS feed and visually present it as a calendar that I don’t have to maintain.

I like to travel, especially to take photos. When I started thinking about how I should separate my photography for the gallery section one idea was to separate by location. But that evolved into a different concept, the locations section. That section shows work I have done in relation to where I am. Or, wherever you choose. You can see photos, designs and articles based on the location of your choice. At the moment it’s a little empty, but I’ll be expanding that shortly with new content. It also ties into the map and the BrightKite API.

CSS3 and HTML 5

This time around I’m not going the expected XHTML 1.1 strict route; instead I’m using HTML 5. Why? Because it seemed like an appropriate choice if I want to be forward thinking about the way the site works. I like the idea of using semantic names that make sense to the content and not to the presentation, and I like that they have included some of those ideals into HTML 5 itself. (The obvious example of content based markup being the

and

tags.)

Admittedly I’m not using them as well as I should be, and that’s because it all came down to an issue of general preparedness. I don’t really feel that the web is entirely ready for all of those tags. But, I wanted to move myself in a position to use those tags as time goes on.

As far as CSS3 goes, I’m implementing a bit of that around the site as well. I like the idea of using more progressive elements instead of spending a lot of time adding in extra markup and graphics. That way, as browsers develop and the more advanced parts of CSS3 take hold the look of the site stays in place without the extra images that could slow it down. It also rewards users who update their browsers with a more visually appealing site. After all, why upgrade your browser if there isn’t an obvious incentive to do so?

I have also passively dropped IE6. You’ll notice the lack of PNG fixes on images and the blatant minor content alignment issues if you’re using IE6. I still want IE6 users to be able to use this site; I’m just not going to support their habit.

Overallâ€¦

I think the changes are pretty obvious, if you have seen my site before. And there are more changes to come in the future. I debated dragging the redesign out for a bit longer but in the end I knew I had to move on it.

So, there you have it, version 5 of LuzCannon.com.

Share on Twitter | Share on Facebook | Bookmark on Delicious |