April 17th, 2006

Projecting your CSS

I can remember setting up my first stylesheet and being truly impressed with the power of CSS. While I was still learning the language and implementation, I came across the concept of print stylesheets. The fact that you could present a completely different style for print was mind blowing for me. It made so much sense all at once and was a great thing to learn. What’s also great is the ability to style for other media, such as handheld devices and projectors. Did you know that there are 10 total media types you can style for?

  • all
  • aural
  • braille
  • embossed
  • handheld
  • print
  • projection
  • screen
  • tty
  • tv

The media type I would like to focus on is that of projection. I’d just like to give a few quick tips regarding the media and leave things open for discussion because I am sure there are developers who have some good recommendations or facts to put in.

You Should Always Cover Projection

This does not go to say that other media can be discarded and forgotten, but along with your stylesheet to cover screen, print or handheld, you should always account for providing a projection style. I say this not only to make your site that much more usable, but because Opera has elected to use projection when it is in fullscreen mode. This is very important to keep in mind for those users of yours who happen to browse the Internet using Opera and by chance browse in fullscreen.

Some Things to Keep in Mind

If you have ever been in a meeting, classroom, or otherwise, and had the opportunity to see Web sites displayed on a projector, you can instantly notice some differences. More often than not, the colors are washed out and the contrast is not up to snuff. These two elements can be disastrous for your design and destroy your presentation. Styling for projection can really help you out here. It is within this stylesheet you can bump up the contrast of colors within your design to assist in their display on a projector. If you use gray text on your site you can switch to black for projection and make the site easier to read. You could also dive in to recreating some of the images on your site, and adjusting them so their contrast has a bit of an extra boost to compensate being washed out during projection.

You shouldn’t really have to make any structural changes while styling for projection, because your document should degrade well regardless of resolution. More often than not, projectors use a smaller resolution than the large resolutions of modern monitors. That doesn’t mean every projector you run into will be running an 800×600 resolution, commonly I see projectors running 1024×768 for the most part.

Testing for Projection

While many may see that Opera using projection while displaying for fullscreen as a hindrance, it can be looked at positively. If you happen to be testing for projection and don’t happen to have a projector lying around, Opera in fullscreen would be the way to go. No, it will not show the colors being washed out, but it will give you a look into what your site will appear as when being projected. If you decide to hide certain elements due to the fact that they would appear confusing on a projector, this is the place to test how the designs look and feel will be maintained.

In the Future

Styling for projection is something I am going to focus more on from here on out, simply because it is one of those things I find myself neglecting. I plan on going into detail on the other medium covered in the W3C Spec in future articles. I think it is very important to cover all of your bases when styling for different circumstances. Handheld stylesheets are going to become increasingly important with the constant push to the Internet on your cell phone.

Notes to Take Home

Basically, the idea to keep in mind here is that Opera uses projection when in fullscreen mode, and if that style is not provided, your user will be faced with a naked document. Also remember that projectors tend to wash out any colors it is displaying, effectively making your design harder to comprehend. To combat this, you can provide additional style to reverse the negative effect and increase the contrast on your own.

 Comments

14 Comments

  1. trovster April 17th, 2006

    I tend to do media=”screen,projection” to cover for the fact Opera uses the projection media in full screen mode. But it’s also a nice little work around for not showing the stylesheet to some older browsers (I can’t remember which now) which would really mess up the site with CSS enabled. Double whammy!

    You can choose between ‘print’ and ‘handheld’ with the web developer toolbar. No ‘projection’ for some reason, however I’m guessing that would be pretty easy to implement.

  2. trovster April 17th, 2006

    You can also fool NN4.x by using combinations of media as mentioned by Eric Meyer. Shame on me being lazy in my last post!

  3. astridas April 18th, 2006

    What an interesting fact. I will have to look into installing Opera to do some minor testing for projection. I will be waiting for more articles on specific media!

  4. Jon April 18th, 2006


    Author

    @trovster: Absolutely — you brought up a good point with handling older browswers. Thanks for the link — it helps to support the article.

    @astridas: Definately. Installing Opera won’t cover all the bases of a projector, but you can definately get a few steps closer without forking over the cash to test on an actual projector.

  5. Tasneem April 21st, 2006

    Hi
    I have put up a link to your article on my blog at http://blog.des-us.com.
    I hope you do not mind?
    My blog concerns web development and all its aspect, and I am trying to get more feedbacks etc. from my visitors.
    Thanks

  6. patrick h. lauke April 23rd, 2006

    but, correct me if i’m wrong, isn’t opera currently the *only* browser that makes use of “projection”? which, in essence, boils down the entire article to: if you do this, you’re only affecting how opera users in fullscreen mode see your site (which could conceivably be covered, same as other media types, just by omitting the media attribute in your stylesheet link altogether and making you css non-media-specific?)

  7. Jon April 23rd, 2006


    Author

    @Patrick: Yes, I do believe you are correct in that Opera is unique in supporting media=”projection”. However, I don’t think that this article should be renamed. Perhaps some day down the line the concept of styling for “projection” will be used to a higher degree and in more interesting ways.

    In regards to removing the media type I will have to disagree. I think that it is very important to separate your screen style from your print and handheld styles, which are put to use much more often than projection.

  8. patrick h. lauke April 23rd, 2006

    with omitting the media attribute i meant: you can have a common stylesheet defined for all media, and yes then add more media-specific ones. but having at least the common one media-agnostic you guarantee that, no matter what, users won’t see “naked content”.

    wasn’t really suggesting renaming the article…just wanted to clarify, as currently it gave the impression that *every* browser will go to projection style when the PC is hooked up to a projector (i’m mainly thinking about this part: “If you happen to be testing for projection and don’t happen to have a projector lying around, Opera in fullscreen would be the way to go”)

    and yes, i hope for a wider adoption of this media type (as well as hoping for more handhelds to honour their media styles as well…alas, most still pretend to be just “screens”).

  9. Jon April 23rd, 2006


    Author

    Ah, I’m sorry, I misunderstood your comment — all is clear now. I also agree in that the article may be misleading in some parts when referring to ‘testing for projection’. Thanks for taking the time to include your opinion, I’m going to take a look at my wording and revise as necessary. Thanks again!

  10. David April 25th, 2006

    Projection is cool and all but to me, I would want a screen projecting my website to be that of the exact website you would see on a computer screen. No need to change anything.

  11. Kelli April 26th, 2006

    Interesting. I didn’t know about the projection media type at all. As someone who routinely has things projected, I’ve been a bit disappointed in the outcome on more than one occasion. This should help greatly. Thanks.

  12. Hip February 9th, 2007

    I found this article when searching for “projection css for opera” on Google. I have been trying to find browsers that support projection css and could find no other browsers that use it, other than opera. I need to arrange a website presentation this for a specific client who uses opera and found this article most interesting, but your premise that “you should always cover projection” seems to be somewhat over-stated. Not because it’s not good practice, as it obviously is, but with only opera supporting it and hardly anyone using opera, is it worth the effort? Bobby Hip.

  13. Jon February 9th, 2007


    Author

    @Hip: I’m really glad the article helped you out. Basically what I meant by suggesting that projection should always be supported was simply including it as a media type for your style sheet (if applicable). There really isn’t much else to do unless you have to worry about color contrast or the other unique characteristics of most projectors.

    I understand your point about Opera being one of the only browsers to actually support the media declaration, but as far as longevity of a design is concerned, throwing in media="screen, projection" is a good preventative measure.

  14. morganusvitus April 5th, 2007

    The site looks great ! Thanks for all your help ( past, present and future !)