Part of the work involved in creating an “accessible” website includes developing Cascading Style Sheet (CSS) media references to help different media types, such as handheld computers, web page readers, and printers, handle our web page design elements.
Below are some resources to get you familiar with how CSS media references work, and then we give you specific examples of how we use them in our web pages and web page design.
CSS Media Types – Links and Resources
- W3.org’s CSS-2 Media Reference
- Code Style Media Monitor (projection, print, etc)
- The W3C CSS2 recommendation, Section 7: Media types
Web Pages Going to Print
Web page designers spend so much time designing for the screen, they often forget that people still want to print them out and read them on a piece of paper. People just can’t seem to break the paper habit. So designers need to take a few minutes to think about how they want their beautiful web page design to print.
Deciding how your web page design will print means examining all the graphic elements and deciding which ones are critical to the printed presentation, and which ones will look wierd or interfere with the reader’s ability to read the page.
We decided that our sidebar, since it mainly featured links to other pages within our site, a diffcult thing to click on a piece of paper, wasn’t important to the final printed product, so we choose to eliminate it with a display: none in our print media style sheet. Other elements that didn’t need to be “read” on paper were our advertising and our bottom divisions.
Then we made a few design changes so the web page would print nicely, allowing for easy reading. We changed our links so they would have an underline and be boldly represented. We also increased the size of our header text since it is small on the screen, enhanced by a large background image of our logo, so it can be large and easily read when printed. We also changed the height of the header from 100px to 30px. Why waste paper on white space?
One of the most challenging aspects of designing web pages for printing is the way a printer handles a graphic image from a web page. If the image is close to the bottom margin, the printer may just cut the image in half or even more instead of moving the image above or below the physical page break. It can do the same thing with headings, blockquotes, tables, and lists. Not all browsers recognize the declarations for page-break-before, page-break-after, and page-break-inside, though more are adding it to their software. What these declarations do is command the browser to recognize a page break before or after the specific tag and respond according to the declaration’s instructions. For example, we don’t want our headings separated from our text, so we’ve set the page-break-after and the page-break-inside to avoid. This should tell the browser to avoid making a break between the heading and its text. It doesn’t work for every browser, but we leave it in with hope.
To see how our web pages will print, with and without printing a page, select from the browser menu FILE, PRINT PREVIEW. This will allow you to “see” the page before it is printed to see the changes in the design in preparation for printing.
body {
background: white; font-size: 10pt; margin: 0}
#sidebar {
display: none}
#bottom {
display: none}
#header {
height: 30px}
#header p {
font-size: 120%}
#content {
margin-left: 0; float: none; width: auto}
.ad {
display: none}
#content a {
font-weight: bold; color: #000066; text-decoration: underline}
h1, h2, h3, h4, h5, h6 {
page-break-after: avoid; page-break-inside: avoid}
blockquote, table, pre {
page-break-inside: avoid}
ul, ol, dl {
page-break-before: avoid}
img {
page-break-inside: avoid; page-break-after: avoid; float: none}
}
CSS Print Media
- Going to Print by Eric Meyer
- Kissing Print Versions of Pages Goodbye by Lachlan Cannon
- Printing With Style by Lachlan Cannon
- Printing Web Pages by CodeBitch
- Zeldman.com’s Essentials: Printer Friendly
- A List Apart’s CSS Design: Going to Print
- Evolt.org’s How good Does Your Web Site Look on Paper
- The Page-Break-Inside Property
- Killersites.com’s Making Web Pages Printable Using CSS
CSS and Handheld Computer Media
The category of handheld computers aren’t limited to PDA (Personal Device Assistant) computers. These can include many of the new cell phones with built-in web browsing capabilities. Handheld media takes your computer screen designed web page and squishes it down to the tiny screen.
Currently, there are few standards for handheld media style sheets because the web browsing software and hardware on handheld computers isn’t very stable. It is still an evolving market. In the early days, the handheld computers had little memory and even less processing power so they couldn’t handle much in the way of graphics. Today they are packing the power and speed into these little computers and their ability to handle graphics and web page designs are ever increasing.
If you design your HTML and CSS for total accessibility, with the ability to be easily read by screen readers, Linux-style web browsers, and without stylesheets, then you are already a step ahead on designing for the small screen.
Designing for screen sizes of 160×160 small to the larger 320×480 “stretch displays isn’t easy. Should the design “shrinkage” be the responsiblity of the PDA software or of the web page designer? Well, it’s a little of both. Handheld computers are moving fast into the realm of laptop quality, but they are still lagging. So the web page designer has to help them along a little.
In considering our handheld media responsiblities in our style sheet, we choose to let some design elements go. We removed the sidebar with a display: none and soon the advertising joined them. With the sidebar gone, we changed the alignment on the footer back to the left so it wouldn’t be shoved off the screen to the right. We reduced the margins on our content container to zero so as much as possible would fit into the tiny screen. The rest, because of our web standards compliance design, can literally take care of itself. We have some test examples of what our web page may look like on different computers and handheld media, as well as how other specialized software would view our page.
body {
background: center center; background-position: 45% 55%}
#sidebar {
display: none}
#content {
margin: 0}
#footer {
text-align: left}
.ad {
display: none}
}
The style codes for the handheld media could go into our main style sheet, but we choose to have it be separate in its own style sheet. Some browsers only load the appropriate style sheet as it is needed, so having it separate allows everything else to load faster. We grouped our print, handheld and aural medias together. The link in our HTML header is:
Handhelds, Cell Phones, and Small Screens – Links and Resources
- WebMonkey’s The End-All Guide to Small-Screen Web-Dev
- All Handhelds on Deck
- WebMonkey’s WML – Wireless Markup Language
- Open Mobile Alliance Organization
- Guide to CSS2 Support in PDA/Handheld Browsers
- pawgo.com’s Handheld Internet 101
- Pcman’s Free WAP Tools and Resources (WML/WAP Page Emulator)****
- How Can I Tell HTML Browsers from WML (Wireless) Browsers
- The Wireless FAQ (WAP, WML)
- W3C Mobile Access – Seamless Web Access From Mobile Devices
- W3C Mobile Access Activity Statement
- CSS Mobile Profile Test Suite
- W3C CSS Mobile Profile 1.0
- W3C HTML 4 Specs on Mobility – Handheld
- Open Mobile Alliance for the Mobile Services Market
- Web Design for Mobility – Handheld, PDA, etc.
The Hills Are Alive With the Sound of…
Our Web Page Talking?
Yes, our web page talks. Doesn’t yours? Well, everyone’s web page should talk and it should speak well for them.
Actually, our web page does talk. It doesn’t use Cyberbuddy or Microsoft Agent to talk to you, but it is also designed to accomodate those web page users who depend upon web page readers to “hear” web pages.
We stuck to a standard aural media with a man reading the page. I’d like to have it be a woman, but none of the women’s voices we “heard” sounded nice at all, so we stuck with good ole Paul to be our reading voice.
The changes we made to the aural media file were very minor. Since we rely heavily upon our H3 heading, we increased the pitch-range from 70 to 80 to add accent to that heading, and lowered the H2 heading pitch-range to 70 to make a difference in tone. We also added our invisible class to the aural media and set it to display: none in the hopes that this would further help to ignore the content set to invisible since it is boring and unintelligable php code.
There are a variety of “voice” style designs available on the web and we’ve included some links and resources below to help you design your own talking web page.
h1, h2, h3, h4, h5, h6 {
voice-family: paul, male; stress: 20; richness: 90}
h1 {
pitch: x-low; pitch-range: 90}
h2 {
pitch: x-low; pitch-range: 70}
h3 {
pitch: low; pitch-range: 80}
h4 {
pitch: medium; pitch-range: 60}
h5 {
pitch: medium; pitch-range: 50}
h6 {
pitch: medium; pitch-range: 40}
li, dt, dd {
pitch: medium; richness: 60}
dt {
stress: 80}
pre, code, tt {
pitch: medium; pitch-range: 0; stress: 0; richness: 80}
em {
pitch: medium; pitch-range: 60; stress: 60; richness: 50}
strong {
pitch: medium; pitch-range: 60; stress: 90; richness: 90}
dfn {
pitch: high; pitch-range: 60; stress: 60}
s, strike {
richness: 0}
i {
pitch: medium; pitch-range: 60; stress: 60; richness: 50}
b {
pitch: medium; pitch-range: 60; stress: 90; richness: 90}
u {
richness: 0}
a: link {
voice-family: harry, male}
a: visited {
voice-family: betty, female}
a: active {
voice-family: betty, female; pitch-range: 80; pitch: x-high}
.invisible {
display: none}
}