Cool

Top: onscreen, bottom 2: in print

Earlier this week Jeremy Smith wrote Delivering Web Content to Mobile Devices in which he discussed some of the different options, and concluded that by using CSS, one can configure pages for handhelds just as easily as one can for print or other media options. I personally don't surf the Web on my cellphone—half the time I don't even remember to recharge the darn thing—but just yesterday I saw my associate, Steve, use his phone to check the start time for an upcoming football game.

Given that people like Steve are accessing Web material in a variety of ways, I thought this would be a good time to follow-up Jeremy's article and discuss how we can customize our sites for different media. The W3C currently recognizes the following media types: all, aural, braille, embossed, handheld, print, projection, screen, tty and tv. Here at Case we've primarily been using all, screen and print. The CSS screen and print files included with the templates merely force a fixed width on the pages, but as Jeremy mentioned, with some clean code and an understanding of CSS, one can provide more customized options.

Parameters to consider when editing for different media types

When thinking about different media types we often thing of size. A cellphone has a much smaller screen than a computer monitor and offers different navigational tools. It's obvious that we need to shrink our content to conform, but we also need to decide what existing content should be kept, what extra could be added, in what order we arrange the content, what colors and fonts we use, etc. If building content for aural use, such as browsers that can read for the blind, we might also consider adding additional navigational aids as well as styles geared specifically to the medium, such as volume properties. Each media type will require different options, some using CSS and some using additions to your XHTML.

Example: customizing for print

I've not yet worked with most of these media types, but I have been tinkering a bit with print stylesheets. After transitioning the News Center to the blog server I soon realized that pages weren't printing out correctly. The fixed-width shortcut used in the regular templates wasn't going to work and didn't completely serve our needs. In planning how to fix this I had two goals:

• Make sure the desired content printed cleanly—in its entirety—without being truncated, cut-off or otherwise mangled.
• Display content in such a way that would be most useful to visitors.

The first issue was primarily addressed by changing the way I used measurements. Pixels were changed to inches for page-size and points for fonts. Additionally, paged media such as printouts must accomodate page-breaks. While I won't walk you through each bit of code, you can view the stylesheet here.

When deciding what content to include I considered known printing issues as well as user-need. The default setting for most browsers is to NOT print background colors and images. This is why you get a blank page when you try to print from a Web site that has white type against a black background. In the case of our templates, this means that the photo in the upper right doesn't print—thus leaving the site title invisible. It also looks a little strange to have the logo on the left with a big chunk of emptiness on the right. To compensate for this problem I adjusted my files so that the only part of the banner to display would be the title, now in black instead of white.

Below that I included the header, the text and any accompanying graphics, but removed the left menus which most users won't need. Having removed the banner, I added to the bottom a signature giving the page address, name, Web site and phone number for our office and the Case logo. This way if someone is handed the printout, they will still be able to ascertain its origins. While some browsers include the url of the page by default, some do not, so I felt it was safer to include it here. I added this information by creating an extra div in the XHTML file and setting it to display only in the print stylesheet.

While I may still finetune this a bit, the overall print look seems to work pretty well for the News Center. Your sites may have different requirements but I hope this has given you a few ideas on issues to consider. Of course it is also important to remember that various browsers and printers will respond differently. No matter how carefully you craft your code, you may find that users experience different results.

Media Type Resources

The resources listed below and in the CSS articles will help you learn how to implement different media stylesheets for your sites.

• Code Style Media Monitor
• CSS Design: Going to Print
• Designing for Context with CSS
• Pocket-Sized Design: Taking Your Website to the Small Screen
• Printing a Book with CSS: Boom!
• Print Different
• W3C Media Types

Don't print this page

I used the News Center for my example instead of this blog because I've been working on the print.css file for this site and it is still a bit wobbly. If you try to print from it today (Nov. 16th 2006) or while I'm experimenting with it, you may discover that it doesn't not print correctly. Once I'm done, it will.