WDVL: Sensory Design

The

sensory aspects are what users encounter first (as long as the download time isn't so great that they give up and go away), and you want to make a good first impression. You can do a great deal without massive graphics. Our home page's only graphics are the banner ads and a very lightweight background image (3 kbytes); it should load in less than 10 seconds on a 14.4k modem. The visual effects are all achieved with font and table cell colors, or style sheets if your browser supports them. It instantly exposes the site structure and doesn't force the user to `click here.. and now here.. and now here..' before they reach what they want.

Page Layout

Until

style sheet capable browsers become widely deployed, tables are the only realistic method for layout. They were not originally intended for this purpose, but rather for the display of tabular data, e.g. tables of numbers. And you may well find that precise sizing is difficult to impossible, though there are some tricks and workarounds, such as using very small, possibly transparent, gifs as spacers.

<Img	src	= "gold.gif"
	width	= 222
	height	= 1
	alt	= ""
	>

Graphics-intensive tables can take a considerable time to download and render. There are quite a few major sites whose download time suggests that the designers have not tested with slower modems and computers.

The muscles controlling the eyes during reading, i.e. scanning left to right (or vice versa) tire sooner when the angle subtended by the text being read exceeds a certain threshold. This typically corresponds to a few inches of text such as normally found in books and other printed media. Browser windows are usually open to a much greater width.

So for text-heavy pages it's less strenuous to read if the text is constrained to a few inches width. This can be done using columns or margins, using tables. The conventional placement for margins is on the left side of the window. Right-hand margins are unusual - and until recently I thought there was no particular reason for choosing one over the other, apart from convention. But now I believe there are several good reasons for preferring right-margins.

The problems with left-side margins are:-

If the user's window is narrower than the page width, the right side of the page is clipped; the text needs to be moved back into view using the scroll bar. However if it's the margin it's less of an annoyance.
Non-graphical browsers (Lynx; HTML-to-speech; etc) will usually render the margin contents first - which are often a substantial amount of navigation stuff. The user will be forced to skip over a bunch of junk before they reach the content.
Search engines typically give greater weight to keywords in the earlier part of the page; again, navigation margin contents appear first and skew the results because they relate to other pages than the present one. Also search engines often display the first part of the page in response to user queries. Navigation menu contents are not much help...

Also in favor of right-side margins is the fact that the vertical scroll-bar is usually on the right, so it's more convenient for the user - less mouse-travel - if the navigation menu is nearby. In support of this, we note that one survey shows a greater click-through for ads placed to the right side of the page.

Style Sheets

Many

seasons ago when I was writing about tables, I said "Tables are the major new addition of HTML 3.0. They have been eagerly anticipated by many, not only for the desirable capability of organising tabular data such as statistics by row and column, but especially for the feature of laying out any elements of the HTML language.." Those exact same sentiments are now applicable to style sheets - only more so. Not only is page layout better addressed with style sheets, but other cosmetic issues such as fonts and color are too. If you view this site with a style-sheets supporting browser, you'll find several interesting effects - most notably in the navigation menus. The use of style sheets should go a long way towards relieving web developers of the limitations of HTML for presentation purposes, for which it was never intended.

HTML was wonderfully simple when NCSA's Mosaic for X ignited the web explosion; it was meaningful then to talk about document structure as represented by headings and lists. Now our HTML coding has become obfuscated by complex tabular arrangements attempting to achieve the layout of menus and navigation bars, white space, pull-outs, and so on. Which can be a nightmare for maintenance, and for software agents trying to translate web pages to speech for the blind, or search engines trying to identify the real content of your site (do software agents have dreams and nightmares ?).

We are as guilty as anyone; we didn't want to look like relics of a bygone era, and after all, our users could reasonably expect that we actually use and illustrate the current state of web technology that we talk about.

Style sheets will allow us to separate out the cosmetic issues from the structural issues. HTML was never intended to be a DTP language. There'll be a transitional period while we get used to style sheets, and wait for browsers to implement them properly. In the interim our HTML code will be at the peak of complexity; after that I hope and trust that it'll again be possible to look at HTML code, and see at a glance the structure of its content.

Multimedia

The web

was originally a text-only medium; the H in HTML standing for "hypertext", not "hypermedia". In 1993, Marc Andreessen and Eric Bina added the <IMG> tag to their Mosaic for X Windows browser - and fueled the web explosion we're still witnessing.. As well as pictures, one can also experience sound and movies. Nobody has yet invented the "scratch and sniff" monitor, but.. Two further developments are "streaming", which allows playback to begin before the files are fully downloaded; and three-dimensional presentations of sound and scenes.

The major impediment to multimedia on the web has been bandwidth - the rate at which data can be transferred to the user's browser. Until recently, most users had only a 14.4K modem, which was not really adequate for sound or video. 28.8K marks the lower end of the useful multimedia bandwidth range, and if you want to design your web site to reach these users, you will need to be cautious in your use of bandwidth. In particular, you should avoid gimmicks on your home page that may cause the user to wait more than a minute. Simply announce on your home page that you do have some really cool Java, Shockwave, VRML, or whatever, and here are the links...
"I really don't hate Java. I just think that 95% of Java-enabled Web sites are interface blunders built on top of architecture disasters."
-- Peter Moreville, in Jumping Through Java.

Conceptual	Web Design	reactive