Changing Clothes

If you haven't noticed already, there's a new look to our site! It's not 100% complete (the Blog and Smugmug portions use the old design), but a good portion of the site has been converted to the new look and feel.

(Update 6/14/2010: The Blog has been updated to the new look and feel. Yay!)

There was nothing wrong, necessarily, with the old design. I love that design. But I happen to love this design as well, and I felt it was time for a "change of clothes" for the site. The previous design has been in place for quite awhile, and I'd learned a lot since I first coded the original design. A lot about how best to present a photograph in a site, and a lot about how to better code a site in general.

So, if you haven't already checked it out, go take a peek at the new design and see what you think. Then come back and see why the design evolved the way it did. (Or not. It's up to you. Regardless, please, leave your thoughts!)

• Everything is White!
• Okay, not quite everything, but this is a big change from the old design where the primary background was black. While pictures look great on black, I happen to think they look great on white as well, especially when appropriately framed.
• White gives a sense of "airiness" -- that is, white isn't claustrophobic. Black can be oppressive and containing, while White (if used properly) can feel open and relaxing.
• Fonts
• There are some really cool fonts out there. But they still don't really play well in the Web world (although there are a lot of solutions out there that help). Even so, I like to limit the fonts I use in a design to as few as possible. In this case the font in the header area is the same font throughout, though it doesn't match the remainder of the site since it isn't a font available on lots of computers.
• The body text is Arial / Helvetica, but the headings get to be Garamond or Georgia. This helps provide a visual distinction between the content and headings.
• Color Scheme
• Other than the change to a white background, the color scheme has remained mostly intact. The red element is used throughout the site, often as link colors and background colors. Otherwise text is a dark gray (not quite black) for primary content.
• Logo
• If you look closely between the old and new design, you'll notice that the logo has changed. Slightly to be sure, but it is a change.
• New Slideshow
• We're using SlideShowPro now for the homepage slideshow which will cycle through all our portfolio images. It's a fantastic value for what you get, and it has built-in integration with Smugmug's RSS Feeds. How cool is that?
• Plus it's super-customizable. 
• Oh, and resize the window a bit. Up to a certain height, the slideshow will adjust to the size of the site and maintain a nice aspect ratio while filling the content area. This is done with some simple Javascript that, remarkably, seems to work with every browser. (Except for IE6, probably. Oh well. Upgrade, please?)
• Flexible Content Width
• 1000px used to seem so big. And then I got a bigger monitor. And a bigger one. And so on. Suddenly 1000px looked downright ridiculous on the large monitor. And so this new site can grow between 1000px and 1400px.
• 1400px was chosen as the maximum in order to keep line lengths reasonable. Long lines of text get really hard to read, and a 2000px wide site isn't exactly readable.
• Redesigned Sidebar
• Each section of the sidebar now has a box around it to help separate it from the other sections in the sidebar. Each section has a specific purpose, and the boxes help make that point.
• Each link is uneven. This is a growing trend in a lot of newer sites, and I find I like it here. The difference in background color (white) to the box's background color (gray) also makes the link stand out a little, so hopefully people get the idea that the links are clickable.
• The top part of the sidebar (under "Sections") still adjusts itself according to the section of the site you are in, so that hasn't really changed a lot.
• The Freebies section isn't really new; you could get all the content (except for a couple features not yet implemented: Backgrounds and Tutorials) using other links on the site, but now they are consolidated and available on just about every page in the site. 
• I love having social media links in the footer of sites and design most sites that way. But this time I wanted to do something different, and so you have the links to the various Social Media sites in the sidebar.
• Subscribing hasn't always been terribly obvious, so it gets its own box as well.
• Homepage Tweaking
• The homepage is the most obvious benefactor of this changing of clothes; the new slideshow is the best part, but the remaining content has also been tweaked. Below the slideshow is the "recent photos" area, which looks slick in any CSS3 compliant browser, but still adequate in IE. 
• Below the recent photos are two recent blog posts on the left, and four recent tweets on the right. The tweets are styled differently to indicate that they aren't blog posts.
• Other Pages
• Other pages haven't seen as much of a change, but that's coming. I'm never averse to reviewing and changing copy where necessary, so those pages will probably change in the future. In the meantime, though, very little was necessary to make them fit the new design.
• Footer
• The previous design had a pretty busy footer. The new design is much simpler. It has just two components: a "quick" contact form and the legalese. That's it.

Now, I'm sure there are plenty of bugs in this -- I was simply too excited to let it marinate much longer, so out it went. (And at a horrible hour, too. Sigh.) So if you do find something odd, let me know, and I'll add it to my todo list. And rest assured the blog and Smugmug portions of the site will follow suite very shortly. (Thankfully the hard part of web design is almost always the design, not the implementation. Unless you're talking about Internet Explorer. But that's a rant for another day.)

So, I hope you like the new look -- I sure do!