ACOM: Web Design Tutorial Site

Text-only browsers

The majority of people reading this page will have never used a text-only browser. Why would they? It was precisely because the HTML protocol was able to handle graphics and colours that the WWW became the Net's "killer app" in the first place. A look at pages which collect statistics on browser use (try the links on the browser news page, which will open in the second browser window) show that some 85% of all users use IE, and a text-only browser like Lynx is at best a fringe application; at worst it is simply invisible. So why should you design your pages to cope with text-only browsing?

It is all too easy to treat IE as if it is "the Web". But it isn't. The big problem with IT in general is the addiction its users and designers often feel towards constant upgrades, always writing for the newest, largest, most expensive version of software (whether these be web browsers, or graphics cards, or whatever else). Yet by doing this, one group lose out; the group who, through lack of resources or other reasons, cannot afford the money and extra learning time needed to get a new version of software every few years.

The more, then, that pages are "backwards compatible", in other words still viewable by older browsers even as they exploit some of the capabilities of newer ones, the more universally accessible they will be. A text-only browser like Lynx is therefore an excellent test for a web page, because if the page looks OK on that, it will look OK on almost anything. If you like, it's the "lowest common denominator" - though, I'd add, without the usual derogatory connotations of that term.

In addition, some people are obliged to use text-only browsers. Users with restricted vision, for instance, use braille displays or speech synthesisers to render the text of a page. Images are obviously irrelevant to this form of display. In any case there are users out there who turn their images off as they browse, to save on (a lot of) download time.

All in all, then, it is a very good idea to write your pages in ways which make them look acceptable on text-only browsers. This doesn't mean you have to abandon all those stylistic flourishes of which you were so proud. The art is, in fact, to have a page which both exploits the capabilities of newer browsers and at the same time renders fine on older ones. There are some specific HTML techniques which help here; two, in particular.

The first is the ALT attribute. Without ALTs, images become gaping holes in documents when viewed in a text-only browser. If they were just illustrative guff, I suppose this is not a big problem, but then again why were they there in the first place, wasting download time? Most images do something on a page, and placing an ALT attribute in the image ensures that the image's role is properly described. (In any case, ALTs are now compulsory in HTML 4.0, and without them, a page will not validate.) As the screen shot of the Lynx emulator below suggests, it is also a good idea to make your ALT a full description, that is, prefix the text with "Image of..." or "Illustration of..." as when the ALT is rendered as normal text, a less effusive description could simply be mistaken for normal text, and cause confusion.

The second is to make sure, particularly if you've used tables for whole page layout, that the page still looks OK when linearised. In Lynx, tables are no longer rendered across the page. Instead, cells are rendered from top to bottom, following the code order, left to right. That is, if this page were viewed in Lynx (and you can try it via the emulator below), the "Related topics" column would come first, then the main text. Not too much of a problem, you'd think, and you'd be right: but some pages are so designed that the information no longer makes sense when viewed like that, usually because the designer had stuck it in table cells in no particular order in the first place.

It's a lot harder to explain these problems in general terms than it would be to just seen them. Here is a link to a Lynx emulator (as usual, it opens in the second browser window). Enter the URL of your page (as with the validator, to make best use of this you will need a page published on the web already rather than merely being on your local drive) and click the button. You will see a version of your page as Lynx would render it: something like this perhaps (note that the "links" seen below are not real links):

Skip to content

ACOM: Web Design Tutorial Site

Click here to return to this site's front page
ACOM logo. Click to return to the ACOM site

Contents of this page

What is a web page?

What is HTML?

What is a web site?

Summary and Exercises

_________________________________________________________

Lesson 1 menu

Subject Index

A-Z Index

Troubleshooting

Resources page

Search this site

______ ___

What is a web site?

What is a web page?

Like everything else a computer needs to work, a web page is a data file. It is little different from, say, a Word document, a spreadsheet or even an e-mail, though of course it has certain special characteristics which allow a computer to recognise it as a web page, rather than one of these other file types; in other words, it is a file in a particular format. The best way to understand what I mean here is via an analogy.

Image of a Jaguar E-type

The various programs on your PC, whether these be word processors, spreadsheets, audio or video players or anything else, are properly known as applications. They can be likened to a car, and in the case of web surfing (and web design), the relevant applications are web browsers. (To extend the analogy, the PC hardware is akin to the ground to drive on, and the operating system (on most PCs, Microsoft Windows) is the traffic system and the rules of the road.)

In case you'd not realised, that is a reproduction of how the first topic page of this site, what is a web site?, would look in Lynx. Notice what I meant about "linearising" the tables; the left-hand cell coming above the others. Notice how the ALT attribute is not just some random text but actually says "image of...", and finally, how text formatting (bold, italic) is the only thing retained.

You might have noticed the appearance of that first link, "skip to content". This is a "hidden" link that is only visible in Lynx or non-visual browsers. (This is done by means of a paragraph class, skiplink, that refers to a style sheet property, display: none;. This hides the link from all other browser types.) It enables the readers of these browsers to skip over all those navigation links if they wish and get straight to the content: something which is not an issue for those who can see the layout table in its full glory. It's another one of those pesky courtesies, but if included in a page template, one that is not hard to include. You'll notice it on every page of this site. It's not the sort of thing I'd automatically expect course work for this module to include but once again, designers of any web site that has aspirations to be "professional" should be thinking about this kind of thing.

If you write a page that looks acceptable in this format, and it validates properly, you are going to have a very robust page that will certainly render OK on almost any browser. So the "Lynx test" is well worth taking. Overall the aim is to have pages that degrade well; that look good on both the newest and oldest versions of browsers you can find. Not an easy skill to achieve, but worth the effort.

Just as a final point, you might be thinking I am being rather stuffy about all this, trying to introduce into web design restricting conditions that stifle your creativity. I hope that's not the case. I despise the attitude too prevalent amongst the Web community, of "stuff those users who can't be bothered to upgrade". With an attitude like that it is no wonder there is a "digital divide". What a fantastic waste of a potentially amazing, global resource, if so-called "professional" designers can't be bothered themselves to spend an hour or so extra on their sites ensuring they look reasonable - not perfect, just reasonable - on older technology, and are usable by all. How incredibly arrogant it is to assume that everyone is as privileged as you are, and able to get new software the second it comes out. And for those who will retort, "but it's free to upgrade!"... yes, so it often is, but have you tried fitting the newest, bloated version of some application or other on to a five-year old PC with a small hard drive? If we are to ever seriously attend to the "digital divide" we have to combat the disease of "upgradeitis". And that means accepting that not everyone can just upgrade with the click of a finger.

Not only that, but many people who've tried browsing with Lynx just for the hell of it, in fact find it an improvement. They realise that the 90% of browser time they'd been spending downloading images was, in fact, of no real consequence. That the true "meat" of web pages lies in their words, not their glossy coverings. The "WWW" no longer stands for "World Wide Wait"... the global stock of info is still there, and accessible far faster than it used to be, if the page is well-designed.

Think about it.

Back to the top

Back to the menu for lesson 6