homepage Welcome to WebmasterWorld Guest from 54.161.175.231
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Discussion: The scalability of the media attribute
Can we really cope with multiple media using CSS
grahamstewart




msg:1221689
 4:25 am on Apr 4, 2003 (gmt 0)

Not a problem as such, just some thoughts I've been having lately.

Intro
The
media tag allows us to apply different CSS rules based on the type of device that is being used to view the website.

There are two ways to do this. We can specify a media attribute in the html link to indicate that the entire stylesheet is intended only for a particular device:


<link rel="stylesheet" type="text/css" media="screen" href="style.css">

or we can use the CSS @media rule to add media specific rules to an existing stylesheet:

[pre]
@media screen, print {
body { font-size: 12pt }
}

[/pre]

So far so good...

Using these techniques we can alter the layout of our pages so that they will suit the particular device that our user is viewing the page on.

Current valid media tags include..

  • screen - for a typical computer display
  • tv - web enabled television
  • handheld - PDA type device
  • print - printed page

    W3C indicates that this list will grow as more devices become web-enabled. So in the future we might expect to see something like 'phone' on the list as well.

    The problem

    Lets say you decide that your news site should be accessible on normal PCs (screen) and on PDA devices (handheld). So you diligently code up stylesheets for both devices.

    Because the PDA has a very small screen, it is likely that it's styling will be very compact. It will probably only use one or two pictures and may only display your headline story. All other elements will probably just be set to display:none.

    So that takes care of the screen size issue, but what about the other limiting factor of handhelds: bandwidth?

    Many browsers don't bother downloading pictures that are set to display:none to that's okay. But what about the text? You are using the same html for the 'screen' version and the 'handheld' version so all the text and html will have to be downloaded to the handheld only for you to then throw 90% of it away by not displaying it.

    Anyone who has tried using a handheld to surf the web on a sluggish 14.4 connection will tell you that this wastage is just not acceptable.

    The usual solution

    So to solve this dilemaa you go away and produce two different html versions of the site - a full version for screen and a cut down version for handheld.

    Alternatively, you might use some clever content management scripts to serve up the right version to the each device.

    Either way, if you resort to producing different html per device then what did you really gain from the use of the media tag? :(

    Not a lot really.

  •  

    grahamstewart




    msg:1221690
     2:47 am on Apr 7, 2003 (gmt 0)

    Perhaps one possible solution to all this would be to add
    media and src attributes to div (in a future version of HTML/XHTML obviously).

    That way we could write HTML like this..


    <body>
    <div id="topstory" media="all" src="headline.html"></div>
    <div id="story2" media="print,screen" src="story2.html"></div>
    <div id="story3" media="print,screen" src="story3.html"></div>
    <div id="storysummaries" media="handheld" src="summaries.html"></div>
    </body>


    ..so the device can then load only the html required for its media type.

    marek




    msg:1221691
     3:43 am on Apr 7, 2003 (gmt 0)

    If PDA users are happy with 10% of the content, why to send remaining 90% to all other users? Every web site should offer all its content to all users.

    On the other hand, alternate versions of a document for print, PDA, etc. may often be more usable than alternate stylesheets only, however their creation and maintenance may be quite expensive. CSS for print (because other media types are not supported yet) is great as a low-cost solution.

    grahamstewart




    msg:1221692
     5:08 am on Apr 7, 2003 (gmt 0)

    If PDA users are happy with 10% of the content, why to send remaining 90% to all other users?

    i don't think it is always appropriate to make your entire site available on a PDA. They are not well suited to browsing through large quantities of text and they may not be able to render certain elements (scripts,java,flash etc).

    Say your site is stock market site. You might wish to send PDA users the latest stock prices, so they can access that information while they are on the move. However they are unlikely to want to read a 5,000 word analysis of the prices on a PDA screen, so they will happily wait till they get to a PC for that.

    CSS for print (because other media types are not supported yet) is great as a low-cost solution.

    I agree, alternate stylesheets are very useful for controlling print. But the other media types ARE supported - they are listed as part of the Html4 standard and can be used by browsers to select the correct stylesheet for the device.

    (Having said that - I'm not sure if Pocket IE uses the 'handheld' media correctly, but I have seen requests for 'aural' stylesheets in the past)

    marek




    msg:1221693
     7:13 am on Apr 7, 2003 (gmt 0)

    Graham:

    You might wish to send PDA users the latest stock prices, so they can access that information while they are on the move. However they are unlikely to want to read a 5,000 word analysis of the prices on a PDA screen

    I understand, but are you sure that all normal users want to read the analysis when they come for the stock prices? Perhaps this is more general information architecture issue. Perhaps the analysis should be on a separate page anyway, or two different pages -- with the analysis and without it -- should be available to the users with two different needs.

    the other media types ARE supported - they are listed as part of the Html4 standard and can be used by browsers to select the correct stylesheet for the device

    They are the part of the standard, but does any device really use them?

    I'm not sure if Pocket IE uses the 'handheld' media correctly

    Just recently I've noticed a post in the css-d list that Pocket IE doesn't support CSS at all. Another handheld (frgot which one) supports CSS in part, but doesn't know anything about @media :(

    I have seen requests for 'aural' stylesheets in the past

    Can you remember, which device supports 'aural' (or 'speach') media?

    grahamstewart




    msg:1221694
     7:56 am on Apr 7, 2003 (gmt 0)

    Good point about it being a "general information architecture issue" and I can see what you are getting at.

    However, there is still the more general issue of available screen size. If I produced a site that used the same content for PC and PDA then it would either look very sparse and bare on the PC version or very busy and cluttered on the handheld version.

    A 1,000 word article can be a lot to read on a small handheld (which may only be a hundred pixels across), but it is easily readable on a PC screen (which could be a thousand or more pixels wide).

    Pocket IE doesn't support CSS at all

    Oh dear, thats very sad.
    You are right, support in other devices does seem very bad at the moment, but I am sure we will see it improve in the future as more websites move to a CSS based design.
    That's why I'm starting to think about this now.

    As for the 'aural' media, thats a slightly different issue. The device I saw was a screen reader plug-in for IE that a friend of mine was developing for the RNIB (Royal National Institute for the Blind) in the UK. I don't think it ever made it to production unfortunately.

    However I believe EmacsSpeak [cs.cornell.edu] uses the aural css.

    Global Options:
     top home search open messages active posts  
     

    Home / Forums Index / Code, Content, and Presentation / CSS
    rss feed

    All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
    Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
    WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
    © Webmaster World 1996-2014 all rights reserved