MAKING YOUR WEB PAGES LYNX FRIENDLY 1. Graphics can be Lynx friendly + Give your images appropriate alternate text + Imagemaps and alternatives + For graphical browsers: indicate height and width 2. Tables can be Lynx friendly + Here's how! + Examples + When you really need tables... 3. Be careful with specific tweaks and features + Text Styles + Frames, Java, and other neat 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 . 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 > 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 ; 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. * <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0> gives the most compact table possible, with no space between the items. * <IMAGE SRC="..." BORDER=0> eliminates the usual colored border around an image that's also a link. A silly example Bad: [IMAGE] 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: [IMAGE] 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>). Don't depend on text color or other nonstandard features by themselves to mark certain pieces of text.
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 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. 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 View and 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] From jnc000 at dns.colum.edu Sat Feb 8 18:34:53 1997 Date: Sat, 8 Feb 1997 03:21:02 GMT From: Jno Cook x5333 <jnc000 at dns.colum.edu> To: jnc000 at dns.colum.edu Subject: lynxismap.html Last update: Aug 19 1996 [ ,,^..^,, LYNX FRIENDLY! ] LYNX FRIENDLY IMAGEMAP Imagemaps which work with Lynx? Yes, it is possible... NCSA's imagemap.c program uses a pair of coordinates to determine where a mouse was clicked. Lynx users cannot interact with an imagemap since they send either a value of 0,0 or no coordinates at all, arriving at the site's default page -- if one was defined. Well, a colleague of mine ( Joshua Bell, jsbell at dimensionx.com ) took a moment to make a simple modification to the imagemap.c source file. If either of the above conditions occur, instead of parsing out which link to follow from the map file, the program gathers all of the URLs from the map file and presents them to the user. Since the URLs in this map file are non-descriptive, the program modification allows another column to be added to the map file in a form such as: datatype URL coordinate pairs "Menu text" Now, Lynx users can select the imagemap link and get a breakdown of everything it would link to, while graphical browsers still have the slick image to work with. And, for the sake of completeness, if combined with a default file that offers the URL breakdown, any difficulty in selecting a link can be avoided. Since each imagemap should normally have a default page to go to when none of the defined regions is chosen, this page should contain a simple plain text link which passes no coordinates to the imagemap program in order to return the breakdown of the map file URLs. I would highly recommend the use of this modified NCSA imagemap.c source to anyone. If you're interested in seeing a working example, feel free to examine the files used to implement an imagemap for a Star Trek information archive. The relavent files are: * the archive itself, which uses the imagemap * the index map file it uses, and * the imagemap's default file, which has a link to generate the imagemap breakdown I'm also looking for a CERN version to offer here. If you run under CERN and have made a similar modification to the htimage.c file, please feel free to let me know. 100% NOTscape Certified - W3C Wilbur Checked! Last validated: Jan 6 1997 D. Joseph Creighton <Joe_Creighton at UManitoba.CA>