Interoperable Web pages are produced
using valid HTML markup and constructs and will display
and function as intended in all User Agents;
Graphical Browsers that display text
and images such as MS Internet Explorer, Firefox,
Google Chrome, Opera, Safari, Konqueror, et al.
Textual Browsers such as Lynx
that only display text; Screen Readers
(such as JAWS) that read pages from left to
right -- top to bottom -- and render the text as
synthesized speech or transport it to a Braille reader;
Search Engines such as
Google™ -- which display textual information
and hyperlinks; Hand-held Rendering
Devices -- PDAs (Personal Digital Assistants)
-- cell phones etc.
Pages should be checked in multiple Graphical Browsers at various screen resolutions to insure that they display and function as intended. Satisfactory function means that all content will display in the correct sequence, navigation will be as intended, and all hyperlinks will work correctly. I test all of my pages for display and function in current versions of, MSIE 6, MSIE 7, Firefox 2, Google Chrome, Opera 9, Mozilla 2 and Safari 3 graphical Browsers at 1280 by 1024, 1024 by 768, 800 by 600 resolutions, and small screen rendering mode. I also test them for accessibility in the Lynx textual Browser and the TextAloud audio screen reader.
Emulating page display in textual Browsers and Screen Readers:
Free "Lynx emulation" textual Browser:
The Yellowpipe Lynx (text only) viewer is an excellent utility that emulates the output of the most popular textual Browser.
Inexpensive audio Screen Reader:
My own favorite audio screen reader is TextAloud, which I find very easy to install, set-up, and use. Excellent toolbars are installed for IE & Firefox Browsers. It is a Windows implementation and is available at NextUp.com as a 15 day free trial download. The $29.95 purchase price is very reasonable, especially when compared with $895 for JAWS or Window Eyes, and $795 for Hal, all of which I have used as trial versions. Visit my Screen Reader page for more information relating to screen readers.
Note, In the absence of assistive devices, disable images, style sheets (CSS) and page colors. The resultant display emulates pretty much how the page renders in textual browsers and screen readers. It also depicts the structure, including use of headers, of the page.
Web authors do not know what type of User Agent, graphical Browser, textual Browser, or Screen Reader, each of their visitors will use to access their web pages, or what screen size (resolution) they have. They certainly have little control over how their web pages will be viewed and displayed. As the WWW progresses, Web authors will have less and less control over the way users view their web pages in graphical Browsers. Many users, especially People with Disabilities, will exert more and more control over how they view and navigate web pages. Newer graphical Browsers permit users to do such things, via drop-down menus, as:
- Selectively turn off image display.
- Disable (CSS) Style sheets.
- Enlarge or reduce text size (also via the keyboard).
- View only alternate text for images.
- Resize the entire page layout.
- Disable animation.
- Turn off or modify coloration.
- Substitute the user's own personal style sheet, and so on.
Newer computer screen conformations and smaller viewing devices are necessitating more flexible/fluid Markup & CSS (style sheet) authoring these days. Of particular interest is the use of cell phones to browse web pages. The Opera Web pages, Opera Mobile Browser, and Small Screen Rendering Technology are excellent references, the latter one being especially valuable for Windows O/S Web authors. The Apple IPhone uses a mini Web Browser by Safari
Small Screen Rendering: Cell Phone/PDA Web Access:
Hand-held mobile devices such as the Blackberry (8800, Curve, Pearl), and the Palm Treo 650, employ Web Page Small Screen Rendering which can be emulated in Firefox via the top drop-down menu: Tools> Web Developer> Miscellaneous> Small Screen Rendering (or via Miscellaneous> Small Screen Rendering from the drop-down menu in Chris Pederick's Web Developer add-on). The same facility is available in Opera, another excellent developer tool, via View> Small screen (toggle) from the top drop-down menu.
There are some special considerations to take into account relating to small page rendering in Cell Phones/PDAs when composing Web pages. The following suggestions/guidelines are based on the narrow window and columnar display features of most of these devices.
- Structure pages utilizing header markup. - use h1 for the page title and h2-h6 for section headings.
- Keep images small - large ones take too long to load and do not render well.
- Use short Link titles and URLs - long ones will truncate.
- Use proportional, rather than absolute, sizing and dimensions (% and em rather than pixels).
- Use basic font styles - PDAs only use the most common ones (Times new-Roman, Arial, etc.)
- Be careful using Tables for layout - they may not work well.
- Avoid Frames - they do not work on small screens.
The Firefox Graphical Browser with Chris Pederick's Web Developer Extension installed is an outstanding tool for Web authors. The download is very easily installed and only a quick re-start of Firefox is needed to activate it.
The WAT IE Browser Accessibility Toolbar is an outstanding extension that is reminiscent of Chris Pederick's Web Developer Extension for the Firefox Browser.
The Developer Console offered by Opera also provides an excellent array of Web authoring tools.
Following are two invaluable Browser references -- be sure to read the caveats:
It is the quality and usefulness of the content and the ease of navigation through it that are of the greatest importance to most web page users.
This page, which is licensed under a Creative
Commons Attribution, Noncommercial, No Derivative
Works, 3.0 United States License was created
by JFP (jp29@cox.net) and should be so
attributed. Be sure to comply with copyright
requirements accompanying externally linked pages and
materials.