“Off Book is a PBS Arts web-only series that explores experimental and cutting edge artistic media.” — From Off Book Twitter page

This episode focuses in on Type. I have not yet had a chance to watch it so part of the reason I am posting it here is for myself.

This Website caught my eye yesterday as I was looking through entries on CSS Mania. I posted this screenshot on Flickr. I did a pretty extensive commentary on Flickr in the summary and using the notes feature to point out different elements on the page.

What I really like about this site is the sense of dimension that it has. The designer used texture, shadow and highlights to make this design come alive. A couple of horizontal elements look like they fold behind the main content area and this adds to the illusion of dimension. I also liked the color scheme of this site.  Nice work FortySeven Media.

Sidenote — I was excited a couple of weeks ago when CSS Mania posted my design for Big-Break.com.

I am currently working on a new design for Campus Crusade’s Summer Mission Projects site. It is an exciting project because it is the first to be a total package. Our team is working on the promotional videos, print brochure, sticker and Web site. The video has been the lead player in determining the common design thread that will weave through all the pieces in the package.

For the Web site, I am using “real-life” elements of a desk and it’s contents and combining it with illustrations that create a fantasy world within the video.

As I have progressed with the design, the headings typography was begging to be a scripted style that fit into the theme of a sketchbook on a desk. Now I was faced with the problem of how to create those headings in a scripted font. I decided to use image replacement for navigational elements. But as I thought about it, sIFR seemed to be a good solution for the content headings instead of image replacement.

I have never used sIFR before and this seemed like the perfect opportunity to give it a try. I found a tutorial, This is How I Got sIFR to Work. The author’s intent was to distill the “official” documentation into a simplier form. I give him kudos on accomplishing that intention.

I was very excited tonight when I finally got it to work. I had been working with it for a couple of hours last week but never had success. Now I am not always the best at following instructions so tonight, I decided to go back and go through each step. (I never follow the owner’s manual of a new electronic toy. I would rather play with it and figure it out myself.)

One of the first things I found was the swf file I created last week did not work correctly so I went back and created one according to the tutorial. Also the first time I was working through the tutorial, I did not download the latest sIFR from the place the author suggested. So as I had worked through his tutorial, several things were not matching up. That had really been frustrating. It was so much easier to have the right version and be seeing the same things the tutorial was describing.

I am so glad I stuck with learning. I think this is an appropriate and smart solution. I will not have to create images for every heading and it was also cut the download time.

The prerequisite for doing something meaningful with any of these skills —€” HTML, CSS, Flash or whatever —€” is first embracing the medium as something different from print. Indeed, there’€™s no point in learning these skills unless as a print designer you’ve made a prior shift in your understanding of how design works in digital media. Specifically, come to grips with the fact that, on the Web, design is not a method for implementing narrative, as it is in print, but rather it’€™s a method for making behaviors possible.

I liked how he makes the distinction between print and Web design.

• Print design is a method for implementing narrative
• Web design is a method for making behaviors possible

The Web is about interaction and behavior. It is a fundamental paradigm that anyone working in the Web needs to understand and embrace.

For me, one of the ways that I still need to embrace the medium is in the area of typography (see related post). I am still seeking too much control and need to embrace the fluidity of the medium. But I am embracing it and looking to grow more in this area.

A couple of weeks ago, I heard Richard Rutter of Clearleft speak to the subject of Web typography on the Boagworld podcast. Richard has put together some thoughts on webtypography.net. I was poking around today on that site and came across these thoughts related to using ems instead of pixels in defining the size of type on a Web page.

“… the beauty and advantage of the Web as medium is that readers are able to adjust their reading environment to suit their own needs. This is a concept that should be acknowledged & embraced, and built into website designs from the ground up.”

I have to admit, I have been reluctant to embrace using ems instead of pixels. Part of it is that I have not really understood ems. I have been hesitant because I have to relinquish control as a designer. But I think what Richard says here makes good sense. The Web is a medium where readers can adjust their reading environment. This should be recognized and embraced. It is part of the medium.

I had already been thinking about this after picking up Steve Krug’s second edition of Don’t Make Me Think. I was reading about accessibility and he also addressed the issue of resizable type. He talked about the fact that designers fear a compromised design when they hear “accessibility.” I think that has been my fear in using ems and giving up control. It becomes more of an issue when using text in “navigation bars” when increasing text size can break the design. I am motivated to read Dan Cederholm’s chapter about this in Bulletproof Web Design.