Using CSS to deliver Web content to different media types

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.

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.

Bookmark & Share:
  • Facebook
  • StumbleUpon
  • Digg
  • LinkedIn
  • FriendFeed
  • MySpace
  • email

    Share on Google Buzz

  1. Not only CSS but also XML, RSS, AJAX... all those new technologies and platforms are completely changing content management and publishing. The proof is the usage of those tools from mainstream media like large newspapers.

    Comment by Daniel — November 21, 2006 @6:19 am

  2. I really think the mobile devices CSS is overblown. I'm tech savy and I hate reading text on my cell phone / PDA. Perhaps a bigger screen and a more usable navigation device would do the trick but like Digital Books some things are better left as they are. Leave the websites to big screens, mobile devices should view the web entirely differently then a computer.

    Comment by George Morris — November 23, 2006 @1:11 pm

  3. Very informative and helpfull. I've included a link to this page in my post at Thanks for the info. Case

    Comment by Case Stevens — May 2, 2007 @10:06 am

  4. Very informative and helpful. I've included a link to this page in my post at Thanks for the info. Case

    Comment by Case Stevens — May 2, 2007 @10:06 am

  5. George has several interesting comments discussin the computer screen vs the mobile screen, it'll be interesting to see if the iphone helps to bring the web to the mobile phone in greater numbers.

    Comment by Matt — May 22, 2007 @3:43 pm

  6. Redoing the entire web to be viewable on mobile phones seems unlikely. I'm betting mobile phones will finally rise to meet the challenge, and consumers will happily pay for it. Opera has already shown better mobile browsers are possible, but we definitely need a competitor like Apple to make mobile browsing mainstream.

    Comment by Denver Web Design — May 25, 2007 @9:20 am

  7. I'm with George on this one and Apple has taken note with the new iphone and its cutting edge browsing technology that actually makes browsing the web from your PDA a satisfactory experience. Leave it to Apple to keep design moving forward.

    Comment by Bryan Boettiger — August 9, 2007 @1:26 am

  8. Thanks for the info! I'm glad you posted those links. As cell phone technology keeps getting better, people will become more prone to using their cell phones to check the web just as often as they use their computers. I am going to use some of these tips in the future.

    Comment by Chess Openings Guru — January 30, 2008 @7:37 pm

  9. Cell phone access has continued to improve, as 3G is added to the iPhone, mainstream mobile bandwidth will improve. I anticipate that Flash or Silverlight support on mobile devices will allow developers to take the user experience of mobile content to a higher level.

    Comment by Denver Web Design Unleaded Software — April 5, 2008 @2:49 pm

  10. Thanks For the info, its good learn for me.. Cell phone access has continued to improve, as 3G is added to the iPhone, mainstream mobile bandwidth will improve. I anticipate that Flash or Silverlight support on mobile devices will allow developers to take the user experience of mobile content to a higher level.

    Comment by Bagous — July 11, 2008 @5:10 am

  11. Many thanks for the article, it's extremely helpful. Mobile platforms are becoming more and more common, and are improving rapidly. Newer devices are now supporting flash and some popular browsers. Hopefully, with the modern technology, the web pages will display correctly.

    Comment by Cheap Phone Calls — December 16, 2008 @11:25 am

Leave a comment

RSS feed for comments on this post. | TrackBack URL