Javascript/ECMAScript

Catering for multiple media using CSS media, and McLayout multi-resolution

Effectively producing content presentation for the Internet has the unique challenge of having to create cater for more than one predetermined presentation formats. Unlike the case of a screen medium like television which features an extremely standardised presentation format and screen resolution, visual web content presentation has to be compatible with a few of the main screen formats commonly used by a given audience (can be determined by collective and analysing web metrics).

To cater for this existence of multiple presentation formats for web content, Web Design and Web Content presentation standards and technologies have been developed to meet this need. Of particular interest is the Mclayout techniques outlined in alistapart.com that have for objective to cater for the various screen-sizes that users may use to access given web content (PDA, WebTV, 640x480, 800x600,1024x768, 1400 16:9 widescreen etc) that cannot be catered for by the media attribute of a linked CSS file.

Advantages/Strengths of the McLayout approach
It can support a virtually unlimited number of configurations and feature-sets that can be attributed to any scripting event of value; such as user events, configuration, and environmental events.

Weaknesses and disadvantages of the McLayout approach
It cannot be used in the absence of Javascript support as it is characteristic of non-traditional presentation media such as Braille and WML clients that depend on a stripped-down content format. This is a crucial lacking as it is these non-traditional formats that normally use especially small resolutions an dimensions.

Conclusion
As explained above, the McLayout approach fits a niche that does not have an established or standardised method of approach. Much as one can more effectively cater for the main media families such as print, aural, embossed, braille and screen, McLayout can complete this W3C Web Standards-based multimedia support by providing specific support for a more refined list of configuration options for visual media (screen). To improve upon the stability and dependability of the McLayout, instead of using client-side scripting, using server-side scripting languages will enable McLayout to function even on media that do not support scripting (text only, bots/crawlers/archivers, aural etc)

Accessible, gracefully degrading and media format compatible styling solutions

Using Javascript of Microsoft's JScript to implement image rollovers is the more established method of interacting with user actions and events. However, some may prefer not to have to write the function.

Being that rollovers are mainly an aesthetic choice and feature, they belong more to the realm of content presentation than behaviour because like font and colour choices and combinations, using rollovers serves a little more than visually informing the user that the element is clickable.

Secondly, not all media support javascripting of visual elements. Aural, Mobile and other non-traditional web browsing tools either do not support images altogether or the images were not necessarily designed for their screen-sizes, and so the rollover elements are not suitable for use in these media. If one uses CSS in place of javascript t implement rollovers, it will be possible to quickly target the interactivity to certain browsers and media using the media="screen" or media="aural" attribute of a style tag and beyond visual rollovers, corresponding voice changes can be used to create the same effect or emphasis in non-visual browsers.
Thirdly, it is relatively more complicated to cater for media that do not need rollovers and the coding is generally more involving to create in Javascript as opposed to CSS judging by the number of lines of code required to implement the same effect using either method.

Lastly, using CSS to implement clickable rollovers triggered by the :hover pseudo-class ensures a gracefully degrading solution for browsers that do not support CSS or images.

XHTML Markup

- Create a link as you would in plain XHTML markup
- Place the link_text in a SPAN tag with a class (or ID) to be able to control it in CSS (use class to be able to have more than one such item in any given page) this class will implement invisibility.
- Add a class attribute for the link anchor that places a background images and swaps it on mouse0ver using a :hover pseudo-class.
<a xhref="http://www.cmsproducer.com/#" title="Descriptive title of my link destination" class="link_href"><span class="link_text">my Link Text</span></a>

CSS
Style the class that you chose for your link text as you would like but include the following key entries:

link_text

{/*make the link text transparent*/
visibility: hidden;
}

.link_href
{/*Display this image in the link area*/
background: url(imagepath/mouseout_button.gif) no-repeat;
}

.link_href:hover
{/*Display this image in the link area when you mouseover*/
background: url(imagepath/mouseover_button.gif) no-repeat;
}

CSS rollover demo

<style type="text/css">
a.css_rollover_demo
{
background: url(files/out_button.jpg) no-repeat left;
width: 70px;
height: 40px;
}

a.css_rollover_demo:hover
{
background: url(files/over_button.jpg) no-repeat left;
text-decoration: none;
}

a.css_rollover_demo span
{
visibility: hidden;
}
</style>

<a class="css_rollover_demo"><span>CSS rollover demo</span></a>

Description of Strategy
As long as CSS is supported by the browser, the link text will be invisible and the background image will be displayed. The pair will still be clickable as a link because the invisible link text is still linked (do not use display:none; as it will completely remove the link text, the link and the space it occupies)image will display. If CSS is turned off, the background image, and the :hover effect will be turned off; but the previously invisible link text will now be visible thus ensuring graceful degradation. Non-visual/traditional web browsers will be able to access the link-text, title and and alt attributes with this setup thus ensuring accessibility.