Selective Detailing: Tailor your Writing to your Audience!

For Navigation: Cursor =====>

Selective Detailing:
Tailor your Writing to your Audience!

(IE only)

A major point in online communication is to write exactly what your readers will be interested in. So, first you should be aware of what your reader groups are. But apart from that, how can you write an article such that it will be interesting to different types of readers? - Selective Detailing is a good solution to do that.

In just about any subject of 'non-fictional writing' you have at least two different types of readers.

One type who could be called the "appliers":
those people who decide whether to apply the thing you are writing about or to better use some other solution.
And the other type we could call the "implementers":
those people whose job it is to make true what you projected into your solution.

They both will be interested in different aspects of your writing:

Both, managers as well as implementers, will want to know WHAT results can be achieved by your solution.
But only the managers will be interested in an elaborate consideration what is better in one case or another, and what drawbacks are involved with each of them.
Only the implementers will care about HOW to use your solution, a detailed description of its formalisms and intricacies, and potential remedies.

==> So you should be able to let your readers switch some parts of your document on or off, according to their interests.

By the Selective Detailing technique you can do that:

To each part of your document, become aware of the type of reader it is intended to.
Look for each part of your document that is specific to one group only. Mark all the different parts as belonging to different "classes".
Somewhere near the beginning in your document, offer the readers some way of indicating what they are interested in.

For example, take the previous distinction of "managers" and "implementers". At the begin of your document you should offer, say, a combo box with the entries "appliers only", "implementers only", "both". Then provide the following list:

This line will be visible to managers only.

This line will be visible to implementers only.

This line will be visible to someone thinking to be both, manager and implementer.

Each line is marked as belonging to one class. Now, select your interests in the following combo box:

If you want to get the look-and-feel of a practical application of Selective Detailing, look into my article on the Cascading Floating Menu

.
Switching Classes

There are several ways how you can let the readers select their domain of interest. An easy solution would be a combo box. In HTML this could be coded like this:

<SELECT NAME="choose" ALIGN=TEXTTOP ONCHANGE="SetDetail(choose.value)" STYLE="color:green"> <OPTION VALUE="0">both, APPLIERS and IMPLEMENTERS</OPTION> <OPTION VALUE="1"> APPLIERS only</OPTION> <OPTION VALUE="2"> IMPLEMENTERS only</OPTION> </SELECT>

The group indicators can be any sequence of chars. For simplicity, in this example they were called 0, 1 and 2.

Note the function SetDetail :

SetDetail(choose.value)

choose is the identifier of the combo box.

value is the value of the currently selected option.

The combination choose.value represents the value you declared to each option. You can also set the detailing DIV's belonging to one group or another: separate their class names by '+', e.g. SetDetail("A+B")

Note the dot, not a comma!

The function SetDetail loops through all DIV's of your document, checks for identical class names and sets the display to '', the display of DIV's with non-identical class name to 'none'. Thus the latter ones are suppressed on screen, all the visible information is shifted up. The reader would not notice that there is some information hidden in the background.

In your SELECT you should offer options to all your reader groups (and all combinations you think appropriate). You can do that by the following coding:

<OPTION VALUE="…"> … reader group … </OPTION>

… is the class name of DIV to a be displayed when a reader selects this option. It can also be a combination of class names, separated by '+', e.g. <OPTION VALUE="A+B">

… reader group … is the text a reader will find in the list of the combo box.

Marking Classes

If you want to mark an information as being relevant to one class only, an easy solution would be to pool it a DIV, declaring it with a class name indicative of the reader group:

<DIV CLASS="…"> : </DIV>

Within that <DIV> you can have any valid HTML-code.

If you have a section that you deem interesting for several groups of your readers, mark the <DIV> with a class name combined of the respective indicators, separated by a plus-symbol:

<DIV CLASS="…+…+…"> : </DIV>

Initializing Classes

Usually you will want your document to come up on screen with the DIV's of a certain reader group.

In most cases you can draw up the combo box such that the "initial reader group" is the same as indicated. If you want to have another option appearing initially, add the attribute SELECTED to its <OPTION> tag.

You can direct the browser to set that detailing right after loading, by coding the <BODY> tag of your document like this:

<BODY ONLOAD="InitDetail(group,delay)>"

group optional. This is the indicator of the reader group for that your document should be prepared after loading. (Default: the same group as selected by the first option of the combo box.)

delay optional: number of milliseconds the browser should wait after loading for setting the reader group.

There would be no point in setting the reader group exactly when loading begins - there is nothing to be set at that time.

By default, the delay is 1000 milliseconds. This should be sufficient for loading most documents.

However, if you have a complex document or you have to expect a slow connection at your readers, you might want to increase the delay time. You can do that by providing a second parameter to InitDetail in the <BODY> tag.

If you want to combine that with calling another JavaScript function (say, PlaceDiv(…) , for placing a FollowMenu), you can do that like the following:

<BODY ONLOAD="PlaceDiv(…); InitDetail(…,…)>"

Note that InitDetail should be called after PlaceDiv !

Hints for Coding

There's some JavaScripting involved in this technique. You can easily include those JavaScripts by providing a line like the following, e.g. at begin of your <HEAD> … </HEAD> coding, before the first coding of your menu hierarchy:

<SCRIPT SRC="… .js" LANGUAGE="javascript"></SCRIPT>

… .js is the name of the JavaScript file you want to include. If you are interested to implement this technique yourself, you can buy a ready-made JavaScript file. Just send an email to gg@Itspecial.org.

If you want to use detailing in your document (see article "Selective Detailing"), some care should be taken not to have a link in your menu referring to any information that might be faded out. This might cause an awkward situation to the reader. Therefore, all menu items referring to such an information should be detailed out as well, e.g. by

<DIV CLASS="1" STYLE="display:'none'"> <A HREF="#…" STYLE="color:green"> … link text … </A><BR> </DIV>

or

<DIV CLASS="1" STYLE="display:'none'"> <A HREF="#…" STYLE="color:blue" ONMOUSEOVER="OpenM(…)"> … item text … </A><BR> </DIV>

Thus the item text will be hidden as well when the information it is referring to. The reader will never be tempted to jump to any information that is non-existing now, i.e. ending up dangling in the middle of nowhere.

Use comments, e.g. in line </DIV>:  Correct behavior of menus is very much depending on correct nesting of the menu coding. And, what's more: faulty coding is very hard to detect on debugging. If you have a complex menu hierarchy with various levels of sub-menus, you might find it quite helpful to see clearly in your code where the one menu is ending and the other menu begins.