Specifying Media Types in Style Sheets

During the design phase of a web site many developers do not take into account the medium through which the web pages will ultimately be viewed. What many developers do not fully appreciate is that the web is increasingly a multi-medium information source, and that many people prefer to access web pages via alternative medium such as the printed page, aural or Braille browsers, and television screens (CSS and Media Types). When designing a web site it is important to ensure that the web pages can be adequately viewed regardless of the medium being used to view them. By employing the specification of media types in style sheets a developer can control the presentation of the web pages depending on the type of medium they are being displayed on.

The font size used for displaying the text content of a web site on the screen of a computer monitor may not be the best font size for displaying the same text on a printed page, or on the screen of a hand held device. A way to specify the print font to be used depending on the medium accessing the web page would be by the employment of the @media rule in a style sheet. A @media rule specifies the target media types of a set of rules, thus allowing style sheet rules for various media within the same style sheet (Media Types). Therefore, by using the @media rule, a developer could assign a font size of 12pt when the text of a paragraph is displayed on a monitor screen, and a font size of 10pt when the web page containing that text is printed. The @media rule gives the web developer the option of targeting style rules to specific media types, allowing one to explicitly request that one or more style rules will only apply when rendering to a particular device (Style Sheet Media Types).

CSS2 recognizes 10 different media types that can be utilized for assigning style rules to particular media within a style sheet. The media type descriptors supported by CSS2 conforming user agents, that may be used for the assignment of style rules to medium are: all, aural, Braille, embossed, handheld, print, projection, screen, tty and tv (Code Style: Media dependent style sheet glossary). The all descriptor is used for declaring style rules for all media. The aural descriptor is for targeting speech related medium such as sound synthesizers, while the Braille and embossed descriptors target touch-feedback and Braille paged printing devices respectively. The handheld media descriptor is targeted for small or handheld devices with small screens, limited bandwidth or display capabilities. The print descriptor is for when the web page content is transmitted to the printed page. The projection descriptor is for web pages that are displayed via slides onto a projection screen, while the screen descriptor is targeted for continuous, non-paged color computer screens. The tty descriptor is for assigning style rules to media using fixed-pitch character grids such as terminals or teletypes, and the tv descriptor targets television related devices.

At one time it was widely assumed that web pages were viewed exclusively via a personal computer with a monitor, but there are numerous ways to access a web page and each of these different media have their own characteristics (Learn web standards:: css guide - media ). The @media rule and the number of media type descriptors available for assigning style rules to media types in a style sheet, provide a way for web developers to ensure that the web site content is suitably displayed no matter the type of media used for viewing the content. Media rules are easy to construct, provide numerous options for formatting web content to the device being used to display it, and can contribute greatly in ensuring that the web site content is accessible to the widest circle of potential viewers as possible. All web developers should liberally employ media rules in their style sheets when constructing sites that may potentially be viewed by a large and diverse community.

References

CSS and Media Types
Retrieved September 15, 2007 from
http://www.yourhtmlsource.com/stylesheets/cssmediatypes.html

Media Types
Retrieved September 15, 2007 from
http://www.w3.org/TR/REC-CSS2/media.html#at-media-rule

Style Sheet Media Types
Retrieved September 15, 2007 from
http://www.eskimo.com/~bloo/indexdot/css/topics/media.htm

Code Style: Media dependent style sheet glossary
Retrieved September 16, 2007 from
http://www.codestyle.org/css/media/Glossary.shtml

Learn web standards:: css guide - media
Retrieved September 16, 2007 from
http://www.westciv.com/style_master/academy/css_tutorial/advanced/media.html

Website Usability Testing

Prior to launching a new website, usability testing is essential for correcting any problems that may exist with the site, and for ensuring the site’s effectiveness and functionality. Even though resources such as time, money and personnel are required when testing the usability of a website, less resources will be employed testing a site prior to its release than would be if undetected problems are required to be corrected after the site is in production.

Visitors to a web site have to be able to actually use the site and understand the content, otherwise the site is a waste of their time (Design Tip: Web Site Usability Checklist). Therefore it is essential that any potential problems with a web site be detected and resolved prior to the release of that site. Studies have shown that when done correctly, usability testing can uncover 80 percent of the problems within a web site (OJR’s ‘five guide’ to do-it-yourself website usability testing). Early detection of problems affecting the usability and functionality of a web site increases the likelihood that when the site is finally released for public use it will be a site that is easily navigated and enjoyable to visit, with the user returning to the site after their initial visit.

Usability testing has to be done properly in order to produce the desired benefits. The individuals who are to perform the testing are an extremely important component of the testing process. The subjects selected to perform the testing should be as similar as possible to the “real users” that will eventually be visiting the site. The subjects must have clear instructions on how to get to the testing location, be comfortable and at ease, be acclimated with the testing environment, and provided with an opportunity to familiarize themselves with the web site prior to the actual testing (8 guidelines for usability testing). Set up tasks for the subjects to perform when testing, making sure that the instructions for these tasks are clear, concise and easily understood. The tasks should be scenarios that are essential for the success of the new site and the subjects should be provided with an opportunity to suggest tasks of their own. Additionally, the subjects should be left alone during testing; staying out of site during the testing is a good idea so as to not make the subjects nervous or self conscious.

When to test is an important consideration when planning usability testing and smaller, more frequent testing is more effective than one big test of the site towards the end of the development process. Suggested times for testing would be at the conception of site, by testing a rough version of the site’s home page, repeatedly during development, as critical pages or sections are completed, and before planning a redevelopment of the site (Web site usability testing: recommended procedures). A good range for the length of the usability testing could be from 15 minutes for a single page to an hour for a whole site. Having the testing subjects examine a site for more than an hour at a single testing session could be counterproductive if the subjects start to tire or lose interest. Finally, have a feedback form ready for the subjects to document their impressions of the site at the conclusion of the testing. Prepare a list containing the testing subject’s comments and complaints, along with any detected problems with the site for use during the next phase of development.

Usability should be a major consideration throughout the web site development process. Usability should never be an afterthought since testing and fixing a web site after it has been built and released, is efficient and unlikely to produce good results (Usability First: Website Design). The ability of the end-user, who will eventually access the site to successfully use the site, understand its purpose, grasp the site content, and have an enjoyable experience while visiting the site, should always be in the mind of the developer while creating the site. Usability testing is an effective tool to ensure that the finished web site lives up to the expectations the developer had for it at its conception.


References

Design Tip: Web Site Usability Checklist
Retrieved September 09, 2007 from
http://www.netmechanic.com/news/vol7/design_no4.htm

OJR’s ‘five guide’ to do-it-yourself website usability testing
Retrieved September 10, 2007 from
http://www.ojr.org/ojr/stories/070802ruel/

8 guidelines for usability testing
Retrieved September 10, 2007 from
http://www.webcredible.co.uk/user-friendly-resources/web-usability/usability-testing.shtml

Web site usability testing: recommended procedures
Retrieved September 09, 2007 from
http://www.webpagecontent.com/arc_archive/124/5/

Usability First: Website Design
Retrieved September 09, 2007 from
http://www.usabilityfirst.com/websites/index.txl