====================================================================

Making your web pages Lynx friendly

  1. Graphics can be Lynx friendly
  2. Tables can be Lynx friendly
  3. Be careful with specific tweaks and features
  4. Test your pages with different browsers
====================================================================

Graphics can be Lynx friendly

Graphics can serve many functions: "real content" and illustrations, page decorations, elements such as bullets and separator lines, even navigation buttons and imagemaps.

Just don't ignore people using text-based browsers!
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Give your images appropriate alternate text

You can specify an "alternate text" string with
<IMG SRC="image URL" ALT="alternate text" ...>
Lynx will display the ALT string instead of that generic [IMAGE]. Some graphical browsers, such as Netscape, will also display the ALT strings when image loading is turned off.

To make a text-based browser completely ignore the image, use ALT="". This is good for strictly decorative images that should be invisible in Lynx or another browser that can't display them.
Example: <IMG SRC="thingy.gif" WIDTH=100 HEIGHT=80 ALT="">

Otherwise, use ALT to specify an appropriate string. For ordinary images, give a concise description. Someone (perhaps using a text-based browser) may wish to download the image.
Example: <IMG SRC="pics/squid1.gif" WIDTH=50 HEIGHT=50 ALT="[Blue-green squid at night]">

If the image is a bullet, use something like ALT="*"; if it's a separator line, something like ALT="----------------------------"; if it's a "button" link, something like ALT="[Next]"; and so forth.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Imagemaps and alternatives

Imagemaps can be made to work with Lynx (while working with a graphical browser exactly as before) by modifying the web server's imagemap handler (to return a menu when it receives no mouse-click coordinates). The built-in imagemap support in the free, high-quality Apache web server can return such menus.

But this requires the user to select two links, one to get the menu, another to choose the specific item. It's simpler to avoid imagemaps altogether.

Imagemaps can often be replaced by a table!

Give each link its own piece of (borderless) graphic and its own ALT string. In a graphical browser, it'll look like a fancy imagemap on screen, but in a text browser it's immediately usable.

A silly example

Bad:

This is a single image used as a regular imagemap. (The information associating clickable regions with URLs to go to is kept in a separate file.) Most web servers will give an error message to anyone trying to follow the resulting single "[ISMAP]" link in Lynx.

Slightly better:
[ Squids ] [ Walruses ] [ Frogs ]
This is an imagemap that also has a client-side imagemap (as supported by HTML 3.2). The active regions and their associated URLs are specified in this web page, and some text-based browsers can take advantage of this information to display a list of links. (Newer versions of Lynx create a "[USEMAP]" link that gives you the list. But plenty of sites have older versions installed....)

BEST:
[ Squids ][ Walruses ][ Frogs ]

This is a table containing three separate images that serve as links. In many graphical browsers, there are no breaks between the images, so they look like a single "imagemap". Lynx, however, displays them as the three separate links they are:
   [ Squids ] [ Walruses ] [ Frogs ]
Anyone, using any browser, can follow individual links presented this way.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Friendly graphics for graphical browser users

Many people will be reading your pages with graphical browsers such as Internet Explorer, Mosaic, Netscape, and others. There's a quick way to make life much easier for them:
Use HEIGHT and WIDTH attributes in your IMG specification.
For example: <IMG SRC="pics/squid2.gif" WIDTH=63 HEIGHT=50 ALT="[Blue-green squid]">

With this width and height information, a good graphical browser can lay out the entire page and display the text before retrieving the graphics, which can take quite some time over a modem. (Without width and height information given, it has to load each image to determine its size, and may not display anything further until then.)

You should give the actual size of your image in pixels. (If you give a different size, some browsers will stretch or shrink the image to fit, others won't.) You can find the image's size in most graphics manipulation programs and some browsers. (Netscape will display something like "GIF image - 63x50 pixels" in the title area if you open the image itself.)
====================================================================

Tables can be Lynx friendly

Many tables that look nice in a "table-capable" browser such as Netscape or MS Internet Explorer get shredded into total incomprehensibility in a browser (such as Lynx) that doesn't support tables.

If you're using tables to control vertical and horizontal layout in general (rather than precisely lining up columns of numbers and things), it is possible to design pages that look their best in a table-capable browser, yet also make sense and look good in a "table-challenged" browser.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Here's how!

A browser that doesn't handle tables will ignore the table tags. You can use this to your advantage! Just arrange your information in an appropriate order, with tags such as <BR> and <P> in the right places, so that the page would still be usable if the table tags weren't there.

Think how you'd read the table aloud to someone. Then arrange your information in that same order.

If you would read it left to right, row by row, a regular table with separate rows is fine.

But if you would read down each column, use a single table row, using line breaks or nested tables to create the vertical structure within each <TD> Table Data element.

In other words, arrange it as if you couldn't use tables; then put the fancy table formatting on top of that. Line breaks (<BR>) at the ends of table elements won't affect the table layout, but can make it more readable on a "table-challenged" browser.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Examples

Web browsers generally include a "View Source" command that lets you see the HTML codes making up a web page. (In Lynx, it's the "\" key; in Netscape, Source or Document Source under the View menu.) Use it to see how the following pages were written.

The Curtis Organ Timeline uses a two-column table to separate the dates from their corresponding events. In a "table-challenged" browser, it simply looks like a series of paragraphs.

Bruce's Recipe Book is supposed to look like two facing pages from a recipe book. (The ingredient listings are themselves tables within the main table's "pages".) If the browser doesn't support tables, it will look like two recipes, one after the other.

This letter and response is supposed to have a column of small pictures to the right of the first letter ("Dear Mr. Bruce"). In a "table-challenged" browser, the small pictures form a single row below the first letter. Again, this uses nested tables:


      +- outer table (one row) -----------------------------+
      |                                                     |
      |  Item 1:                      Item 2:               |
      |  ## inner table (one row) ##  +- inner table ----+  |
      |  #                         #  |                  |  |
      |  #  Dear Mr. Bruce,        #  |  Row 1: picture  |  |
      |  #                         #  |                  |  |
      |  #  .....................  #  |  Row 2: picture  |  |
      |  #  .........              #  |                  |  |
      |  #                         #  |  Row 3: picture  |  |
      |  #  ...................    #  |                  |  |
      |  #  ...................... #  |  Row 4: picture  |  |
      |  #  ...                    #  |                  |  |
      |  #               .....     #  |  Row 5: picture  |  |
      |  #                         #  |                  |  |
      |  ###########################  +------------------+  |
      +-----------------------------------------------------+

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

When you really need tables...

Sometimes, where it's important to line things up precisely (as opposed to just suggesting a vertical-and-horizontal layout), you're better off providing a link to an alternate version for table-challenged browsers. (This typically would use <PRE> ... </PRE> to present text in a fixed-width font, with spacing "as is".)
====================================================================

Be careful with specific tweaks and features

Tweaking your pages to look their best on one browser can make them look disastrously ugly on another. You don't know which browsers people will use to read your pages. People will be using different browsers, different fonts, different window sizes, and different options than you have. Use reasonably standard HTML, and your pages will look reasonable in all browsers.

Using nonstandard features is not dangerous if what you do is ignored in browsers that don't handle it. Just don't depend on the features being there for everyone.

For example, Netscape recognizes the <WBR> "Word BReak" tag, which indicates that it is allowed to break the line at that point if necessary. This is good for extremely-long-hyphenated-compound words. If a browser doesn't recognize <WBR>, the result is no worse than if <WBR> weren't there.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Text styles

You can generally depend on even a text-based web browser to display emphasized and strongly emphasized text (written with the <EM> ... </EM> and <STRONG> ... </STRONG> directives) differently from normal text. These logical styles, which describe the logical function of the text, are more universally supported than "physical styles" such as boldface (<B>) or italics (<I>), which may not do anything on a browser that cannot display boldface or italics.

Most browsers will also do something reasonable with other logical styles such as citations (<CITE>), sample code (<CODE>), and keyboard input (<KBD>).

Text color by itself may not be reliable for marking certain pieces of text, especially now that some people may be reading your pages on a monochrome palmtop computer.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Frames, Java, and other neat features

Frames let you divide your web page into multiple regions, which can scroll independently, load information independently, and be controlled by other regions. For example, an outline can remain on the screen while the reader selects different pages from it.

A web page using frames can also specify material (between <NOFRAMES> and </NOFRAMES> tags) to be displayed in a "frames-challenged" browser. USE THIS FEATURE to display a frameless version of your page, perhaps a copy of your main frame or your table-of-contents frame.

Let people using frames-capable browsers be impressed by your layout and design. People using other browsers shouldn't know what they're missing, and can instead be impressed by the content you provide.

Frames and personal preference

You should be aware that some people who use frames-capable browsers simply don't like frames, generally because of how their browsers inconveniently handle scrolling, bookmarks/favorites/hotlists, and other features when displaying a "frameset".

If your design can use frames, it is considerate to give people a choice of using frames or not. (The code <A HREF="..." TARGET="_top"> breaks out of any frames and displays the new page in the entire browser window.)

Java, JavaScript, and other extensions

Similarly for Java and JavaScript... use them, have fun with them, do cool things with them, but make your information accessible whether or not someone's browser handles them.
====================================================================

Test your pages with different browsers

This is important! Your usual browser might be tolerant of HTML errors that make a different browser barf.

Also see what it looks like in text vs. graphical browsers, and table-capable vs. table-challenged browsers.

"But I don't have a text-based browser!"
Try the public Lynx access at public.sunsite.unc.edu (login as "lynx") or at sailor.lib.md.us (login as "guest"). Also, Lynx-it give you an idea of how any web page looks in Lynx.

Remember -- well-designed web pages impress your readers with carefully chosen content and ease of use, no matter which browser people use to read them.
====================================================================

[To my "Lynx Friendly" page]
[To my home page]