How would you do a discography?

If you're a music fan, you've seen them everywhere, and they're all
terrible. Aside from the basics, such as no advertisements, no
pop-ups, no image-heavy junk ... how do you arrange information like
this?

For instance, right now I've got a two-column layout table (I know, I
know), and in the left <td> I've got a list of albums. If you click on
one, the information appears in the right <td>.

This is what the links look like:

<a href="#" onclick="show('est-ce');">Est-Ce Que Je Suis?
(1970)</a><br>

and, at the bottom of the file:

<script type="text/javascript">
function show(album) {
switch(album) {
case "est-ce":
document.getElementById("main").innerHTML =
"<p><strong>Est-Ce Que Je Suis?<\/strong><\/p>"+
"<ol><li>Est-Ce Que Je Suis? (3.38)<\/li>"+
"<li>Hip Hypnotise You (3.28)<\/li>"+
"<\/ol><p>Total Time: 7.06<\/p>"+
"<p>Re-released on the 1993 Daevid Allen album <em>Je Ne "+
"Fum' Pas Des Bananes<\/em>. The A side can be found on "+
"<em>Live Etc.<\/em> from 1977.<\/p>";
break;
}
}
</script>

Now this is a real kludge. First off, if I want to change my mind
about how the site is done, the only way to copy and paste the
information I need is to go to the browser and do it. How do you
re-use all this JavaScript mess? You can't.

There's a good page at: http://www.alistapart.com/articles/eatcake/

I've used this before to good effect. You basically put all your
detailed album information in <div>s, set them all to display: none,
and reveal them based on which link is clicked elsewhere on the page.
It doesn't render as nicely as using innerHTML to totally rewrite the
one section of the page, because for a split second, when the page
loads, you can see all the <div>s, right before they get hidden.

I've tried this with a database, too, and PHP, but got lost in the
morass that is programming. <sigh>

If you had to put information about a recording artist's catalog on
the Web, how would you arrange it? Or, perhaps a better question, if
you ever look them up yourself, what appeals to you? My main problem
is not knowing how to proceed with the basic design. It seems like a
nice idea to put everything on one page, hide most of it, and reveal
what people want when they want it. That means no need to send for
another page, no wait time, etc. It's not accessible, though, and not
re-usable, either, if all the content is stuck in a <script> section.

Here's a test page: http://idrastall.home.comcast.net/ ... Only the
first two listings have links, and there's no design to speak of right
now.

Any thoughts?

Ian

Ian Rastall <idrastall (AT) gmail (DOT) com> wrote:

If you're a music fan, you've seen them everywhere, and they're all
terrible. Aside from the basics, such as no advertisements, no
pop-ups, no image-heavy junk ... how do you arrange information like
this?

Using Javascript to draw in the track listings is out since it should
only be used for optional fluff, not to provide an essential feature.

The decision whether to put the list of release titles including the
releases' track listings on a single page should depend on the size of
the code including dependencies (mind those modem users), and the likely
size of the information on a user's window. This is a judgement issue.
Given the number of Gong releases and the sparse detailed sub
information (track list only) in your example, I'd say that a sub page
for each release doesn't seem justified. Including all track lists on
the one page on the other hand produces a page that is a tad large, not
so much in byte size, but in screen space needed.

Adding cover pictures could drastically increase the byte size, and
justify making sub pages.

Basic markup: an ordered list for a bare listing of release titles (when
in chronological order), a table for the track listings. When publishing
as one page the release titles should be marked up as headers with the
table with the track listing below them.

--
Spartanicus

On Mon, 28 Nov 2005 16:14:59 GMT, Spartanicus
<invalid (AT) invalid (DOT) invalid> wrote:

Using Javascript to draw in the track listings is out since it should
only be used for optional fluff, not to provide an essential feature.

That's a good point. I think the site I referenced at A List Apart
uses hidden divs that would show up if the user either didn't have
JavaScript, or was using a screen reader. The use of innerHTML to
write in the track listings, though ... well, I can see it won't work.

Given the number of Gong releases and the sparse detailed sub
information (track list only) in your example, I'd say that a sub page
for each release doesn't seem justified.

That's what I was thinking. If a user is downloading music while
visiting a music site (probably a common occurrence), then they
wouldn't have any bandwidth to spare. That's one reason to put
everything on one page, so that they don't have to make any more calls
for other pages.

Other users are looking to fill out their knowledge of a group. Maybe
they would be more interested in album covers, etc., or group photos,
but they would also be satisfied with plain content.

Adding cover pictures could drastically increase the byte size

Yes, I agree. I'm an advocate of all-text sites.

Basic markup: an ordered list for a bare listing of release titles (when
in chronological order), a table for the track listings. When publishing
as one page the release titles should be marked up as headers with the
table with the track listing below them.

I'll think about that. Here's an example of a Gong Family discography
that doesn't work, because it has too much information on one page:

http://lege.cz/kocka/gongall.htm

If users could choose between which artist in the Gong Family they
wanted, then choose which album from that band they wanted, revealing
hidden areas, the entire site could exist on a fairly short page. Some
sort of include might work, too. But I'll consider putting everything
in there already visible. It would certainly make the site more
accessible, especially using ordered lists and setting list-style-type
to none.

Thanks for responding, Spartanicus, and I'll ponder a bit more. This
is really a question of how to put lots of content on one page without
making it hard for the user to access that content.

Ian

Ian Rastall wrote:

If you're a music fan, you've seen them everywhere, and they're all
terrible. Aside from the basics, such as no advertisements, no
pop-ups, no image-heavy junk ... how do you arrange information like
this?

Any thoughts?

Ian

Maybe you could do something like I'm doing on this page:

http://deimos.curious.be/~dusk/media.php/

It's very simple php-scripting, where all the expanding stuff is in
"if/else" blocks. It goes something like this:

<a name="1"></a>
<a href=page.php?id=1#1>Album</a>
<?php
if(isset($_GET['id'])){
if($_GET['id']=="1"){
?>
ALBUM INFO CODE
<?php
else{}
}else{}
?>

And this repeated for each album. You've got a pretty beefy page
server-side, but client-side you only have the requested info.

Just a though...


--
TomB - DrumScum
tomb <-at-> versateladsl <-punt-> be
http://www.duskmetal.be

TomB wrote:

http://deimos.curious.be/~dusk/media.php/

Oh yeah, lose the trailing slash :-p


--
TomB - DrumScum
tomb <-at-> versateladsl <-punt-> be
http://www.duskmetal.be

On Tue, 29 Nov 2005 00:26:07 +0100, TomB <mail (AT) invalid (DOT) mail> wrote:

Maybe you could do something like I'm doing on this page:

http://deimos.curious.be/~dusk/media.php/

It's very simple php-scripting, where all the expanding stuff is in
"if/else" blocks.

Thanks, Tom. That might very well be the answer. I'm wary of PHP,
since I got in way over my head last year with the language, and, for
certain reasons, can't really RTFM, but I'm going to give it a shot.

Ian
--
"Is that camp or kitsch, Harry?"

Ian Rastall schreef:

On Tue, 29 Nov 2005 00:26:07 +0100, TomB <mail (AT) invalid (DOT) mail> wrote:

Maybe you could do something like I'm doing on this page:

http://deimos.curious.be/~dusk/media.php/

It's very simple php-scripting, where all the expanding stuff is in
"if/else" blocks.

Thanks, Tom. That might very well be the answer. I'm wary of PHP,
since I got in way over my head last year with the language, and, for
certain reasons, can't really RTFM, but I'm going to give it a shot.

Here a small example of what it does:
http://deimos.curious.be/~dusk/test/albums.php

The code is:
<h1>Albums</h1>
<a name="1"></a>
<h2><a href=albums.php?id=1#1>Album1</a></h2>
<?php
if(isset($_GET['id'])){
if($_GET['id']=="1"){
?>
<!-- ALBUM HTML -->
<table border="1">
<tr>
<th colspan="3">First album</th>
</tr>
<tr>
<td>Released</td><td>Label</td><td>Duration</td>
</tr>
<tr>
<td>1995</td><td>SPV</td><td>69 minutes</td>
</tr>
</table>
<!-- END OF ALBUM HTML -->
<?php
}else{}
}else{}
?>
<a name="2"></a>
<h2><a href=albums.php?id=2#2>Album2</a></h2>
<?php
if(isset($_GET['id'])){
if($_GET['id']=="2"){
?>
<!-- ALBUM HTML -->
<table border="1">
<tr>
<th colspan="3">Second album</th>
</tr>
<tr>
<td>Released</td><td>Label</td><td>Duration</td>
</tr>
<tr>
<td>1997</td><td>Columbia</td><td>53 minutes</td>
</tr>
</table>
<!-- END OF ALBUM HTML -->
<?php
}else{}
}else{}
?>
<a name="3"></a>
<h2><a href=albums.php?id=3#3>Album3</a></h2>
<?php
if(isset($_GET['id'])){
if($_GET['id']=="3"){
?>
<!-- ALBUM HTML -->
<table border="1">
<tr>
<th colspan="3">Third album</th>
</tr>
<tr>
<td>Released</td><td>Label</td><td>Duration</td>
</tr>
<tr>
<td>200</td><td>EMI</td><td>71 minutes</td>
</tr>
</table>
<!-- END OF ALBUM HTML -->
<?php
}else{}
}else{}
?>


TomB

On 29 Nov 2005 01:26:41 -0800, drummerdusk (AT) netscape (DOT) net wrote:

Here a small example of what it does:
http://deimos.curious.be/~dusk/test/albums.php

Thanks, Tom. I'm going to mess with that for a day or two and see what
I come up with. I like the idea of the content making room for itself,
instead of setting aside a portion of the screen. It allows for more
visible content. The question then becomes how much the user can
handle at one time, which isn't a bad dilemma to be in.

Ian
--
"Is that camp or kitsch, Harry?"