found-headline2

Last week we launched an info site for Found Folios, a new photography sourcebook set to hit the market with its first issue this September. Found’s books are unique in that they’re published monthly rather than once a year and each issue targets a specific market segment. Traditional creative sourcebooks are bulky annual monoliths (think: yellow pages of photographers) that make these sleek, targeted books look like an attractive new option for the industry.

I’m a big fan of Oxygen Design’s minimal, typography-oriented design featuring big, bold headlines and dramatic use of whitespace. While we were building this site I came across Smashing Magazine’s Top 10 web design trends in 2009, and realized that FoundFolios.com scores a 5/10. Is the glass half empty or half full? Either way, the effect is nicely realized and sets a terse, clear voice for the brand.

FoundFolios.com is built as a simple, static website making use of ASP.NET Master Pages. One could argue that Master Pages aren’t much more than over-thought include directives, but I find that they lend a pleasant formality to your project’s document structure. I was tempted to run with the idea and use them for everything, right down to css content layout, with different masters for 1, 2 and 3 columns, but decided there was ultimately no savings over repeating a few column <div>s on each page.

Alas, a simple static website is not without its tougher challenges. For one, Oxygen’s use of typography hits the web in one of its biggest sore spots – lack of rich font support. We tried to use the simple css image-replacement technique, but found ourselves spending way too long slicing the same headline images over and over again. It’s no big surprise that javascript font replacement ranks #5 on Smashing’s trends list. I think most people these days reach for sIFR when they need TrueType support on the web, and everybody is eagerly anticipating @font-face css support, but a handful of developers are making friends with a new kid on the block called Cufon. Cufon is essentially a font rendering engine written in under 6k of javascript. It dynamically draws fonts on the web using either VML in IE or Canvas in any decent, self-respecting browser. If you have ever bashed your head on the wall slicing and re-slicing hundreds of headline images, wrestled endlessly with sIFR or compromised a website design by giving up and using Arial, please try Cufon.

Last but not least are our subtly animated, jQuery powered slide shows. With real photographer spreads, these book images slide from one to the next, demonstrating various layout options and the overall look-and-feel of the book. The great jQuery Cycle Plugin saved us from many hours of slaving over swf slide shows. There were literally hundreds of different panels and we wanted to be able to easily update their contents and play order. Building everything in pure xhtml, css and javascript not only let us easily manage the content but also allowed for full animation control at runtime. Now that I think about it, maybe we should off those transitions for mobile browsers.

Lightweight!

Found Folios Website

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks