Tsutsumi - The Art of Giftwrapping the Web
or Japanese philosophy applied to the creation of web applications.
Introduction
A short introduction is in order, to explain at least in a cursory fashion what gifts mean to the culture of Japan, and to the Japanese people.
In Japan a gift is given not only for traditional purposes, such as the Western Christmas and birthdays. A gift is perceived as a statement from the giver to the recipient - a communication. The important part being that the giver wishes to convey something to the recipient, something important to him or her.
Being important enough a message to be conveyed by a gift, the wrapping is considered a part of the gift itself; both chosen and implemented with thought, care and consideration.
The wrapping should reflect the content, as well as the emotions related to the giving. The design of the parcel itself is important, and subject to a vast number of rules and philosophies. Even so, the prettiest and most beautiful wrapping is meant to be a stage for the gift - once removed, the gift must stand on its own.
Drawing a line from this to the creation of web applications will now hopefully feel natural. In both cases a gift is given - in the case of the web as information or experiences - by someone to someone. As with other gifts, the web design should be done with thought and consideration, both for the content and for the message which is sent.
And yet again, the gift must stand on its own when the wrapping is taken away. Luckily, we have the perfect tools with which to achieve this.
A Pragmatic View of the WWW
At its most pragmatic, the World Wide Web is a collection of computers able to communicate with each other. Using a common language they can exchange information - information which could range from text, through images, video and to fully featured multi-media experiences.
The most basic of the languages used on the Web is called HTTP, and is tasked with transporting bytes from one machine to another. These details are outside the scope of this article. We will focus on the most commonly used language: HTML.
HTML stands for HyperText Markup Language, and is a method for describing
the structure of information. Using HTML you can say about something that
it is a paragraph
or it is an image
, thereby creating a
logical view of data.
When first introduced to HTML, quite a few people get entangled with the
word text
. Indeed that word does imply characters on paper, or
characters on a monitor. That is what text is - but HTML is more than
that. Look at the word Hyper
- hypertext is a method of connecting
information, of linking pieces of information together.
Information is not, and has never been, only
text. Today,
information of various kind is being linked with HTML. Tomorrow it
will perhaps be done with XML. The basic desire will remain the
same: the transfer of information (the gift) from one person (the giver)
to another (the recipient), whether the former is a company and the latter
a human or vice versa.
Any - and all - websites do this: transferring a certain amount of information (content) from the site to the user. The design is used to present the content, emphasise it, and make it appealing.
Too Much of a Good Thing...
The design - or the giftwrapping - is a very important part of the message. But no matter how important, it is only wrapping. At some point it will be removed, and the gift you have chosen will have to stand on its own. Far too often, the amount of wrapping obscures the core of the gift, thereby hiding it, and making the impact of it less than it would have been.
As with everything else, moderation - and a good amount of planning - is the key. What we wish to achieve is to present the user with a gift wrapped in such a manner that he does with it what we wish; for instance buy something.
The first priority for making this happen is to reach the user. Unless he actually get the information all our efforts have been in vain. So the gift (the content) and the wrapping (the design) must be prepared with the utmost care in order to avoid anything getting between us and the user; the customer; the buyer.
In the current climate of the Web, variety is growing. There are some 1,800 different web-browsers, any number of operating systems, monitors from 14 to 21 inches, and display resolutions from 200 to 1600 pixels and up. There are specialised computers for accessing the web using a TV set as a monitor; there are programs and connections that make 'surfing the web' possible for a wide range of devices; from a mobile phone, through PDAs and speech-synthesisers. The possibilities are endless, and growing.
At first glance it would seem to be quite impractical to ensure that the information (the gift) can be reached by all these people, under all these circumstances.
When a man named Tim Berners-Lee created the Web around 1990, one of the principles was that it should make information available to in effect any kind of suitable technology. One of concepts that make this possible is that of 'graceful degradation', or the idea that the wrapping (the design) adapts itself to the viewing conditions of the user. I will use some examples to illustrate this point.
Script Usage - or The Case of the Javascript Menu
A common technique for adding an impression of interactivity on web-pages of today is to use Javascript. This language was designed by Netcape and used mainly for client-side scripting. Efforts are underway to create a standard scripting language called ECMAscript, but so far only proposals are on the table.
Whilst Javascript can, undoubtedly, make certain operations much more easily achieved, and create a degree of interactivity to a web-page without reloading, it has disadvantages. Several security flaws have been discovered, and unpleasant people have been writing scripts that do quite unpleasant things to the user's computer.
Subsequently, many users turn off Javascript in their browser, and quite a number of major corporations use proxy servers that actually strip out Javascript before serving the pages.
How, then, to get the enhanced interactivity of Javascript, without
falling prey to such proxies and users ? HTML contains the element
SCRIPT
which is used to include scripts. This is accompanied
by a NOSCRIPT
element which is meant to contain alternative code
to be used by a browser which doesn't understand or has Javascript
disabled.
<form method="post" action="gotoURL.cgi">
<select name="uri"
onChange="this.form.submit()">
<option value="http://www.cnn.com/">CNN</option>
<option value="http://www.google.com/">Google</option>
</select>
<noscript>
<input type="submit" name="submit" value="Go!">
</noscript>
</form>
This example creates a small form, consisting of a SELECT
, which
typically is rendered as a drop-down box or menu. When a user that has
Javascript support or Javascript engaged attempt to select a menu entry,
the form is automatically submitted and the gotoURL.cgi
script called. For those that has no Javascript support, a submit-button
with the text Go!
will appear, hence providing them with the same
functionality.
With three lines of code we have reached both groups of people.
Frames - or The Case of the 123,000 Mistakes
Admittedly the number above may have changed, but the experiment is still worth while. Do a search on Google, or your search engine of choice, for the phrase:
"Your browser doesn't support frames"
At the time of writing - updated on the 6th of September 2001 - such
a search on Google results in the above-mentioned one hundred and
twenty-three thousand hits. The reason is simple: search
engines have a hard time making heads and tails out of sites using
frames, and so they use the content of the NOFRAMES
tag for
their index. The NOFRAMES tag is meant to be used this way; ie. to
present alternative content for browsers that doesn't support frames.
Including only the words Your browser doesn't support frames
betrays this - and makes it hard both on search-engines and on those
who use non-frames browsers.
A much-used argument is that very few of todays browsers don't support this technique, and frames are indeed present in a subset of HTML 4. Whilst this is true, the above search-engine test alone should show that even when being standards-compliant there are more than one pitfall. Imagine, now, what users of Braille and Speech browsers must feel. But can it be easily prevented ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>A Very Brief Frames Example</title>
</head>
<frameset cols="20%,80%">
<frame src="menu.html" name="Menu" title="The Left Menu Frame">
<frame src="content.html" name="Content" title="The Right Content Frame">
<noframes>
<!--#include virtual="content.html" -->
</noframes>
</frameset>
</html>
This example shows one way of populating the NOFRAMES
tag with
sensible content - in this case the very same content as in the right
hand frame. Using this technique means that not only do you ensure
that even those who turn off frames, does who have no frames, and
search engines can easily access the site - but you need update only
one set of content.
The example uses SSI - Server Side Includes - but similar solutions
based on CGI, PHP, JSP or ASP is easily implemented, adding very
little to the cost of a project. The content of a NOFRAMES
section can, of course, contain any type of construct such as
images, style-sheets, scripts, etc.
Images
Images are today a natural part of the Web. However, they are not without problems. For some people connections are still slow. They might turn off image-loading to minimise the time it takes to fetch a page. Others cannot see the images, those that are visually impaired. In yet others the concept of an image is an impossibility - like search engines.
There is, however, an easy solution to this. In all HTML specifications
there exist an attribute ALT
to the IMG element. This is meant
for providing an alternative text - one which can stand in for the image
if the user's browser doesn't display images, or has no concept of them.
These ALT texts add nothing of significance to the size of the code, nor any complexity to the project. However, they do add considerable functionality to the site. Choosing appropriate ALT texts can greatly enhance the site - and such texts can, and even should, be employed for image-maps. This means that even navigation which is usually based on graphics, will work nicely with only text.
Some browsers - in a well-meant but misdirected effort to provide users
with a richer browsing experience - use the ALT text for a tool-tip,
typically a pop-up window when the mouse-cursor is over the image.
However, a text that is suited for a tool-tip is rarely suited to stand
in for the image. It is therefore suggested that you use the attribute
TITLE
for this purpose.
<img src="spacer.gif"
alt=""
height="1"
width="600"
title="">
<img src="backArrow.gif"
alt="Back"
height="16"
width="16"
title="Navigation: Going Back">
<img src="Logo.gif"
alt="Foo Company"
height="32"
width="120"
title="The Logo Of The Foo Company">
This example shows the use of both ALT and TITLE, on purely decorative images and on images important to the content.
Resolution Dependency
With the onset of new devices, such as the Palm Pilot and Cassiopeia PDAs, mobile phones using WAP and iMode, and on-board computers for air-planes and cars, the range of circumstances in which a user might access the Web is growing.
Consequently it has become much more difficult to ascertain the resolution, screen size or color depth used by those accessing a website. Modern design is therefore based upon a more dynamic view of pages - allowing the gift wrapping to expand or contract so as to fit the recipient's situation. Here the web has all the advantages to paper and ribbon!
However, creating a design so that it adjusts to the the user's browsing situation places great demands upon the designers. Careful use of HTML 4.0 and CSS 1/2 is strongly advised. Using as little as possible from vendor-specific HTML dialects is also strongly recommended. These latter bits and pieces have effects which are not similar from browser to browser, nor well-defined.
Remember, also, that the knowledge of a visitor's screen resolution is of little importance if you do not know the size of the current browser window, as well as how much of it is lost to menu-bars and other decoration.
Lack of validation and quality control
Whilst HTML is not a programming language, it still has certain rules for how it should be written, and what its syntax should be. The various versions of HTML define these things through a document called a 'DTD', or Document Type Definition.
With the aid of the DTD and a validator an HTML page can be automatically checked for syntax errors. This has the potential for discovering and warning about unpleasant problems that might arise for specific browsers.
To validate an HTML document, first make sure that each document
include an identification string known as a DOCTYPE
. This
is used by validators to detect which DTD to use for the syntax
checking. It is also used by several new browsers - among them
IE 6, Netscape 6, Mozilla and Opera - to enable what they call
a compatibility mode
for older HTML code.
Validation - as well as other quality checks such as multi-browser testing - can and will save resources and cost. Besides, isn't wrapping the gift in an even nicer way a gift in itself ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
The above example is the DOCTYPE most suited for regular HTML documents that use some CSS, and some old-fashioned markup but not frames. Several other DOCTYPEs are available.
Picking Up the Pieces
This article has given you several examples of how an elaborate but ill-planned wrapping has prevented the true nature of a gift to shine through, but also how relatively simple methods can enhance the experience of receiving a gift - for all visitors to your site.
References
Available from http://www.tjf.or.jp/eng/ge/ge06wrap.htm
Available from http://www.w3.org/MarkUp/Guide/
Available from http://ppewww.ph.gla.ac.uk/%7Eflavell/alt/alt-text.html
Disclaimer
Yes, technically the term "web page" is wrong, and "HTML document" is correct. However, seeing that former term is in common use, I have neglected the latter. For doing this I will undoubtedly burn in purist hell.
Tina Holmboe, April 1999 and September 2001