Re: Does one design for interactivity or content? [Scripts-TECHS]

Jonathan Chetwynd asks some questions about:

"Does one design for interactivity or content?"

You can design for both, I'm never suggesting that you cannot design for
interactivity or even start out with that in mind, just that in my
experience, going through structural - presentational - dynamic phases
seems to produce the best results.

A page must have _content_, this may be some images and links to various
resources, or it could be a list of products in an online store, or it
could be a photo gallery (I'll use the photo gallery to illustrate the
technique, as I played with this recently.)

The first thing you do is get the structure down, now a set of
images/links has little structure, unless there's a heirachy in it - the
stores products may well be split up into sections each with header, then
each product has an image and a description, a quantity box, all sorts of
content, but has some structural relationship.  In the gallery the content
are the thumbnails which link to the main images, perhaps again grouped
into category, but at least with titles, perhaps longer descriptions
available of the photos.   Marking up this gives us an ugly page but the
content is well thought out structurally, it's readily apparent to someone
with only HTML knowledge how to modify/add to this. No care over scripts
or presentation is needed.  (This is important to me, developers don't
want to have their time wasted performing minor edits to pages, it's
inefficient and lessens the chance that the page would be updated, updates
need to be simple, and there are no visual authoring tools I would.)

Next we have the presentational, this would be done with a stylesheet, and
you may need to add some CLASSes to the HTML, but that shouldn't change
the structure, and if you choose sensible names, then editing could even
be made clearer <p class="footnote"> etc.  Currrently this is only really
visual, but the language support is there for aural etc.

Finally we add the scripting - now in many pages there may be no value
adding any scripting, but even where my sole aim was to develop a script
solution, I still go through the previous 2 phases.  Assuming there is,
you create the script, I do it without touching the HTML where possible
(Classes again are most likely) - I don't like adding event handlers in
HTML, mainly because of the user editing issue, copying one section as a
basis of new content could break the rules I've set them and cause errors.
It makes the page more intimidating to edit, and it makes the code less
generic.  So I add them through the script, (which obviously has
advantages aswell re users interacting with pages before the script is
ready.)

So how does this work in practice: A Photo Gallery example.

Start with the HTML:
That's simple, just images, maybe in a list, or tabular form, the very
common idea is to have thumbnails linking to a full-size image in the form

<a href="someimage.jpg">
<img src="someimage_thumbnail.jpg" alt="A Swan" title="A Swan in Home
Park">
</a>

Then you add some CSS to turn the gallery into something that looks/sounds
better.

Finally you think, well that's a pretty lousy user interface, when you
view the image in detail, you lose the context of the rest of the page,
it's not in a nice frame etc. (in fact we knew this when we started out,
that was the whole point of making a gallery...)

So we add some scripting, many people have it open in a new window, my
dislike of this technique is what prompted me to attempt a different
solution, so I tried to address the advantages of this method without its
limitations.

<URL: http://jibbering.com/accessibility/gallery.html >
(You'll see I pretty much missed out the presentational phase, I have no
talent in the area.)

Is the result, now I currently have some other problems with it - keyboard
navigation isn't correct, as enter doesn't clear the full-size image (due
to focus still being on the link which opened it, it just opens it again.)
and it  might be nice if we could provide a way to let the user queue up a
series of images which are downloaded and presented as the action over a
slow connection isn't ideal.

So I hope I've explained in more detail what I meant by the original
comment about how to design a page with script in, and perhaps you'll
appreciate why I didn't feel at the time more able to write a full
response, it's a little long, and I'm still not sure I've got my ideas on
how to do it across.

Jim.

Received on Sunday, 30 September 2001 05:12:55 UTC